Merge pull request mrdoob#16033 from Oletus/postprocessing-render-to-…

…screen Set Pass.renderToScreen automatically in EffectComposer
TimeoutY · Mar 22, 2019 · f364288 · f364288
2 parents 4fb74e3 + 911e4b2
commit f364288
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
@@ -258,8 +258,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 @@