Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 badfaad7 编写于 作者: B Ben Houston
浏览文件
操作

fix msaa pass, improve example.

上级 3c8cb97f
隐藏空白更改
内联 并排
Showing with 77 addition and 7 deletion
examples/js/postprocessing/MSAAPass.js
浏览文件 @ badfaad7
/**
* @author bhouston / http://clara.io/
*
* NOTE: Accumulating a lot of samples with a 8-bit-per-channel RGB/RGBA buffer will
* lead to discretization effects. For accurate sample accumulation use a floating
* point buffer.
*
*/
THREE.MSAAPass = function ( scene, camera, params ) {
......@@ -83,7 +88,10 @@ THREE.MSAAPass.prototype = {
renderer.render( this.scene, camera, this.sampleRenderTarget, true );
// clear on the first render, accumulate the others
var autoClear = renderer.autoClear;
renderer.autoClear = false;
renderer.render( this.scene2, this.camera2, writeBuffer, i === 0 );
renderer.autoClear = true;
}
......
examples/webgl_postprocessing_msaa.html
浏览文件 @ badfaad7
......@@ -7,17 +7,36 @@
<style>
body {
margin: 0px;
background-color: #000000;
background-color: #000;
overflow: hidden;
font-family:Monospace;
font-size:13px;
margin: 0px;
text-align:center;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
display:block;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - Manual Multi-Sample Anti-Aliasing (MSAA) pass by <a href="https://clara.io" target="_blank">Ben Houston</a>
<a href="http://threejs.org" target="_blank">three.js</a> - Manual Multi-Sample Anti-Aliasing (MSAA) pass by <a href="https://clara.io" target="_blank">Ben Houston</a></br></br>
WARNING: High MSAA samples count will lead</br>to discretization effects when used with 8-bit per channel Render Buffers.
</div>
<div id="container"></div>
<script src="../build/three.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/postprocessing/MSAAPass.js"></script>
<script src="js/shaders/CopyShader.js"></script>
......@@ -32,15 +51,56 @@
<script>
var camera, scene, renderer, composer, pass;
var geometry, material, object;
var geometry, material, gui, object, msaaPass, stats;
var param = { MSAASampleLevel: 2 };
var clock = new THREE.Clock();
var textureLoader = new THREE.TextureLoader();
container = document.getElementById( "container" );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
textureLoader.load( "textures/brick_diffuse.jpg", function( meshTexture ) {
init( meshTexture );
animate();
clearGui();
});
function clearGui() {
if ( gui ) gui.destroy();
gui = new dat.GUI();
var example = gui.add( param, 'MSAASampleLevel', {
'Level 0: 1 Sample': 0,
'Level 1: 2 Samples': 1,
'Level 2: 4 Samples': 2,
'Level 3: 8 Samples': 3,
'Level 4: 16 Samples': 4,
'Level 5: 32 Samples': 5
} ).onFinishChange( function() {
if( massPass ) {
massPass.sampleLevel = param.MSAASampleLevel;
}
} );
gui.open();
}
function init( meshTexture ) {
renderer = new THREE.WebGLRenderer( { antialias: false } );
......@@ -65,8 +125,8 @@
composer = new THREE.EffectComposer( renderer );
var massPass = new THREE.MSAAPass( scene, camera );
massPass.sampleLevel = 1;
massPass = new THREE.MSAAPass( scene, camera );
massPass.sampleLevel = param.MSAASampleLevel;
composer.addPass( massPass );
var copyPass = new THREE.ShaderPass( THREE.CopyShader );
......@@ -104,9 +164,11 @@
composer.render();
stats.update();
}
</script>
<div>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或