Selaa lähdekoodia

better quality results of TAA because accumulation is done using the same form.

Ben Houston 9 vuotta sitten
vanhempi
commit
17a9dca296

+ 10 - 2
examples/js/postprocessing/ManualMSAARenderPass.js

@@ -1,6 +1,14 @@
 /**
- * @author bhouston / http://clara.io/ *
- */
+*
+* Manual Multi-Sample Anti-Aliasing Render Pass
+*
+* @author bhouston / http://clara.io/
+*
+* This manual approach to MSAA re-renders the scene ones for each sample with camera jitter and accumulates the results.
+*
+* References: https://en.wikipedia.org/wiki/Multisample_anti-aliasing
+*
+*/
 
 THREE.ManualMSAARenderPass = function ( scene, camera, params ) {
 

+ 29 - 6
examples/js/postprocessing/TAARenderPass.js

@@ -1,5 +1,15 @@
 /**
- * @author bhouston / http://clara.io/ *
+ *
+ * Temporal Anti-Aliasing Render Pass
+ *
+ * @author bhouston / http://clara.io/
+ *
+ * When there is no motion in the scene, the TAA render pass accumulates jittered camera samples across frames to create a high quality anti-aliased result.
+ *
+ * References:
+ *
+ * TODO: Add support for motion vector pas so that accumulation of samples across frames can occur on dynamics scenes.
+ *
  */
 
 THREE.TAARenderPass = function ( scene, camera, params ) {
@@ -31,7 +41,7 @@ THREE.TAARenderPass = function ( scene, camera, params ) {
 		transparent: true,
 		blending: THREE.CustomBlending,
 		blendSrc: THREE.OneFactor,
-		blendDst: THREE.OneMinusSrcAlphaFactor,
+		blendDst: THREE.OneFactor,
 		blendEquation: THREE.AddEquation,
 		depthTest: false,
 		depthWrite: false
@@ -55,7 +65,7 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
 
 			THREE.ManualMSAARenderPass.prototype.render.call( this, renderer, writeBuffer, readBuffer, delta );
 
-			this.accumulateIndex = 0;
+			this.accumulateIndex = -1;
 			return;
 
 	}
@@ -70,8 +80,22 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
 
 	}
 
+	if ( ! this.holdRenderTarget ) {
+
+		this.holdRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
+
+	}
+
+	if( this.accumulate && this.accumulateIndex === -1 ) {
+
+			THREE.ManualMSAARenderPass.prototype.render.call( this, renderer, this.holdRenderTarget, readBuffer, delta );
+
+			this.accumulateIndex = 0;
+			return;
+
+	}
 
-	if( this.accumulateIndex < jitterOffsets.length ) {
+	if( this.accumulateIndex >= 0 && this.accumulateIndex < jitterOffsets.length ) {
 		var autoClear = renderer.autoClear;
 		renderer.autoClear = false;
 
@@ -93,7 +117,6 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
 
 			renderer.render( this.scene, this.camera, writeBuffer, true );
 
-			this.accumulateUniforms[ "scale" ].value = 1.0 / ( this.accumulateIndex + 1 );
 			renderer.render( this.scene3, this.camera3, this.sampleRenderTarget, ( this.accumulateIndex == 0 ) );
 
 			this.accumulateIndex ++;
@@ -108,7 +131,7 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
 	}
 
 	this.accumulateUniforms[ "scale" ].value = 1.0;
-	this.accumulateUniforms[ "tForeground" ].value = this.sampleRenderTarget;
+	this.accumulateUniforms[ "tForeground" ].value = ( this.accumulateIndex < jitterOffsets.length ) ? this.holdRenderTarget : this.sampleRenderTarget;
 	renderer.render( this.scene3, this.camera3, writeBuffer );
 
 }

+ 3 - 2
examples/webgl_postprocessing_taa.html

@@ -29,7 +29,8 @@
 	<body>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a> - Temporal Anti-Aliasing (TAA) pass by <a href="https://clara.io" target="_blank">Ben Houston</a><br/><br/>
-			When there is no motion in the scene, the TAA render pass accumulates jittered camera samples across frames to create a high quality anti-aliased result.<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 MSAA levels have one the resulting render quality.
 		</div>
 
@@ -121,7 +122,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxGeometry( 120, 120, 120 );
+				var geometry = new THREE.BoxGeometry( 120, 120, 120, 20, 5, 3 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
 				var mesh = new THREE.Mesh( geometry, material );