WebGLRenderer: Add .setLookCDL()

src/renderers/WebGLRenderer.js

@@ -145,11 +145,13 @@ class WebGLRenderer {
 
 		this._outputColorSpace = SRGBColorSpace;
 
-		// tone mapping
+		// image formation
 
 		this.toneMapping = NoToneMapping;
 		this.toneMappingExposure = 1.0;
 
+		this._lookCDL = new Vector4( 1, 0, 1, 1 );
+
 		// internal properties
 
 		const _this = this;
@@ -501,6 +503,12 @@ class WebGLRenderer {
 
 		};
 
+		this.setLookCDL = function ( slope = 1, offset = 0, power = 1, saturation = 1 ) {
+
+			this._lookCDL.set( slope, offset, power, saturation );
+
+		};
+
 		// Clearing
 
 		this.getClearColor = function ( target ) {
@@ -1643,6 +1651,7 @@ class WebGLRenderer {
 			materialProperties.fog = scene.fog;
 			materialProperties.envMap = ( material.isMeshStandardMaterial ? cubeuvmaps : cubemaps ).get( material.envMap || materialProperties.environment );
 			materialProperties.envMapRotation = ( materialProperties.environment !== null && material.envMap === null ) ? scene.environmentRotation : material.envMapRotation;
+			materialProperties.lookCDL = _this._lookCDL;
 
 			if ( programs === undefined ) {
 

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

@@ -5,6 +5,24 @@ export default /* glsl */`
 #endif
 
 uniform float toneMappingExposure;
+uniform vec4 lookCDL;
+
+// Applies ASC CDL v1.2 color grade to input color in an unspecified log or linear space.
+vec3 applyLookCDL( vec3 color ) {
+
+	float slope = lookCDL.x;
+	float offset = lookCDL.y;
+	float power = lookCDL.z;
+	float saturation = lookCDL.w;
+
+	// Fixed Rec. 709 weights for saturation as specified by ASC CDL v1.2.
+	float luma = dot( color, vec3( 0.2126, 0.7152, 0.0722 ) );
+
+	color = pow( max( color * slope + offset, 0.0 ), vec3( power ) );
+
+	return max( luma + saturation * ( color - luma ), 0.0 );
+
+}
 
 // exposure only
 vec3 LinearToneMapping( vec3 color ) {
@@ -63,6 +81,9 @@ vec3 ACESFilmicToneMapping( vec3 color ) {
 
 	color = ACESInputMat * color;
 
+	// TODO: Convert to ACEScc or ACEScct, apply CDL, and convert back.
+	// color = applyLookCDL( color );
+
 	// Apply RRT and ODT
 	color = RRTAndODTFit( color );
 
@@ -149,7 +170,7 @@ vec3 AgXToneMapping( vec3 color ) {
 	color = agxDefaultContrastApprox( color );
 
 	// Apply AgX look
-	// v = agxLook(v, look);
+	color = applyLookCDL( color );
 
 	color = AgXOutsetMatrix * color;
 

src/renderers/shaders/UniformsLib.js

@@ -1,6 +1,7 @@
 import { Color } from '../../math/Color.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { Matrix3 } from '../../math/Matrix3.js';
+import { Vector4 } from '../../math/Vector4.js';
 
 /**
  * Uniforms library for shared webgl shaders
@@ -19,7 +20,9 @@ const UniformsLib = {
 		alphaMap: { value: null },
 		alphaMapTransform: { value: /*@__PURE__*/ new Matrix3() },
 
-		alphaTest: { value: 0 }
+		alphaTest: { value: 0 },
+
+		lookCDL: { value: /*@__PURE__*/ new Vector4() },
 
 	},
 

src/renderers/webgl/WebGLMaterials.js

@@ -121,6 +121,10 @@ function WebGLMaterials( renderer, properties ) {
 
 		uniforms.opacity.value = material.opacity;
 
+		const materialProperties = properties.get( material );
+
+		uniforms.lookCDL.value.copy( materialProperties.lookCDL );
+
 		if ( material.color ) {
 
 			uniforms.diffuse.value.copy( material.color );
@@ -214,8 +218,6 @@ function WebGLMaterials( renderer, properties ) {
 
 		}
 
-		const materialProperties = properties.get( material );
-
 		const envMap = materialProperties.envMap;
 		const envMapRotation = materialProperties.envMapRotation;