WebGPURenderer: Blending revision 1/2 (#26455)

* Delete NodeRender.js

* TextureNode: Add .setUpdateMatrix()

* WebGPUPipeline: Add .getBlending()

* cleanup

examples/jsm/nodes/accessors/TextureNode.js

@@ -20,7 +20,9 @@ class TextureNode extends UniformNode {
 		this.levelNode = levelNode;
 		this.compareNode = compareNode;
 
-		this.updateType = NodeUpdateType.FRAME;
+		this.updateMatrix = uvNode === null;
+
+		this.setUpdateMatrix( this.updateMatrix );
 
 	}
 
@@ -44,17 +46,29 @@ class TextureNode extends UniformNode {
 
 	}
 
-	getDefaultUV() {
+	getDefaultUV( uvNode = null ) {
 
 		const texture = this.value;
 
-		return uniform( texture.matrix ).mul( vec3( uv( texture.channel ), 1 ) );
+		if ( uvNode === null ) uvNode = uv( texture.channel );
+
+		return uniform( texture.matrix ).mul( vec3( uvNode, 1 ) );
+
+	}
+
+	setUpdateMatrix( value ) {
+
+		this.updateMatrix = value;
+		this.updateType = value ? NodeUpdateType.FRAME : NodeUpdateType.NONE;
+
+		return this;
 
 	}
 
 	construct( builder ) {
 
 		const properties = builder.getNodeProperties( this );
+		const texture = this.value;
 
 		//
 
@@ -66,7 +80,15 @@ class TextureNode extends UniformNode {
 
 		}
 
-		uvNode || ( uvNode = this.getDefaultUV() );
+		if ( this.updateMatrix ) {
+
+			uvNode = this.getDefaultUV( uvNode );
+
+		} else if ( ! uvNode ) {
+
+			uvNode = uv( texture.channel );
+
+		}
 
 		//
 

examples/jsm/renderers/common/nodes/NodeRender.js

@@ -1,302 +0,0 @@
-import WebGPUNodeBuilder from '../../webgpu/backends/webgpu/builder/WGSLNodeBuilder.js';
-import { NoToneMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
-import { NodeFrame, cubeTexture, texture, rangeFog, densityFog, reference, toneMapping, positionWorld, modelWorldMatrix, transformDirection, equirectUV, viewportBottomLeft } from '../../../nodes/Nodes.js';
-
-class NodeRender {
-
-	constructor( renderer, properties ) {
-
-		this.renderer = renderer;
-		this.properties = properties;
-
-		this.nodeFrame = new NodeFrame();
-
-	}
-
-	get( renderObject ) {
-
-		const renderObjectProperties = this.properties.get( renderObject );
-
-		let nodeBuilder = renderObjectProperties.nodeBuilder;
-
-		if ( nodeBuilder === undefined ) {
-
-			nodeBuilder = new WebGPUNodeBuilder( renderObject.object, this.renderer );
-			nodeBuilder.material = renderObject.material;
-			nodeBuilder.lightsNode = renderObject.lightsNode;
-			nodeBuilder.environmentNode = this.getEnvironmentNode( renderObject.scene );
-			nodeBuilder.fogNode = this.getFogNode( renderObject.scene );
-			nodeBuilder.toneMappingNode = this.getToneMappingNode();
-			nodeBuilder.build();
-
-			renderObjectProperties.nodeBuilder = nodeBuilder;
-
-		}
-
-		return nodeBuilder;
-
-	}
-
-	getForCompute( computeNode ) {
-
-		const computeProperties = this.properties.get( computeNode );
-
-		let nodeBuilder = computeProperties.nodeBuilder;
-
-		if ( nodeBuilder === undefined ) {
-
-			nodeBuilder = new WebGPUNodeBuilder( computeNode, this.renderer );
-			nodeBuilder.build();
-
-			computeProperties.nodeBuilder = nodeBuilder;
-
-		}
-
-		return nodeBuilder;
-
-	}
-
-	remove( renderObject ) {
-
-		const objectProperties = this.properties.get( renderObject );
-
-		delete objectProperties.nodeBuilder;
-
-	}
-
-	getEnvironmentNode( scene ) {
-
-		return scene.environmentNode || this.properties.get( scene ).environmentNode || null;
-
-	}
-
-	getFogNode( scene ) {
-
-		return scene.fogNode || this.properties.get( scene ).fogNode || null;
-
-	}
-
-	getToneMappingNode() {
-
-		return this.renderer.toneMappingNode || this.properties.get( this.renderer ).toneMappingNode || null;
-
-	}
-
-	getCacheKey( scene, lightsNode ) {
-
-		const environmentNode = this.getEnvironmentNode( scene );
-		const fogNode = this.getFogNode( scene );
-		const toneMappingNode = this.getToneMappingNode();
-
-		const cacheKey = [];
-
-		if ( lightsNode ) cacheKey.push( 'lightsNode:' + lightsNode.getCacheKey() );
-		if ( environmentNode ) cacheKey.push( 'environmentNode:' + environmentNode.getCacheKey() );
-		if ( fogNode ) cacheKey.push( 'fogNode:' + fogNode.getCacheKey() );
-		if ( toneMappingNode ) cacheKey.push( 'toneMappingNode:' + toneMappingNode.getCacheKey() );
-
-		return '{' + cacheKey.join( ',' ) + '}';
-
-	}
-
-	updateToneMapping() {
-
-		const renderer = this.renderer;
-		const rendererProperties = this.properties.get( renderer );
-		const rendererToneMapping = renderer.toneMapping;
-
-		if ( rendererToneMapping !== NoToneMapping ) {
-
-			if ( rendererProperties.toneMapping !== rendererToneMapping ) {
-
-				rendererProperties.toneMappingNode = toneMapping( rendererToneMapping, reference( 'toneMappingExposure', 'float', renderer ) );
-				rendererProperties.toneMapping = rendererToneMapping;
-
-			}
-
-		} else {
-
-			delete rendererProperties.toneMappingNode;
-			delete rendererProperties.toneMapping;
-
-		}
-
-	}
-
-	updateBackground( scene ) {
-
-		const sceneProperties = this.properties.get( scene );
-		const background = scene.background;
-
-		if ( background ) {
-
-			if ( sceneProperties.background !== background ) {
-
-				let backgroundNode = null;
-
-				if ( background.isCubeTexture === true ) {
-
-					backgroundNode = cubeTexture( background, transformDirection( positionWorld, modelWorldMatrix ) );
-
-				} else if ( background.isTexture === true ) {
-
-					let nodeUV = null;
-
-					if ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping ) {
-
-						nodeUV = equirectUV();
-
-					} else {
-
-						nodeUV = viewportBottomLeft;
-
-					}
-
-					backgroundNode = texture( background, nodeUV );
-
-				} else if ( background.isColor !== true ) {
-
-					console.error( 'WebGPUNodes: Unsupported background configuration.', background );
-
-				}
-
-				sceneProperties.backgroundNode = backgroundNode;
-				sceneProperties.background = background;
-
-			}
-
-		} else if ( sceneProperties.backgroundNode ) {
-
-			delete sceneProperties.backgroundNode;
-			delete sceneProperties.background;
-
-		}
-
-	}
-
-	updateFog( scene ) {
-
-		const sceneProperties = this.properties.get( scene );
-		const fog = scene.fog;
-
-		if ( fog ) {
-
-			if ( sceneProperties.fog !== fog ) {
-
-				let fogNode = null;
-
-				if ( fog.isFogExp2 ) {
-
-					fogNode = densityFog( reference( 'color', 'color', fog ), reference( 'density', 'float', fog ) );
-
-				} else if ( fog.isFog ) {
-
-					fogNode = rangeFog( reference( 'color', 'color', fog ), reference( 'near', 'float', fog ), reference( 'far', 'float', fog ) );
-
-				} else {
-
-					console.error( 'WebGPUNodes: Unsupported fog configuration.', fog );
-
-				}
-
-				sceneProperties.fogNode = fogNode;
-				sceneProperties.fog = fog;
-
-			}
-
-		} else {
-
-			delete sceneProperties.fogNode;
-			delete sceneProperties.fog;
-
-		}
-
-	}
-
-	updateEnvironment( scene ) {
-
-		const sceneProperties = this.properties.get( scene );
-		const environment = scene.environment;
-
-		if ( environment ) {
-
-			if ( sceneProperties.environment !== environment ) {
-
-				let environmentNode = null;
-
-				if ( environment.isCubeTexture === true ) {
-
-					environmentNode = cubeTexture( environment );
-
-				} else if ( environment.isTexture === true ) {
-
-					environmentNode = texture( environment );
-
-				} else {
-
-					console.error( 'WebGPUNodes: Unsupported environment configuration.', environment );
-
-				}
-
-				sceneProperties.environmentNode = environmentNode;
-				sceneProperties.environment = environment;
-
-			}
-
-		} else if ( sceneProperties.environmentNode ) {
-
-			delete sceneProperties.environmentNode;
-			delete sceneProperties.environment;
-
-		}
-
-	}
-
-	getNodeFrame( renderObject ) {
-
-		const nodeFrame = this.nodeFrame;
-		nodeFrame.scene = renderObject.scene;
-		nodeFrame.object = renderObject.object;
-		nodeFrame.camera = renderObject.camera;
-		nodeFrame.renderer = renderObject.renderer;
-		nodeFrame.material = renderObject.material;
-
-		return nodeFrame;
-
-	}
-
-	updateBefore( renderObject ) {
-
-		const nodeFrame = this.getNodeFrame( renderObject );
-		const nodeBuilder = this.get( renderObject );
-
-		for ( const node of nodeBuilder.updateBeforeNodes ) {
-
-			nodeFrame.updateBeforeNode( node );
-
-		}
-
-	}
-
-	update( renderObject ) {
-
-		const nodeFrame = this.getNodeFrame( renderObject );
-		const nodeBuilder = this.get( renderObject );
-
-		for ( const node of nodeBuilder.updateNodes ) {
-
-			nodeFrame.updateNode( node );
-
-		}
-
-	}
-
-	dispose() {
-
-		this.nodeFrame = new NodeFrame();
-
-	}
-
-}
-
-export default NodeRender;

examples/jsm/renderers/common/nodes/Nodes.js

@@ -165,7 +165,7 @@ class Nodes extends DataMap {
 
 					}
 
-					backgroundNode = texture( background, nodeUV );
+					backgroundNode = texture( background, nodeUV ).setUpdateMatrix( true );
 
 				} else if ( background.isColor !== true ) {
 

examples/jsm/renderers/webgpu/utils/WebGPUConstants.js

@@ -222,17 +222,17 @@ export const GPUFilterMode = {
 export const GPUBlendFactor = {
 	Zero: 'zero',
 	One: 'one',
-	SrcColor: 'src-color',
-	OneMinusSrcColor: 'one-minus-src-color',
+	Src: 'src',
+	OneMinusSrc: 'one-minus-src',
 	SrcAlpha: 'src-alpha',
 	OneMinusSrcAlpha: 'one-minus-src-alpha',
-	DstColor: 'dst-color',
-	OneMinusDstColor: 'one-minus-dst-color',
+	Dst: 'dst',
+	OneMinusDstColor: 'one-minus-dst',
 	DstAlpha: 'dst-alpha',
 	OneMinusDstAlpha: 'one-minus-dst-alpha',
 	SrcAlphaSaturated: 'src-alpha-saturated',
-	BlendColor: 'blend-color',
-	OneMinusBlendColor: 'one-minus-blend-color'
+	Constant: 'constant',
+	OneMinusConstant: 'one-minus-constant'
 };
 
 export const GPUBlendOperation = {

examples/jsm/renderers/webgpu/utils/WebGPUPipelineUtils.js

@@ -45,10 +45,7 @@ class WebGPUPipelineUtils {
 
 		if ( material.transparent === true && material.blending !== NoBlending ) {
 
-			blending = {
-				alpha: this._getAlphaBlend( material ),
-				color: this._getColorBlend( material )
-			};
+			blending = this._getBlending( material );
 
 		}
 
@@ -125,92 +122,108 @@ class WebGPUPipelineUtils {
 
 	}
 
-	_getAlphaBlend( material ) {
+	_getBlending( material ) {
+
+		let color, alpha;
 
 		const blending = material.blending;
-		const premultipliedAlpha = material.premultipliedAlpha;
 
-		let alphaBlend = undefined;
+		if ( blending === CustomBlending ) {
 
-		switch ( blending ) {
+			const blendSrcAlpha = material.blendSrcAlpha !== null ? material.blendSrcAlpha : GPUBlendFactor.One;
+			const blendDstAlpha = material.blendDstAlpha !== null ? material.blendDstAlpha : GPUBlendFactor.Zero;
+			const blendEquationAlpha = material.blendEquationAlpha !== null ? material.blendEquationAlpha : GPUBlendFactor.Add;
 
-			case NormalBlending:
+			color = {
+				srcFactor: this._getBlendFactor( material.blendSrc ),
+				dstFactor: this._getBlendFactor( material.blendDst ),
+				operation: this._getBlendOperation( material.blendEquation )
+			};
 
-				if ( premultipliedAlpha === false ) {
+			alpha = {
+				srcFactor: this._getBlendFactor( blendSrcAlpha ),
+				dstFactor: this._getBlendFactor( blendDstAlpha ),
+				operation: this._getBlendOperation( blendEquationAlpha )
+			};
 
-					alphaBlend = {
-						srcFactor: GPUBlendFactor.One,
-						dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
-						operation: GPUBlendOperation.Add
-					};
+		} else {
 
-				}
+			const premultipliedAlpha = material.premultipliedAlpha;
 
-				break;
+			const setBlend = ( srcRGB, dstRGB, srcAlpha, dstAlpha ) => {
 
-			case AdditiveBlending:
+				color = {
+					srcFactor: srcRGB,
+					dstFactor: dstRGB,
+					operation: GPUBlendOperation.Add
+				};
 
-				alphaBlend = {
-					srcFactor: GPUBlendFactor.Zero,
-					dstFactor: GPUBlendFactor.One,
+				alpha = {
+					srcFactor: srcAlpha,
+					dstFactor: dstAlpha,
 					operation: GPUBlendOperation.Add
 				};
 
-				break;
+			};
+
+			if ( premultipliedAlpha ) {
 
-			case SubtractiveBlending:
+				switch ( blending ) {
 
-				if ( premultipliedAlpha === true ) {
+					case NormalBlending:
+						setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.OneMinusSrcAlpha, GPUBlendFactor.One, GPUBlendFactor.OneMinusSrcAlpha );
+						break;
 
-					alphaBlend = {
-						srcFactor: GPUBlendFactor.OneMinusSrcColor,
-						dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
-						operation: GPUBlendOperation.Add
-					};
+					case AdditiveBlending:
+						setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.One, GPUBlendFactor.One, GPUBlendFactor.One );
+						break;
+
+					case SubtractiveBlending:
+						setBlend( GPUBlendFactor.Zero, GPUBlendFactor.OneMinusSrc, GPUBlendFactor.Zero, GPUBlendFactor.One );
+						break;
+
+					case MultiplyBlending:
+						setBlend( GPUBlendFactor.Zero, GPUBlendFactor.Src, GPUBlendFactor.Zero, GPUBlendFactor.SrcAlpha );
+						break;
 
 				}
 
-				break;
+			} else {
 
-			case MultiplyBlending:
+				switch ( blending ) {
 
-				if ( premultipliedAlpha === true ) {
+					case NormalBlending:
+						setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.OneMinusSrcAlpha, GPUBlendFactor.One, GPUBlendFactor.OneMinusSrcAlpha );
+						break;
 
-					alphaBlend = {
-						srcFactor: GPUBlendFactor.Zero,
-						dstFactor: GPUBlendFactor.SrcAlpha,
-						operation: GPUBlendOperation.Add
-					};
+					case AdditiveBlending:
+						setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.One, GPUBlendFactor.SrcAlpha, GPUBlendFactor.One );
+						break;
 
-				}
+					case SubtractiveBlending:
+						setBlend( GPUBlendFactor.Zero, GPUBlendFactor.OneMinusSrc, GPUBlendFactor.Zero, GPUBlendFactor.One );
+						break;
 
-				break;
+					case MultiplyBlending:
+						setBlend( GPUBlendFactor.Zero, GPUBlendFactor.Src, GPUBlendFactor.Zero, GPUBlendFactor.Src );
+						break;
 
-			case CustomBlending:
+				}
 
-				const blendSrcAlpha = material.blendSrcAlpha;
-				const blendDstAlpha = material.blendDstAlpha;
-				const blendEquationAlpha = material.blendEquationAlpha;
+			}
 
-				if ( blendSrcAlpha !== null && blendDstAlpha !== null && blendEquationAlpha !== null ) {
+		}
 
-					alphaBlend = {
-						srcFactor: this._getBlendFactor( blendSrcAlpha ),
-						dstFactor: this._getBlendFactor( blendDstAlpha ),
-						operation: this._getBlendOperation( blendEquationAlpha )
-					};
+		if ( color !== undefined && alpha !== undefined ) {
 
-				}
+			return { color, alpha };
 
-				break;
+		} else {
 
-			default:
-				console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );
+			console.error( 'THREE.WebGPURenderer: Invalid blending: ', blending );
 
 		}
 
-		return alphaBlend;
-
 	}
 
 	_getBlendFactor( blend ) {
@@ -228,11 +241,11 @@ class WebGPUPipelineUtils {
 				break;
 
 			case SrcColorFactor:
-				blendFactor = GPUBlendFactor.SrcColor;
+				blendFactor = GPUBlendFactor.Src;
 				break;
 
 			case OneMinusSrcColorFactor:
-				blendFactor = GPUBlendFactor.OneMinusSrcColor;
+				blendFactor = GPUBlendFactor.OneMinusSrc;
 				break;
 
 			case SrcAlphaFactor:
@@ -244,7 +257,7 @@ class WebGPUPipelineUtils {
 				break;
 
 			case DstColorFactor:
-				blendFactor = GPUBlendFactor.DstColor;
+				blendFactor = GPUBlendFactor.Dst;
 				break;
 
 			case OneMinusDstColorFactor:
@@ -264,11 +277,11 @@ class WebGPUPipelineUtils {
 				break;
 
 			case BlendColorFactor:
-				blendFactor = GPUBlendFactor.BlendColor;
+				blendFactor = GPUBlendFactor.Constant;
 				break;
 
 			case OneMinusBlendColorFactor:
-				blendFactor = GPUBlendFactor.OneMinusBlendColor;
+				blendFactor = GPUBlendFactor.OneMinusConstant;
 				break;
 
 			default:
@@ -280,58 +293,6 @@ class WebGPUPipelineUtils {
 
 	}
 
-	_getColorBlend( material ) {
-
-		const blending = material.blending;
-		const premultipliedAlpha = material.premultipliedAlpha;
-
-		const colorBlend = {
-			srcFactor: null,
-			dstFactor: null,
-			operation: null
-		};
-
-		switch ( blending ) {
-
-			case NormalBlending:
-				colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
-				colorBlend.dstFactor = GPUBlendFactor.OneMinusSrcAlpha;
-				colorBlend.operation = GPUBlendOperation.Add;
-				break;
-
-			case AdditiveBlending:
-				colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
-				colorBlend.dstFactor = GPUBlendFactor.One;
-				colorBlend.operation = GPUBlendOperation.Add;
-				break;
-
-			case SubtractiveBlending:
-				colorBlend.srcFactor = GPUBlendFactor.Zero;
-				colorBlend.dstFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.Zero : GPUBlendFactor.OneMinusSrcColor;
-				colorBlend.operation = GPUBlendOperation.Add;
-				break;
-
-			case MultiplyBlending:
-				colorBlend.srcFactor = GPUBlendFactor.Zero;
-				colorBlend.dstFactor = GPUBlendFactor.SrcColor;
-				colorBlend.operation = GPUBlendOperation.Add;
-				break;
-
-			case CustomBlending:
-				colorBlend.srcFactor = this._getBlendFactor( material.blendSrc );
-				colorBlend.dstFactor = this._getBlendFactor( material.blendDst );
-				colorBlend.operation = this._getBlendOperation( material.blendEquation );
-				break;
-
-			default:
-				console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );
-
-		}
-
-		return colorBlend;
-
-	}
-
 	_getStencilCompare( material ) {
 
 		let stencilCompare;