Add rudimentary masking support to EffectComposer2

Author: Oletus

examples/js/postprocessing2/EffectComposer2.js

@@ -49,6 +49,9 @@ THREE.EffectComposer2 = function ( renderer, colorRenderTarget ) {
 
 	this._previousFrameTime = Date.now();
 
+	this.maskActive = false;
+	this.renderer.autoClearStencil = false;  // Only mask passes should clear the stencil.
+
 };
 
 Object.assign( THREE.EffectComposer2.prototype, {
@@ -127,11 +130,12 @@ Object.assign( THREE.EffectComposer2.prototype, {
 				if ( bufferConfig.isOutput ) {
 
 					var buffer = this.getColorOutputBuffer( bufferConfig, writeToFinalColorTarget, finalColorRenderTarget );
-					if ( buffer == finalColorRenderTarget && bufferConfig.isInput && !bufferConfig.clear )
+					var passClearsWholeBuffer = bufferConfig.clear && !this.maskActive;
+					if ( buffer == finalColorRenderTarget && bufferConfig.isInput && !passClearsWholeBuffer )
 					{
-						// The output buffer is also used as a color input in the pass.
+						// The output buffer is also used as a color input in the pass and the pass does not clear it.
 						// Copy the color buffer from the previous pass to the final target before executing the pass.
-						this.copyPass.render( this.renderer, [ buffer, this.colorReadBuffer ], 0 );
+						this.copyPass.render( this.renderer, [ buffer, this.colorReadBuffer ], 0, this.maskActive );
 					}
 					if ( buffer == this.colorWriteBuffer ) {
 						writesToColorWriteBuffer = true;
@@ -171,6 +175,31 @@ Object.assign( THREE.EffectComposer2.prototype, {
 
 	},
 
+	handleMaskPass: function( pass ) {
+
+		if ( THREE.MaskPass2 !== undefined ) {
+
+			if ( pass instanceof THREE.MaskPass2 ) {
+
+				this.maskActive = true;
+
+				pass.render( this.renderer, [ this.colorWriteBuffer, this.colorReadBuffer ] );
+				return true;
+
+			} else if ( pass instanceof THREE.ClearMaskPass2 ) {
+
+				this.maskActive = false;
+				pass.render( this.renderer );
+				return true;
+
+			}
+
+		}
+
+		return false;
+
+	},
+
 	render: function ( finalColorRenderTarget, deltaTime ) {
 
 		if ( finalColorRenderTarget == undefined ) {
@@ -191,6 +220,8 @@ Object.assign( THREE.EffectComposer2.prototype, {
 
 		var pass, i, il = this.passes.length;
 
+		this.maskActive = false;
+
 		for ( i = 0; i < il; i ++ ) {
 
 			pass = this.passes[ i ];
@@ -199,18 +230,20 @@ Object.assign( THREE.EffectComposer2.prototype, {
 
 			var writeToFinalColorTarget = this.isLastEnabledPass( i );
 
+			if ( this.handleMaskPass( pass ) ) continue;
+
 			var buffers = [];
 			var writesToColorWriteBuffer = this.gatherBuffersForPass( pass, writeToFinalColorTarget, finalColorRenderTarget, buffers );
 
-			pass.render( this.renderer, buffers, deltaTime );
+			pass.render( this.renderer, buffers, deltaTime, this.maskActive );
 
 			// Check if we need to copy the final output from a texture to the default framebuffer.
 			if ( writeToFinalColorTarget && !finalColorRenderTarget ) {
 
 				var wroteToBuffer = this.passWroteToBuffer( pass, writeToFinalColorTarget, finalColorRenderTarget );
 				if ( wroteToBuffer ) {
 					// In case the pass is only able to use a texture as its write buffer, copy the result to screen here.
-					this.copyPass.render( this.renderer, [ null, wroteToBuffer ], 0 );
+					this.copyPass.render( this.renderer, [ null, wroteToBuffer ], 0, this.maskActive );
 				}
 
 			} else if ( writesToColorWriteBuffer ) {
@@ -283,8 +316,8 @@ THREE.IntermediateBufferConfig = function() {
 	this.mustBeTexture = false;
 
 	// Set to true if the pass clears this buffer before reading from or writing to it. Should only be set if isOutput
-	// is also true. If this is set then isInput is essentially ignored and the contents of the buffer are undefined
-	// when it is given to the pass.
+	// is also true. If this is set and a mask is not active then isInput is essentially ignored and the contents of the
+	// buffer are undefined when it is given to the pass.
 	this.clear = false;
 
 };
@@ -333,6 +366,8 @@ THREE.Pass2.renderWithClear = function( renderer, scene, camera, writeBuffer, cl
 	var oldAutoClear = renderer.autoClear;
 	renderer.autoClear = false;
 
+	// TODO: Maybe this function should specifically clear only color and depth and make sure that clearing stencil is
+	// disabled?
 	renderer.render( scene, camera, writeBuffer, clear );
 
 	renderer.autoClear = oldAutoClear;

examples/js/postprocessing2/MaskPass2.js

@@ -0,0 +1,97 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author Oletus / http://oletus.fi/ - Ported to EffectComposer2
+ */
+
+THREE.MaskPass2 = function ( scene, camera ) {
+
+	THREE.Pass2.call( this );
+
+	this.scene = scene;
+	this.camera = camera;
+
+	this.clearStencil = true;
+
+	this.inverse = false;
+
+};
+
+THREE.MaskPass2.prototype = Object.assign( Object.create( THREE.Pass2.prototype ), {
+
+	constructor: THREE.MaskPass2,
+
+	render: function ( renderer, buffers, deltaTime, maskActive ) {
+
+		var context = renderer.context;
+		var state = renderer.state;
+
+		// don't update color or depth
+
+		state.buffers.color.setMask( false );
+		state.buffers.depth.setMask( false );
+
+		// lock buffers
+
+		state.buffers.color.setLocked( true );
+		state.buffers.depth.setLocked( true );
+
+		// set up stencil
+
+		var writeValue, clearValue;
+
+		if ( this.inverse ) {
+
+			writeValue = 0;
+			clearValue = 1;
+
+		} else {
+
+			writeValue = 1;
+			clearValue = 0;
+
+		}
+
+		state.buffers.stencil.setTest( true );
+		state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
+		state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
+		state.buffers.stencil.setClear( clearValue );
+
+		// draw into the stencil buffer
+
+		renderer.autoClearStencil = true;
+		renderer.render( this.scene, this.camera, buffers[0], this.clearStencil );
+		renderer.render( this.scene, this.camera, buffers[1], this.clearStencil );
+		renderer.autoClearStencil = false;
+
+		// unlock color and depth buffer for subsequent rendering
+
+		state.buffers.color.setLocked( false );
+		state.buffers.depth.setLocked( false );
+
+		// only render where stencil is set to 1
+
+		state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff );  // draw if == 1
+		state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
+
+	}
+
+} );
+
+
+THREE.ClearMaskPass2 = function () {
+
+	THREE.Pass2.call( this );
+
+};
+
+THREE.ClearMaskPass2.prototype = Object.create( THREE.Pass2.prototype );
+
+Object.assign( THREE.ClearMaskPass2.prototype, {
+
+	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
+
+		renderer.state.buffers.stencil.setTest( false );
+
+	}
+
+} );

examples/webgl_postprocessing_masking.html

@@ -20,11 +20,11 @@
 
 		<script src="js/shaders/CopyShader.js"></script>
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/ClearPass.js"></script>
-		<script src="js/postprocessing/TexturePass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
+		<script src="js/postprocessing2/EffectComposer2.js"></script>
+		<script src="js/postprocessing2/ClearColorPass2.js"></script>
+		<script src="js/postprocessing2/TexturePass2.js"></script>
+		<script src="js/postprocessing2/ShaderPass2.js"></script>
+		<script src="js/postprocessing2/MaskPass2.js"></script>
 
 		<script src="js/WebGL.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -66,22 +66,21 @@
 
 				//
 
-				var clearPass = new THREE.ClearPass();
+				var clearPass = new THREE.ClearColorPass2();
 
-				var clearMaskPass = new THREE.ClearMaskPass();
+				var clearMaskPass = new THREE.ClearMaskPass2();
 
-				var maskPass1 = new THREE.MaskPass( scene1, camera );
-				var maskPass2 = new THREE.MaskPass( scene2, camera );
+				var maskPass1 = new THREE.MaskPass2( scene1, camera );
+				var maskPass2 = new THREE.MaskPass2( scene2, camera );
 
 				var texture1 = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg' );
 				texture1.minFilter = THREE.LinearFilter;
 				var texture2 = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
 
-				var texturePass1 = new THREE.TexturePass( texture1 );
-				var texturePass2 = new THREE.TexturePass( texture2 );
+				var texturePass1 = new THREE.TexturePass2( texture1 );
+				var texturePass2 = new THREE.TexturePass2( texture2 );
 
-				var outputPass = new THREE.ShaderPass( THREE.CopyShader );
-				outputPass.renderToScreen = true;
+				var outputPass = new THREE.ShaderPass2( THREE.CopyShader );
 
 				var parameters = {
 					minFilter: THREE.LinearFilter,
@@ -92,7 +91,7 @@
 
 				var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
 
-				composer = new THREE.EffectComposer( renderer, renderTarget );
+				composer = new THREE.EffectComposer2( renderer, renderTarget );
 				composer.addPass( clearPass );
 				composer.addPass( maskPass1 );
 				composer.addPass( texturePass1 );
@@ -121,7 +120,7 @@
 				torus.rotation.y = time / 2;
 
 				renderer.clear();
-				composer.render( time );
+				composer.render( );
 
 			}