Examples: Clean up legacy .outputColorSpace = LinearSRGBColorSpace examples (#25849)

examples/jsm/loaders/LottieLoader.js

@@ -2,7 +2,8 @@ import {
 	FileLoader,
 	Loader,
 	CanvasTexture,
-	NearestFilter
+	NearestFilter,
+	SRGBColorSpace
 } from 'three';
 
 import lottie from '../libs/lottie_canvas.module.js';
@@ -21,6 +22,7 @@ class LottieLoader extends Loader {
 
 		const texture = new CanvasTexture();
 		texture.minFilter = NearestFilter;
+		texture.colorSpace = SRGBColorSpace;
 
 		const loader = new FileLoader( this.manager );
 		loader.setPath( this.path );

examples/jsm/loaders/VOXLoader.js

@@ -1,5 +1,6 @@
 import {
 	BufferGeometry,
+	Color,
 	Data3DTexture,
 	FileLoader,
 	Float32BufferAttribute,
@@ -8,7 +9,8 @@ import {
 	Mesh,
 	MeshStandardMaterial,
 	NearestFilter,
-	RedFormat
+	RedFormat,
+	SRGBColorSpace
 } from 'three';
 
 class VOXLoader extends Loader {
@@ -184,6 +186,8 @@ class VOXMesh extends Mesh {
 		const nz = [ 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0 ];
 		const pz = [ 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 1 ];
 
+		const _color = new Color();
+
 		function add( tile, x, y, z, r, g, b ) {
 
 			x -= size.x / 2;
@@ -192,8 +196,10 @@ class VOXMesh extends Mesh {
 
 			for ( let i = 0; i < 18; i += 3 ) {
 
+				_color.setRGB( r, g, b, SRGBColorSpace );
+
 				vertices.push( tile[ i + 0 ] + x, tile[ i + 1 ] + y, tile[ i + 2 ] + z );
-				colors.push( r, g, b );
+				colors.push( _color.r, _color.g, _color.b );
 
 			}
 

examples/misc_exporter_draco.html

@@ -34,6 +34,8 @@
 			import { DRACOExporter } from 'three/addons/exporters/DRACOExporter.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let scene, camera, renderer, exporter, mesh;
 
 			const params = {
@@ -73,7 +75,7 @@
 
 				const ground = new THREE.Mesh(
 					new THREE.PlaneGeometry( 2000, 2000 ),
-					new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
+					new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } )
 				);
 				ground.rotation.x = - Math.PI / 2;
 				ground.position.y = - 75;
@@ -100,7 +102,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;
 				document.body.appendChild( renderer.domElement );
 

examples/misc_exporter_stl.html

@@ -32,6 +32,8 @@
 			import { STLExporter } from 'three/addons/exporters/STLExporter.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let scene, camera, renderer, exporter, mesh;
 
 			const params = {
@@ -70,7 +72,7 @@
 
 				// ground
 
-				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
@@ -95,7 +97,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;
 				document.body.appendChild( renderer.domElement );
 

examples/physics_ammo_terrain.html

@@ -38,6 +38,8 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			// Heightfield parameters
 			const terrainWidthExtents = 100;
 			const terrainDepthExtents = 100;
@@ -97,7 +99,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/webgl2_materials_texture3d_partialupdate.html

@@ -39,6 +39,8 @@
 
 			}
 
+			THREE.ColorManagement.enabled = true;
+
 			const INITIAL_CLOUD_SIZE = 128;
 
 			let renderer, scene, camera;
@@ -85,7 +87,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -109,9 +110,12 @@
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, 1, 32 );
 
+				const skyMap = new THREE.CanvasTexture( canvas );
+				skyMap.colorSpace = THREE.SRGBColorSpace;
+
 				const sky = new THREE.Mesh(
 					new THREE.SphereGeometry( 10 ),
-					new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture( canvas ), side: THREE.BackSide } )
+					new THREE.MeshBasicMaterial( { map: skyMap, side: THREE.BackSide } )
 				);
 				scene.add( sky );
 
@@ -212,6 +216,10 @@
 						return sample1( coord + vec3( - step ) ) - sample1( coord + vec3( step ) );
 					}
 
+					vec4 linearToSRGB( in vec4 value ) {
+						return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
+					}
+
 					void main(){
 						vec3 rayDir = normalize( vDirection );
 						vec2 bounds = hitBox( vOrigin, rayDir );
@@ -256,7 +264,7 @@
 
 						}
 
-						color = ac;
+						color = linearToSRGB( ac );
 
 						if ( color.a == 0.0 ) discard;
 

examples/webgl2_volume_cloud.html

@@ -39,6 +39,8 @@
 
 			}
 
+			THREE.ColorManagement.enabled = true;
+
 			let renderer, scene, camera;
 			let mesh;
 
@@ -50,7 +52,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -74,9 +75,12 @@
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, 1, 32 );
 
+				const skyMap = new THREE.CanvasTexture( canvas );
+				skyMap.colorSpace = THREE.SRGBColorSpace;
+
 				const sky = new THREE.Mesh(
 					new THREE.SphereGeometry( 10 ),
-					new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture( canvas ), side: THREE.BackSide } )
+					new THREE.MeshBasicMaterial( { map: skyMap, side: THREE.BackSide } )
 				);
 				scene.add( sky );
 
@@ -194,6 +198,10 @@
 						return sample1( coord + vec3( - step ) ) - sample1( coord + vec3( step ) );
 					}
 
+					vec4 linearToSRGB( in vec4 value ) {
+						return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
+					}
+
 					void main(){
 						vec3 rayDir = normalize( vDirection );
 						vec2 bounds = hitBox( vOrigin, rayDir );
@@ -238,7 +246,7 @@
 
 						}
 
-						color = ac;
+						color = linearToSRGB( ac );
 
 						if ( color.a == 0.0 ) discard;
 

examples/webgl_buffergeometry_compression.html

@@ -36,6 +36,8 @@
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			const statsEnabled = true;
 
 			let container, stats, gui;
@@ -86,7 +88,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 );
 
 				//

examples/webgl_buffergeometry_indexed.html

@@ -31,6 +31,8 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, stats;
 
 			let mesh;
@@ -69,6 +71,8 @@
 				const halfSize = size / 2;
 				const segmentSize = size / segments;
 
+				const _color = new THREE.Color();
+
 				// generate vertices, normals and color data for a simple grid geometry
 
 				for ( let i = 0; i <= segments; i ++ ) {
@@ -85,7 +89,9 @@
 						const r = ( x / size ) + 0.5;
 						const g = ( y / size ) + 0.5;
 
-						colors.push( r, g, 1 );
+						_color.setRGB( r, g, 1, THREE.SRGBColorSpace );
+
+						colors.push( _color.r, _color.g, _color.b );
 
 					}
 
@@ -131,7 +137,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/webgl_framebuffer_texture.html

@@ -128,7 +128,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
+				renderer.outputColorSpace = THREE.LinearSRGBColorSpace; // TODO: Investigate use of FramebufferTexture.
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_loader_obj.html

@@ -31,6 +31,8 @@
 
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container;
 
 			let camera, scene, renderer;
@@ -86,6 +88,7 @@
 
 				const textureLoader = new THREE.TextureLoader( manager );
 				const texture = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				// model
 
@@ -114,7 +117,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove );

examples/webgl_loader_prwm.html

@@ -48,6 +48,8 @@
 
 			import { PRWMLoader } from 'three/addons/loaders/PRWMLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer;
 
 			let mouseX = 0, mouseY = 0;
@@ -146,7 +148,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 );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove );

examples/webgl_loader_texture_lottie.html

@@ -33,6 +33,8 @@
 			import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
 			import { LottieLoader } from 'three/addons/loaders/LottieLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let renderer, scene, camera;
 			let mesh;
 
@@ -54,6 +56,7 @@
 					setupControls( texture.animation );
 
 					// texture = new THREE.TextureLoader().load( 'textures/uv_grid_directx.jpg' );
+					// texture.colorSpace = THREE.SRGBColorSpace;
 
 					const geometry = new RoundedBoxGeometry( 1, 1, 1, 7, 0.2 );
 					const material = new THREE.MeshStandardMaterial( { roughness: 0.1, map: texture } );
@@ -63,7 +66,6 @@
 				} );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_loader_vox.html

@@ -32,6 +32,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { VOXLoader, VOXMesh } from 'three/addons/loaders/VOXLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, controls, scene, renderer;
 
 			init();
@@ -47,7 +49,7 @@
 
 				// light
 
-				const hemiLight = new THREE.HemisphereLight( 0x888888, 0x444444, 1 );
+				const hemiLight = new THREE.HemisphereLight( 0xcccccc, 0x444444, 1 );
 				scene.add( hemiLight );
 
 				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
@@ -78,7 +80,6 @@
 				// renderer
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_materials_texture_anisotropy.html

@@ -72,6 +72,8 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			const SCREEN_WIDTH = window.innerWidth;
 			const SCREEN_HEIGHT = window.innerHeight;
 
@@ -128,6 +130,7 @@
 				const texture1 = textureLoader.load( 'textures/crate.gif' );
 				const material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
+				texture1.colorSpace = THREE.SRGBColorSpace;
 				texture1.anisotropy = maxAnisotropy;
 				texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;
 				texture1.repeat.set( 512, 512 );
@@ -135,6 +138,7 @@
 				const texture2 = textureLoader.load( 'textures/crate.gif' );
 				const material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
 
+				texture2.colorSpace = THREE.SRGBColorSpace;
 				texture2.anisotropy = 1;
 				texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
 				texture2.repeat.set( 512, 512 );
@@ -168,7 +172,6 @@
 
 				// RENDERER
 
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.autoClear = false;