TSL: `varyingProperty` (#27198)

* TSL: varyingProperty

* update example

examples/jsm/nodes/Nodes.js

@@ -27,7 +27,7 @@ export { default as NodeUniform } from './core/NodeUniform.js';
 export { default as NodeVar } from './core/NodeVar.js';
 export { default as NodeVarying } from './core/NodeVarying.js';
 export { default as ParameterNode, parameter } from './core/ParameterNode.js';
-export { default as PropertyNode, property, output, diffuseColor, roughness, metalness, clearcoat, clearcoatRoughness, sheen, sheenRoughness, iridescence, iridescenceIOR, iridescenceThickness, specularColor, shininess, dashSize, gapSize, pointWidth } from './core/PropertyNode.js';
+export { default as PropertyNode, property, varyingProperty, output, diffuseColor, roughness, metalness, clearcoat, clearcoatRoughness, sheen, sheenRoughness, iridescence, iridescenceIOR, iridescenceThickness, specularColor, shininess, dashSize, gapSize, pointWidth } from './core/PropertyNode.js';
 export { default as StackNode, stack } from './core/StackNode.js';
 export { default as TempNode } from './core/TempNode.js';
 export { default as UniformGroupNode, uniformGroup, objectGroup, renderGroup, frameGroup } from './core/UniformGroupNode.js';

examples/jsm/nodes/core/NodeBuilder.js

@@ -740,7 +740,7 @@ class NodeBuilder {
 
 	}
 
-	getVaryingFromNode( node, type ) {
+	getVaryingFromNode( node, name = null, type = node.getNodeType( this ) ) {
 
 		const nodeData = this.getDataFromNode( node, 'any' );
 
@@ -751,7 +751,9 @@ class NodeBuilder {
 			const varyings = this.varyings;
 			const index = varyings.length;
 
-			nodeVarying = new NodeVarying( 'nodeVarying' + index, type );
+			if ( name === null ) name = 'nodeVarying' + index;
+
+			nodeVarying = new NodeVarying( name, type );
 
 			varyings.push( nodeVarying );
 

examples/jsm/nodes/core/PropertyNode.js

@@ -3,11 +3,12 @@ import { nodeImmutable, nodeObject } from '../shadernode/ShaderNode.js';
 
 class PropertyNode extends Node {
 
-	constructor( nodeType, name = null ) {
+	constructor( nodeType, name = null, varying = false ) {
 
 		super( nodeType );
 
 		this.name = name;
+		this.varying = varying;
 
 		this.isPropertyNode = true;
 
@@ -27,7 +28,20 @@ class PropertyNode extends Node {
 
 	generate( builder ) {
 
-		return builder.getPropertyName( builder.getVarFromNode( this, this.name ) );
+		let nodeVar;
+
+		if ( this.varying === true ) {
+
+			nodeVar = builder.getVaryingFromNode( this, this.name );
+			nodeVar.needsInterpolation = true;
+
+		} else {
+
+			nodeVar = builder.getVarFromNode( this, this.name );
+
+		}
+
+		return builder.getPropertyName( nodeVar );
 
 	}
 
@@ -36,6 +50,7 @@ class PropertyNode extends Node {
 export default PropertyNode;
 
 export const property = ( type, name ) => nodeObject( new PropertyNode( type, name ) );
+export const varyingProperty = ( type, name ) => nodeObject( new PropertyNode( type, name, true ) );
 
 export const diffuseColor = nodeImmutable( PropertyNode, 'vec4', 'DiffuseColor' );
 export const roughness = nodeImmutable( PropertyNode, 'float', 'Roughness' );

examples/jsm/nodes/core/VaryingNode.js

@@ -40,17 +40,11 @@ class VaryingNode extends Node {
 		const { name, node } = this;
 		const type = this.getNodeType( builder );
 
-		const nodeVarying = builder.getVaryingFromNode( this, type );
+		const nodeVarying = builder.getVaryingFromNode( this, name, type );
 
 		// this property can be used to check if the varying can be optimized for a var
 		nodeVarying.needsInterpolation || ( nodeVarying.needsInterpolation = ( builder.shaderStage === 'fragment' ) );
 
-		if ( name !== null ) {
-
-			nodeVarying.name = name;
-
-		}
-
 		const propertyName = builder.getPropertyName( nodeVarying, NodeShaderStage.VERTEX );
 
 		// force node run in vertex stage

examples/jsm/nodes/materials/Line2NodeMaterial.js

@@ -1,7 +1,7 @@
 import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
 import { temp } from '../core/VarNode.js';
 import { varying } from '../core/VaryingNode.js';
-import { property } from '../core/PropertyNode.js';
+import { property, varyingProperty } from '../core/PropertyNode.js';
 import { attribute } from '../core/AttributeNode.js';
 import { cameraProjectionMatrix } from '../accessors/CameraNode.js';
 import { materialColor, materialLineScale, materialLineDashSize, materialLineGapSize, materialLineDashOffset, materialLineWidth } from '../accessors/MaterialNode.js';
@@ -60,7 +60,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			const a = cameraProjectionMatrix.element( 2 ).element( 2 ); // 3nd entry in 3th column
 			const b = cameraProjectionMatrix.element( 3 ).element( 2 ); // 3nd entry in 4th column
-			const nearEstimate = b.mul( -0.5 ).div( a );
+			const nearEstimate = b.mul( - 0.5 ).div( a );
 
 			const alpha = nearEstimate.sub( start.z ).div( end.z.sub( start.z ) );
 
@@ -70,7 +70,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 		this.vertexNode = tslFn( () => {
 
-			varying( vec2(), 'vUv' ).assign( uv() ); // @TODO: Analyze other way to do this
+			varyingProperty( 'vec2', 'vUv' ).assign( uv() );
 
 			const instanceStart = attribute( 'instanceStart' );
 			const instanceEnd = attribute( 'instanceEnd' );
@@ -85,8 +85,8 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			if ( useWorldUnits ) {
 
-				varying( vec3(), 'worldStart' ).assign( start.xyz );
-				varying( vec3(), 'worldEnd' ).assign( end.xyz );
+				varyingProperty( 'vec3', 'worldStart' ).assign( start.xyz );
+				varyingProperty( 'vec3', 'worldEnd' ).assign( end.xyz );
 
 			}
 
@@ -97,7 +97,7 @@ class Line2NodeMaterial extends NodeMaterial {
 			// but we need to perform ndc-space calculations in the shader, so we must address this issue directly
 			// perhaps there is a more elegant solution -- WestLangley
 
-			const perspective = cameraProjectionMatrix.element( 2 ).element( 3 ).equal( -1.0 ); // 4th entry in the 3rd column
+			const perspective = cameraProjectionMatrix.element( 2 ).element( 3 ).equal( - 1.0 ); // 4th entry in the 3rd column
 
 			If( perspective, () => {
 
@@ -173,7 +173,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 				// set the world position
 
-				const worldPos = varying( vec4(), 'worldPos' );
+				const worldPos = varyingProperty( 'vec4', 'worldPos' );
 
 				worldPos.assign( positionGeometry.y.lessThan( 0.5 ).cond( start, end ) );
 				worldPos.assign( worldPos.add( vec4( offset, 0 ) ) );
@@ -257,7 +257,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 		this.colorNode = tslFn( () => {
 
-			const vUv = varying( vec2(), 'vUv' );
+			const vUv = varyingProperty( 'vec2', 'vUv' );
 
 			if ( useDash ) {
 
@@ -288,11 +288,11 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			if ( useWorldUnits ) {
 
-				const worldStart = varying( vec3(), 'worldStart' );
-				const worldEnd = varying( vec3(), 'worldEnd' );
+				const worldStart = varyingProperty( 'vec3', 'worldStart' );
+				const worldEnd = varyingProperty( 'vec3', 'worldEnd' );
 
 				// Find the closest points on the view ray and the line segment
-				const rayEnd = varying( vec4(), 'worldPos' ).xyz.normalize().mul( 1e5 );
+				const rayEnd = varyingProperty( 'vec4', 'worldPos' ).xyz.normalize().mul( 1e5 );
 				const lineDir = worldEnd.sub( worldStart );
 				const params = closestLineToLine( { p1: worldStart, p2: worldEnd, p3: vec3( 0.0, 0.0, 0.0 ), p4: rayEnd } );
 

examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -259,7 +259,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 			if ( shaderStage === 'vertex' ) {
 
-				return `NodeVaryings.${ node.name }`;
+				return `varyings.${ node.name }`;
 
 			}
 
@@ -654,7 +654,7 @@ ${ flowData.code }
 
 		const code = snippets.join( ',\n\t' );
 
-		return shaderStage === 'vertex' ? this._getWGSLStruct( 'NodeVaryingsStruct', '\t' + code ) : code;
+		return shaderStage === 'vertex' ? this._getWGSLStruct( 'VaryingsStruct', '\t' + code ) : code;
 
 	}
 
@@ -808,7 +808,7 @@ ${ flowData.code }
 
 					if ( shaderStage === 'vertex' ) {
 
-						flow += 'NodeVaryings.Vertex = ';
+						flow += 'varyings.Vertex = ';
 
 					} else if ( shaderStage === 'fragment' ) {
 
@@ -888,15 +888,13 @@ ${shaderData.uniforms}
 
 // varyings
 ${shaderData.varyings}
+var<private> varyings : VaryingsStruct;
 
 // codes
 ${shaderData.codes}
 
 @vertex
-fn main( ${shaderData.attributes} ) -> NodeVaryingsStruct {
-
-	// system
-	var NodeVaryings: NodeVaryingsStruct;
+fn main( ${shaderData.attributes} ) -> VaryingsStruct {
 
 	// vars
 	${shaderData.vars}
@@ -904,7 +902,7 @@ fn main( ${shaderData.attributes} ) -> NodeVaryingsStruct {
 	// flow
 	${shaderData.flow}
 
-	return NodeVaryings;
+	return varyings;
 
 }
 `;