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

Set Pass.renderToScreen automatically in EffectComposer

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

@@ -258,8 +258,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();