TSL: Color Space revision (#29248)

* Rev `currentColorSpace` and added `currentToneMapping`

* fix imports

* Update ColorSpaceNode.js

* cleanup

* improve tsl colorspace names

Author: sunag

examples/webgpu_sandbox.html

@@ -14,8 +14,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../src/Three.WebGPU.js",
-					"three/tsl": "../src/Three.WebGPU.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/debug": "../src/Three.WebGPU.js",
 					"three/addons/": "./jsm/"
 				}

src/nodes/TSL.js

@@ -85,7 +85,7 @@ export * from './accessors/VelocityNode.js';
 export * from './display/BlendMode.js';
 export { default as BumpMapNode, bumpMap } from './display/BumpMapNode.js';
 export * from './display/ColorAdjustment.js';
-export { default as ColorSpaceNode, linearToColorSpace, colorSpaceToLinear } from './display/ColorSpaceNode.js';
+export { default as ColorSpaceNode, linearSRGBToColorSpace, colorSpaceToLinearSRGB } from './display/ColorSpaceNode.js';
 export { default as FrontFacingNode, frontFacing, faceDirection } from './display/FrontFacingNode.js';
 export { default as NormalMapNode, normalMap } from './display/NormalMapNode.js';
 export { default as PosterizeNode, posterize } from './display/PosterizeNode.js';

src/nodes/accessors/TextureNode.js

@@ -2,7 +2,7 @@ import { registerNodeClass } from '../core/Node.js';
 import UniformNode, { uniform } from '../core/UniformNode.js';
 import { uv } from './UV.js';
 import { textureSize } from './TextureSizeNode.js';
-import { colorSpaceToLinear } from '../display/ColorSpaceNode.js';
+import { colorSpaceToLinearSRGB } from '../display/ColorSpaceNode.js';
 import { expression } from '../code/ExpressionNode.js';
 import { maxMipLevel } from '../utils/MaxMipLevelNode.js';
 import { nodeProxy, vec3, nodeObject } from '../tsl/TSLBase.js';
@@ -274,9 +274,9 @@ class TextureNode extends UniformNode {
 			let snippet = propertyName;
 			const nodeType = this.getNodeType( builder );
 
-			if ( builder.needsColorSpaceToLinear( texture ) ) {
+			if ( builder.needsColorSpaceToLinearSRGB( texture ) ) {
 
-				snippet = colorSpaceToLinear( expression( snippet, nodeType ), texture.colorSpace ).setup( builder ).build( builder, nodeType );
+				snippet = colorSpaceToLinearSRGB( expression( snippet, nodeType ), texture.colorSpace ).setup( builder ).build( builder, nodeType );
 
 			}
 

src/nodes/core/NodeBuilder.js

@@ -605,7 +605,7 @@ class NodeBuilder {
 
 	}
 
-	needsColorSpaceToLinear( /*texture*/ ) {
+	needsColorSpaceToLinearSRGB( /*texture*/ ) {
 
 		return false;
 

src/nodes/display/ColorSpaceNode.js

@@ -30,28 +30,31 @@ export const getColorSpaceMethod = ( source, target ) => {
 
 class ColorSpaceNode extends TempNode {
 
-	constructor( colorSpace, colorNode ) {
+	constructor( colorNode, target = null, source = null ) {
 
 		super( 'vec4' );
 
-		this.colorSpace = colorSpace;
 		this.colorNode = colorNode;
+		this.target = target;
+		this.source = source;
 
 	}
 
 	setup( builder ) {
 
-		const { colorSpace, colorNode } = this;
+		const { renderer, context } = builder;
 
-		if ( colorSpace === ColorSpaceNode.LINEAR_TO_LINEAR ) {
+		const source = this.source || context.outputColorSpace || renderer.outputColorSpace;
+		const target = this.target || context.outputColorSpace || renderer.outputColorSpace;
+		const colorNode = this.colorNode;
 
-			return colorNode;
+		if ( source === target ) return colorNode;
 
-		}
+		const colorSpace = getColorSpaceMethod( source, target );
 
 		let outputNode = null;
 
-		const colorSpaceFn = builder.renderer.nodes.library.getColorSpaceFunction( colorSpace );
+		const colorSpaceFn = renderer.nodes.library.getColorSpaceFunction( colorSpace );
 
 		if ( colorSpaceFn !== null ) {
 
@@ -71,14 +74,12 @@ class ColorSpaceNode extends TempNode {
 
 }
 
-ColorSpaceNode.LINEAR_TO_LINEAR = 'LinearToLinear';
-
 export default ColorSpaceNode;
 
 registerNodeClass( 'ColorSpace', ColorSpaceNode );
 
-export const linearToColorSpace = ( node, colorSpace ) => nodeObject( new ColorSpaceNode( getColorSpaceMethod( LinearSRGBColorSpace, colorSpace ), nodeObject( node ) ) );
-export const colorSpaceToLinear = ( node, colorSpace ) => nodeObject( new ColorSpaceNode( getColorSpaceMethod( colorSpace, LinearSRGBColorSpace ), nodeObject( node ) ) );
+export const linearSRGBToColorSpace = ( node, colorSpace = null ) => nodeObject( new ColorSpaceNode( nodeObject( node ), colorSpace, LinearSRGBColorSpace ) );
+export const colorSpaceToLinearSRGB = ( node, colorSpace = null ) => nodeObject( new ColorSpaceNode( nodeObject( node ), LinearSRGBColorSpace, colorSpace ) );
 
-addMethodChaining( 'linearToColorSpace', linearToColorSpace );
-addMethodChaining( 'colorSpaceToLinear', colorSpaceToLinear );
+addMethodChaining( 'linearSRGBToColorSpace', linearSRGBToColorSpace );
+addMethodChaining( 'colorSpaceToLinearSRGB', colorSpaceToLinearSRGB );

src/nodes/display/RenderOutputNode.js

@@ -37,7 +37,7 @@ class RenderOutputNode extends TempNode {
 
 		if ( outputColorSpace === SRGBColorSpace ) {
 
-			outputNode = outputNode.linearToColorSpace( outputColorSpace );
+			outputNode = outputNode.linearSRGBToColorSpace( outputColorSpace );
 
 		}
 

src/renderers/common/Renderer.js

@@ -25,7 +25,7 @@ import { Vector2 } from '../../math/Vector2.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { RenderTarget } from '../../core/RenderTarget.js';
-import { DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoColorSpace, NoToneMapping, LinearFilter, LinearSRGBColorSpace, HalfFloatType, RGBAFormat, PCFShadowMap } from '../../constants.js';
+import { DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping, LinearFilter, LinearSRGBColorSpace, HalfFloatType, RGBAFormat, PCFShadowMap } from '../../constants.js';
 
 const _scene = /*@__PURE__*/ new Scene();
 const _drawingBufferSize = /*@__PURE__*/ new Vector2();
@@ -493,10 +493,10 @@ class Renderer {
 
 	_getFrameBufferTarget() {
 
-		const { currentColorSpace } = this;
+		const { currentToneMapping, currentColorSpace } = this;
 
-		const useToneMapping = this._renderTarget === null && ( this.toneMapping !== NoToneMapping );
-		const useColorSpace = this._renderTarget === null && ( currentColorSpace !== LinearSRGBColorSpace && currentColorSpace !== NoColorSpace );
+		const useToneMapping = currentToneMapping !== NoToneMapping;
+		const useColorSpace = currentColorSpace !== LinearSRGBColorSpace;
 
 		if ( useToneMapping === false && useColorSpace === false ) return null;
 
@@ -1088,19 +1088,15 @@ class Renderer {
 
 	}
 
-	get currentColorSpace() {
-
-		const renderTarget = this._renderTarget;
-
-		if ( renderTarget !== null ) {
+	get currentToneMapping() {
 
-			const texture = renderTarget.texture;
+		return this._renderTarget !== null ? NoToneMapping : this.toneMapping;
 
-			return ( Array.isArray( texture ) ? texture[ 0 ] : texture ).colorSpace;
+	}
 
-		}
+	get currentColorSpace() {
 
-		return this.outputColorSpace;
+		return this._renderTarget !== null ? LinearSRGBColorSpace : this.outputColorSpace;
 
 	}
 

src/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -163,7 +163,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 	}
 
-	needsColorSpaceToLinear( texture ) {
+	needsColorSpaceToLinearSRGB( texture ) {
 
 		return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;