Nodes: Fix VideoTexture in WebGPUBackend & ColorSpaceNode revision (#…

…26261) * Nodes: Fix VideoTexture ColorSpace in WebGPUBackend * Added webgpu_video_panorama example
mrdoob · Jun 14, 2023 · e6f7c4e · e6f7c4e
1 parent c6536d8
commit e6f7c4e
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 53 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -332,7 +332,8 @@
 		"webgpu_skinning",
 		"webgpu_skinning_instancing",
 		"webgpu_skinning_points",
-		"webgpu_sprites"
+		"webgpu_sprites",
+		"webgpu_video_panorama"
 	],
 	"webaudio": [
 		"webaudio_orientation",

diff --git a/examples/jsm/nodes/Nodes.js b/examples/jsm/nodes/Nodes.js
@@ -90,7 +90,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 ColorAdjustmentNode, saturation, vibrance, hue, lumaCoeffs, luminance } from './display/ColorAdjustmentNode.js';
-export { default as ColorSpaceNode, colorSpace } from './display/ColorSpaceNode.js';
+export { default as ColorSpaceNode, linearToColorSpace, colorSpaceToLinear as sRGBToColorSpace, linearTosRGB, sRGBToLinear } from './display/ColorSpaceNode.js';
 export { default as FrontFacingNode, frontFacing, faceDirection } from './display/FrontFacingNode.js';
 export { default as NormalMapNode, normalMap, TBNViewMatrix } from './display/NormalMapNode.js';
 export { default as PosterizeNode, posterize } from './display/PosterizeNode.js';

diff --git a/examples/jsm/nodes/accessors/TextureNode.js b/examples/jsm/nodes/accessors/TextureNode.js
@@ -1,7 +1,9 @@
 import UniformNode from '../core/UniformNode.js';
 import { uv } from './UVNode.js';
 import { textureSize } from './TextureSizeNode.js';
+import { colorSpaceToLinear } from '../display/ColorSpaceNode.js';
 import { context } from '../core/ContextNode.js';
+import { expression } from '../code/ExpressionNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
 
@@ -136,7 +138,15 @@ class TextureNode extends UniformNode {
 
 			}
 
-			return builder.format( propertyName, nodeType, output );
+			let snippet = propertyName;
+
+			if ( builder.needsColorSpace( this.value ) ) {
+
+				snippet = colorSpaceToLinear( expression( snippet, nodeType ), this.value.colorSpace ).construct( builder ).build( builder, nodeType );
+
+			}
+
+			return builder.format( snippet, nodeType, output );
 
 		}
 

diff --git a/examples/jsm/nodes/core/NodeBuilder.js b/examples/jsm/nodes/core/NodeBuilder.js
@@ -390,6 +390,12 @@ class NodeBuilder {
 
 	}
 
+	needsColorSpace( /*texture*/ ) {
+
+		return false;
+
+	}
+
 	/** @deprecated, r152 */
 	getTextureEncodingFromMap( map ) {
 

diff --git a/examples/jsm/nodes/display/ColorSpaceNode.js b/examples/jsm/nodes/display/ColorSpaceNode.js
@@ -1,17 +1,26 @@
 import TempNode from '../core/TempNode.js';
 import { mix } from '../math/MathNode.js';
 import { addNodeClass } from '../core/Node.js';
-import { addNodeElement, ShaderNode, nodeObject, vec4 } from '../shadernode/ShaderNode.js';
+import { addNodeElement, ShaderNode, nodeObject, nodeProxy, vec4 } from '../shadernode/ShaderNode.js';
 
-import { LinearEncoding, LinearSRGBColorSpace, sRGBEncoding, SRGBColorSpace } from 'three';
+import { LinearSRGBColorSpace, SRGBColorSpace } from 'three';
 
-export const LinearToLinear = new ShaderNode( ( inputs ) => {
+const sRGBToLinearShader = new ShaderNode( ( inputs ) => {
 
-	return inputs.value;
+	const { value } = inputs;
+	const { rgb } = value;
+
+	const a = rgb.mul( 0.9478672986 ).add( 0.0521327014 ).pow( 2.4 );
+	const b = rgb.mul( 0.0773993808 );
+	const factor = rgb.lessThanEqual( 0.04045 );
+
+	const rgbResult = mix( a, b, factor );
+
+	return vec4( rgbResult, value.a );
 
 } );
 
-export const LinearTosRGB = new ShaderNode( ( inputs ) => {
+const LinearTosRGBShader = new ShaderNode( ( inputs ) => {
 
 	const { value } = inputs;
 	const { rgb } = value;
@@ -26,82 +35,75 @@ export const LinearTosRGB = new ShaderNode( ( inputs ) => {
 
 } );
 
-const EncodingLib = {
-	LinearToLinear,
-	LinearTosRGB
-};
+const getColorSpaceMethod = ( colorSpace ) => {
 
-class ColorSpaceNode extends TempNode {
+	let method = null;
 
-	constructor( method, node ) {
+	if ( colorSpace === LinearSRGBColorSpace ) {
 
-		super( 'vec4' );
+		method = 'Linear';
 
-		this.method = method;
+	} else if ( colorSpace === SRGBColorSpace ) {
 
-		this.node = node;
+		method = 'sRGB';
 
 	}
 
-	fromColorSpace( colorSpace ) {
-
-		let method = null;
-
-		if ( colorSpace === LinearSRGBColorSpace ) {
-
-			method = 'Linear';
-
-		} else if ( colorSpace === SRGBColorSpace ) {
-
-			method = 'sRGB';
+	return method;
 
-		}
-
-		this.method = 'LinearTo' + method;
-
-		return this;
-
-	}
-
-	fromEncoding( encoding ) { // @deprecated, r152
-
-		console.warn( 'THREE.ColorSpaceNode: Method .fromEncoding renamed to .fromColorSpace.' );
+};
 
-		let method = null;
+const getMethod = ( source, target ) => {
 
-		if ( encoding === LinearEncoding ) {
+	return getColorSpaceMethod( source ) + 'To' + getColorSpaceMethod( target );
 
-			method = 'Linear';
+};
 
-		} else if ( encoding === sRGBEncoding ) {
+class ColorSpaceNode extends TempNode {
 
-			method = 'sRGB';
+	constructor( method, node ) {
 
-		}
+		super( 'vec4' );
 
-		this.method = 'LinearTo' + method;
+		this.method = method;
 
-		return this;
+		this.node = node;
 
 	}
 
 	construct() {
 
 		const { method, node } = this;
 
-		return EncodingLib[ method ].call( { value: node } );
+		if ( method === ColorSpaceNode.LINEAR_TO_LINEAR )
+			return node;
+
+		return Methods[ method ].call( { value: node } );
 
 	}
 
 }
 
 ColorSpaceNode.LINEAR_TO_LINEAR = 'LinearToLinear';
-ColorSpaceNode.LINEAR_TO_SRGB = 'LinearTosRGB';
+ColorSpaceNode.LINEAR_TO_sRGB = 'LinearTosRGB';
+ColorSpaceNode.sRGB_TO_LINEAR = 'sRGBToLinear';
+
+const Methods = {
+	[ ColorSpaceNode.LINEAR_TO_sRGB ]: LinearTosRGBShader,
+	[ ColorSpaceNode.sRGB_TO_LINEAR ]: sRGBToLinearShader
+};
 
 export default ColorSpaceNode;
 
-export const colorSpace = ( node, colorSpace ) => nodeObject( new ColorSpaceNode( null, nodeObject( node ) ).fromColorSpace( colorSpace ) );
+export const linearToColorSpace = ( node, colorSpace ) => nodeObject( new ColorSpaceNode( getMethod( LinearSRGBColorSpace, colorSpace ), nodeObject( node ) ) );
+export const colorSpaceToLinear = ( node, colorSpace ) => nodeObject( new ColorSpaceNode( getMethod( colorSpace, LinearSRGBColorSpace ), nodeObject( node ) ) );
+
+export const linearTosRGB = nodeProxy( ColorSpaceNode, ColorSpaceNode.LINEAR_TO_sRGB );
+export const sRGBToLinear = nodeProxy( ColorSpaceNode, ColorSpaceNode.sRGB_TO_LINEAR );
 
-addNodeElement( 'colorSpace', colorSpace );
+addNodeElement( 'linearTosRGB', linearTosRGB );
+addNodeElement( 'sRGBToLinear', sRGBToLinear );
+addNodeElement( 'linearToColorSpace', linearToColorSpace );
+addNodeElement( 'colorSpaceToLinear', colorSpaceToLinear );
 
 addNodeClass( ColorSpaceNode );
diff --git a/examples/jsm/nodes/materials/NodeMaterial.js b/examples/jsm/nodes/materials/NodeMaterial.js
@@ -299,7 +299,7 @@ class NodeMaterial extends ShaderMaterial {
 
 		}
 
-		if ( outputColorSpace !== NoColorSpace ) outputNode = outputNode.colorSpace( outputColorSpace );
+		if ( outputColorSpace !== NoColorSpace ) outputNode = outputNode.linearToColorSpace( outputColorSpace );
 
 		// FOG
 

diff --git a/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js b/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js
@@ -131,6 +131,12 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	needsColorSpace( texture ) {
+
+		return texture.isVideoTexture === true;
+
+	}
+
 	getSampler( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
 
 		if ( shaderStage === 'fragment' ) {

diff --git a/examples/screenshots/webgpu_video_panorama.jpg b/examples/screenshots/webgpu_video_panorama.jpg