Examples: Update more examples for color management. (#25912)

examples/webgl_geometry_minecraft.html

@@ -43,8 +43,6 @@
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 			import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container, stats;
 
 			let camera, controls, scene, renderer;
@@ -157,22 +155,22 @@
 				geometry.computeBoundingSphere();
 
 				const texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
+				texture.colorSpace = THREE.SRGBColorSpace;
 				texture.magFilter = THREE.NearestFilter;
 
 				const mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
 				scene.add( mesh );
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc );
+				const ambientLight = new THREE.AmbientLight( 0xeeeeee );
 				scene.add( ambientLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 4 );
 				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				controls = new FirstPersonControls( camera, renderer.domElement );

examples/webgl_geometry_text.html

@@ -36,7 +36,6 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			THREE.Cache.enabled = true;
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
 
 			let container;
 
@@ -156,7 +155,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				// EVENTS

examples/webgl_gpgpu_birds_gltf.html

@@ -228,8 +228,6 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			/* TEXTURE WIDTH FOR SIMULATION */
 			const WIDTH = 64;
 			const BIRDS = WIDTH * WIDTH;
@@ -382,21 +380,20 @@
 				// LIGHTS
 
 				const hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 );
-				hemiLight.color.setHSL( 0.6, 1, 0.6 );
-				hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
+				hemiLight.color.setHSL( 0.6, 1, 0.6, THREE.SRGBColorSpace );
+				hemiLight.groundColor.setHSL( 0.095, 1, 0.75, THREE.SRGBColorSpace );
 				hemiLight.position.set( 0, 50, 0 );
 				scene.add( hemiLight );
 
 				const dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 );
-				dirLight.color.setHSL( 0.1, 1, 0.95 );
+				dirLight.color.setHSL( 0.1, 1, 0.95, THREE.SRGBColorSpace );
 				dirLight.position.set( - 1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 30 );
 				scene.add( dirLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				initComputeRenderer();

examples/webgl_gpgpu_protoplanet.html

@@ -251,8 +251,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			// Texture width for simulation (each texel is a debris particle)
 			const WIDTH = 64;
 
@@ -285,7 +283,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_gpgpu_water.html

@@ -267,8 +267,6 @@
 			import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
 			import { SimplexNoise } from 'three/addons/math/SimplexNoise.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			// Texture width for simulation
 			const WIDTH = 128;
 
@@ -324,7 +322,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webgl_multiple_renderers.html

@@ -36,8 +36,6 @@
 
 			import * as THREE from 'three';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer1, renderer2;
 
 			let mesh1, mesh2, mesh3;
@@ -76,6 +74,7 @@
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
 				const shadowTexture = new THREE.CanvasTexture( canvas );
+				shadowTexture.colorSpace = THREE.SRGBColorSpace;
 
 				const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 				const shadowGeo = new THREE.PlaneGeometry( 300, 300, 1, 1 );
@@ -118,13 +117,13 @@
 
 				for ( let i = 0; i < count; i ++ ) {
 
-					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
+					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5, THREE.SRGBColorSpace );
 					colors1.setXYZ( i, color.r, color.g, color.b );
 
-					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
+					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5, THREE.SRGBColorSpace );
 					colors2.setXYZ( i, color.r, color.g, color.b );
 
-					color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 );
+					color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0, THREE.SRGBColorSpace );
 					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}
@@ -164,13 +163,11 @@
 				renderer1 = new THREE.WebGLRenderer( { antialias: true } );
 				renderer1.setPixelRatio( window.devicePixelRatio );
 				renderer1.setSize( window.innerWidth, window.innerHeight / 2 );
-				renderer1.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer1.domElement );
 
 				renderer2 = new THREE.WebGLRenderer();
 				renderer2.setPixelRatio( window.devicePixelRatio );
 				renderer2.setSize( window.innerWidth, window.innerHeight / 2 );
-				renderer2.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer2.domElement );
 
 			}
@@ -197,7 +194,7 @@
 
 					position.fromArray( positions.array, i * 3 );
 
-					color.setRGB( 1, Math.sin( time + position.x ), Math.cos( time * 2.123 + position.x ) );
+					color.setRGB( 1, Math.sin( time + position.x ), Math.cos( time * 2.123 + position.x ), THREE.SRGBColorSpace );
 					colors.setXYZ( i, color.r, color.g, color.b );
 
 				}

examples/webgl_nodes_points.html

@@ -41,8 +41,6 @@
 
 			import { nodeFrame } from 'three/addons/renderers/webgl/nodes/WebGLNodes.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, stats;
 
 			init();
@@ -78,7 +76,7 @@
 
 					speed.push( 20 + Math.random() * 50 );
 
-					intensity.push( Math.random() * .15 );
+					intensity.push( Math.random() * .04 );
 
 					size.push( 30 + Math.random() * 230 );
 
@@ -95,6 +93,7 @@
 				// Forked from: https://answers.unrealengine.com/questions/143267/emergency-need-help-with-fire-fx-weird-loop.html
 
 				const fireMap = new THREE.TextureLoader().load( 'textures/sprites/firetorch_1.jpg' );
+				fireMap.colorSpace = THREE.SRGBColorSpace;
 
 				// nodes
 
@@ -139,7 +138,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				// stats

examples/webgl_points_billboards.html

@@ -33,8 +33,6 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, stats, material;
 			let mouseX = 0, mouseY = 0;
 
@@ -56,6 +54,7 @@
 				const vertices = [];
 
 				const sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
+				sprite.colorSpace = THREE.SRGBColorSpace;
 
 				for ( let i = 0; i < 10000; i ++ ) {
 
@@ -70,7 +69,7 @@
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
 				material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } );
-				material.color.setHSL( 1.0, 0.3, 0.7 );
+				material.color.setHSL( 1.0, 0.3, 0.7, THREE.SRGBColorSpace );
 
 				const particles = new THREE.Points( geometry, material );
 				scene.add( particles );
@@ -80,7 +79,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/webgl_points_sprites.html

@@ -34,8 +34,6 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, stats, parameters;
 			let mouseX = 0, mouseY = 0;
 
@@ -60,11 +58,13 @@
 
 				const textureLoader = new THREE.TextureLoader();
 
-				const sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
-				const sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
-				const sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' );
-				const sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' );
-				const sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' );
+				const assignSRGB = ( texture ) => { texture.colorSpace = THREE.SRGBColorSpace; };
+
+				const sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png', assignSRGB );
+				const sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png', assignSRGB );
+				const sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png', assignSRGB );
+				const sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png', assignSRGB );
+				const sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png', assignSRGB );
 
 				for ( let i = 0; i < 10000; i ++ ) {
 
@@ -93,7 +93,7 @@
 					const size = parameters[ i ][ 2 ];
 
 					materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
-					materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
+					materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ], THREE.SRGBColorSpace );
 
 					const particles = new THREE.Points( geometry, materials[ i ] );
 
@@ -110,7 +110,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -206,7 +205,7 @@
 					const color = parameters[ i ][ 0 ];
 
 					const h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
-					materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
+					materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ], THREE.SRGBColorSpace );
 
 				}
 

examples/webgl_portal.html

@@ -40,8 +40,6 @@
 			import * as CameraUtils from 'three/addons/utils/CameraUtils.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer;
 
 			let cameraControls;
@@ -60,7 +58,7 @@
 
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_shadowmap_viewer.html

@@ -33,8 +33,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, clock, stats;
 			let dirLight, spotLight;
 			let torusKnot, cube;
@@ -146,7 +144,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.BasicShadowMap;
 

examples/webgl_shadowmap_vsm.html

@@ -33,8 +33,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, clock, stats;
 			let dirLight, spotLight;
 			let torusKnot, dirGroup;
@@ -191,7 +189,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.VSMShadowMap;
 

examples/webgpu_shadowmap.html

@@ -34,8 +34,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, clock;
 			let dirLight, spotLight;
 			let torusKnot, dirGroup;
@@ -148,7 +146,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				// Mouse control