Skip to content

Commit 64eb745

Browse files
bhoustonbhouston
committed
add TAARenderPass and polish MSAA example/code.
1 parent 87f3300 commit 64eb745

File tree

4 files changed

+342
-12
lines changed

4 files changed

+342
-12
lines changed

‎examples/js/postprocessing/ManualMSAARenderPass.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ THREE.ManualMSAARenderPass = function ( scene, camera, params ) {
1818

1919
if ( THREE.CompositeShader === undefined ) {
2020

21-
console.error( "THREE.MSAAPass relies on THREE.CompositeShader" );
21+
console.error( "THREE.ManualMSAARenderPass relies on THREE.CompositeShader" );
2222

2323
}
2424

2525
var compositeShader = THREE.CompositeShader;
26-
this.uniforms = THREE.UniformsUtils.clone( compositeShader.uniforms );
26+
this.compositeUniforms = THREE.UniformsUtils.clone( compositeShader.uniforms );
2727

2828
this.materialComposite = new THREE.ShaderMaterial( {
2929

30-
uniforms: this.uniforms,
30+
uniforms: this.compositeUniforms,
3131
vertexShader: compositeShader.vertexShader,
3232
fragmentShader: compositeShader.fragmentShader,
3333
transparent: true,
@@ -49,6 +49,8 @@ THREE.ManualMSAARenderPass = function ( scene, camera, params ) {
4949

5050
THREE.ManualMSAARenderPass.prototype = {
5151

52+
constructor: THREE.ManualMSAARenderPass,
53+
5254
dispose: function() {
5355

5456
if ( this.sampleRenderTarget ) {
@@ -88,8 +90,8 @@ THREE.ManualMSAARenderPass.prototype = {
8890
var autoClear = renderer.autoClear;
8991
renderer.autoClear = false;
9092

91-
this.uniforms[ "scale" ].value = 1.0 / ( jitterOffsets.length );
92-
this.uniforms[ "tForeground" ].value = this.sampleRenderTarget;
93+
this.compositeUniforms[ "scale" ].value = 1.0 / ( jitterOffsets.length );
94+
this.compositeUniforms[ "tForeground" ].value = this.sampleRenderTarget;
9395

9496
// render the scene multiple times, each slightly jitter offset from the last and accumulate the results.
9597
for ( var i = 0; i < jitterOffsets.length; i ++ ) {

‎examples/js/postprocessing/TAARenderPass.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/**
2+
* @author bhouston / http://clara.io/ *
3+
*/
4+
5+
THREE.TAARenderPass = function ( scene, camera, params ) {
6+
7+
if ( THREE.ManualMSAARenderPass === undefined ) {
8+
9+
console.error( "THREE.TAARenderPass relies on THREE.ManualMSAARenderPass" );
10+
11+
}
12+
THREE.ManualMSAARenderPass.call( this, scene, camera, params );
13+
14+
this.sampleLevel = 1;
15+
this.accumulate = false;
16+
17+
if ( THREE.CompositeShader === undefined ) {
18+
19+
console.error( "THREE.TAARenderPass relies on THREE.CompositeShader" );
20+
21+
}
22+
23+
var accumulateShader = THREE.CompositeShader;
24+
this.accumulateUniforms = THREE.UniformsUtils.clone( accumulateShader.uniforms );
25+
26+
this.materialAccumulate = new THREE.ShaderMaterial( {
27+
28+
uniforms: this.accumulateUniforms,
29+
vertexShader: accumulateShader.vertexShader,
30+
fragmentShader: accumulateShader.fragmentShader,
31+
transparent: true,
32+
blending: THREE.CustomBlending,
33+
blendSrc: THREE.OneFactor,
34+
blendDst: THREE.OneMinusSrcAlphaFactor,
35+
blendEquation: THREE.AddEquation,
36+
depthTest: false,
37+
depthWrite: false
38+
39+
} );
40+
41+
this.camera3 = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
42+
this.scene3 = new THREE.Scene();
43+
this.quad3 = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), this.materialAccumulate );
44+
this.scene3.add( this.quad3 );
45+
46+
};
47+
48+
THREE.TAARenderPass.prototype = Object.create( THREE.ManualMSAARenderPass.prototype );
49+
THREE.TAARenderPass.prototype.constructor = THREE.TAARenderPass;
50+
THREE.TAARenderPass.JitterVectors = THREE.ManualMSAARenderPass.JitterVectors;
51+
52+
THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuffer, delta ) {
53+
54+
if( ! this.accumulate ) {
55+
56+
THREE.ManualMSAARenderPass.prototype.render.call( this, renderer, writeBuffer, readBuffer, delta );
57+
58+
this.accumulateIndex = 0;
59+
return;
60+
61+
}
62+
63+
var jitterOffsets = THREE.TAARenderPass.JitterVectors[ 4 ];
64+
65+
var camera = ( this.camera || this.scene.camera );
66+
67+
if ( ! this.sampleRenderTarget ) {
68+
69+
this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
70+
71+
}
72+
73+
74+
if( this.accumulateIndex < jitterOffsets.length ) {
75+
var autoClear = renderer.autoClear;
76+
renderer.autoClear = false;
77+
78+
this.accumulateUniforms[ "scale" ].value = 1.0 / ( jitterOffsets.length );
79+
this.accumulateUniforms[ "tForeground" ].value = writeBuffer;
80+
81+
// render the scene multiple times, each slightly jitter offset from the last and accumulate the results.
82+
var numSamplesPerFrame = Math.pow( 2, this.sampleLevel );
83+
for ( var i = 0; i < numSamplesPerFrame; i ++ ) {
84+
85+
var j = this.accumulateIndex;
86+
// only jitters perspective cameras. TODO: add support for jittering orthogonal cameras
87+
var jitterOffset = jitterOffsets[j];
88+
if ( camera.setViewOffset ) {
89+
camera.setViewOffset( readBuffer.width, readBuffer.height,
90+
jitterOffset[ 0 ] * 0.0625, jitterOffset[ 1 ] * 0.0625, // 0.0625 = 1 / 16
91+
readBuffer.width, readBuffer.height );
92+
}
93+
94+
renderer.render( this.scene, this.camera, writeBuffer, true );
95+
96+
this.accumulateUniforms[ "scale" ].value = 1.0 / ( this.accumulateIndex + 1 );
97+
renderer.render( this.scene3, this.camera3, this.sampleRenderTarget, ( this.accumulateIndex == 0 ) );
98+
99+
this.accumulateIndex ++;
100+
if( this.accumulateIndex >= jitterOffsets.length ) break;
101+
}
102+
103+
// reset jitter to nothing. TODO: add support for orthogonal cameras
104+
if ( camera.setViewOffset ) camera.setViewOffset( undefined, undefined, undefined, undefined, undefined, undefined );
105+
106+
renderer.autoClear = true;
107+
108+
}
109+
110+
this.accumulateUniforms[ "scale" ].value = 1.0;
111+
this.accumulateUniforms[ "tForeground" ].value = this.sampleRenderTarget;
112+
renderer.render( this.scene3, this.camera3, writeBuffer );
113+
114+
}

‎examples/webgl_postprocessing_msaa.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<body>
3030
<div id="info">
3131
<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/>
32+
This manual approach to MSAA re-renders the scene with camera jitter and accumulates the results. It is a slow approach.<br/><br/>
3233
Texture interpolation, mipmapping and anistropic sampling is disabled to emphasize<br/> the effect MSAA levels have one the resulting render quality.
3334
</div>
3435

@@ -50,7 +51,7 @@
5051

5152
<script>
5253

53-
var camera, scene, renderer, composer, copyPass, manualMSAARenderPass;
54+
var camera, scene, renderer, composer, copyPass, msaaRenderPass;
5455
var gui, stats, texture;
5556

5657
var param = { MSAASampleLevel: 2 };
@@ -74,8 +75,8 @@
7475
'Level 4: 16 Samples': 4
7576
} ).onFinishChange( function() {
7677

77-
if( manualMSAARenderPass ) {
78-
manualMSAARenderPass.sampleLevel = param.MSAASampleLevel;
78+
if( msaaRenderPass ) {
79+
msaaRenderPass.sampleLevel = param.MSAASampleLevel;
7980
}
8081

8182
} );
@@ -128,9 +129,9 @@
128129

129130
composer = new THREE.EffectComposer( renderer );
130131

131-
manualMSAARenderPass = new THREE.ManualMSAARenderPass( scene, camera );
132-
manualMSAARenderPass.sampleLevel = param.MSAASampleLevel;
133-
composer.addPass( manualMSAARenderPass );
132+
msaaRenderPass = new THREE.ManualMSAARenderPass( scene, camera );
133+
msaaRenderPass.sampleLevel = param.MSAASampleLevel;
134+
composer.addPass( msaaRenderPass );
134135

135136
copyPass = new THREE.ShaderPass( THREE.CopyShader );
136137
copyPass.renderToScreen = true;
@@ -154,7 +155,7 @@
154155
var newWidth = Math.floor( width / pixelRatio ) || 1;
155156
var newHeight = Math.floor( height / pixelRatio ) || 1;
156157
composer.setSize( newWidth, newHeight );
157-
msaaPass.setSize( newWidth, newHeight );
158+
msaaRenderPass.setSize( newWidth, newHeight );
158159

159160
}
160161

0 commit comments

Comments
 (0)