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.
TimeoutY · Mar 22, 2019 · 911e4b2 · 911e4b2
1 parent a6ad8c5
commit 911e4b2
Show file tree

Hide file tree

Showing 41 changed files with 25 additions and 72 deletions.
diff --git a/examples/js/postprocessing/EffectComposer.js b/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;
 
 };

diff --git a/examples/misc_controls_fly.html b/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 );

diff --git a/examples/webgl2_multisampled_renderbuffers.html b/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;
 
 				//
 

diff --git a/examples/webgl_lightningstrike.html b/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();
 

diff --git a/examples/webgl_loader_sea3d.html b/examples/webgl_loader_sea3d.html
@@ -146,7 +146,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_loader_sea3d_bvh.html b/examples/webgl_loader_sea3d_bvh.html
@@ -262,7 +262,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_loader_sea3d_bvh_retarget.html b/examples/webgl_loader_sea3d_bvh_retarget.html
@@ -211,7 +211,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_loader_sea3d_hierarchy.html b/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

diff --git a/examples/webgl_loader_sea3d_keyframe.html b/examples/webgl_loader_sea3d_keyframe.html
@@ -184,7 +184,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_loader_sea3d_morph.html b/examples/webgl_loader_sea3d_morph.html
@@ -150,7 +150,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_loader_sea3d_physics.html b/examples/webgl_loader_sea3d_physics.html
@@ -177,7 +177,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_loader_sea3d_skinning.html b/examples/webgl_loader_sea3d_skinning.html
@@ -198,7 +198,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_loader_sea3d_sound.html b/examples/webgl_loader_sea3d_sound.html
@@ -349,7 +349,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

diff --git a/examples/webgl_materials_bumpmap_skin.html b/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;
 

diff --git a/examples/webgl_materials_normalmap.html b/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 );

diff --git a/examples/webgl_materials_skin.html b/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;
 
 				//
 

diff --git a/examples/webgl_materials_video.html b/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 );

diff --git a/examples/webgl_points_dynamic.html b/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 );

diff --git a/examples/webgl_postprocessing.html b/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 );
 
 				//

diff --git a/examples/webgl_postprocessing_advanced.html b/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 = {

diff --git a/examples/webgl_postprocessing_afterimage.html b/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 );

diff --git a/examples/webgl_postprocessing_backgrounds.html b/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 );

diff --git a/examples/webgl_postprocessing_dof.html b/examples/webgl_postprocessing_dof.html
@@ -260,8 +260,6 @@
 					height: height
 				} );
 
-				bokehPass.renderToScreen = true;
-
 				var composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderPass );

diff --git a/examples/webgl_postprocessing_fxaa.html b/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 );

diff --git a/examples/webgl_postprocessing_glitch.html b/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 );
 
 

diff --git a/examples/webgl_postprocessing_masking.html b/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,

diff --git a/examples/webgl_postprocessing_nodes_pass.html b/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 );
 

diff --git a/examples/webgl_postprocessing_outline.html b/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 );

diff --git a/examples/webgl_postprocessing_pixel.html b/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 );

diff --git a/examples/webgl_postprocessing_rgb_halftone.html b/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 );
 

diff --git a/examples/webgl_postprocessing_sao.html b/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

diff --git a/examples/webgl_postprocessing_smaa.html b/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 );

diff --git a/examples/webgl_postprocessing_sobel.html b/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 );

diff --git a/examples/webgl_postprocessing_ssaa.html b/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 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,7 +135,6 @@ @@
     				var renderPass = new THREE.RenderPass( scene, camera );
     				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-    				copyPass.renderToScreen = true;
     				//
@@ Expand Down @@