Examples: Updates for color management (pt4) (#25907)

* Examples: Update more examples for color management.

* Examples: Update more examples for color management.

* Update webgl_materials_blending.html

---------

Co-authored-by: Michael Herzog <[email protected]>

examples/webgl_materials.html

@@ -30,8 +30,6 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let stats;
 
 			let camera, scene, renderer;
@@ -61,6 +59,7 @@
 				// Materials
 
 				const texture = new THREE.Texture( generateTexture() );
+				texture.colorSpace = THREE.SRGBColorSpace;
 				texture.needsUpdate = true;
 
 				materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
@@ -110,7 +109,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_materials_blending.html

@@ -25,8 +25,6 @@
 
 			import * as THREE from 'three';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer;
 			let mapBg;
 
@@ -63,6 +61,7 @@
 				ctx.fillRect( 96, 96, 32, 32 );
 
 				mapBg = new THREE.CanvasTexture( canvas );
+				mapBg.colorSpace = THREE.SRGBColorSpace;
 				mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
 				mapBg.repeat.set( 64, 32 );
 
@@ -78,11 +77,13 @@
 					{ name: 'Multiply', constant: THREE.MultiplyBlending }
 				];
 
-				const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
-				const map1 = textureLoader.load( 'textures/sprite0.jpg' );
-				const map2 = textureLoader.load( 'textures/sprite0.png' );
-				const map3 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
-				const map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png' );
+				const assignSRGB = ( texture ) => { texture.colorSpace = THREE.SRGBColorSpace; };
+
+				const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg', assignSRGB );
+				const map1 = textureLoader.load( 'textures/sprite0.jpg', assignSRGB );
+				const map2 = textureLoader.load( 'textures/sprite0.png', assignSRGB );
+				const map3 = textureLoader.load( 'textures/lensflare/lensflare0.png', assignSRGB );
+				const map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png', assignSRGB );
 
 				const geo1 = new THREE.PlaneGeometry( 100, 100 );
 				const geo2 = new THREE.PlaneGeometry( 100, 25 );
@@ -121,7 +122,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 );
@@ -162,6 +162,7 @@
 				ctx.fillText( text, 10, 22 );
 
 				const map = new THREE.CanvasTexture( canvas );
+				map.colorSpace = THREE.SRGBColorSpace;
 
 				const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
 

examples/webgl_materials_blending_custom.html

@@ -27,8 +27,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;
 
 			let mapBg;
@@ -71,6 +69,7 @@
 				ctx.fillRect( 96, 96, 32, 32 );
 
 				mapBg = new THREE.CanvasTexture( canvas );
+				mapBg.colorSpace = THREE.SRGBColorSpace;
 				mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
 				mapBg.repeat.set( 64, 32 );
 
@@ -109,6 +108,7 @@
 				const geo2 = new THREE.PlaneGeometry( 100, 25 );
 
 				const texture = new THREE.TextureLoader().load( 'textures/lensflare/lensflare0_alpha.png' );
+				texture.colorSpace = THREE.SRGBColorSpace;
 
 				for ( let i = 0; i < dst.length; i ++ ) {
 
@@ -177,7 +177,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 );
@@ -224,6 +223,7 @@
 				ctx.fillText( text, 8, 22 );
 
 				const map = new THREE.CanvasTexture( canvas );
+				map.colorSpace = THREE.SRGBColorSpace;
 
 				const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
 				return material;

examples/webgl_materials_cubemap.html

@@ -65,7 +65,9 @@
 				];
 
 				const reflectionCube = new THREE.CubeTextureLoader().load( urls );
+				reflectionCube.colorSpace = THREE.SRGBColorSpace;
 				const refractionCube = new THREE.CubeTextureLoader().load( urls );
+				refractionCube.colorSpace = THREE.SRGBColorSpace;
 				refractionCube.mapping = THREE.CubeRefractionMapping;
 
 				scene = new THREE.Scene();
@@ -109,7 +111,6 @@
 
 				//renderer
 				renderer = new THREE.WebGLRenderer();
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_materials_cubemap_mipmaps.html

@@ -34,8 +34,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container;
 
 			let camera, scene, renderer;
@@ -93,6 +91,7 @@
 
 				const customizedCubeTexture = mipmaps.shift();
 				customizedCubeTexture.mipmaps = mipmaps;
+				customizedCubeTexture.colorSpace = THREE.SRGBColorSpace;
 				customizedCubeTexture.minFilter = THREE.LinearMipMapLinearFilter;
 				customizedCubeTexture.magFilter = THREE.LinearFilter;
 				customizedCubeTexture.generateMipmaps = false;
@@ -145,7 +144,6 @@
 
 				//renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_materials_cubemap_refraction.html

@@ -35,8 +35,6 @@
 
 			import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -70,6 +68,7 @@
 				];
 
 				const textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube.colorSpace = THREE.SRGBColorSpace;
 				textureCube.mapping = THREE.CubeRefractionMapping;
 
 				scene = new THREE.Scene();
@@ -100,7 +99,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_materials_texture_filters.html

@@ -60,8 +60,6 @@
 
 			import * as THREE from 'three';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const SCREEN_WIDTH = window.innerWidth;
 			const SCREEN_HEIGHT = window.innerHeight;
 
@@ -109,6 +107,7 @@
 				context.fillRect( 64, 64, 64, 64 );
 
 				const textureCanvas = new THREE.CanvasTexture( imageCanvas );
+				textureCanvas.colorSpace = THREE.SRGBColorSpace;
 				textureCanvas.repeat.set( 1000, 1000 );
 				textureCanvas.wrapS = THREE.RepeatWrapping;
 				textureCanvas.wrapT = THREE.RepeatWrapping;
@@ -117,7 +116,7 @@
 				textureCanvas2.magFilter = THREE.NearestFilter;
 				textureCanvas2.minFilter = THREE.NearestFilter;
 
-				const	materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
+				const materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
 				const materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
 				const geometry = new THREE.PlaneGeometry( 100, 100 );
@@ -181,16 +180,18 @@
 
 				const texturePainting = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg', callbackPainting );
 				const texturePainting2 = new THREE.Texture();
+
 				const materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
 				const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
+				texturePainting.colorSpace = THREE.SRGBColorSpace;
+				texturePainting2.colorSpace = THREE.SRGBColorSpace;
 				texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
 				texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;
 				texturePainting.mapping = THREE.UVMapping;
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.autoClear = false;

examples/webgl_materials_texture_manualmipmap.html

@@ -60,8 +60,6 @@
 
 			import * as THREE from 'three';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const SCREEN_WIDTH = window.innerWidth;
 			const SCREEN_HEIGHT = window.innerHeight;
 
@@ -123,6 +121,7 @@
 				textureCanvas1.mipmaps[ 5 ] = mipmap( 4, '#004' );
 				textureCanvas1.mipmaps[ 6 ] = mipmap( 2, '#044' );
 				textureCanvas1.mipmaps[ 7 ] = mipmap( 1, '#404' );
+				textureCanvas1.colorSpace = THREE.SRGBColorSpace;
 				textureCanvas1.repeat.set( 1000, 1000 );
 				textureCanvas1.wrapS = THREE.RepeatWrapping;
 				textureCanvas1.wrapT = THREE.RepeatWrapping;
@@ -198,12 +197,13 @@
 				const materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } );
 				const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
+				texturePainting1.colorSpace = THREE.SRGBColorSpace;
+				texturePainting2.colorSpace = THREE.SRGBColorSpace;
 				texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
 				texturePainting1.minFilter = texturePainting1.magFilter = THREE.LinearFilter;
 				texturePainting1.mapping = THREE.UVMapping;
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.autoClear = false;

examples/webgl_materials_wireframe.html

@@ -68,8 +68,6 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const API = {
 				thickness: 1
 			};
@@ -81,7 +79,6 @@
 			function init() {
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_modifier_curve.html

@@ -35,8 +35,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const ACTION_SELECT = 1, ACTION_NONE = 0;
 			const curveHandles = [];
 			const mouse = new THREE.Vector2();
@@ -144,7 +142,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_modifier_curve_instanced.html

@@ -35,8 +35,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const ACTION_SELECT = 1, ACTION_NONE = 0;
 			const curveHandles = [];
 			const mouse = new THREE.Vector2();
@@ -170,7 +168,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_modifier_edgesplit.html

@@ -32,8 +32,6 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let renderer, scene, camera;
 			let modifier, mesh, baseGeometry;
 			let map;
@@ -59,7 +57,6 @@
 				document.body.appendChild( info );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -112,6 +109,7 @@
 				new THREE.TextureLoader().load( './models/obj/cerberus/Cerberus_A.jpg', function ( texture ) {
 
 					map = texture;
+					map.colorSpace = THREE.SRGBColorSpace;
 
 					if ( mesh !== undefined && params.showMap ) {
 

examples/webgl_modifier_simplifier.html

@@ -29,8 +29,6 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { SimplifyModifier } from 'three/addons/modifiers/SimplifyModifier.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let renderer, scene, camera;
 
 			init();
@@ -46,7 +44,6 @@
 				document.body.appendChild( info );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_multiple_canvases_circle.html

@@ -147,8 +147,6 @@
 	<script type="module">
 		import * as THREE from 'three';
 
-		THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 		const views = [];
 
 		let scene, renderer;
@@ -239,6 +237,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 );
@@ -266,7 +265,7 @@
 
 			for ( let i = 0; i < count; i ++ ) {
 
-				color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
+				color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5, THREE.SRGBColorSpace );
 
 				colors.setXYZ( i, color.r, color.g, color.b );
 
@@ -294,7 +293,6 @@
 			}
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( 200, 300 );
 

examples/webgl_multiple_canvases_complex.html

@@ -65,8 +65,6 @@
 
 			import * as THREE from 'three';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const views = [];
 
 			let scene, renderer;
@@ -146,6 +144,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 );
@@ -188,13 +187,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 );
 
 				}
@@ -227,7 +226,6 @@
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( fullWidth, fullHeight );
 

examples/webgl_multiple_canvases_grid.html

@@ -82,8 +82,6 @@
 
 			import * as THREE from 'three';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const views = [];
 
 			let scene, renderer;
@@ -166,6 +164,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 );
@@ -209,13 +208,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 );
 
 				}
@@ -248,7 +247,6 @@
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( 300, 200 );
 

examples/webgl_multiple_elements_text.html

@@ -98,8 +98,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			const scenes = [];
 
 			const clock = new THREE.Clock();
@@ -121,7 +119,6 @@
 				canvas = document.getElementById( 'c' );
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				views = document.querySelectorAll( '.view' );
@@ -180,6 +177,7 @@
 					context.fillStyle = colors[ index ];
 					context.fill();
 					const texture = new THREE.CanvasTexture( canvas2 );
+					texture.colorSpace = THREE.SRGBColorSpace;
 
 					const material = new THREE.PointsMaterial( { size: size, map: texture, transparent: true, alphaTest: 0.1 } );