Examples: Updates for color management (pt3) (#25889)

* LWOLoader: Updates for color management
* MMDLoader: Updates for color management
* Examples: Update more loader examples for color management

---------

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

examples/jsm/loaders/LWOLoader.js

@@ -35,6 +35,7 @@ import {
 	Points,
 	PointsMaterial,
 	RepeatWrapping,
+	SRGBColorSpace,
 	TextureLoader,
 	Vector2
 } from 'three';
@@ -464,6 +465,7 @@ class MaterialParser {
 
 				case 'Color':
 					maps.map = texture;
+					maps.map.colorSpace = SRGBColorSpace;
 					break;
 				case 'Roughness':
 					maps.roughnessMap = texture;
@@ -471,10 +473,12 @@ class MaterialParser {
 					break;
 				case 'Specular':
 					maps.specularMap = texture;
+					maps.specularMap.colorSpace = SRGBColorSpace;
 					maps.specular = 0xffffff;
 					break;
 				case 'Luminous':
 					maps.emissiveMap = texture;
+					maps.emissiveMap.colorSpace = SRGBColorSpace;
 					maps.emissive = 0x808080;
 					break;
 				case 'Luminous Color':
@@ -532,6 +536,7 @@ class MaterialParser {
 
 					case 'Color':
 						maps.map = texture;
+						maps.map.colorSpace = SRGBColorSpace;
 						break;
 					case 'Diffuse':
 						maps.aoMap = texture;
@@ -542,10 +547,12 @@ class MaterialParser {
 						break;
 					case 'Specular':
 						maps.specularMap = texture;
+						maps.specularMap.colorSpace = SRGBColorSpace;
 						maps.specular = 0xffffff;
 						break;
 					case 'Luminosity':
 						maps.emissiveMap = texture;
+						maps.emissiveMap.colorSpace = SRGBColorSpace;
 						maps.emissive = 0x808080;
 						break;
 					case 'Metallic':
@@ -581,7 +588,11 @@ class MaterialParser {
 
 			params.color = new Color().fromArray( attributes.Color.value );
 
-		} else params.color = new Color();
+		} else {
+
+			params.color = new Color();
+
+		}
 
 
 		if ( attributes.Transparency && attributes.Transparency.value !== 0 ) {

examples/jsm/loaders/MMDLoader.js

@@ -4,6 +4,7 @@ import {
 	Bone,
 	BufferGeometry,
 	Color,
+	ColorManagement,
 	CustomBlending,
 	TangentSpaceNormalMap,
 	DoubleSide,
@@ -1108,6 +1109,14 @@ class MaterialBuilder {
 			params.emissive = new Color().fromArray( material.ambient );
 			params.transparent = params.opacity !== 1.0;
 
+			if ( ColorManagement.enabled === true ) {
+
+				params.diffuse.convertSRGBToLinear();
+				params.specular.convertSRGBToLinear();
+				params.emissive.convertSRGBToLinear();
+
+			}
+
 			//
 
 			params.fog = true;

examples/webgl_geometry_extrude_shapes2.html

@@ -38,8 +38,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			// From d3-threeD.js
 			/* This Source Code Form is subject to the terms of the Mozilla Public
 			 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -443,7 +441,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_loader_collada_kinematics.html

@@ -34,8 +34,6 @@
 			import TWEEN from 'three/addons/libs/tween.module.js';
 			import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -84,7 +82,7 @@
 
 				// Grid
 
-				const grid = new THREE.GridHelper( 20, 20, 0x888888, 0x444444 );
+				const grid = new THREE.GridHelper( 20, 20, 0xc1c1c1, 0x8d8d8d );
 				scene.add( grid );
 
 				// Add the COLLADA
@@ -96,7 +94,7 @@
 
 				// Lights
 
-				const light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );
+				const light = new THREE.HemisphereLight( 0xfff7f7, 0x494966 );
 				scene.add( light );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 0.3 );

examples/webgl_loader_collada_skinning.html

@@ -36,8 +36,6 @@
 			import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats, clock, controls;
 			let camera, scene, renderer, mixer;
 
@@ -72,7 +70,7 @@
 
 				//
 
-				const gridHelper = new THREE.GridHelper( 10, 20, 0x888888, 0x444444 );
+				const gridHelper = new THREE.GridHelper( 10, 20, 0xc1c1c1, 0x8d8d8d );
 				scene.add( gridHelper );
 
 				//

examples/webgl_loader_kmz.html

@@ -32,8 +32,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { KMZLoader } from 'three/addons/loaders/KMZLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let camera, scene, renderer;
 
 			init();
@@ -55,7 +53,7 @@
 
 				scene.add( camera );
 
-				const grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x333333 );
+				const grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x7b7b7b );
 				scene.add( grid );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );

examples/webgl_loader_lwo.html

@@ -35,8 +35,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { LWOLoader } from 'three/addons/loaders/LWOLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let camera, scene, renderer;
 
 			init();
@@ -52,10 +50,10 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
 
-				const ambientLight = new THREE.AmbientLight( 0x222222 );
+				const ambientLight = new THREE.AmbientLight( 0x666666 );
 				scene.add( ambientLight );
 
-				const light1 = new THREE.DirectionalLight( 0x888888 );
+				const light1 = new THREE.DirectionalLight( 0xc1c1c1 );
 				light1.position.set( 0, 200, 100 );
 				scene.add( light1 );
 

examples/webgl_loader_md2_control.html

@@ -45,8 +45,6 @@
 			import { MD2CharacterComplex } from 'three/addons/misc/MD2CharacterComplex.js';
 			import { Gyroscope } from 'three/addons/misc/Gyroscope.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let SCREEN_WIDTH = window.innerWidth;
 			let SCREEN_HEIGHT = window.innerHeight;
 
@@ -92,7 +90,7 @@
 
 				// LIGHTS
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff, 2.25 );
 				light.position.set( 200, 450, 500 );

examples/webgl_loader_mmd.html

@@ -52,8 +52,6 @@
 			import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
 			import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let stats;
 
 			let mesh, camera, scene, renderer, effect;
@@ -88,10 +86,10 @@
 				gridHelper.position.y = - 10;
 				scene.add( gridHelper );
 
-				const ambient = new THREE.AmbientLight( 0x666666 );
+				const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 );
 				scene.add( ambient );
 
-				const directionalLight = new THREE.DirectionalLight( 0x887766 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -100,7 +98,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 );
 
 				effect = new OutlineEffect( renderer );

examples/webgl_loader_mmd_audio.html

@@ -53,8 +53,6 @@
 			import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
 			import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let mesh, camera, scene, renderer, effect;
 			let helper;
 
@@ -95,10 +93,10 @@
 				camera.add( listener );
 				scene.add( camera );
 
-				const ambient = new THREE.AmbientLight( 0x666666 );
+				const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 );
 				scene.add( ambient );
 
-				const directionalLight = new THREE.DirectionalLight( 0x887766 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -107,7 +105,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 );
 
 				effect = new OutlineEffect( renderer );

examples/webgl_loader_mmd_pose.html

@@ -50,8 +50,6 @@
 			import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
 			import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, effect;
 			let mesh, helper;
 
@@ -79,10 +77,10 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				const ambient = new THREE.AmbientLight( 0x666666 );
+				const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 );
 				scene.add( ambient );
 
-				const directionalLight = new THREE.DirectionalLight( 0x887766 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -91,7 +89,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 );
 
 				effect = new OutlineEffect( renderer );

examples/webgl_loader_ply.html

@@ -34,8 +34,6 @@
 
 			import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, cameraTarget, scene, renderer;
@@ -62,7 +60,7 @@
 
 				const plane = new THREE.Mesh(
 					new THREE.PlaneGeometry( 40, 40 ),
-					new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+					new THREE.MeshPhongMaterial( { color: 0xcbcbcb, specular: 0x474747 } )
 				);
 				plane.rotation.x = - Math.PI / 2;
 				plane.position.y = - 0.5;
@@ -78,7 +76,7 @@
 
 					geometry.computeVertexNormals();
 
-					const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
+					const material = new THREE.MeshStandardMaterial( { color: 0x009cff, flatShading: true } );
 					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.y = - 0.2;
@@ -97,7 +95,7 @@
 
 					geometry.computeVertexNormals();
 
-					const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
+					const material = new THREE.MeshStandardMaterial( { color: 0x009cff, flatShading: true } );
 					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = - 0.2;
@@ -114,10 +112,10 @@
 
 				// Lights
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) );
 
 				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
-				addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
+				addShadowedLight( 0.5, 1, - 1, 0xffd500, 1 );
 
 				// renderer
 

examples/webgl_loader_stl.html

@@ -34,8 +34,6 @@
 
 			import { STLLoader } from 'three/addons/loaders/STLLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, cameraTarget, scene, renderer;
@@ -61,7 +59,7 @@
 
 				const plane = new THREE.Mesh(
 					new THREE.PlaneGeometry( 40, 40 ),
-					new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+					new THREE.MeshPhongMaterial( { color: 0xcbcbcb, specular: 0x474747 } )
 				);
 				plane.rotation.x = - Math.PI / 2;
 				plane.position.y = - 0.5;
@@ -75,7 +73,7 @@
 				const loader = new STLLoader();
 				loader.load( './models/stl/ascii/slotted_disk.stl', function ( geometry ) {
 
-					const material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
+					const material = new THREE.MeshPhongMaterial( { color: 0xff9c7c, specular: 0x494949, shininess: 200 } );
 					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.set( 0, - 0.25, 0.6 );
@@ -92,7 +90,7 @@
 
 				// Binary files
 
-				const material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
+				const material = new THREE.MeshPhongMaterial( { color: 0xd5d5d5, specular: 0x494949, shininess: 200 } );
 
 				loader.load( './models/stl/binary/pr2_head_pan.stl', function ( geometry ) {
 
@@ -151,10 +149,10 @@
 
 				// Lights
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) );
 
 				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
-				addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
+				addShadowedLight( 0.5, 1, - 1, 0xffd500, 1 );
 				// renderer
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );

examples/webgl_loader_svg.html

@@ -39,8 +39,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let renderer, scene, camera, gui, guiData;
 
 			init();
@@ -154,7 +152,7 @@
 
 				//
 
-				const helper = new THREE.GridHelper( 160, 10 );
+				const helper = new THREE.GridHelper( 160, 10, 0x8d8d8d, 0xc1c1c1 );
 				helper.rotation.x = Math.PI / 2;
 				scene.add( helper );
 
@@ -180,7 +178,7 @@
 						if ( guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none' ) {
 
 							const material = new THREE.MeshBasicMaterial( {
-								color: new THREE.Color().setStyle( fillColor ).convertSRGBToLinear(),
+								color: new THREE.Color().setStyle( fillColor ),
 								opacity: path.userData.style.fillOpacity,
 								transparent: true,
 								side: THREE.DoubleSide,
@@ -208,7 +206,7 @@
 						if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) {
 
 							const material = new THREE.MeshBasicMaterial( {
-								color: new THREE.Color().setStyle( strokeColor ).convertSRGBToLinear(),
+								color: new THREE.Color().setStyle( strokeColor ),
 								opacity: path.userData.style.strokeOpacity,
 								transparent: true,
 								side: THREE.DoubleSide,

examples/webgl_loader_ttf.html

@@ -33,8 +33,6 @@
 			import { Font } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container;
 			let camera, cameraTarget, scene, renderer;
 			let group, textMesh1, textMesh2, textGeo, material;
@@ -88,7 +86,7 @@
 
 				const pointLight = new THREE.PointLight( 0xffffff, 1.5 );
 				pointLight.position.set( 0, 100, 90 );
-				pointLight.color.setHSL( Math.random(), 1, 0.5 );
+				pointLight.color.setHSL( Math.random(), 1, 0.5, THREE.SRGBColorSpace );
 				scene.add( pointLight );
 
 				material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
@@ -120,7 +118,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_loader_usdz.html

@@ -40,8 +40,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { USDZLoader } from 'three/addons/loaders/USDZLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let camera, scene, renderer;
 
 			init();
@@ -55,13 +53,13 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xeeeeee );
 
-				scene.add( new THREE.GridHelper( 2, 4 ) );
+				scene.add( new THREE.GridHelper( 2, 4, 0xc1c1c1, 0x8d8d8d ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				const light2 = new THREE.HemisphereLight( 0xffffff, 0x888888 );
+				const light2 = new THREE.HemisphereLight( 0xffffff, 0xc1c1c1 );
 				scene.add( light2 );
 
 				// renderer