Loaders: Unpack colors to working color space (#29448)

* feat(loaders): Loaders unpack colors to working color space

* fix semicolons

examples/jsm/loaders/ColladaLoader.js

@@ -5,6 +5,7 @@ import {
 	BufferGeometry,
 	ClampToEdgeWrapping,
 	Color,
+	ColorManagement,
 	DirectionalLight,
 	DoubleSide,
 	FileLoader,
@@ -1681,9 +1682,9 @@ class ColladaLoader extends Loader {
 
 			}
 
-			material.color.convertSRGBToLinear();
-			if ( material.specular ) material.specular.convertSRGBToLinear();
-			if ( material.emissive ) material.emissive.convertSRGBToLinear();
+			ColorManagement.toWorkingColorSpace( material.color, SRGBColorSpace );
+			if ( material.specular ) ColorManagement.toWorkingColorSpace( material.specular, SRGBColorSpace );
+			if ( material.emissive ) ColorManagement.toWorkingColorSpace( material.emissive, SRGBColorSpace );
 
 			//
 
@@ -2019,7 +2020,8 @@ class ColladaLoader extends Loader {
 
 					case 'color':
 						const array = parseFloats( child.textContent );
-						data.color = new Color().fromArray( array ).convertSRGBToLinear();
+						data.color = new Color().fromArray( array );
+						ColorManagement.toWorkingColorSpace( data.color, SRGBColorSpace );
 						break;
 
 					case 'falloff_angle':
@@ -2548,8 +2550,9 @@ class ColladaLoader extends Loader {
 					tempColor.setRGB(
 						array[ startIndex + 0 ],
 						array[ startIndex + 1 ],
-						array[ startIndex + 2 ]
-					).convertSRGBToLinear();
+						array[ startIndex + 2 ],
+						SRGBColorSpace
+					);
 
 					array[ startIndex + 0 ] = tempColor.r;
 					array[ startIndex + 1 ] = tempColor.g;

examples/jsm/loaders/DRACOLoader.js

@@ -2,6 +2,7 @@ import {
 	BufferAttribute,
 	BufferGeometry,
 	Color,
+	ColorManagement,
 	FileLoader,
 	Loader,
 	LinearSRGBColorSpace,
@@ -235,7 +236,8 @@ class DRACOLoader extends Loader {
 
 		for ( let i = 0, il = attribute.count; i < il; i ++ ) {
 
-			_color.fromBufferAttribute( attribute, i ).convertSRGBToLinear();
+			_color.fromBufferAttribute( attribute, i );
+			ColorManagement.toWorkingColorSpace( _color, SRGBColorSpace );
 			attribute.setXYZ( i, _color.r, _color.g, _color.b );
 
 		}

examples/jsm/loaders/FBXLoader.js

@@ -5,6 +5,7 @@ import {
 	BufferGeometry,
 	ClampToEdgeWrapping,
 	Color,
+	ColorManagement,
 	DirectionalLight,
 	EquirectangularReflectionMapping,
 	Euler,
@@ -538,12 +539,12 @@ class FBXTreeParser {
 
 		if ( materialNode.Diffuse ) {
 
-			parameters.color = new Color().fromArray( materialNode.Diffuse.value ).convertSRGBToLinear();
+			parameters.color = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Diffuse.value ), SRGBColorSpace );
 
 		} else if ( materialNode.DiffuseColor && ( materialNode.DiffuseColor.type === 'Color' || materialNode.DiffuseColor.type === 'ColorRGB' ) ) {
 
 			// The blender exporter exports diffuse here instead of in materialNode.Diffuse
-			parameters.color = new Color().fromArray( materialNode.DiffuseColor.value ).convertSRGBToLinear();
+			parameters.color = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.DiffuseColor.value ), SRGBColorSpace );
 
 		}
 
@@ -555,12 +556,12 @@ class FBXTreeParser {
 
 		if ( materialNode.Emissive ) {
 
-			parameters.emissive = new Color().fromArray( materialNode.Emissive.value ).convertSRGBToLinear();
+			parameters.emissive = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Emissive.value ), SRGBColorSpace );
 
 		} else if ( materialNode.EmissiveColor && ( materialNode.EmissiveColor.type === 'Color' || materialNode.EmissiveColor.type === 'ColorRGB' ) ) {
 
 			// The blender exporter exports emissive color here instead of in materialNode.Emissive
-			parameters.emissive = new Color().fromArray( materialNode.EmissiveColor.value ).convertSRGBToLinear();
+			parameters.emissive = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.EmissiveColor.value ), SRGBColorSpace );
 
 		}
 
@@ -596,12 +597,12 @@ class FBXTreeParser {
 
 		if ( materialNode.Specular ) {
 
-			parameters.specular = new Color().fromArray( materialNode.Specular.value ).convertSRGBToLinear();
+			parameters.specular = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.Specular.value ), SRGBColorSpace );
 
 		} else if ( materialNode.SpecularColor && materialNode.SpecularColor.type === 'Color' ) {
 
 			// The blender exporter exports specular color here instead of in materialNode.Specular
-			parameters.specular = new Color().fromArray( materialNode.SpecularColor.value ).convertSRGBToLinear();
+			parameters.specular = ColorManagement.toWorkingColorSpace( new Color().fromArray( materialNode.SpecularColor.value ), SRGBColorSpace );
 
 		}
 
@@ -1152,7 +1153,7 @@ class FBXTreeParser {
 
 			if ( lightAttribute.Color !== undefined ) {
 
-				color = new Color().fromArray( lightAttribute.Color.value ).convertSRGBToLinear();
+				color = ColorManagement.toWorkingColorSpace( new Color().fromArray( lightAttribute.Color.value ), SRGBColorSpace );
 
 			}
 
@@ -1478,7 +1479,7 @@ class FBXTreeParser {
 
 				if ( r !== 0 || g !== 0 || b !== 0 ) {
 
-					const color = new Color( r, g, b ).convertSRGBToLinear();
+					const color = new Color().setRGB( r, g, b, SRGBColorSpace );
 					sceneGraph.add( new AmbientLight( color, 1 ) );
 
 				}
@@ -2320,7 +2321,9 @@ class GeometryParser {
 
 		for ( let i = 0, c = new Color(); i < buffer.length; i += 4 ) {
 
-			c.fromArray( buffer, i ).convertSRGBToLinear().toArray( buffer, i );
+			c.fromArray( buffer, i );
+			ColorManagement.toWorkingColorSpace( c, SRGBColorSpace );
+			c.toArray( buffer, i );
 
 		}
 

examples/jsm/loaders/MTLLoader.js

@@ -1,5 +1,6 @@
 import {
 	Color,
+	ColorManagement,
 	DefaultLoadingManager,
 	FileLoader,
 	FrontSide,
@@ -384,21 +385,21 @@ class MaterialCreator {
 
 					// Diffuse color (color under white light) using RGB values
 
-					params.color = new Color().fromArray( value ).convertSRGBToLinear();
+					params.color = ColorManagement.toWorkingColorSpace( new Color().fromArray( value ), SRGBColorSpace );
 
 					break;
 
 				case 'ks':
 
 					// Specular color (color when light is reflected from shiny surface) using RGB values
-					params.specular = new Color().fromArray( value ).convertSRGBToLinear();
+					params.specular = ColorManagement.toWorkingColorSpace( new Color().fromArray( value ), SRGBColorSpace );
 
 					break;
 
 				case 'ke':
 
 					// Emissive using RGB values
-					params.emissive = new Color().fromArray( value ).convertSRGBToLinear();
+					params.emissive = ColorManagement.toWorkingColorSpace( new Color().fromArray( value ), SRGBColorSpace );
 
 					break;
 

examples/jsm/loaders/OBJLoader.js

@@ -12,7 +12,8 @@ import {
 	Points,
 	PointsMaterial,
 	Vector3,
-	Color
+	Color,
+	SRGBColorSpace
 } from 'three';
 
 // o object_name | g group_name
@@ -534,8 +535,9 @@ class OBJLoader extends Loader {
 							_color.setRGB(
 								parseFloat( data[ 4 ] ),
 								parseFloat( data[ 5 ] ),
-								parseFloat( data[ 6 ] )
-							).convertSRGBToLinear();
+								parseFloat( data[ 6 ] ),
+								SRGBColorSpace
+							);
 
 							state.colors.push( _color.r, _color.g, _color.b );
 

examples/jsm/loaders/PCDLoader.js

@@ -6,7 +6,8 @@ import {
 	Int32BufferAttribute,
 	Loader,
 	Points,
-	PointsMaterial
+	PointsMaterial,
+	SRGBColorSpace
 } from 'three';
 
 class PCDLoader extends Loader {
@@ -279,7 +280,7 @@ class PCDLoader extends Loader {
 					const g = ( ( rgb >> 8 ) & 0x0000ff ) / 255;
 					const b = ( ( rgb >> 0 ) & 0x0000ff ) / 255;
 
-					c.set( r, g, b ).convertSRGBToLinear();
+					c.setRGB( r, g, b, SRGBColorSpace );
 
 					color.push( c.r, c.g, c.b );
 
@@ -346,7 +347,7 @@ class PCDLoader extends Loader {
 					const g = dataview.getUint8( ( PCDheader.points * offset.rgb ) + PCDheader.size[ rgbIndex ] * i + 1 ) / 255.0;
 					const b = dataview.getUint8( ( PCDheader.points * offset.rgb ) + PCDheader.size[ rgbIndex ] * i + 0 ) / 255.0;
 
-					c.set( r, g, b ).convertSRGBToLinear();
+					c.setRGB( r, g, b, SRGBColorSpace );
 
 					color.push( c.r, c.g, c.b );
 
@@ -404,7 +405,7 @@ class PCDLoader extends Loader {
 					const g = dataview.getUint8( row + offset.rgb + 1 ) / 255.0;
 					const b = dataview.getUint8( row + offset.rgb + 0 ) / 255.0;
 
-					c.set( r, g, b ).convertSRGBToLinear();
+					c.setRGB( r, g, b, SRGBColorSpace );
 
 					color.push( c.r, c.g, c.b );
 

examples/jsm/loaders/PDBLoader.js

@@ -3,7 +3,8 @@ import {
 	FileLoader,
 	Float32BufferAttribute,
 	Loader,
-	Color
+	Color,
+	SRGBColorSpace
 } from 'three';
 
 class PDBLoader extends Loader {
@@ -131,7 +132,7 @@ class PDBLoader extends Loader {
 				const g = atom[ 3 ][ 1 ] / 255;
 				const b = atom[ 3 ][ 2 ] / 255;
 
-				c.set( r, g, b ).convertSRGBToLinear();
+				c.setRGB( r, g, b, SRGBColorSpace );
 
 				colorsAtoms.push( c.r, c.g, c.b );
 

examples/jsm/loaders/PLYLoader.js

@@ -3,7 +3,8 @@ import {
 	FileLoader,
 	Float32BufferAttribute,
 	Loader,
-	Color
+	Color,
+	SRGBColorSpace
 } from 'three';
 
 /**
@@ -468,8 +469,9 @@ class PLYLoader extends Loader {
 					_color.setRGB(
 						element[ cacheEntry.attrR ] / 255.0,
 						element[ cacheEntry.attrG ] / 255.0,
-						element[ cacheEntry.attrB ] / 255.0
-					).convertSRGBToLinear();
+						element[ cacheEntry.attrB ] / 255.0,
+						SRGBColorSpace
+					);
 
 					buffer.colors.push( _color.r, _color.g, _color.b );
 
@@ -516,8 +518,9 @@ class PLYLoader extends Loader {
 					_color.setRGB(
 						element[ cacheEntry.attrR ] / 255.0,
 						element[ cacheEntry.attrG ] / 255.0,
-						element[ cacheEntry.attrB ] / 255.0
-					).convertSRGBToLinear();
+						element[ cacheEntry.attrB ] / 255.0,
+						SRGBColorSpace
+					);
 					buffer.faceVertexColors.push( _color.r, _color.g, _color.b );
 					buffer.faceVertexColors.push( _color.r, _color.g, _color.b );
 					buffer.faceVertexColors.push( _color.r, _color.g, _color.b );

examples/jsm/loaders/STLLoader.js

@@ -5,7 +5,8 @@ import {
 	FileLoader,
 	Float32BufferAttribute,
 	Loader,
-	Vector3
+	Vector3,
+	SRGBColorSpace
 } from 'three';
 
 /**
@@ -242,7 +243,7 @@ class STLLoader extends Loader {
 
 					if ( hasColors ) {
 
-						color.set( r, g, b ).convertSRGBToLinear();
+						color.setRGB( r, g, b, SRGBColorSpace );
 
 						colors[ componentIdx ] = color.r;
 						colors[ componentIdx + 1 ] = color.g;

examples/jsm/loaders/TiltLoader.js

@@ -2,6 +2,7 @@ import {
 	BufferAttribute,
 	BufferGeometry,
 	Color,
+	ColorManagement,
 	DoubleSide,
 	FileLoader,
 	Group,
@@ -9,6 +10,7 @@ import {
 	Mesh,
 	MeshBasicMaterial,
 	RawShaderMaterial,
+	SRGBColorSpace,
 	TextureLoader,
 	Quaternion,
 	Vector3
@@ -196,7 +198,7 @@ class StrokeGeometry extends BufferGeometry {
 			const rgba = stroke[ 3 ];
 			const alpha = stroke[ 3 ][ 3 ];
 
-			color.fromArray( rgba ).convertSRGBToLinear();
+			ColorManagement.toWorkingColorSpace( color.fromArray( rgba ), SRGBColorSpace );
 
 			prevPosition.fromArray( positions, 0 );
 			prevQuaternion.fromArray( quaternions, 0 );

examples/jsm/loaders/VRMLLoader.js

@@ -5,6 +5,7 @@ import {
 	BufferGeometry,
 	ClampToEdgeWrapping,
 	Color,
+	ColorManagement,
 	ConeGeometry,
 	CylinderGeometry,
 	DataTexture,
@@ -918,8 +919,7 @@ class VRMLLoader extends Loader {
 
 				} else {
 
-					skyMaterial.color.setRGB( skyColor[ 0 ], skyColor[ 1 ], skyColor[ 2 ] );
-					skyMaterial.color.convertSRGBToLinear();
+					skyMaterial.color.setRGB( skyColor[ 0 ], skyColor[ 1 ], skyColor[ 2 ], SRGBColorSpace );
 
 				}
 
@@ -1240,13 +1240,11 @@ class VRMLLoader extends Loader {
 						break;
 
 					case 'diffuseColor':
-						materialData.diffuseColor = new Color( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ] );
-						materialData.diffuseColor.convertSRGBToLinear();
+						materialData.diffuseColor = new Color().setRGB( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ], SRGBColorSpace );
 						break;
 
 					case 'emissiveColor':
-						materialData.emissiveColor = new Color( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ] );
-						materialData.emissiveColor.convertSRGBToLinear();
+						materialData.emissiveColor = new Color().setRGB( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ], SRGBColorSpace );
 						break;
 
 					case 'shininess':
@@ -1254,8 +1252,7 @@ class VRMLLoader extends Loader {
 						break;
 
 					case 'specularColor':
-						materialData.specularColor = new Color( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ] );
-						materialData.specularColor.convertSRGBToLinear();
+						materialData.specularColor = new Color().setRGB( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ], SRGBColorSpace );
 						break;
 
 					case 'transparency':
@@ -3111,7 +3108,8 @@ class VRMLLoader extends Loader {
 			for ( let i = 0; i < attribute.count; i ++ ) {
 
 				color.fromBufferAttribute( attribute, i );
-				color.convertSRGBToLinear();
+
+				ColorManagement.toWorkingColorSpace( color, SRGBColorSpace );
 
 				attribute.setXYZ( i, color.r, color.g, color.b );
 
@@ -3216,7 +3214,9 @@ class VRMLLoader extends Loader {
 				const colorA = colors[ thresholdIndexA ];
 				const colorB = colors[ thresholdIndexB ];
 
-				color.copy( colorA ).lerp( colorB, t ).convertSRGBToLinear();
+				color.copy( colorA ).lerp( colorB, t );
+
+				ColorManagement.toWorkingColorSpace( color, SRGBColorSpace );
 
 				colorAttribute.setXYZ( index, color.r, color.g, color.b );
 

examples/jsm/loaders/VTKLoader.js

@@ -4,7 +4,8 @@ import {
 	Color,
 	FileLoader,
 	Float32BufferAttribute,
-	Loader
+	Loader,
+	SRGBColorSpace
 } from 'three';
 import * as fflate from '../libs/fflate.module.js';
 
@@ -211,7 +212,7 @@ class VTKLoader extends Loader {
 							const g = parseFloat( result[ 2 ] );
 							const b = parseFloat( result[ 3 ] );
 
-							color.set( r, g, b ).convertSRGBToLinear();
+							color.setRGB( r, g, b, SRGBColorSpace );
 
 							colors.push( color.r, color.g, color.b );
 
@@ -325,7 +326,7 @@ class VTKLoader extends Loader {
 						const g = colors[ 3 * i + 1 ];
 						const b = colors[ 3 * i + 2 ];
 
-						color.set( r, g, b ).convertSRGBToLinear();
+						color.setRGB( r, g, b, SRGBColorSpace );
 
 						newColors.push( color.r, color.g, color.b );
 						newColors.push( color.r, color.g, color.b );

examples/jsm/loaders/XYZLoader.js

@@ -3,7 +3,8 @@ import {
 	Color,
 	FileLoader,
 	Float32BufferAttribute,
-	Loader
+	Loader,
+	SRGBColorSpace
 } from 'three';
 
 class XYZLoader extends Loader {
@@ -80,7 +81,7 @@ class XYZLoader extends Loader {
 				const g = parseFloat( lineValues[ 4 ] ) / 255;
 				const b = parseFloat( lineValues[ 5 ] ) / 255;
 
-				color.set( r, g, b ).convertSRGBToLinear();
+				color.setRGB( r, g, b, SRGBColorSpace );
 
 				colors.push( color.r, color.g, color.b );