Skip to content

Commit 17a9dca

Browse files
bhoustonbhouston
committed
better quality results of TAA because accumulation is done using the same form.
1 parent 0003985 commit 17a9dca

File tree

3 files changed

+42
-10
lines changed

3 files changed

+42
-10
lines changed

‎examples/js/postprocessing/ManualMSAARenderPass.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
/**
2-
* @author bhouston / http://clara.io/ *
3-
*/
2+
*
3+
* Manual Multi-Sample Anti-Aliasing Render Pass
4+
*
5+
* @author bhouston / http://clara.io/
6+
*
7+
* This manual approach to MSAA re-renders the scene ones for each sample with camera jitter and accumulates the results.
8+
*
9+
* References: https://en.wikipedia.org/wiki/Multisample_anti-aliasing
10+
*
11+
*/
412

513
THREE.ManualMSAARenderPass = function ( scene, camera, params ) {
614

‎examples/js/postprocessing/TAARenderPass.js‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
/**
2-
* @author bhouston / http://clara.io/ *
2+
*
3+
* Temporal Anti-Aliasing Render Pass
4+
*
5+
* @author bhouston / http://clara.io/
6+
*
7+
* 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.
8+
*
9+
* References:
10+
*
11+
* TODO: Add support for motion vector pas so that accumulation of samples across frames can occur on dynamics scenes.
12+
*
313
*/
414

515
THREE.TAARenderPass = function ( scene, camera, params ) {
@@ -31,7 +41,7 @@ THREE.TAARenderPass = function ( scene, camera, params ) {
3141
transparent: true,
3242
blending: THREE.CustomBlending,
3343
blendSrc: THREE.OneFactor,
34-
blendDst: THREE.OneMinusSrcAlphaFactor,
44+
blendDst: THREE.OneFactor,
3545
blendEquation: THREE.AddEquation,
3646
depthTest: false,
3747
depthWrite: false
@@ -55,7 +65,7 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
5565

5666
THREE.ManualMSAARenderPass.prototype.render.call( this, renderer, writeBuffer, readBuffer, delta );
5767

58-
this.accumulateIndex = 0;
68+
this.accumulateIndex = -1;
5969
return;
6070

6171
}
@@ -70,8 +80,22 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
7080

7181
}
7282

83+
if ( ! this.holdRenderTarget ) {
84+
85+
this.holdRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
86+
87+
}
88+
89+
if( this.accumulate && this.accumulateIndex === -1 ) {
90+
91+
THREE.ManualMSAARenderPass.prototype.render.call( this, renderer, this.holdRenderTarget, readBuffer, delta );
92+
93+
this.accumulateIndex = 0;
94+
return;
95+
96+
}
7397

74-
if( this.accumulateIndex < jitterOffsets.length ) {
98+
if( this.accumulateIndex >= 0 && this.accumulateIndex < jitterOffsets.length ) {
7599
var autoClear = renderer.autoClear;
76100
renderer.autoClear = false;
77101

@@ -93,7 +117,6 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
93117

94118
renderer.render( this.scene, this.camera, writeBuffer, true );
95119

96-
this.accumulateUniforms[ "scale" ].value = 1.0 / ( this.accumulateIndex + 1 );
97120
renderer.render( this.scene3, this.camera3, this.sampleRenderTarget, ( this.accumulateIndex == 0 ) );
98121

99122
this.accumulateIndex ++;
@@ -108,7 +131,7 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
108131
}
109132

110133
this.accumulateUniforms[ "scale" ].value = 1.0;
111-
this.accumulateUniforms[ "tForeground" ].value = this.sampleRenderTarget;
134+
this.accumulateUniforms[ "tForeground" ].value = ( this.accumulateIndex < jitterOffsets.length ) ? this.holdRenderTarget : this.sampleRenderTarget;
112135
renderer.render( this.scene3, this.camera3, writeBuffer );
113136

114137
}

‎examples/webgl_postprocessing_taa.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
<body>
3030
<div id="info">
3131
<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/>
32-
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/>
32+
When there is no motion in the scene, the TAA render pass accumulates jittered camera samples<br/>
33+
across frames to create a high quality anti-aliased result.<br/><br/>
3334
Texture interpolation, mipmapping and anistropic sampling is disabled to emphasize<br/> the effect MSAA levels have one the resulting render quality.
3435
</div>
3536

@@ -121,7 +122,7 @@
121122

122123
scene = new THREE.Scene();
123124

124-
var geometry = new THREE.BoxGeometry( 120, 120, 120 );
125+
var geometry = new THREE.BoxGeometry( 120, 120, 120, 20, 5, 3 );
125126
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
126127

127128
var mesh = new THREE.Mesh( geometry, material );

0 commit comments

Comments
 (0)