Skip to content

Commit 889c9c2

Browse files
bhoustonmrdoob
bhouston
authored and
mrdoob
committed
Add clearColor/clearAlpha to ManualMSAARenderPass (mrdoob#9124)
* support custom clear colors in ManuallMSASRenderPass like RenderPass supports. * fix bugs in clearColor/clearAlpha for MSAA. * cleanup. * simplify clearColor in ManualMSAARenderPAss + RenderPass. * WestLAngley suggestion. * use only one composer, rather than two. Just turn on and off passes. Allow for toggling autoRotate * avoid allocating THREE.Color classes when possible. * fixed. * simplify code via automatic hoisting. * hex rather than color.
1 parent 6b18e63 commit 889c9c2

File tree

5 files changed

+68
-44
lines changed

5 files changed

+68
-44
lines changed

‎examples/js/postprocessing/ManualMSAARenderPass.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
*
1111
*/
1212

13-
THREE.ManualMSAARenderPass = function ( scene, camera ) {
13+
THREE.ManualMSAARenderPass = function ( scene, camera, clearColor, clearAlpha ) {
1414

1515
THREE.Pass.call( this );
1616

@@ -20,6 +20,10 @@ THREE.ManualMSAARenderPass = function ( scene, camera ) {
2020
this.sampleLevel = 4; // specified as n, where the number of samples is 2^n, so sampleLevel = 4, is 2^4 samples, 16.
2121
this.unbiased = true;
2222

23+
// as we need to clear the buffer in this pass, clearColor must be set to something, defaults to black.
24+
this.clearColor = ( clearColor !== undefined ) ? clearColor : 0x000000;
25+
this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
26+
2327
if ( THREE.CopyShader === undefined ) console.error( "THREE.ManualMSAARenderPass relies on THREE.CopyShader" );
2428

2529
var copyShader = THREE.CopyShader;
@@ -78,6 +82,8 @@ THREE.ManualMSAARenderPass.prototype = Object.assign( Object.create( THREE.Pass.
7882
var autoClear = renderer.autoClear;
7983
renderer.autoClear = false;
8084

85+
var oldClearColorHex = renderer.getClearColor().getHex(), oldClearAlpha = renderer.getClearAlpha();
86+
8187
var baseSampleWeight = 1.0 / jitterOffsets.length;
8288
var roundingRange = 1 / 32;
8389
this.copyUniforms[ "tDiffuse" ].value = this.sampleRenderTarget.texture;
@@ -104,20 +110,24 @@ THREE.ManualMSAARenderPass.prototype = Object.assign( Object.create( THREE.Pass.
104110
}
105111

106112
this.copyUniforms[ "opacity" ].value = sampleWeight;
107-
113+
renderer.setClearColor( this.clearColor, this.clearAlpha );
108114
renderer.render( this.scene, this.camera, this.sampleRenderTarget, true );
109-
renderer.render( this.scene2, this.camera2, writeBuffer, (i === 0) );
115+
if (i === 0) {
116+
renderer.setClearColor( 0x000000, 0.0 );
117+
}
118+
renderer.render( this.scene2, this.camera2, this.renderToScreen ? null : writeBuffer, (i === 0) );
110119

111120
}
112121

113122
if ( this.camera.clearViewOffset ) this.camera.clearViewOffset();
114123

115124
renderer.autoClear = autoClear;
116-
125+
renderer.setClearColor( oldClearColorHex, oldClearAlpha );
117126
}
118127

119128
} );
120129

130+
121131
// These jitter vectors are specified in integers because it is easier.
122132
// I am assuming a [-8,8) integer grid, but it needs to be mapped onto [-0.5,0.5)
123133
// before being used, thus these integers need to be scaled by 1/16.

‎examples/js/postprocessing/RenderPass.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@ THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clear
1414
this.clearColor = clearColor;
1515
this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
1616

17-
this.oldClearColor = new THREE.Color();
18-
this.oldClearAlpha = 1;
19-
2017
this.clear = true;
2118
this.needsSwap = false;
2219

@@ -32,8 +29,8 @@ THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
3229

3330
if ( this.clearColor ) {
3431

35-
this.oldClearColor.copy( renderer.getClearColor() );
36-
this.oldClearAlpha = renderer.getClearAlpha();
32+
var oldClearColorHex = renderer.getClearColor();
33+
var oldClearAlpha = renderer.getClearAlpha();
3734

3835
renderer.setClearColor( this.clearColor, this.clearAlpha );
3936

@@ -43,7 +40,7 @@ THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
4340

4441
if ( this.clearColor ) {
4542

46-
renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
43+
renderer.setClearColor( oldClearColorHex, oldClearAlpha );
4744

4845
}
4946

‎examples/webgl_postprocessing_msaa.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
overflow: hidden;
1717
}
1818

19+
a { color: #88f; }
20+
1921
#info {
2022
color: #fff;
2123
position: absolute;

‎examples/webgl_postprocessing_msaa_unbiased.html

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
overflow: hidden;
1717
}
1818

19+
a { color: #88f; }
20+
1921
#info {
2022
color: #fff;
2123
position: absolute;
@@ -50,15 +52,19 @@
5052

5153
<script>
5254

53-
var scene, renderer;
54-
var cameraP, composerP, copyPassP, msaaRenderPassP;
55-
var cameraO, composerO, copyPassO, msaaRenderPassO;
55+
var scene, renderer, composer, copyPass;
56+
var cameraP, msaaRenderPassP;
57+
var cameraO, msaaRenderPassO;
5658
var gui, stats, texture;
5759

58-
var param = {
60+
var params = {
5961
sampleLevel: 4,
6062
unbiased: true,
61-
camera: 'perspective'
63+
camera: 'perspective',
64+
clearColor: 'black',
65+
clearAlpha: 1.0,
66+
autoRotate: true
67+
6268
};
6369

6470
init();
@@ -72,17 +78,20 @@
7278

7379
gui = new dat.GUI();
7480

75-
gui.add( param, "unbiased" );
76-
gui.add( param, 'sampleLevel', {
81+
gui.add( params, "unbiased" );
82+
gui.add( params, 'sampleLevel', {
7783
'Level 0: 1 Sample': 0,
7884
'Level 1: 2 Samples': 1,
7985
'Level 2: 4 Samples': 2,
8086
'Level 3: 8 Samples': 3,
8187
'Level 4: 16 Samples': 4,
8288
'Level 5: 32 Samples': 5
8389
} );
84-
gui.add( param, 'camera', [ 'perspective', 'ortho' ] );
85-
90+
gui.add( params, 'camera', [ 'perspective', 'orthographic' ] );
91+
gui.add( params, "clearColor", [ 'black', 'white', 'blue', 'green', 'red' ] );
92+
gui.add( params, "clearAlpha", 0, 1 );
93+
gui.add( params, "autoRotate" );
94+
8695
gui.open();
8796

8897
}
@@ -166,20 +175,15 @@
166175

167176
// postprocessing
168177

169-
composerP = new THREE.EffectComposer( renderer );
178+
composer = new THREE.EffectComposer( renderer );
170179
msaaRenderPassP = new THREE.ManualMSAARenderPass( scene, cameraP );
171-
composerP.addPass( msaaRenderPassP );
172-
copyPassP = new THREE.ShaderPass( THREE.CopyShader );
173-
copyPassP.renderToScreen = true;
174-
composerP.addPass( copyPassP );
175-
176-
composerO = new THREE.EffectComposer( renderer );
180+
composer.addPass( msaaRenderPassP );
177181
msaaRenderPassO = new THREE.ManualMSAARenderPass( scene, cameraO );
178-
composerO.addPass( msaaRenderPassO );
179-
copyPassO = new THREE.ShaderPass( THREE.CopyShader );
180-
copyPassO.renderToScreen = true;
181-
composerO.addPass( copyPassO );
182-
182+
composer.addPass( msaaRenderPassO );
183+
copyPass = new THREE.ShaderPass( THREE.CopyShader );
184+
copyPass.renderToScreen = true;
185+
composer.addPass( copyPass );
186+
183187
window.addEventListener( 'resize', onWindowResize, false );
184188

185189
}
@@ -214,26 +218,35 @@
214218

215219
stats.begin();
216220

217-
for ( var i = 0; i < scene.children.length; i ++ ) {
221+
if( params.autoRotate ) {
222+
for ( var i = 0; i < scene.children.length; i ++ ) {
218223

219-
var child = scene.children[ i ];
224+
var child = scene.children[ i ];
220225

221-
child.rotation.x += 0.005;
222-
child.rotation.y += 0.01;
226+
child.rotation.x += 0.005;
227+
child.rotation.y += 0.01;
223228

229+
}
224230
}
225231

226-
msaaRenderPassP.sampleLevel = param.sampleLevel;
227-
msaaRenderPassP.unbiased = param.unbiased;
232+
var newColor = msaaRenderPassP.clearColor;
233+
switch( params.clearColor ) {
234+
case 'blue': newColor = 0x0000ff; break;
235+
case 'red': newColor = 0xff0000; break;
236+
case 'green': newColor = 0x00ff00; break;
237+
case 'white': newColor = 0xffffff; break;
238+
case 'black': newColor = 0x000000; break;
239+
}
240+
msaaRenderPassP.clearColor = msaaRenderPassO.clearColor = newColor;
241+
msaaRenderPassP.clearAlpha = msaaRenderPassO.clearAlpha = params.clearAlpha;
228242

229-
msaaRenderPassO.sampleLevel = param.sampleLevel;
230-
msaaRenderPassO.unbiased = param.unbiased;
243+
msaaRenderPassP.sampleLevel = msaaRenderPassO.sampleLevel = params.sampleLevel;
244+
msaaRenderPassP.unbiased = msaaRenderPassO.unbiased = params.unbiased;
231245

232-
if( param.camera === 'perspective' ){
233-
composerP.render();
234-
}else{
235-
composerO.render();
236-
}
246+
msaaRenderPassP.enabled = ( params.camera === 'perspective' );
247+
msaaRenderPassO.enabled = ( params.camera === 'orthographic' );
248+
249+
composer.render();
237250

238251
stats.end();
239252

‎examples/webgl_postprocessing_taa.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
overflow: hidden;
1717
}
1818

19+
a { color: #88f; }
20+
1921
#info {
2022
color: #fff;
2123
position: absolute;

0 commit comments

Comments
 (0)