ColorManagement: Add ColorManagement.define( { ... } )

examples/jsm/loaders/KTX2Loader.js

@@ -18,14 +18,12 @@ import {
 	CompressedCubeTexture,
 	Data3DTexture,
 	DataTexture,
-	DisplayP3ColorSpace,
 	FileLoader,
 	FloatType,
 	HalfFloatType,
 	NoColorSpace,
 	LinearFilter,
 	LinearMipmapLinearFilter,
-	LinearDisplayP3ColorSpace,
 	LinearSRGBColorSpace,
 	Loader,
 	RedFormat,
@@ -72,6 +70,7 @@ import {
 	KHR_DF_PRIMARIES_DISPLAYP3
 } from '../libs/ktx-parse.module.js';
 import { ZSTDDecoder } from '../libs/zstddec.module.js';
+import { DisplayP3ColorSpace, LinearDisplayP3ColorSpace } from '../math/ColorSpaces.js';
 
 const _taskCache = new WeakMap();
 

examples/jsm/math/ColorSpaces.js

@@ -0,0 +1,75 @@
+import { LinearTransfer, Matrix3, SRGBTransfer } from 'three';
+
+// Reference: http://www.russellcottrell.com/photo/matrixCalculator.htm
+
+const P3_PRIMARIES = [ 0.680, 0.320, 0.265, 0.690, 0.150, 0.060 ];
+const P3_LUMINANCE_COEFFICIENTS = [ 0.2289, 0.6917, 0.0793 ];
+const REC2020_PRIMARIES = [ 0.708, 0.292, 0.170, 0.797, 0.131, 0.046 ];
+const REC2020_LUMINANCE_COEFFICIENTS = [ 0.2627, 0.6780, 0.0593 ];
+const D65 = [ 0.3127, 0.3290 ];
+
+/******************************************************************************
+ * Display P3 definitions
+ */
+
+const LINEAR_DISPLAY_P3_TO_XYZ = /*@__PURE__*/ new Matrix3().set(
+	0.4865709, 0.2656677, 0.1982173,
+	0.2289746, 0.6917385, 0.0792869,
+	0.0000000, 0.0451134, 1.0439444
+);
+
+const XYZ_TO_LINEAR_DISPLAY_P3 = /*@__PURE__*/ new Matrix3().set(
+	2.4934969, - 0.9313836, - 0.4027108,
+	- 0.8294890, 1.7626641, 0.0236247,
+	0.0358458, - 0.0761724, 0.9568845
+);
+
+export const DisplayP3ColorSpace = 'display-p3';
+export const LinearDisplayP3ColorSpace = 'display-p3-linear';
+
+export const DisplayP3ColorSpaceImpl = {
+	primaries: P3_PRIMARIES,
+	whitePoint: D65,
+	transfer: SRGBTransfer,
+	toXYZ: LINEAR_DISPLAY_P3_TO_XYZ,
+	fromXYZ: XYZ_TO_LINEAR_DISPLAY_P3,
+	luminanceCoefficients: P3_LUMINANCE_COEFFICIENTS,
+	outputColorSpaceConfig: { drawingBufferColorSpace: DisplayP3ColorSpace }
+};
+
+export const LinearDisplayP3ColorSpaceImpl = {
+	primaries: P3_PRIMARIES,
+	whitePoint: D65,
+	transfer: LinearTransfer,
+	toXYZ: LINEAR_DISPLAY_P3_TO_XYZ,
+	fromXYZ: XYZ_TO_LINEAR_DISPLAY_P3,
+	luminanceCoefficients: P3_LUMINANCE_COEFFICIENTS,
+	workingColorSpaceConfig: { unpackColorSpace: DisplayP3ColorSpace }
+};
+
+/******************************************************************************
+ * Rec. 2020 definitions
+ */
+
+const LINEAR_REC2020_TO_XYZ = /*@__PURE__*/ new Matrix3().set(
+	0.6369580, 0.1446169, 0.1688810,
+	0.2627002, 0.6779981, 0.0593017,
+	0.0000000, 0.0280727, 1.0609851
+);
+
+const XYZ_TO_LINEAR_REC2020 = /*@__PURE__*/ new Matrix3().set(
+	1.7166512, - 0.3556708, - 0.2533663,
+	- 0.6666844, 1.6164812, 0.0157685,
+	0.0176399, - 0.0427706, 0.9421031
+);
+
+export const LinearRec2020ColorSpace = 'rec2020-linear';
+
+export const LinearRec2020ColorSpaceImpl = {
+	primaries: REC2020_PRIMARIES,
+	whitePoint: D65,
+	transfer: LinearTransfer,
+	toXYZ: LINEAR_REC2020_TO_XYZ,
+	fromXYZ: XYZ_TO_LINEAR_REC2020,
+	luminanceCoefficients: REC2020_LUMINANCE_COEFFICIENTS,
+};

examples/webgl_test_wide_gamut.html

@@ -89,6 +89,8 @@
 
 			import * as THREE from 'three';
 
+			import { DisplayP3ColorSpace, DisplayP3ColorSpaceImpl, LinearDisplayP3ColorSpace, LinearDisplayP3ColorSpaceImpl } from 'three/addons/math/ColorSpaces.js';
+
 			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			let container, camera, renderer, loader;
@@ -98,11 +100,18 @@
 
 			const slider = document.querySelector( '.slider' );
 
-			const isP3Context = WebGL.isColorSpaceAvailable( THREE.DisplayP3ColorSpace );
+			const isP3Context = WebGL.isColorSpaceAvailable( DisplayP3ColorSpace );
+
+			THREE.ColorManagement.define( {
+
+				[ DisplayP3ColorSpace ]: DisplayP3ColorSpaceImpl,
+				[ LinearDisplayP3ColorSpace ]: LinearDisplayP3ColorSpaceImpl
+
+			} );
 
 			if ( isP3Context ) {
 
-				THREE.ColorManagement.workingColorSpace = THREE.LinearDisplayP3ColorSpace;
+				THREE.ColorManagement.workingColorSpace = LinearDisplayP3ColorSpace;
 
 			}
 
@@ -132,7 +141,7 @@
 
 				if ( isP3Context && window.matchMedia( '( color-gamut: p3 )' ).matches ) {
 
-					renderer.outputColorSpace = THREE.DisplayP3ColorSpace;
+					renderer.outputColorSpace = DisplayP3ColorSpace;
 
 				}
 
@@ -149,7 +158,7 @@
 				textureR = await loader.loadAsync( path.replace( '{colorSpace}', 'p3' ) );
 
 				textureL.colorSpace = THREE.SRGBColorSpace;
-				textureR.colorSpace = THREE.DisplayP3ColorSpace;
+				textureR.colorSpace = DisplayP3ColorSpace;
 
 				sceneL.background = THREE.TextureUtils.contain( textureL, window.innerWidth / window.innerHeight );
 				sceneR.background = THREE.TextureUtils.contain( textureR, window.innerWidth / window.innerHeight );
@@ -213,7 +222,7 @@
 
 			function onGamutChange( { matches } ) {
 
-				renderer.outputColorSpace = isP3Context && matches ? THREE.DisplayP3ColorSpace : THREE.SRGBColorSpace;
+				renderer.outputColorSpace = isP3Context && matches ? DisplayP3ColorSpace : THREE.SRGBColorSpace;
 
 				textureL.needsUpdate = true;
 				textureR.needsUpdate = true;

src/constants.js

@@ -163,15 +163,10 @@ export const ObjectSpaceNormalMap = 1;
 export const NoColorSpace = '';
 export const SRGBColorSpace = 'srgb';
 export const LinearSRGBColorSpace = 'srgb-linear';
-export const DisplayP3ColorSpace = 'display-p3';
-export const LinearDisplayP3ColorSpace = 'display-p3-linear';
 
 export const LinearTransfer = 'linear';
 export const SRGBTransfer = 'srgb';
 
-export const Rec709Primaries = 'rec709';
-export const P3Primaries = 'p3';
-
 export const ZeroStencilOp = 0;
 export const KeepStencilOp = 7680;
 export const ReplaceStencilOp = 7681;