Add clearColor/clearAlpha to ManualMSAARenderPass (#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.

examples/js/postprocessing/ManualMSAARenderPass.js

@@ -10,7 +10,7 @@
 *
 */
 
-THREE.ManualMSAARenderPass = function ( scene, camera ) {
+THREE.ManualMSAARenderPass = function ( scene, camera, clearColor, clearAlpha ) {
 
 	THREE.Pass.call( this );
 
@@ -20,6 +20,10 @@ THREE.ManualMSAARenderPass = function ( scene, camera ) {
 	this.sampleLevel = 4; // specified as n, where the number of samples is 2^n, so sampleLevel = 4, is 2^4 samples, 16.
 	this.unbiased = true;
 
+	// as we need to clear the buffer in this pass, clearColor must be set to something, defaults to black.
+	this.clearColor = ( clearColor !== undefined ) ? clearColor : 0x000000;
+	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
+
 	if ( THREE.CopyShader === undefined ) console.error( "THREE.ManualMSAARenderPass relies on THREE.CopyShader" );
 
 	var copyShader = THREE.CopyShader;
@@ -78,6 +82,8 @@ THREE.ManualMSAARenderPass.prototype = Object.assign( Object.create( THREE.Pass.
 		var autoClear = renderer.autoClear;
 		renderer.autoClear = false;
 
+		var oldClearColorHex = renderer.getClearColor().getHex(), oldClearAlpha = renderer.getClearAlpha();
+
 		var baseSampleWeight = 1.0 / jitterOffsets.length;
 		var roundingRange = 1 / 32;
 		this.copyUniforms[ "tDiffuse" ].value = this.sampleRenderTarget.texture;
@@ -104,20 +110,24 @@ THREE.ManualMSAARenderPass.prototype = Object.assign( Object.create( THREE.Pass.
 			}
 
 			this.copyUniforms[ "opacity" ].value = sampleWeight;
-
+			renderer.setClearColor( this.clearColor, this.clearAlpha );
 			renderer.render( this.scene, this.camera, this.sampleRenderTarget, true );
-			renderer.render( this.scene2, this.camera2, writeBuffer, (i === 0) );
+			if (i === 0) {
+				renderer.setClearColor( 0x000000, 0.0 );
+			}
+			renderer.render( this.scene2, this.camera2, this.renderToScreen ? null : writeBuffer, (i === 0) );
 
 		}
 
 		if ( this.camera.clearViewOffset ) this.camera.clearViewOffset();
 
 		renderer.autoClear = autoClear;
-
+		renderer.setClearColor( oldClearColorHex, oldClearAlpha );
 	}
 
 } );
 
+
 // These jitter vectors are specified in integers because it is easier.
 // I am assuming a [-8,8) integer grid, but it needs to be mapped onto [-0.5,0.5)
 // before being used, thus these integers need to be scaled by 1/16.

examples/js/postprocessing/RenderPass.js

@@ -14,9 +14,6 @@ THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clear
 	this.clearColor = clearColor;
 	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
 
-	this.oldClearColor = new THREE.Color();
-	this.oldClearAlpha = 1;
-
 	this.clear = true;
 	this.needsSwap = false;
 
@@ -32,8 +29,8 @@ THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 
 		if ( this.clearColor ) {
 
-			this.oldClearColor.copy( renderer.getClearColor() );
-			this.oldClearAlpha = renderer.getClearAlpha();
+			var oldClearColorHex = renderer.getClearColor();
+			var oldClearAlpha = renderer.getClearAlpha();
 
 			renderer.setClearColor( this.clearColor, this.clearAlpha );
 
@@ -43,7 +40,7 @@ THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 
 		if ( this.clearColor ) {
 
-			renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
+			renderer.setClearColor( oldClearColorHex, oldClearAlpha );
 
 		}
 

examples/webgl_postprocessing_msaa.html

@@ -16,6 +16,8 @@
 				overflow: hidden;
 			}
 
+			a { color: #88f; }
+
 			#info {
 				color: #fff;
 				position: absolute;

examples/webgl_postprocessing_msaa_unbiased.html

@@ -16,6 +16,8 @@
 				overflow: hidden;
 			}
 
+			a { color: #88f; }
+
 			#info {
 				color: #fff;
 				position: absolute;
@@ -50,15 +52,19 @@
 
 		<script>
 
-			var scene, renderer;
-			var cameraP, composerP, copyPassP, msaaRenderPassP;
-			var cameraO, composerO, copyPassO, msaaRenderPassO;
+			var scene, renderer, composer, copyPass;
+			var cameraP, msaaRenderPassP;
+			var cameraO, msaaRenderPassO;
 			var gui, stats, texture;
 
-			var param = {
+			var params = {
 				sampleLevel: 4,
 				unbiased: true,
-				camera: 'perspective'
+				camera: 'perspective',
+				clearColor: 'black',
+				clearAlpha: 1.0,
+				autoRotate: true
+		
 			};
 
 			init();
@@ -72,8 +78,8 @@
 
 				gui = new dat.GUI();
 
-				gui.add( param, "unbiased" );
-				gui.add( param, 'sampleLevel', {
+				gui.add( params, "unbiased" );
+				gui.add( params, 'sampleLevel', {
 					'Level 0: 1 Sample': 0,
 					'Level 1: 2 Samples': 1,
 					'Level 2: 4 Samples': 2,
@@ -81,8 +87,11 @@
 					'Level 4: 16 Samples': 4,
 					'Level 5: 32 Samples': 5
 				} );
-				gui.add( param, 'camera', [ 'perspective', 'ortho' ] );
-
+				gui.add( params, 'camera', [ 'perspective', 'orthographic' ] );
+				gui.add( params, "clearColor", [ 'black', 'white', 'blue', 'green', 'red' ] );		
+				gui.add( params, "clearAlpha", 0, 1 );		
+				gui.add( params, "autoRotate" );
+			
 				gui.open();
 
 			}
@@ -166,20 +175,15 @@
 
 				// postprocessing
 
-				composerP = new THREE.EffectComposer( renderer );
+				composer = new THREE.EffectComposer( renderer );
 				msaaRenderPassP = new THREE.ManualMSAARenderPass( scene, cameraP );
-				composerP.addPass( msaaRenderPassP );
-				copyPassP = new THREE.ShaderPass( THREE.CopyShader );
-				copyPassP.renderToScreen = true;
-				composerP.addPass( copyPassP );
-
-				composerO = new THREE.EffectComposer( renderer );
+				composer.addPass( msaaRenderPassP );
 				msaaRenderPassO = new THREE.ManualMSAARenderPass( scene, cameraO );
-				composerO.addPass( msaaRenderPassO );
-				copyPassO = new THREE.ShaderPass( THREE.CopyShader );
-				copyPassO.renderToScreen = true;
-				composerO.addPass( copyPassO );
-
+				composer.addPass( msaaRenderPassO );
+				copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				copyPass.renderToScreen = true;
+				composer.addPass( copyPass );
+				
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -214,26 +218,35 @@
 
 				stats.begin();
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				if( params.autoRotate ) {
+					for ( var i = 0; i < scene.children.length; i ++ ) {
 
-					var child = scene.children[ i ];
+						var child = scene.children[ i ];
 
-					child.rotation.x += 0.005;
-					child.rotation.y += 0.01;
+						child.rotation.x += 0.005;
+						child.rotation.y += 0.01;
 
+					}
 				}
 
-				msaaRenderPassP.sampleLevel = param.sampleLevel;
-				msaaRenderPassP.unbiased = param.unbiased;
+				var newColor = msaaRenderPassP.clearColor;
+				switch( params.clearColor ) {
+					case 'blue': newColor = 0x0000ff; break;
+					case 'red': newColor = 0xff0000; break;
+					case 'green': newColor = 0x00ff00; break;
+					case 'white': newColor = 0xffffff; break;
+					case 'black': newColor = 0x000000; break;
+				}
+				msaaRenderPassP.clearColor = msaaRenderPassO.clearColor = newColor;
+				msaaRenderPassP.clearAlpha = msaaRenderPassO.clearAlpha = params.clearAlpha;
 
-				msaaRenderPassO.sampleLevel = param.sampleLevel;
-				msaaRenderPassO.unbiased = param.unbiased;
+				msaaRenderPassP.sampleLevel = msaaRenderPassO.sampleLevel = params.sampleLevel;
+				msaaRenderPassP.unbiased = msaaRenderPassO.unbiased = params.unbiased;
 
-				if( param.camera === 'perspective' ){
-					composerP.render();
-				}else{
-					composerO.render();
-				}
+				msaaRenderPassP.enabled = ( params.camera === 'perspective' );
+				msaaRenderPassO.enabled = ( params.camera === 'orthographic' );
+
+				composer.render();
 
 				stats.end();
 

examples/webgl_postprocessing_taa.html

@@ -16,6 +16,8 @@
 				overflow: hidden;
 			}
 
+			a { color: #88f; }
+
 			#info {
 				color: #fff;
 				position: absolute;