WebGLRenderer: Use inline tone mapping only when rendering to screen. (#26371)

* WebGLRenderer: Use inline tone mapping only when rendering to screen.

* Examples: Fix 3Dlut demo.

* Examples: Update screenshots.

* Examples: Update screenshots.

* WebGLRenderer: Fix tone mapping check for WebXR.

* WebGLRenderer: Simplify tone mapping check.

examples/jsm/postprocessing/OutputPass.js

@@ -1,5 +1,5 @@
 import {
-	ShaderMaterial,
+	RawShaderMaterial,
 	UniformsUtils,
 	NoToneMapping,
 	LinearToneMapping,
@@ -25,7 +25,7 @@ class OutputPass extends Pass {
 
 		this.uniforms = UniformsUtils.clone( shader.uniforms );
 
-		this.material = new ShaderMaterial( {
+		this.material = new RawShaderMaterial( {
 			uniforms: this.uniforms,
 			vertexShader: shader.vertexShader,
 			fragmentShader: shader.fragmentShader

examples/jsm/shaders/OutputShader.js

@@ -1,3 +1,7 @@
+import {
+	ShaderChunk
+} from 'three';
+
 const OutputShader = {
 
 	uniforms: {
@@ -8,6 +12,13 @@ const OutputShader = {
 	},
 
 	vertexShader: /* glsl */`
+		precision highp float;
+
+		uniform mat4 modelViewMatrix;
+		uniform mat4 projectionMatrix;
+
+		attribute vec3 position;
+		attribute vec2 uv;
 
 		varying vec2 vUv;
 
@@ -19,10 +30,12 @@ const OutputShader = {
 		}`,
 
 	fragmentShader: /* glsl */`
+	
+		precision highp float;
 
 		uniform sampler2D tDiffuse;
 
-		#include <tonemapping_pars_fragment>
+		` + ShaderChunk[ 'tonemapping_pars_fragment' ] + ShaderChunk[ 'colorspace_pars_fragment' ] + `
 
 		varying vec2 vUv;
 

examples/webgl_postprocessing_3dlut.html

@@ -37,11 +37,10 @@
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 			import { LUTPass } from 'three/addons/postprocessing/LUTPass.js';
 			import { LUTCubeLoader } from 'three/addons/loaders/LUTCubeLoader.js';
 			import { LUT3dlLoader } from 'three/addons/loaders/LUT3dlLoader.js';
-			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			const params = {
@@ -125,22 +124,13 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.useLegacyLights = false;
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1;
 				container.appendChild( renderer.domElement );
 
-				const target = new THREE.WebGLRenderTarget( {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBAFormat,
-					colorSpace: THREE.SRGBColorSpace
-				} );
-
-				composer = new EffectComposer( renderer, target );
+				composer = new EffectComposer( renderer );
 				composer.setPixelRatio( window.devicePixelRatio );
 				composer.setSize( window.innerWidth, window.innerHeight );
 				composer.addPass( new RenderPass( scene, camera ) );
-				composer.addPass( new ShaderPass( GammaCorrectionShader ) );
+				composer.addPass( new OutputPass( THREE.ACESFilmicToneMapping ) );
 
 				lutPass = new LUTPass();
 				composer.addPass( lutPass );

src/renderers/WebGLRenderer.js

@@ -1629,7 +1629,18 @@ class WebGLRenderer {
 			const morphTargets = !! geometry.morphAttributes.position;
 			const morphNormals = !! geometry.morphAttributes.normal;
 			const morphColors = !! geometry.morphAttributes.color;
-			const toneMapping = material.toneMapped ? _this.toneMapping : NoToneMapping;
+
+			let toneMapping = NoToneMapping;
+
+			if ( material.toneMapped ) {
+
+				if ( _currentRenderTarget === null || _currentRenderTarget.isXRRenderTarget === true ) {
+
+					toneMapping = _this.toneMapping;
+
+				}
+
+			}
 
 			const morphAttribute = geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color;
 			const morphTargetsCount = ( morphAttribute !== undefined ) ? morphAttribute.length : 0;

src/renderers/webgl/WebGLPrograms.js

@@ -160,6 +160,18 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 		const HAS_ATTRIBUTE_UV2 = !! geometry.attributes.uv2;
 		const HAS_ATTRIBUTE_UV3 = !! geometry.attributes.uv3;
 
+		let toneMapping = NoToneMapping;
+
+		if ( material.toneMapped ) {
+
+			if ( currentRenderTarget === null || currentRenderTarget.isXRRenderTarget === true ) {
+
+				toneMapping = renderer.toneMapping;
+
+			}
+
+		}
+
 		const parameters = {
 
 			isWebGL2: IS_WEBGL2,
@@ -320,7 +332,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			shadowMapEnabled: renderer.shadowMap.enabled && shadows.length > 0,
 			shadowMapType: renderer.shadowMap.type,
 
-			toneMapping: material.toneMapped ? renderer.toneMapping : NoToneMapping,
+			toneMapping: toneMapping,
 			useLegacyLights: renderer.useLegacyLights,
 
 			premultipliedAlpha: material.premultipliedAlpha,