diff --git a/examples/jsm/postprocessing/OutputPass.js b/examples/jsm/postprocessing/OutputPass.js index b6df3dcd6b93c2..d2207624d9ed95 100644 --- a/examples/jsm/postprocessing/OutputPass.js +++ b/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 ) { diff --git a/examples/jsm/shaders/OutputShader.js b/examples/jsm/shaders/OutputShader.js index 151fe6c01bfb3c..d15c4dd143aef8 100644 --- a/examples/jsm/shaders/OutputShader.js +++ b/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 }` diff --git a/examples/webgl_postprocessing_3dlut.html b/examples/webgl_postprocessing_3dlut.html index 65bf3fff79d6a2..c3b6e51e935753 100644 --- a/examples/webgl_postprocessing_3dlut.html +++ b/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 ); diff --git a/examples/webgl_postprocessing_unreal_bloom.html b/examples/webgl_postprocessing_unreal_bloom.html index af1c37ba5a0276..062b667fbdc040 100644 --- a/examples/webgl_postprocessing_unreal_bloom.html +++ b/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 ); } ); diff --git a/examples/webgl_postprocessing_unreal_bloom_selective.html b/examples/webgl_postprocessing_unreal_bloom_selective.html index 0240103b69b0ec..27eea9f74815e7 100644 --- a/examples/webgl_postprocessing_unreal_bloom_selective.html +++ b/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(); } );