WebGPURenderer: update `Line2NodeMaterial` and `InstancedPointsNodeMaterial` (#29319)

* update instancepoint material

* cleanup Line2NodeMaterial

---------

Co-authored-by: aardgoose <angus.sawyer@email.com>

src/materials/nodes/InstancedPointsNodeMaterial.js

@@ -1,12 +1,11 @@
 import NodeMaterial from './NodeMaterial.js';
-import { property } from '../../nodes/core/PropertyNode.js';
 import { attribute } from '../../nodes/core/AttributeNode.js';
 import { cameraProjectionMatrix } from '../../nodes/accessors/Camera.js';
 import { materialColor, materialOpacity, materialPointWidth } from '../../nodes/accessors/MaterialNode.js'; // or should this be a property, instead?
 import { modelViewMatrix } from '../../nodes/accessors/ModelNode.js';
 import { positionGeometry } from '../../nodes/accessors/Position.js';
-import { smoothstep } from '../../nodes/math/MathNode.js';
-import { Fn, varying, vec2, vec4 } from '../../nodes/tsl/TSLBase.js';
+import { smoothstep, lengthSq } from '../../nodes/math/MathNode.js';
+import { Fn, vec4, float } from '../../nodes/tsl/TSLBase.js';
 import { uv } from '../../nodes/accessors/UV.js';
 import { viewport } from '../../nodes/display/ViewportNode.js';
 
@@ -61,14 +60,10 @@ class InstancedPointsNodeMaterial extends NodeMaterial {
 
 		this.vertexNode = Fn( () => {
 
-			//vUv = uv;
-			varying( vec2(), 'vUv' ).assign( uv() ); // @TODO: Analyze other way to do this
-
 			const instancePosition = attribute( 'instancePosition' ).xyz;
 
 			// camera space
-			const mvPos = property( 'vec4', 'mvPos' );
-			mvPos.assign( modelViewMatrix.mul( vec4( instancePosition, 1.0 ) ) );
+			const mvPos = vec4( modelViewMatrix.mul( vec4( instancePosition, 1.0 ) ) );
 
 			const aspect = viewport.z.div( viewport.w );
 
@@ -76,8 +71,7 @@ class InstancedPointsNodeMaterial extends NodeMaterial {
 			const clipPos = cameraProjectionMatrix.mul( mvPos );
 
 			// offset in ndc space
-			const offset = property( 'vec2', 'offset' );
-			offset.assign( positionGeometry.xy );
+			const offset = positionGeometry.xy.toVar();
 
 			offset.mulAssign( this.pointWidthNode ? this.pointWidthNode : materialPointWidth );
 
@@ -88,32 +82,21 @@ class InstancedPointsNodeMaterial extends NodeMaterial {
 			offset.assign( offset.mul( clipPos.w ) );
 
 			//clipPos.xy += offset;
-			clipPos.assign( clipPos.add( vec4( offset, 0, 0 ) ) );
+			clipPos.addAssign( vec4( offset, 0, 0 ) );
 
 			return clipPos;
 
-			//vec4 mvPosition = mvPos; // this was used for somethihng...
-
 		} )();
 
 		this.fragmentNode = Fn( () => {
 
-			const vUv = varying( vec2(), 'vUv' );
-
-			// force assignment into correct place in flow
-			const alpha = property( 'float', 'alpha' );
-			alpha.assign( 1 );
-
-			const a = vUv.x;
-			const b = vUv.y;
+			const alpha = float( 1 ).toVar();
 
-			const len2 = a.mul( a ).add( b.mul( b ) );
+			const len2 = lengthSq( uv() );
 
 			if ( useAlphaToCoverage ) {
 
-				// force assignment out of following 'if' statement - to avoid uniform control flow errors
-				const dlen = property( 'float', 'dlen' );
-				dlen.assign( len2.fwidth() );
+				const dlen = float( len2.fwidth() ).toVar();
 
 				alpha.assign( smoothstep( dlen.oneMinus(), dlen.add( 1 ), len2 ).oneMinus() );
 

src/materials/nodes/Line2NodeMaterial.js

@@ -1,5 +1,5 @@
 import NodeMaterial from './NodeMaterial.js';
-import { property, varyingProperty } from '../../nodes/core/PropertyNode.js';
+import { varyingProperty } from '../../nodes/core/PropertyNode.js';
 import { attribute } from '../../nodes/core/AttributeNode.js';
 import { cameraProjectionMatrix } from '../../nodes/accessors/Camera.js';
 import { materialColor, materialLineScale, materialLineDashSize, materialLineGapSize, materialLineDashOffset, materialLineWidth } from '../../nodes/accessors/MaterialNode.js';
@@ -75,22 +75,24 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			return vec4( mix( start.xyz, end.xyz, alpha ), end.w );
 
+		} ).setLayout( {
+			name: 'trimSegment',
+			type: 'vec4',
+			inputs: [
+				{ name: 'start', type: 'vec4' },
+				{ name: 'end', type: 'vec4' }
+			]
 		} );
 
 		this.vertexNode = Fn( () => {
 
-			varyingProperty( 'vec2', 'vUv' ).assign( uv() );
-
 			const instanceStart = attribute( 'instanceStart' );
 			const instanceEnd = attribute( 'instanceEnd' );
 
 			// camera space
 
-			const start = property( 'vec4', 'start' );
-			const end = property( 'vec4', 'end' );
-
-			start.assign( modelViewMatrix.mul( vec4( instanceStart, 1.0 ) ) ); // force assignment into correct place in flow
-			end.assign( modelViewMatrix.mul( vec4( instanceEnd, 1.0 ) ) );
+			const start = vec4( modelViewMatrix.mul( vec4( instanceStart, 1.0 ) ) ).toVar( 'start' );
+			const end = vec4( modelViewMatrix.mul( vec4( instanceEnd, 1.0 ) ) ).toVar( 'end' );
 
 			if ( useWorldUnits ) {
 
@@ -187,9 +189,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			} else {
 
-				const offset = property( 'vec2', 'offset' );
-
-				offset.assign( vec2( dir.y, dir.x.negate() ) );
+				const offset = vec2( dir.y, dir.x.negate() ).toVar( 'offset' );
 
 				// undo aspect ratio adjustment
 				dir.x.assign( dir.x.div( aspect ) );
@@ -254,7 +254,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 		this.fragmentNode = Fn( () => {
 
-			const vUv = varyingProperty( 'vec2', 'vUv' );
+			const vUv = uv();
 
 			if ( useDash ) {
 
@@ -279,9 +279,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			}
 
-			 // force assignment into correct place in flow
-			const alpha = property( 'float', 'alpha' );
-			alpha.assign( 1 );
+			const alpha = float( 1 ).toVar( 'alpha' );
 
 			if ( useWorldUnits ) {
 
@@ -325,9 +323,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 					const len2 = a.mul( a ).add( b.mul( b ) );
 
-					// force assignment out of following 'if' statement - to avoid uniform control flow errors
-					const dlen = property( 'float', 'dlen' );
-					dlen.assign( len2.fwidth() );
+					const dlen = float( len2.fwidth() ).toVar( 'dlen' );
 
 					If( vUv.y.abs().greaterThan( 1.0 ), () => {