Set Pass.renderToScreen automatically in EffectComposer

The last enabled EffectComposer pass is the only one that can really render to the screen, so we can set the renderToScreen flag in the passes automatically. The only case where EffectComposers don't render to the screen at all in the current examples is webgl_materials_skin, that sets up multiple EffectComposers and then combines their results. For that special case we now have a renderToScreen flag in EffectComposer.

This simplifies setting up EffectComposer and will make further enhancements a bit easier.

examples/js/postprocessing/EffectComposer.js

@@ -28,6 +28,8 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
 	this.writeBuffer = this.renderTarget1;
 	this.readBuffer = this.renderTarget2;
 
+	this.renderToScreen = true;
+
 	this.passes = [];
 
 	// dependencies
@@ -75,6 +77,22 @@ Object.assign( THREE.EffectComposer.prototype, {
 
 	},
 
+	isLastEnabledPass: function ( passIndex ) {
+
+		for ( var i = passIndex + 1; i < this.passes.length; i ++ ) {
+
+			if ( this.passes[i].enabled ) {
+
+				return false;
+
+			}
+
+		}
+
+		return true;
+
+	},
+
 	render: function ( deltaTime ) {
 
 		// deltaTime value is in seconds
@@ -99,6 +117,7 @@ Object.assign( THREE.EffectComposer.prototype, {
 
 			if ( pass.enabled === false ) continue;
 
+			pass.renderToScreen = ( this.renderToScreen && this.isLastEnabledPass( i ) );
 			pass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive );
 
 			if ( pass.needsSwap ) {
@@ -187,7 +206,7 @@ THREE.Pass = function () {
 	// if set to true, the pass clears its buffer before rendering
 	this.clear = false;
 
-	// if set to true, the result of the pass is rendered to screen
+	// if set to true, the result of the pass is rendered to screen. This is set automatically by EffectComposer.
 	this.renderToScreen = false;
 
 };

examples/misc_controls_fly.html

@@ -240,8 +240,6 @@
 				var renderModel = new THREE.RenderPass( scene, camera );
 				var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
 
-				effectFilm.renderToScreen = true;
-
 				composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderModel );

examples/webgl2_multisampled_renderbuffers.html

@@ -135,7 +135,6 @@
 
 				var renderPass = new THREE.RenderPass( scene, camera );
 				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 
 				//
 

examples/webgl_lightningstrike.html

@@ -256,7 +256,6 @@
 				outlinePass.edgeThickness = 2.8;
 				outlinePass.visibleEdgeColor = visibleColor;
 				outlinePass.hiddenEdgeColor.set( 0 );
-				outlinePass.renderToScreen = true;
 				composer.addPass( outlinePass );
 
 				scene.userData.outlineEnabled = true;
@@ -580,18 +579,7 @@
 
 					controls.update();
 
-					if ( scene.userData.outlineEnabled ) {
-
-						outlinePass.enabled = true;
-						rayPass.renderToScreen = false;
-
-					}
-					else {
-
-						outlinePass.enabled = false;
-						rayPass.renderToScreen = true;
-
-					}
+					outlinePass.enabled = scene.userData.outlineEnabled;
 
 					composer.render();
 

examples/webgl_loader_sea3d.html

@@ -146,7 +146,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_bvh.html

@@ -262,7 +262,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_bvh_retarget.html

@@ -211,7 +211,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_hierarchy.html

@@ -154,7 +154,6 @@
 				composer.addPass( vignettePass );
 
 				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 
 				// events

examples/webgl_loader_sea3d_keyframe.html

@@ -184,7 +184,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_morph.html

@@ -150,7 +150,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_physics.html

@@ -177,7 +177,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_skinning.html

@@ -198,7 +198,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_sound.html

@@ -349,7 +349,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_materials_bumpmap_skin.html

@@ -134,8 +134,6 @@
 				var effectBeckmann = new THREE.ShaderPass( THREE.ShaderSkin[ "beckmann" ] );
 				var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
 
-				effectCopy.renderToScreen = true;
-
 				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
 				var rtwidth = 512, rtheight = 512;
 

examples/webgl_materials_normalmap.html

@@ -171,8 +171,6 @@
 				effectColor.uniforms[ 'powRGB' ].value.set( 1.4, 1.45, 1.45 );
 				effectColor.uniforms[ 'mulRGB' ].value.set( 1.1, 1.1, 1.1 );
 
-				effectColor.renderToScreen = true;
-
 				composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderModel );

examples/webgl_materials_skin.html

@@ -186,8 +186,6 @@
 
 				var renderModelUV = new THREE.RenderPass( scene, camera, materialUV, new THREE.Color( 0x575757 ) );
 
-				var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
-
 				var effectBloom1 = new THREE.BloomPass( 1, 15, 2, 512 );
 				var effectBloom2 = new THREE.BloomPass( 1, 25, 3, 512 );
 				var effectBloom3 = new THREE.BloomPass( 1, 25, 4, 512 );
@@ -196,8 +194,6 @@
 				effectBloom2.clear = true;
 				effectBloom3.clear = true;
 
-				effectCopy.renderToScreen = true;
-
 				//
 
 				var pars = {
@@ -215,6 +211,7 @@
 
 				composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
 				composer.addPass( renderModelUV );
+				composer.renderToScreen = false;
 
 				var renderScene = new THREE.TexturePass( composer.renderTarget2.texture );
 
@@ -224,16 +221,19 @@
 
 				composerUV1.addPass( renderScene );
 				composerUV1.addPass( effectBloom1 );
+				composerUV1.renderToScreen = false;
 
 				composerUV2 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
 
 				composerUV2.addPass( renderScene );
 				composerUV2.addPass( effectBloom2 );
+				composerUV2.renderToScreen = false;
 
 				composerUV3 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
 
 				composerUV3.addPass( renderScene );
 				composerUV3.addPass( effectBloom3 );
+				composerUV3.renderToScreen = false;
 
 				//
 

examples/webgl_materials_video.html

@@ -223,8 +223,6 @@
 				var effectBloom = new THREE.BloomPass( 1.3 );
 				var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
 
-				effectCopy.renderToScreen = true;
-
 				composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderModel );

examples/webgl_points_dynamic.html

@@ -138,8 +138,6 @@
 				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
 				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
 
-				effectFocus.renderToScreen = true;
-
 				composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderModel );

examples/webgl_postprocessing.html

@@ -82,7 +82,6 @@
 
 				var effect = new THREE.ShaderPass( THREE.RGBShiftShader );
 				effect.uniforms[ 'amount' ].value = 0.0015;
-				effect.renderToScreen = true;
 				composer.addPass( effect );
 
 				//

examples/webgl_postprocessing_advanced.html

@@ -206,13 +206,6 @@
 
 				renderMaskInverse.inverse = true;
 
-				//effectFilm.renderToScreen = true;
-				//effectFilmBW.renderToScreen = true;
-				//effectDotScreen.renderToScreen = true;
-				//effectBleach.renderToScreen = true;
-				effectVignette.renderToScreen = true;
-				//effectCopy.renderToScreen = true;
-
 				//
 
 				var rtParameters = {

examples/webgl_postprocessing_afterimage.html

@@ -68,7 +68,6 @@
 				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
 				afterimagePass = new THREE.AfterimagePass();
-				afterimagePass.renderToScreen = true;
 				composer.addPass( afterimagePass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_backgrounds.html

@@ -215,7 +215,6 @@
 				composer.addPass( renderPass );
 
 				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 
 				var controls = new THREE.OrbitControls( cameraP, renderer.domElement );

examples/webgl_postprocessing_dof.html

@@ -260,8 +260,6 @@
 					height: height
 				} );
 
-				bokehPass.renderToScreen = true;
-
 				var composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderPass );

examples/webgl_postprocessing_fxaa.html

@@ -136,7 +136,6 @@
 				//
 
 				fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );
-				fxaaPass.renderToScreen = true;
 
 				var pixelRatio = renderer.getPixelRatio();
 
@@ -150,7 +149,6 @@
 				//
 
 				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 
 				composer2 = new THREE.EffectComposer( renderer );
 				composer2.addPass( renderPass );

examples/webgl_postprocessing_glitch.html

@@ -103,7 +103,6 @@
 				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
 				glitchPass = new THREE.GlitchPass();
-				glitchPass.renderToScreen = true;
 				composer.addPass( glitchPass );
 
 

examples/webgl_postprocessing_masking.html

@@ -81,7 +81,6 @@
 				var texturePass2 = new THREE.TexturePass( texture2 );
 
 				var outputPass = new THREE.ShaderPass( THREE.CopyShader );
-				outputPass.renderToScreen = true;
 
 				var parameters = {
 					minFilter: THREE.LinearFilter,

examples/webgl_postprocessing_nodes_pass.html

@@ -516,7 +516,6 @@
 				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
 				nodepass = new NodePass();
-				nodepass.renderToScreen = true;
 
 				composer.addPass( nodepass );
 

examples/webgl_postprocessing_outline.html

@@ -298,7 +298,6 @@
 
 				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
-				effectFXAA.renderToScreen = true;
 				composer.addPass( effectFXAA );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_pixel.html

@@ -147,7 +147,6 @@
 				pixelPass = new THREE.ShaderPass( THREE.PixelShader );
 				pixelPass.uniforms[ "resolution" ].value = new THREE.Vector2( window.innerWidth, window.innerHeight );
 				pixelPass.uniforms[ "resolution" ].value.multiplyScalar( window.devicePixelRatio );
-				pixelPass.renderToScreen = true;
 				composer.addPass( pixelPass );
 
 				window.addEventListener( 'resize', resize );

examples/webgl_postprocessing_rgb_halftone.html

@@ -149,7 +149,6 @@
 			disable: false
 		};
 		halftonePass = new THREE.HalftonePass( window.innerWidth, window.innerHeight, params );
-		halftonePass.renderToScreen = true;
 		composer.addPass( renderPass );
 		composer.addPass( halftonePass );
 

examples/webgl_postprocessing_sao.html

@@ -139,7 +139,6 @@
 				renderPass = new THREE.RenderPass( scene, camera );
 				composer.addPass( renderPass );
 				saoPass = new THREE.SAOPass( scene, camera, false, true );
-				saoPass.renderToScreen = true;
 				composer.addPass( saoPass );
 
 				// Init gui

examples/webgl_postprocessing_smaa.html

@@ -77,7 +77,6 @@
 				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
 				pass = new THREE.SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
-				pass.renderToScreen = true;
 				composer.addPass( pass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_sobel.html

@@ -118,7 +118,6 @@
 				// Sobel operator
 
 				effectSobel = new THREE.ShaderPass( THREE.SobelOperatorShader );
-				effectSobel.renderToScreen = true;
 				effectSobel.uniforms[ "resolution" ].value.x = window.innerWidth;
 				effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight;
 				composer.addPass( effectSobel );

examples/webgl_postprocessing_ssaa.html

@@ -128,7 +128,6 @@
 				composer.addPass( ssaaRenderPass );
 
 				copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_ssaa_unbiased.html

@@ -182,7 +182,6 @@
 				ssaaRenderPassO = new THREE.SSAARenderPass( scene, cameraO );
 				composer.addPass( ssaaRenderPassO );
 				copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -251,7 +250,6 @@
 				ssaaRenderPassP.enabled = ( params.camera === 'perspective' );
 				ssaaRenderPassO.enabled = ( params.camera === 'orthographic' );
 
-				ssaaRenderPassP.renderToScreen = ssaaRenderPassO.renderToScreen = params.renderToScreen;
 				copyPass.enabled = ! params.renderToScreen;
 
 				composer.render();

examples/webgl_postprocessing_ssao.html

@@ -127,7 +127,6 @@
 
 				ssaoPass = new THREE.SSAOPass( scene, camera, width, height );
 				ssaoPass.kernelRadius = 16;
-				ssaoPass.renderToScreen = true;
 
 				effectComposer = new THREE.EffectComposer( renderer );
 				effectComposer.addPass( ssaoPass );

examples/webgl_postprocessing_taa.html

@@ -157,7 +157,6 @@
 				composer.addPass( renderPass );
 
 				copyPass = new THREE.ShaderPass( THREE.CopyShader );
-		    copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_unreal_bloom.html

@@ -104,7 +104,6 @@
 			var renderScene = new THREE.RenderPass( scene, camera );
 
 			var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
-			bloomPass.renderToScreen = true;
 			bloomPass.threshold = params.bloomThreshold;
 			bloomPass.strength = params.bloomStrength;
 			bloomPass.radius = params.bloomRadius;

examples/webgl_shader_lava.html

@@ -183,8 +183,6 @@
 				var effectBloom = new THREE.BloomPass( 1.25 );
 				var effectFilm = new THREE.FilmPass( 0.35, 0.95, 2048, false );
 
-				effectFilm.renderToScreen = true;
-
 				composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderModel );

examples/webgl_shaders_tonemapping.html

@@ -368,7 +368,6 @@
 				hdrToneMappingPass = new THREE.AdaptiveToneMappingPass( false, 256 );
 				bloomPass = new THREE.BloomPass();
 				var gammaCorrectionPass = new THREE.ShaderPass( THREE.GammaCorrectionShader );
-				gammaCorrectionPass.renderToScreen = true;
 
 				dynamicHdrEffectComposer.addPass( skyboxPass );
 				dynamicHdrEffectComposer.addPass( scenePass );
@@ -390,7 +389,6 @@
 				ldrEffectComposer.addPass( gammaCorrectionPass );
 
 				// var gammaPass = new THREE.ShaderPass( GammaShader );
-				// gammaPass.renderToScreen = true;
 				// ldrEffectComposer.addPass( gammaPass );
 
 				var gui = new dat.GUI();

examples/webgl_tonemapping.html

@@ -215,7 +215,6 @@
 				composer.addPass( renderScene );
 
 				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 
 				stats = new Stats();