Examples: Migrate post-processing demos to sRGB. (#26097)

* Examples: Migrate post-processing demos to sRGB.

* Examples: Update screenshots.

examples/jsm/postprocessing/BokehPass.js

@@ -66,7 +66,6 @@ class BokehPass extends Pass {
 		} );
 
 		this.uniforms = bokehUniforms;
-		this.needsSwap = false;
 
 		this.fsQuad = new FullScreenQuad( this.materialBokeh );
 

examples/webgl_points_dynamic.html

@@ -41,8 +41,7 @@
 			import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
 			import { FocusShader } from 'three/addons/shaders/FocusShader.js';
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let camera, scene, renderer, mesh;
 
@@ -123,12 +122,15 @@
 				effectFocus.uniforms[ 'screenWidth' ].value = window.innerWidth * window.devicePixelRatio;
 				effectFocus.uniforms[ 'screenHeight' ].value = window.innerHeight * window.devicePixelRatio;
 
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+
 				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectBloom );
 				composer.addPass( effectFilm );
 				composer.addPass( effectFocus );
+				composer.addPass( outputPass );
 
 				//stats
 				stats = new Stats();

examples/webgl_postprocessing.html

@@ -31,8 +31,7 @@
 
 			import { RGBShiftShader } from 'three/addons/shaders/RGBShiftShader.js';
 			import { DotScreenShader } from 'three/addons/shaders/DotScreenShader.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let camera, renderer, composer;
 			let object;
@@ -72,7 +71,7 @@
 
 				}
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
@@ -91,6 +90,9 @@
 				effect2.uniforms[ 'amount' ].value = 0.0015;
 				composer.addPass( effect2 );
 
+				const effect3 = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( effect3 );
+
 				//
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_postprocessing_advanced.html

@@ -53,8 +53,6 @@
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let composerScene, composer1, composer2, composer3, composer4;
@@ -301,7 +299,7 @@
 
 				const mat2 = new THREE.MeshPhongMaterial( {
 
-					color: 0x999999,
+					color: 0xcbcbcb,
 					specular: 0x080808,
 					shininess: 20,
 					map: diffuseMap,

examples/webgl_postprocessing_afterimage.html

@@ -30,8 +30,8 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let camera, scene, renderer, composer;
 			let mesh;
@@ -53,7 +53,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -75,6 +74,9 @@
 				afterimagePass = new AfterimagePass();
 				composer.addPass( afterimagePass );
 
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
+
 				window.addEventListener( 'resize', onWindowResize );
 
 				if ( typeof TESTING !== 'undefined' ) {

examples/webgl_postprocessing_backgrounds.html

@@ -40,7 +40,7 @@
 			import { CubeTexturePass } from 'three/addons/postprocessing/CubeTexturePass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { ClearPass } from 'three/addons/postprocessing/ClearPass.js';
-			import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let scene, renderer, composer;
@@ -168,6 +168,7 @@
 				const textureLoader = new THREE.TextureLoader();
 				textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
 
+					map.colorSpace = THREE.SRGBColorSpace;
 					texturePass.map = map;
 
 				} );
@@ -177,6 +178,7 @@
 				const ldrUrls = genCubeUrls( 'textures/cube/pisa/', '.png' );
 				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
 
+					ldrCubeMap.colorSpace = THREE.SRGBColorSpace;
 					cubeTexturePassP = new CubeTexturePass( cameraP, ldrCubeMap );
 					composer.insertPass( cubeTexturePassP, 2 );
 
@@ -186,8 +188,8 @@
 				renderPass.clear = false;
 				composer.addPass( renderPass );
 
-				const copyPass = new ShaderPass( CopyShader );
-				composer.addPass( copyPass );
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
 
 				const controls = new OrbitControls( cameraP, renderer.domElement );
 				controls.enableZoom = false;

examples/webgl_postprocessing_crossfade.html

@@ -299,6 +299,9 @@
 
 						'	}',
 
+						'	#include <tonemapping_fragment>',
+						'	#include <encodings_fragment>',
+
 						'}'
 
 					].join( '\n' )

examples/webgl_postprocessing_dof.html

@@ -36,6 +36,8 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let camera, scene, renderer, stats,
 				singleMaterial, zmaterial,
@@ -80,8 +82,9 @@
 				];
 
 				const textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube.colorSpace = THREE.SRGBColorSpace;
 
-				parameters = { color: 0xff1100, envMap: textureCube };
+				parameters = { color: 0xff4900, envMap: textureCube };
 				cubeMaterial = new THREE.MeshBasicMaterial( parameters );
 
 				singleMaterial = false;
@@ -210,10 +213,13 @@
 					maxblur: 0.01
 				} );
 
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+
 				const composer = new EffectComposer( renderer );
 
 				composer.addPass( renderPass );
 				composer.addPass( bokehPass );
+				composer.addPass( outputPass );
 
 				postprocessing.composer = composer;
 				postprocessing.bokeh = bokehPass;

examples/webgl_postprocessing_glitch.html

@@ -40,8 +40,8 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let camera, scene, renderer, composer;
 			let object, light;
@@ -99,7 +99,7 @@
 
 				}
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
@@ -113,6 +113,9 @@
 				glitchPass = new GlitchPass();
 				composer.addPass( glitchPass );
 
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
+
 
 				//
 

examples/webgl_postprocessing_masking.html

@@ -32,7 +32,7 @@
 			import { TexturePass } from 'three/addons/postprocessing/TexturePass.js';
 			import { ClearPass } from 'three/addons/postprocessing/ClearPass.js';
 			import { MaskPass, ClearMaskPass } from 'three/addons/postprocessing/MaskPass.js';
-			import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let camera, composer, renderer;
 			let box, torus;
@@ -71,13 +71,15 @@
 				const maskPass2 = new MaskPass( scene2, camera );
 
 				const texture1 = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg' );
+				texture1.colorSpace = THREE.SRGBColorSpace;
 				texture1.minFilter = THREE.LinearFilter;
 				const texture2 = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
+				texture2.colorSpace = THREE.SRGBColorSpace;
 
 				const texturePass1 = new TexturePass( texture1 );
 				const texturePass2 = new TexturePass( texture2 );
 
-				const outputPass = new ShaderPass( CopyShader );
+				const outputPass = new ShaderPass( GammaCorrectionShader );
 
 				const parameters = {
 					stencilBuffer: true

examples/webgl_postprocessing_outline.html

@@ -37,6 +37,7 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
 
 			let container, stats;
@@ -261,6 +262,9 @@
 
 				} );
 
+				const gammaPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( gammaPass );
+
 				effectFXAA = new ShaderPass( FXAAShader );
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
 				composer.addPass( effectFXAA );

examples/webgl_postprocessing_pixel.html

@@ -36,10 +36,10 @@
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 		import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
+		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+		import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		let camera, scene, renderer, composer, crystalMesh, clock;
 		let gui, params;
 
@@ -69,6 +69,9 @@
 			const renderPixelatedPass = new RenderPixelatedPass( 6, scene, camera );
 			composer.addPass( renderPixelatedPass );
 
+			const outputPass = new ShaderPass( GammaCorrectionShader );
+			composer.addPass( outputPass );
+
 			window.addEventListener( 'resize', onWindowResize );
 
 			const controls = new OrbitControls( camera, renderer.domElement );
@@ -130,8 +133,8 @@
 			crystalMesh = new THREE.Mesh(
 				geometry,
 				new THREE.MeshPhongMaterial( {
-					color: 0x2379cf,
-					emissive: 0x143542,
+					color: 0x68b7e9,
+					emissive: 0x4f7e8b,
 					shininess: 10,
 					specular: 0xffffff
 				} )
@@ -142,15 +145,15 @@
 
 			// lights
 
-			scene.add( new THREE.AmbientLight( 0x2d3645, 1.5 ) );
+			scene.add( new THREE.AmbientLight( 0x757f8e ) );
 
-			const directionalLight = new THREE.DirectionalLight( 0xfffc9c, .5 );
+			const directionalLight = new THREE.DirectionalLight( 0xfffecd, .5 );
 			directionalLight.position.set( 100, 100, 100 );
 			directionalLight.castShadow = true;
 			directionalLight.shadow.mapSize.set( 2048, 2048 );
 			scene.add( directionalLight );
 
-			const spotLight = new THREE.SpotLight( 0xff8800, 1, 10, Math.PI / 16, .02, 2 );
+			const spotLight = new THREE.SpotLight( 0xffc100, 1, 10, Math.PI / 16, .02, 2 );
 			spotLight.position.set( 2, 2, 0 );
 			const target = spotLight.target;
 			scene.add( target );
@@ -213,6 +216,7 @@
 			texture.generateMipmaps = false;
 			texture.wrapS = THREE.RepeatWrapping;
 			texture.wrapT = THREE.RepeatWrapping;
+			texture.colorSpace = THREE.SRGBColorSpace;
 			return texture;
 
 		}

examples/webgl_postprocessing_rgb_halftone.html

@@ -37,8 +37,6 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let renderer, clock, camera, stats;
 
 			const rotationSpeed = Math.PI / 64;

examples/webgl_postprocessing_sao.html

@@ -35,6 +35,8 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let container, stats;
 			let camera, scene, renderer;
@@ -67,19 +69,19 @@
 				group = new THREE.Object3D();
 				scene.add( group );
 
-				const light = new THREE.PointLight( 0xddffdd, 0.8 );
+				const light = new THREE.PointLight( 0xefffef, 0.8 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				const light2 = new THREE.PointLight( 0xffdddd, 0.8 );
+				const light2 = new THREE.PointLight( 0xffefef, 0.8 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				const light3 = new THREE.PointLight( 0xddddff, 0.8 );
+				const light3 = new THREE.PointLight( 0xefefff, 0.8 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
@@ -118,6 +120,8 @@
 				composer.addPass( renderPass );
 				saoPass = new SAOPass( scene, camera, false, true );
 				composer.addPass( saoPass );
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
 
 				// Init gui
 				const gui = new GUI();

examples/webgl_postprocessing_smaa.html

@@ -35,6 +35,9 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
+
 
 			let camera, scene, renderer, composer, stats;
 
@@ -69,6 +72,7 @@
 
 				const texture = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
 				texture.anisotropy = 4;
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				const material2 = new THREE.MeshBasicMaterial( { map: texture } );
 
@@ -84,6 +88,9 @@
 				const pass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
 				composer.addPass( pass );
 
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
+
 				window.addEventListener( 'resize', onWindowResize );
 
 			}

examples/webgl_postprocessing_sobel.html

@@ -72,7 +72,7 @@
 
 				//
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xe7e7e7, 0.4 );
 				scene.add( ambientLight );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );

examples/webgl_postprocessing_ssaa.html

@@ -38,16 +38,15 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
-			import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
-			let scene, renderer, composer, copyPass;
+			let scene, renderer, composer;
 			let cameraP, ssaaRenderPassP;
 			let cameraO, ssaaRenderPassO;
 			let gui, stats;
 
 			const params = {
 				sampleLevel: 4,
-				renderToScreen: false,
 				unbiased: true,
 				camera: 'perspective',
 				clearColor: 'black',
@@ -69,7 +68,6 @@
 				gui = new GUI();
 
 				gui.add( params, 'unbiased' );
-				gui.add( params, 'renderToScreen' );
 				gui.add( params, 'sampleLevel', {
 					'Level 0: 1 Sample': 0,
 					'Level 1: 2 Samples': 1,
@@ -123,19 +121,19 @@
 				const group = new THREE.Group();
 				scene.add( group );
 
-				const light = new THREE.PointLight( 0xddffdd, 1.0 );
+				const light = new THREE.PointLight( 0xefffef, 0.8 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				const light2 = new THREE.PointLight( 0xffdddd, 1.0 );
+				const light2 = new THREE.PointLight( 0xffefef, 0.8 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				const light3 = new THREE.PointLight( 0xddddff, 1.0 );
+				const light3 = new THREE.PointLight( 0xefefff, 0.8 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
@@ -174,8 +172,8 @@
 				composer.addPass( ssaaRenderPassP );
 				ssaaRenderPassO = new SSAARenderPass( scene, cameraO );
 				composer.addPass( ssaaRenderPassO );
-				copyPass = new ShaderPass( CopyShader );
-				composer.addPass( copyPass );
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -242,8 +240,6 @@
 				ssaaRenderPassP.enabled = ( params.camera === 'perspective' );
 				ssaaRenderPassO.enabled = ( params.camera === 'orthographic' );
 
-				copyPass.enabled = ! params.renderToScreen;
-
 				cameraP.view.offsetX = params.viewOffsetX;
 
 				composer.render();

examples/webgl_postprocessing_ssao.html

@@ -38,8 +38,8 @@
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let container, stats;
 			let camera, scene, renderer;
@@ -103,6 +103,9 @@
 				ssaoPass.kernelRadius = 16;
 				composer.addPass( ssaoPass );
 
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
+
 				// Init gui
 				const gui = new GUI();
 

examples/webgl_postprocessing_ssr.html

@@ -46,8 +46,6 @@
 
 		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		const params = {
 			enableSSR: true,
 			autoRotate: true,
@@ -86,7 +84,7 @@
 			// Ground
 			const plane = new THREE.Mesh(
 				new THREE.PlaneGeometry( 8, 8 ),
-				new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+				new THREE.MeshPhongMaterial( { color: 0xcbcbcb } )
 			);
 			plane.rotation.x = - Math.PI / 2;
 			plane.position.y = - 0.0001;
@@ -94,7 +92,7 @@
 			scene.add( plane );
 
 			// Lights
-			const hemiLight = new THREE.HemisphereLight( 0x443333, 0x111122 );
+			const hemiLight = new THREE.HemisphereLight( 0x8d7c7c, 0x494966 );
 			scene.add( hemiLight );
 
 			const spotLight = new THREE.SpotLight();
@@ -108,7 +106,7 @@
 
 				geometry.computeVertexNormals();
 
-				const material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
+				const material = new THREE.MeshStandardMaterial( { color: 0xa5a5a5 } );
 				const mesh = new THREE.Mesh( geometry, material );
 				mesh.position.y = - 0.0365;
 				scene.add( mesh );

examples/webgl_postprocessing_taa.html

@@ -40,9 +40,9 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
-			import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
-			let camera, scene, renderer, composer, copyPass, taaRenderPass, renderPass;
+			let camera, scene, renderer, composer, taaRenderPass, renderPass;
 			let gui, stats;
 			let index = 0;
 
@@ -125,6 +125,7 @@
 				texture.magFilter = THREE.NearestFilter;
 				texture.anisotropy = 1;
 				texture.generateMipmaps = false;
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				const material2 = new THREE.MeshBasicMaterial( { map: texture } );
 
@@ -144,8 +145,8 @@
 				renderPass.enabled = false;
 				composer.addPass( renderPass );
 
-				copyPass = new ShaderPass( CopyShader );
-				composer.addPass( copyPass );
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+				composer.addPass( outputPass );
 
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgl_postprocessing_unreal_bloom.html

@@ -49,8 +49,8 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			let camera, stats;
 			let composer, renderer, mixer, clock;
@@ -76,7 +76,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				container.appendChild( renderer.domElement );
 
@@ -91,7 +90,7 @@
 				controls.minDistance = 1;
 				controls.maxDistance = 10;
 
-				scene.add( new THREE.AmbientLight( 0x404040 ) );
+				scene.add( new THREE.AmbientLight( 0x898989 ) );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 1 );
 				camera.add( pointLight );
@@ -103,9 +102,12 @@
 				bloomPass.strength = params.bloomStrength;
 				bloomPass.radius = params.bloomRadius;
 
+				const outputPass = new ShaderPass( GammaCorrectionShader );
+
 				composer = new EffectComposer( renderer );
 				composer.addPass( renderScene );
 				composer.addPass( bloomPass );
+				composer.addPass( outputPass );
 
 				new GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
 

examples/webgl_postprocessing_unreal_bloom_selective.html

@@ -65,8 +65,7 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			const ENTIRE_SCENE = 0, BLOOM_SCENE = 1;
 
@@ -87,7 +86,6 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 			renderer.toneMapping = THREE.ReinhardToneMapping;
 			document.body.appendChild( renderer.domElement );
 
@@ -103,7 +101,7 @@
 			controls.maxDistance = 100;
 			controls.addEventListener( 'change', render );
 
-			scene.add( new THREE.AmbientLight( 0x404040 ) );
+			scene.add( new THREE.AmbientLight( 0x898989 ) );
 
 			const renderScene = new RenderPass( scene, camera );
 
@@ -117,7 +115,7 @@
 			bloomComposer.addPass( renderScene );
 			bloomComposer.addPass( bloomPass );
 
-			const finalPass = new ShaderPass(
+			const mixPass = new ShaderPass(
 				new THREE.ShaderMaterial( {
 					uniforms: {
 						baseTexture: { value: null },
@@ -128,11 +126,14 @@
 					defines: {}
 				} ), 'baseTexture'
 			);
-			finalPass.needsSwap = true;
+			mixPass.needsSwap = true;
+
+			const outputPass = new ShaderPass( GammaCorrectionShader );
 
 			const finalComposer = new EffectComposer( renderer );
 			finalComposer.addPass( renderScene );
-			finalComposer.addPass( finalPass );
+			finalComposer.addPass( mixPass );
+			finalComposer.addPass( outputPass );
 
 			const raycaster = new THREE.Raycaster();