--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>three.js webgl - postprocessing manual taa and ssaa</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+ <style>
+ body {
+ margin: 0px;
+ background-color: #000;
+ overflow: hidden;
+ font-family:Monospace;
+ font-size:13px;
+ margin: 0px;
+ text-align:center;
+ overflow: hidden;
+ }
+
+ a { color: #88f; }
+
+ #info {
+ color: #fff;
+ position: absolute;
+ top: 10px;
+ width: 100%;
+ text-align: center;
+ display:block;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="info">
+ <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Temporal Anti-Aliasing (TAA) pass by <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
+ When there is no motion in the scene, the TAA render pass accumulates jittered camera samples<br/>
+ across frames to create a high quality anti-aliased result.<br/><br/>
+ Texture interpolation, mipmapping and anistropic sampling is disabled to emphasize<br/> the effect SSAA levels have one the resulting render quality.
+ </div>
+
+ <div id="container"></div>
+
+ <script src="../build/three.js"></script>
+ <script src="js/libs/stats.min.js"></script>
+ <script src="js/libs/dat.gui.min.js"></script>
+
+ <script src="js/shaders/CopyShader.js"></script>
+
+ <script src="js/postprocessing/EffectComposer.js"></script>
+ <script src="js/postprocessing/SSAARenderPass.js"></script>
+ <script src="js/postprocessing/TAARenderPass.js"></script>
+ <script src="js/postprocessing/RenderPass.js"></script>
+ <script src="js/postprocessing/MaskPass.js"></script>
+ <script src="js/postprocessing/ShaderPass.js"></script>
+
+
+ <script>
+
+ var camera, scene, renderer, composer, copyPass, taaRenderPass, renderPass;
+ var gui, stats, texture;
+
+ var param = { TAAEnabled: "1", TAASampleLevel: 0 };
+
+ init();
+ animate();
+
+ clearGui();
+
+ function clearGui() {
+
+ if ( gui ) gui.destroy();
+
+ gui = new dat.GUI();
+
+ gui.add( param, 'TAAEnabled', {
+ 'Disabled': '0',
+ 'Enabled': '1'
+ } ).onFinishChange( function() {
+
+ if( taaRenderPass ) {
+
+ taaRenderPass.enabled = ( param.TAAEnabled === "1" );
+ renderPass.enabled = ( param.TAAEnabled !== "1" );
+
+ }
+
+ } );
+
+ gui.add( param, 'TAASampleLevel', {
+ '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( taaRenderPass ) {
+ taaRenderPass.sampleLevel = param.TAASampleLevel;
+ }
+
+ } );
+
+ gui.open();
+
+ }
+
+ function init() {
+
+ var container = document.getElementById( "container" );
+
+ renderer = new THREE.WebGLRenderer( { antialias: false } );
+ renderer.setPixelRatio( window.devicePixelRatio );
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ document.body.appendChild( renderer.domElement );
+
+ stats = new Stats();
+ container.appendChild( stats.dom );
+
+ //
+
+ camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+ camera.position.z = 300;
+
+ scene = new THREE.Scene();
+
+ var geometry = new THREE.BoxGeometry( 120, 120, 120 );
+ var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.position.x = - 100;
+ scene.add( mesh );
+
+ var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
+ texture.minFilter = THREE.NearestFilter;
+ texture.magFilter = THREE.NearestFilter;
+ texture.anisotropy = 1;
+ texture.generateMipmaps = false;
+
+ var material = new THREE.MeshBasicMaterial( { map: texture } );
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.position.x = 100;
+ scene.add( mesh );
+
+ // postprocessing
+
+ composer = new THREE.EffectComposer( renderer );
+
+ taaRenderPass = new THREE.TAARenderPass( scene, camera );
+ taaRenderPass.unbiased = false;
+ composer.addPass( taaRenderPass );
+
+ renderPass = new THREE.RenderPass( scene, camera );
+ renderPass.enabled = false;
+ composer.addPass( renderPass );
+
+ copyPass = new THREE.ShaderPass( THREE.CopyShader );
+ copyPass.renderToScreen = true;
+ composer.addPass( copyPass );
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize() {
+
+ var width = window.innerWidth;
+ var height = window.innerHeight;
+
+ camera.aspect = width / height;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( width, height );
+
+ var pixelRatio = renderer.getPixelRatio();
+ var newWidth = Math.floor( width / pixelRatio ) || 1;
+ var newHeight = Math.floor( height / pixelRatio ) || 1;
+ composer.setSize( newWidth, newHeight );
+
+ }
+
+ function animate() {
+
+ this.index = this.index || 0;
+
+ requestAnimationFrame( animate );
+
+ this.index ++;
+
+ if( Math.round( this.index / 200 ) % 2 === 0 ) {
+ for ( var i = 0; i < scene.children.length; i ++ ) {
+
+ var child = scene.children[ i ];
+
+ child.rotation.x += 0.005;
+ child.rotation.y += 0.01;
+
+ }
+ if( taaRenderPass ) taaRenderPass.accumulate = false;
+ }
+ else {
+ if( taaRenderPass ) taaRenderPass.accumulate = true;
+ }
+
+ composer.render();
+
+ stats.update();
+
+ }
+
+ </script>
+ </body>
+</html>
OSDN Git Service
