Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ColorManagement: Add .getLuminanceCoefficients #28880

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions examples/jsm/shaders/ColorifyShader.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,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 = luminance( texel.xyz );

gl_FragColor = vec4( v * color, texel.w );

Expand Down
4 changes: 1 addition & 3 deletions examples/jsm/shaders/LuminosityHighPassShader.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,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 = luminance( texel.xyz );

vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );

Expand Down
10 changes: 10 additions & 0 deletions src/math/ColorManagement.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
},
Expand Down Expand Up @@ -123,6 +127,12 @@ export const ColorManagement = {

},

getLuminanceCoefficients: function ( target, colorSpace = this._workingColorSpace ) {

return target.fromArray( COLOR_SPACES[ colorSpace ].luminanceCoefficients );

},

};


Expand Down
2 changes: 1 addition & 1 deletion src/nodes/Nodes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
9 changes: 7 additions & 2 deletions src/nodes/display/ColorAdjustmentNode.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 } ) => {

Expand Down Expand Up @@ -86,8 +88,11 @@ 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 _luminanceCoefficients = /*#__PURE__*/ new Vector3();
export const luminance = (
color,
luminanceCoefficients = vec3( ... ColorManagement.getLuminanceCoefficients( _luminanceCoefficients ) )
) => dot( color, luminanceCoefficients );

export const threshold = ( color, threshold ) => mix( vec3( 0.0 ), color, luminance( color ).sub( threshold ).max( 0 ) );

Expand Down
10 changes: 0 additions & 10 deletions src/renderers/shaders/ShaderChunk/common.glsl.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,16 +85,6 @@ mat3 transposeMat3( const in mat3 m ) {

}

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 );

return dot( weights, rgb );

}

bool isPerspectiveMatrix( mat4 m ) {

return m[ 2 ][ 3 ] == - 1.0;
Expand Down
26 changes: 26 additions & 0 deletions src/renderers/webgl/WebGLProgram.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { WebGLShader } from './WebGLShader.js';
import { ShaderChunk } from '../shaders/ShaderChunk.js';
import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, CubeRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, VSMShadowMap, AgXToneMapping, ACESFilmicToneMapping, NeutralToneMapping, CineonToneMapping, CustomToneMapping, ReinhardToneMapping, LinearToneMapping, GLSL3, LinearSRGBColorSpace, SRGBColorSpace, LinearDisplayP3ColorSpace, DisplayP3ColorSpace, P3Primaries, Rec709Primaries } from '../../constants.js';
import { ColorManagement } from '../../math/ColorManagement.js';
import { Vector3 } from '../../math/Vector3.js';

// From https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile/
const COMPLETION_STATUS_KHR = 0x91B1;
Expand Down Expand Up @@ -142,6 +143,30 @@ function getToneMappingFunction( functionName, toneMapping ) {

}

const _v0 = /*@__PURE__*/ new Vector3();

function getLuminanceFunction() {

ColorManagement.getLuminanceCoefficients( _v0 );

const r = _v0.x.toFixed( 4 );
const g = _v0.y.toFixed( 4 );
const b = _v0.z.toFixed( 4 );

return [

'float luminance( const in vec3 rgb ) {',

` const vec3 weights = vec3( ${ r }, ${ g }, ${ b } );`,

' return dot( weights, rgb );',

'}'

].join( '\n' );

}

function generateVertexExtensions( parameters ) {

const chunks = [
Expand Down Expand Up @@ -811,6 +836,7 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {

ShaderChunk[ 'colorspace_pars_fragment' ], // this code is required here because it is used by the various encoding/decoding function defined below
getTexelEncodingFunction( 'linearToOutputTexel', parameters.outputColorSpace ),
getLuminanceFunction(),

parameters.useDepthPacking ? '#define DEPTH_PACKING ' + parameters.depthPacking : '',

Expand Down