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

* Examples: Update misc_exporter_gltf and misc_exporter_ply for color management.

* Examples: Update 3MF examples for color management.

* Examples: Update webgl_loader_draco for color management.

* Examples: Update LDraw examples for color management.

* Loaders: Update color space assignmentin 3MF, LDraw, and SVG loaders.

* LDrawLoader: Clean up, fix emissive.

* LDrawLoader: Clean up

Author: donmccurdy

examples/jsm/loaders/3MFLoader.js

@@ -21,6 +21,8 @@ import {
 } from 'three';
 import * as fflate from '../libs/fflate.module.js';
 
+const COLOR_SPACE_3MF = SRGBColorSpace;
+
 /**
  *
  * 3D Manufacturing Format (3MF) specification: https://3mf.io/specification/
@@ -359,8 +361,7 @@ class ThreeMFLoader extends Loader {
 				const colorNode = colorNodes[ i ];
 				const color = colorNode.getAttribute( 'color' );
 
-				colorObject.setStyle( color.substring( 0, 7 ) );
-				colorObject.convertSRGBToLinear(); // color is in sRGB
+				colorObject.setStyle( color.substring( 0, 7 ), COLOR_SPACE_3MF );
 
 				colors.push( colorObject.r, colorObject.g, colorObject.b );
 
@@ -789,7 +790,7 @@ class ThreeMFLoader extends Loader {
 
 				} );
 
-				texture.colorSpace = SRGBColorSpace;
+				texture.colorSpace = COLOR_SPACE_3MF;
 
 				// texture parameters
 
@@ -1281,8 +1282,7 @@ class ThreeMFLoader extends Loader {
 			const displaycolor = materialData.displaycolor;
 
 			const color = displaycolor.substring( 0, 7 );
-			material.color.setStyle( color );
-			material.color.convertSRGBToLinear(); // displaycolor is in sRGB
+			material.color.setStyle( color, COLOR_SPACE_3MF );
 
 			// process alpha if set
 

examples/jsm/loaders/LDrawLoader.js

@@ -11,6 +11,7 @@ import {
 	Mesh,
 	MeshStandardMaterial,
 	ShaderMaterial,
+	SRGBColorSpace,
 	UniformsLib,
 	UniformsUtils,
 	Vector3,
@@ -39,6 +40,8 @@ const FILE_LOCATION_NOT_FOUND = 6;
 const MAIN_COLOUR_CODE = '16';
 const MAIN_EDGE_COLOUR_CODE = '24';
 
+const COLOR_SPACE_LDRAW = SRGBColorSpace;
+
 const _tempVec0 = new Vector3();
 const _tempVec1 = new Vector3();
 
@@ -2162,8 +2165,8 @@ class LDrawLoader extends Loader {
 		let code = null;
 
 		// Triangle and line colors
-		let color = 0xFF00FF;
-		let edgeColor = 0xFF00FF;
+		let fillColor = '#FF00FF';
+		let edgeColor = '#FF00FF';
 
 		// Transparency
 		let alpha = 1;
@@ -2205,12 +2208,12 @@ class LDrawLoader extends Loader {
 
 					case 'VALUE':
 
-						color = lineParser.getToken();
-						if ( color.startsWith( '0x' ) ) {
+						fillColor = lineParser.getToken();
+						if ( fillColor.startsWith( '0x' ) ) {
 
-							color = '#' + color.substring( 2 );
+							fillColor = '#' + fillColor.substring( 2 );
 
-						} else if ( ! color.startsWith( '#' ) ) {
+						} else if ( ! fillColor.startsWith( '#' ) ) {
 
 							throw new Error( 'LDrawLoader: Invalid color while parsing material' + lineParser.getLineNumberString() + '.' );
 
@@ -2312,37 +2315,37 @@ class LDrawLoader extends Loader {
 
 			case FINISH_TYPE_DEFAULT:
 
-				material = new MeshStandardMaterial( { color: color, roughness: 0.3, metalness: 0 } );
+				material = new MeshStandardMaterial( { roughness: 0.3, metalness: 0 } );
 				break;
 
 			case FINISH_TYPE_PEARLESCENT:
 
 				// Try to imitate pearlescency by making the surface glossy
-				material = new MeshStandardMaterial( { color: color, roughness: 0.3, metalness: 0.25 } );
+				material = new MeshStandardMaterial( { roughness: 0.3, metalness: 0.25 } );
 				break;
 
 			case FINISH_TYPE_CHROME:
 
 				// Mirror finish surface
-				material = new MeshStandardMaterial( { color: color, roughness: 0, metalness: 1 } );
+				material = new MeshStandardMaterial( { roughness: 0, metalness: 1 } );
 				break;
 
 			case FINISH_TYPE_RUBBER:
 
 				// Rubber finish
-				material = new MeshStandardMaterial( { color: color, roughness: 0.9, metalness: 0 } );
+				material = new MeshStandardMaterial( { roughness: 0.9, metalness: 0 } );
 				break;
 
 			case FINISH_TYPE_MATTE_METALLIC:
 
 				// Brushed metal finish
-				material = new MeshStandardMaterial( { color: color, roughness: 0.8, metalness: 0.4 } );
+				material = new MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
 				break;
 
 			case FINISH_TYPE_METAL:
 
 				// Average metal finish
-				material = new MeshStandardMaterial( { color: color, roughness: 0.2, metalness: 0.85 } );
+				material = new MeshStandardMaterial( { roughness: 0.2, metalness: 0.85 } );
 				break;
 
 			default:
@@ -2351,45 +2354,44 @@ class LDrawLoader extends Loader {
 
 		}
 
+		material.color.setStyle( fillColor, COLOR_SPACE_LDRAW );
 		material.transparent = isTransparent;
 		material.premultipliedAlpha = true;
 		material.opacity = alpha;
 		material.depthWrite = ! isTransparent;
-		material.color.convertSRGBToLinear();
 
 		material.polygonOffset = true;
 		material.polygonOffsetFactor = 1;
 
 		if ( luminance !== 0 ) {
 
-			material.emissive.set( material.color ).multiplyScalar( luminance );
+			material.emissive.setStyle( fillColor, COLOR_SPACE_LDRAW ).multiplyScalar( luminance );
 
 		}
 
 		if ( ! edgeMaterial ) {
 
 			// This is the material used for edges
 			edgeMaterial = new LineBasicMaterial( {
-				color: edgeColor,
+				color: new Color().setStyle( edgeColor, COLOR_SPACE_LDRAW ),
 				transparent: isTransparent,
 				opacity: alpha,
 				depthWrite: ! isTransparent
 			} );
+			edgeMaterial.color;
 			edgeMaterial.userData.code = code;
 			edgeMaterial.name = name + ' - Edge';
-			edgeMaterial.color.convertSRGBToLinear();
 
 			// This is the material used for conditional edges
 			edgeMaterial.userData.conditionalEdgeMaterial = new LDrawConditionalLineMaterial( {
 
 				fog: true,
 				transparent: isTransparent,
 				depthWrite: ! isTransparent,
-				color: edgeColor,
+				color: new Color().setStyle( edgeColor, COLOR_SPACE_LDRAW ),
 				opacity: alpha,
 
 			} );
-			edgeMaterial.userData.conditionalEdgeMaterial.color.convertSRGBToLinear();
 			edgeMaterial.userData.conditionalEdgeMaterial.userData.code = code;
 			edgeMaterial.userData.conditionalEdgeMaterial.name = name + ' - Conditional Edge';
 

examples/jsm/loaders/SVGLoader.js

@@ -9,10 +9,13 @@ import {
 	Shape,
 	ShapePath,
 	ShapeUtils,
+	SRGBColorSpace,
 	Vector2,
 	Vector3
 } from 'three';
 
+const COLOR_SPACE_SVG = SRGBColorSpace;
+
 class SVGLoader extends Loader {
 
 	constructor( manager ) {
@@ -155,7 +158,7 @@ class SVGLoader extends Loader {
 
 				if ( style.fill !== undefined && style.fill !== 'none' ) {
 
-					path.color.setStyle( style.fill );
+					path.color.setStyle( style.fill, COLOR_SPACE_SVG );
 
 				}
 

examples/misc_exporter_gltf.html

@@ -32,8 +32,6 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			function exportGLTF( input ) {
 
 				const gltfExporter = new GLTFExporter();
@@ -180,7 +178,7 @@
 				// ---------------------------------------------------------------------
 				// Grid
 				// ---------------------------------------------------------------------
-				gridHelper = new THREE.GridHelper( 2000, 20, 0x888888, 0x444444 );
+				gridHelper = new THREE.GridHelper( 2000, 20, 0xc1c1c1, 0x8d8d8d );
 				gridHelper.position.y = - 50;
 				gridHelper.name = 'Grid';
 				scene1.add( gridHelper );

examples/misc_exporter_ply.html

@@ -32,8 +32,6 @@
 			import { PLYExporter } from 'three/addons/exporters/PLYExporter.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let scene, camera, renderer, exporter, mesh;
 
 			const params = {
@@ -58,7 +56,7 @@
 
 				//
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
@@ -73,7 +71,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: 0xcbcbcb, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );

examples/screenshots/webgl_loader_3mf.jpg

@@ -40,8 +40,6 @@
 			import { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, object, loader, controls;
 
 			const params = {
@@ -62,7 +60,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 );
 
 				scene = new THREE.Scene();

examples/webgl_loader_3mf.html

@@ -37,8 +37,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let camera, scene, renderer;
 
 			init();
@@ -55,7 +53,7 @@
 
 				//
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
 				hemiLight.position.set( 0, 100, 0 );
 				scene.add( hemiLight );
 
@@ -102,7 +100,7 @@
 
 				//
 
-				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.position.y = 11;
 				ground.receiveShadow = true;

examples/webgl_loader_3mf_materials.html

@@ -32,8 +32,6 @@
 
 		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		let camera, scene, renderer;
 
 		const container = document.querySelector( '#container' );
@@ -58,15 +56,15 @@
 			// Ground
 			const plane = new THREE.Mesh(
 				new THREE.PlaneGeometry( 8, 8 ),
-				new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+				new THREE.MeshPhongMaterial( { color: 0xcbcbcb, specular: 0x101010 } )
 			);
 			plane.rotation.x = - Math.PI / 2;
 			plane.position.y = 0.03;
 			plane.receiveShadow = true;
 			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();
@@ -80,7 +78,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.castShadow = true;
 				mesh.receiveShadow = true;

examples/webgl_loader_draco.html

@@ -45,8 +45,6 @@
 			import { LDrawLoader } from 'three/addons/loaders/LDrawLoader.js';
 			import { LDrawUtils } from 'three/addons/utils/LDrawUtils.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, progressBarDiv;
 
 			let camera, scene, renderer, controls, gui, guiData;