ColorManagement: Add .getLuminanceCoefficients

examples/jsm/interactive/HTMLMesh.js

@@ -5,7 +5,9 @@ import {
 	MeshBasicMaterial,
 	PlaneGeometry,
 	SRGBColorSpace,
-	Color
+	Color,
+	ColorManagement,
+	Vector3
 } from 'three';
 
 class HTMLMesh extends Mesh {
@@ -126,6 +128,7 @@ function html2canvas( element ) {
 
 	const range = document.createRange();
 	const color = new Color();
+	const lumaCoeffs = new Vector3();
 
 	function Clipper( context ) {
 
@@ -371,7 +374,8 @@ function html2canvas( element ) {
 
 				color.set( accentColor );
 
-				const luminance = Math.sqrt( 0.299 * ( color.r ** 2 ) + 0.587 * ( color.g ** 2 ) + 0.114 * ( color.b ** 2 ) );
+				ColorManagement.getLuminanceCoefficients( lumaCoeffs );
+				const luminance = Math.sqrt( lumaCoeffs.x * ( color.r ** 2 ) + lumaCoeffs.y * ( color.g ** 2 ) + lumaCoeffs.z * ( color.b ** 2 ) );
 				const accentTextColor = luminance < 0.5 ? 'white' : '#111111';
 
 				if ( element.type === 'radio' ) {

examples/jsm/shaders/ColorifyShader.js

@@ -1,5 +1,7 @@
 import {
-	Color
+	Color,
+	ColorManagement,
+	Vector3
 } from 'three';
 
 /**
@@ -13,7 +15,8 @@ const ColorifyShader = {
 	uniforms: {
 
 		'tDiffuse': { value: null },
-		'color': { value: new Color( 0xffffff ) }
+		'color': { value: new Color( 0xffffff ) },
+		'luminanceCoefficients': { value: ColorManagement.getLuminanceCoefficients( new Vector3() ) },
 
 	},
 
@@ -31,6 +34,7 @@ const ColorifyShader = {
 	fragmentShader: /* glsl */`
 
 		uniform vec3 color;
+		uniform vec3 luminanceCoefficients;
 		uniform sampler2D tDiffuse;
 
 		varying vec2 vUv;
@@ -39,8 +43,7 @@ const ColorifyShader = {
 
 			vec4 texel = texture2D( tDiffuse, vUv );
 
-			vec3 luma = vec3( 0.299, 0.587, 0.114 );
-			float v = dot( texel.xyz, luma );
+			float v = dot( texel.xyz, luminanceCoefficients );
 
 			gl_FragColor = vec4( v * color, texel.w );
 

examples/jsm/shaders/LuminosityHighPassShader.js

@@ -1,5 +1,7 @@
 import {
-	Color
+	Color,
+	ColorManagement,
+	Vector3
 } from 'three';
 
 /**
@@ -17,6 +19,7 @@ const LuminosityHighPassShader = {
 
 		'tDiffuse': { value: null },
 		'luminosityThreshold': { value: 1.0 },
+		'luminanceCoefficients': { value: ColorManagement.getLuminanceCoefficients( new Vector3() ) },
 		'smoothWidth': { value: 1.0 },
 		'defaultColor': { value: new Color( 0x000000 ) },
 		'defaultOpacity': { value: 0.0 }
@@ -41,6 +44,7 @@ const LuminosityHighPassShader = {
 		uniform vec3 defaultColor;
 		uniform float defaultOpacity;
 		uniform float luminosityThreshold;
+		uniform vec3 luminanceCoefficients;
 		uniform float smoothWidth;
 
 		varying vec2 vUv;
@@ -49,9 +53,7 @@ const LuminosityHighPassShader = {
 
 			vec4 texel = texture2D( tDiffuse, vUv );
 
-			vec3 luma = vec3( 0.299, 0.587, 0.114 );
-
-			float v = dot( texel.xyz, luma );
+			float v = dot( texel.xyz, luminanceCoefficients );
 
 			vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );
 

src/math/ColorManagement.js

@@ -33,24 +33,28 @@ const COLOR_SPACES = {
 	[ LinearSRGBColorSpace ]: {
 		transfer: LinearTransfer,
 		primaries: Rec709Primaries,
+		luminanceCoefficients: [ 0.2126, 0.7152, 0.0722 ],
 		toReference: ( color ) => color,
 		fromReference: ( color ) => color,
 	},
 	[ SRGBColorSpace ]: {
 		transfer: SRGBTransfer,
 		primaries: Rec709Primaries,
+		luminanceCoefficients: [ 0.2126, 0.7152, 0.0722 ],
 		toReference: ( color ) => color.convertSRGBToLinear(),
 		fromReference: ( color ) => color.convertLinearToSRGB(),
 	},
 	[ LinearDisplayP3ColorSpace ]: {
 		transfer: LinearTransfer,
 		primaries: P3Primaries,
+		luminanceCoefficients: [ 0.2289, 0.6917, 0.0793 ],
 		toReference: ( color ) => color.applyMatrix3( LINEAR_DISPLAY_P3_TO_LINEAR_SRGB ),
 		fromReference: ( color ) => color.applyMatrix3( LINEAR_SRGB_TO_LINEAR_DISPLAY_P3 ),
 	},
 	[ DisplayP3ColorSpace ]: {
 		transfer: SRGBTransfer,
 		primaries: P3Primaries,
+		luminanceCoefficients: [ 0.2289, 0.6917, 0.0793 ],
 		toReference: ( color ) => color.convertSRGBToLinear().applyMatrix3( LINEAR_DISPLAY_P3_TO_LINEAR_SRGB ),
 		fromReference: ( color ) => color.applyMatrix3( LINEAR_SRGB_TO_LINEAR_DISPLAY_P3 ).convertLinearToSRGB(),
 	},
@@ -123,6 +127,12 @@ export const ColorManagement = {
 
 	},
 
+	getLuminanceCoefficients: function ( target, colorSpace = this._workingColorSpace ) {
+
+		return target.fromArray( COLOR_SPACES[ colorSpace ].luminanceCoefficients );
+
+	},
+
 };
 
 

src/nodes/Nodes.js

@@ -114,7 +114,7 @@ export { default as UserDataNode, userData } from './accessors/UserDataNode.js';
 // display
 export { default as BlendModeNode, burn, dodge, overlay, screen } from './display/BlendModeNode.js';
 export { default as BumpMapNode, bumpMap } from './display/BumpMapNode.js';
-export { default as ColorAdjustmentNode, saturation, vibrance, hue, lumaCoeffs, luminance, threshold } from './display/ColorAdjustmentNode.js';
+export { default as ColorAdjustmentNode, saturation, vibrance, hue, luminance, threshold } from './display/ColorAdjustmentNode.js';
 export { default as ColorSpaceNode, linearToColorSpace, colorSpaceToLinear, linearTosRGB, sRGBToLinear } from './display/ColorSpaceNode.js';
 export { default as FrontFacingNode, frontFacing, faceDirection } from './display/FrontFacingNode.js';
 export { default as NormalMapNode, normalMap } from './display/NormalMapNode.js';

src/nodes/display/ColorAdjustmentNode.js

@@ -3,6 +3,8 @@ import { dot, mix } from '../math/MathNode.js';
 import { add } from '../math/OperatorNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, tslFn, nodeProxy, float, vec3 } from '../shadernode/ShaderNode.js';
+import { ColorManagement } from '../../math/ColorManagement.js';
+import { Vector3 } from '../../math/Vector3.js';
 
 const saturationNode = tslFn( ( { color, adjustment } ) => {
 
@@ -86,8 +88,8 @@ export const saturation = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.SA
 export const vibrance = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.VIBRANCE );
 export const hue = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.HUE );
 
-export const lumaCoeffs = vec3( 0.2126729, 0.7151522, 0.0721750 ); // // assumes rgb is in linear color space with sRGB primaries and D65 white point
-export const luminance = ( color, luma = lumaCoeffs ) => dot( color, luma );
+const lumaCoeffs = /*#__PURE__*/ new Vector3();
+export const luminance = ( color, luma = vec3( ... ColorManagement.getLuminanceCoefficients( lumaCoeffs ) ) ) => dot( color, luma );
 
 export const threshold = ( color, threshold ) => mix( vec3( 0.0 ), color, luminance( color ).sub( threshold ).max( 0 ) );
 

src/renderers/shaders/ShaderChunk/common.glsl.js

@@ -89,7 +89,7 @@ float luminance( const in vec3 rgb ) {
 
 	// assumes rgb is in linear color space with sRGB primaries and D65 white point
 
-	const vec3 weights = vec3( 0.2126729, 0.7151522, 0.0721750 );
+	const vec3 weights = vec3( 0.2126, 0.7152, 0.0722 );
 
 	return dot( weights, rgb );