OutputPass: Extract renderer settings. (#26380)

examples/jsm/postprocessing/OutputPass.js

@@ -1,24 +1,21 @@
 import {
 	RawShaderMaterial,
 	UniformsUtils,
-	NoToneMapping,
 	LinearToneMapping,
 	ReinhardToneMapping,
 	CineonToneMapping,
-	ACESFilmicToneMapping
+	ACESFilmicToneMapping,
+	SRGBColorSpace
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 import { OutputShader } from '../shaders/OutputShader.js';
 
 class OutputPass extends Pass {
 
-	constructor( toneMapping = NoToneMapping, toneMappingExposure = 1 ) {
+	constructor() {
 
 		super();
 
-		this.toneMapping = toneMapping;
-		this.toneMappingExposure = toneMappingExposure;
-
 		//
 
 		const shader = OutputShader;
@@ -31,19 +28,41 @@ class OutputPass extends Pass {
 			fragmentShader: shader.fragmentShader
 		} );
 
-		if ( toneMapping === LinearToneMapping ) this.material.defines.LINEAR_TONE_MAPPING = '';
-		else if ( toneMapping === ReinhardToneMapping ) this.material.defines.REINHARD_TONE_MAPPING = '';
-		else if ( toneMapping === CineonToneMapping ) this.material.defines.CINEON_TONE_MAPPING = '';
-		else if ( toneMapping === ACESFilmicToneMapping ) this.material.defines.ACES_FILMIC_TONE_MAPPING = '';
-
 		this.fsQuad = new FullScreenQuad( this.material );
 
+		// internal cache
+
+		this._outputColorSpace = null;
+		this._toneMapping = null;
+
 	}
 
 	render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive */ ) {
 
 		this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
-		this.uniforms[ 'toneMappingExposure' ].value = this.toneMappingExposure;
+		this.uniforms[ 'toneMappingExposure' ].value = renderer.toneMappingExposure;
+
+		// rebuild defines if required
+
+		if ( this._outputColorSpace !== renderer.outputColorSpace || this._toneMapping !== renderer.toneMapping ) {
+
+			this._outputColorSpace = renderer.outputColorSpace;
+			this._toneMapping = renderer.toneMapping;
+
+			this.material.defines = {};
+
+			if ( this._outputColorSpace == SRGBColorSpace ) this.material.defines.SRGB_COLOR_SPACE = '';
+
+			if ( this._toneMapping === LinearToneMapping ) this.material.defines.LINEAR_TONE_MAPPING = '';
+			else if ( this._toneMapping === ReinhardToneMapping ) this.material.defines.REINHARD_TONE_MAPPING = '';
+			else if ( this._toneMapping === CineonToneMapping ) this.material.defines.CINEON_TONE_MAPPING = '';
+			else if ( this._toneMapping === ACESFilmicToneMapping ) this.material.defines.ACES_FILMIC_TONE_MAPPING = '';
+
+			this.material.needsUpdate = true;
+
+		}
+
+		//
 
 		if ( this.renderToScreen === true ) {
 

examples/jsm/shaders/OutputShader.js

@@ -65,7 +65,11 @@ const OutputShader = {
 
 			// color space
 
-			gl_FragColor = LinearTosRGB( gl_FragColor );
+			#ifdef SRGB_COLOR_SPACE
+
+				gl_FragColor = LinearTosRGB( gl_FragColor );
+
+			#endif
 
 		}`
 

examples/webgl_postprocessing_3dlut.html

@@ -124,13 +124,14 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.useLegacyLights = false;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				container.appendChild( renderer.domElement );
 
 				composer = new EffectComposer( renderer );
 				composer.setPixelRatio( window.devicePixelRatio );
 				composer.setSize( window.innerWidth, window.innerHeight );
 				composer.addPass( new RenderPass( scene, camera ) );
-				composer.addPass( new OutputPass( THREE.ACESFilmicToneMapping ) );
+				composer.addPass( new OutputPass() );
 
 				lutPass = new LUTPass();
 				composer.addPass( lutPass );

examples/webgl_postprocessing_unreal_bloom.html

@@ -75,6 +75,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
@@ -101,7 +102,7 @@
 				bloomPass.strength = params.strength;
 				bloomPass.radius = params.radius;
 
-				const outputPass = new OutputPass( THREE.ReinhardToneMapping );
+				const outputPass = new OutputPass();
 
 				composer = new EffectComposer( renderer );
 				composer.addPass( renderScene );
@@ -148,7 +149,7 @@
 
 				toneMappingFolder.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
 
-					outputPass.toneMappingExposure = Math.pow( value, 4.0 );
+					renderer.toneMappingExposure = Math.pow( value, 4.0 );
 
 				} );
 

examples/webgl_postprocessing_unreal_bloom_selective.html

@@ -86,6 +86,7 @@
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.useLegacyLights = false;
+			renderer.toneMapping = THREE.ReinhardToneMapping;
 			document.body.appendChild( renderer.domElement );
 
 			const scene = new THREE.Scene();
@@ -125,7 +126,7 @@
 			);
 			mixPass.needsSwap = true;
 
-			const outputPass = new OutputPass( THREE.ReinhardToneMapping );
+			const outputPass = new OutputPass();
 
 			const finalComposer = new EffectComposer( renderer );
 			finalComposer.addPass( renderScene );
@@ -167,7 +168,7 @@
 
 			toneMappingFolder.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
 
-				outputPass.toneMappingExposure = Math.pow( value, 4.0 );
+				renderer.toneMappingExposure = Math.pow( value, 4.0 );
 				render();
 
 			} );