WebGPURenderer: Revisions for release (#30803)

examples/jsm/tsl/display/AfterImageNode.js

@@ -41,7 +41,7 @@ class AfterImageNode extends TempNode {
 		 *
 		 * @type {TextureNode}
 		 */
-		this.textureNodeOld = texture();
+		this.textureNodeOld = texture( null );
 
 		/**
 		 * How quickly the after-image fades. A higher value means the after-image

examples/jsm/tsl/lighting/TiledLightsNode.js

@@ -197,7 +197,7 @@ class TiledLightsNode extends LightsNode {
 		const tileOffset = element.div( stride );
 		const tileIndex = this._screenTileIndex.mul( int( 2 ) ).add( tileOffset );
 
-		return this._lightIndexes.element( tileIndex ).element( element.modInt( stride ) );
+		return this._lightIndexes.element( tileIndex ).element( element.mod( stride ) );
 
 	}
 
@@ -341,7 +341,7 @@ class TiledLightsNode extends LightsNode {
 			const tileOffset = elementIndex.div( stride );
 			const tileIndex = instanceIndex.mul( int( 2 ) ).add( tileOffset );
 
-			return lightIndexes.element( tileIndex ).element( elementIndex.modInt( stride ) );
+			return lightIndexes.element( tileIndex ).element( elementIndex.mod( stride ) );
 
 		};
 
@@ -352,7 +352,7 @@ class TiledLightsNode extends LightsNode {
 			const tiledBufferSize = bufferSize.clone().divideScalar( tileSize ).floor();
 
 			const tileScreen = vec2(
-				instanceIndex.modInt( tiledBufferSize.width ),
+				instanceIndex.mod( tiledBufferSize.width ),
 				instanceIndex.div( tiledBufferSize.width )
 			).mul( tileSize ).div( screenSize );
 

examples/webgpu_compute_birds.html

@@ -176,8 +176,8 @@
 				renderer.toneMapping = THREE.NeutralToneMapping;
 				container.appendChild( renderer.domElement );
 
-				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.connect( /* renderer.domElement */ );
+				const controls = new OrbitControls( camera );
+				controls.connect( renderer.domElement );
 
 				// Initialize position, velocity, and phase values
 

examples/webgpu_compute_sort_bitonic.html

@@ -200,8 +200,8 @@
 					const blockOffset = ( index.mul( 2 ).div( blockHeight ) ).mul( blockHeight );
 					const halfHeight = blockHeight.div( 2 );
 					const idx = uvec2(
-						index.modInt( halfHeight ),
-						blockHeight.sub( index.modInt( halfHeight ) ).sub( 1 )
+						index.mod( halfHeight ),
+						blockHeight.sub( index.mod( halfHeight ) ).sub( 1 )
 					);
 					idx.x.addAssign( blockOffset );
 					idx.y.addAssign( blockOffset );
@@ -215,8 +215,8 @@
 					const blockOffset = ( ( index.mul( 2 ) ).div( blockHeight ) ).mul( blockHeight );
 					const halfHeight = blockHeight.div( 2 );
 					const idx = uvec2(
-						index.modInt( halfHeight ),
-						( index.modInt( halfHeight ) ).add( halfHeight )
+						index.mod( halfHeight ),
+						( index.mod( halfHeight ) ).add( halfHeight )
 					);
 
 					idx.x.addAssign( blockOffset );
@@ -447,7 +447,7 @@
 
 					If( highlight.equal( 1 ).and( not( nextAlgoStorage.element( 0 ).equal( StepType.NONE ) ) ), () => {
 
-						const boolCheck = int( elementIndex.modInt( nextBlockHeightRead.element( 0 ) ).lessThan( nextBlockHeightRead.element( 0 ).div( 2 ) ) );
+						const boolCheck = int( elementIndex.mod( nextBlockHeightRead.element( 0 ) ).lessThan( nextBlockHeightRead.element( 0 ).div( 2 ) ) );
 						color.z.assign( nextAlgoStorage.element( 0 ).lessThanEqual( StepType.DISPERSE_LOCAL ) );
 						color.x.mulAssign( boolCheck );
 						color.y.mulAssign( abs( boolCheck.sub( 1 ) ) );

examples/webgpu_compute_texture.html

@@ -61,7 +61,7 @@
 
 				const computeTexture = Fn( ( { storageTexture } ) => {
 
-					const posX = instanceIndex.modInt( width );
+					const posX = instanceIndex.mod( width );
 					const posY = instanceIndex.div( width );
 					const indexUV = uvec2( posX, posY );
 

examples/webgpu_compute_water.html

@@ -140,7 +140,7 @@
 					// context, instanceIndex is a 1-dimensional value derived from the workgroup dimensions.
 			
 					// Cast to int to prevent unintended index overflow upon subtraction.
-					const x = int( index.modInt( WIDTH ) );
+					const x = int( index.mod( WIDTH ) );
 					const y = int( index.div( WIDTH ) );
 
 					// The original shader accesses height via texture uvs. However, unlike with textures, we can't
@@ -205,7 +205,7 @@
 					const newHeight = neighborHeight.mul( viscosity );
 
 					// Get 2-D compute coordinate from one-dimensional instanceIndex.
-					const x = float( instanceIndex.modInt( WIDTH ) ).mul( 1 / WIDTH );
+					const x = float( instanceIndex.mod( WIDTH ) ).mul( 1 / WIDTH );
 					const y = float( instanceIndex.div( WIDTH ) ).mul( 1 / WIDTH );
 
 					// Mouse influence

src/nodes/accessors/StorageTextureNode.js

@@ -203,11 +203,11 @@ export default StorageTextureNode;
  * @tsl
  * @function
  * @param {StorageTexture} value - The storage texture.
- * @param {Node<vec2|vec3>} uvNode - The uv node.
+ * @param {?Node<vec2|vec3>} uvNode - The uv node.
  * @param {?Node} [storeNode=null] - The value node that should be stored in the texture.
  * @returns {StorageTextureNode}
  */
-export const storageTexture = /*@__PURE__*/ nodeProxy( StorageTextureNode ).setParameterLength( 2, 3 );
+export const storageTexture = /*@__PURE__*/ nodeProxy( StorageTextureNode ).setParameterLength( 1, 3 );
 
 
 /**

src/nodes/functions/material/getParallaxCorrectNormal.js

@@ -20,16 +20,16 @@ import { float, Fn, min, normalize, sub, vec3 } from '../../tsl/TSLBase.js';
  */
 const getParallaxCorrectNormal = /*@__PURE__*/ Fn( ( [ normal, cubeSize, cubePos ] ) => {
 
-	const nDir = normalize( normal ).toVar( 'nDir' );
-	const rbmax = sub( float( 0.5 ).mul( cubeSize.sub( cubePos ) ), positionWorld ).div( nDir ).toVar( 'rbmax' );
-	const rbmin = sub( float( - 0.5 ).mul( cubeSize.sub( cubePos ) ), positionWorld ).div( nDir ).toVar( 'rbmin' );
-	const rbminmax = vec3().toVar( 'rbminmax' );
+	const nDir = normalize( normal ).toVar();
+	const rbmax = sub( float( 0.5 ).mul( cubeSize.sub( cubePos ) ), positionWorld ).div( nDir ).toVar();
+	const rbmin = sub( float( - 0.5 ).mul( cubeSize.sub( cubePos ) ), positionWorld ).div( nDir ).toVar();
+	const rbminmax = vec3().toVar();
 	rbminmax.x = nDir.x.greaterThan( float( 0 ) ).select( rbmax.x, rbmin.x );
 	rbminmax.y = nDir.y.greaterThan( float( 0 ) ).select( rbmax.y, rbmin.y );
 	rbminmax.z = nDir.z.greaterThan( float( 0 ) ).select( rbmax.z, rbmin.z );
 
-	const correction = min( min( rbminmax.x, rbminmax.y ), rbminmax.z ).toVar( 'correction' );
-	const boxIntersection = positionWorld.add( nDir.mul( correction ) ).toVar( 'boxIntersection' );
+	const correction = min( min( rbminmax.x, rbminmax.y ), rbminmax.z ).toVar();
+	const boxIntersection = positionWorld.add( nDir.mul( correction ) ).toVar();
 	return boxIntersection.sub( cubePos );
 
 } );

src/nodes/lighting/LightsNode.js

@@ -53,21 +53,21 @@ class LightsNode extends Node {
 		 *
 		 * @type {Node<vec3>}
 		 */
-		this.totalDiffuseNode = vec3().toVar( 'totalDiffuse' );
+		this.totalDiffuseNode = vec3().toVar();
 
 		/**
 		 * A node representing the total specular light.
 		 *
 		 * @type {Node<vec3>}
 		 */
-		this.totalSpecularNode = vec3().toVar( 'totalSpecular' );
+		this.totalSpecularNode = vec3().toVar();
 
 		/**
 		 * A node representing the outgoing light.
 		 *
 		 * @type {Node<vec3>}
 		 */
-		this.outgoingLightNode = vec3().toVar( 'outgoingLight' );
+		this.outgoingLightNode = vec3().toVar();
 
 		/**
 		 * An array representing the lights in the scene.

src/nodes/math/OperatorNode.js

@@ -365,7 +365,7 @@ class OperatorNode extends TempNode {
 
 				} else {
 
-					return builder.format( `${ builder.getMethod( 'mod', output ) }( ${ a }, ${ b } )`, type, output );
+					return builder.format( `${ builder.getMethod( 'mod', type ) }( ${ a }, ${ b } )`, type, output );
 
 				}
 
@@ -723,7 +723,7 @@ export const remainder = ( a, b ) => { // @deprecated, r168
 export const modInt = ( a, b ) => { // @deprecated, r175
 
 	console.warn( 'THREE.TSL: "modInt()" is deprecated. Use "mod( int( ... ) )" instead.' );
-	return mod( a, int( b ) );
+	return mod( int( a ), int( b ) );
 
 };
 

src/nodes/tsl/TSLCore.js

@@ -220,7 +220,7 @@ const ShaderNodeProxy = function ( NodeClass, scope = null, factor = null, setti
 		let tslName;
 
 		if ( name ) tslName = /[a-z]/i.test( name ) ? name + '()' : name;
-		else name = NodeClass.type;
+		else tslName = NodeClass.type;
 
 		if ( minParams !== undefined && params.length < minParams ) {
 

src/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -321,7 +321,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 	 */
 	generateWrapFunction( texture ) {
 
-		const functionName = `tsl_coord_${ wrapNames[ texture.wrapS ] }S_${ wrapNames[ texture.wrapT ] }_${texture.isData3DTexture ? '3d' : '2d'}T`;
+		const functionName = `tsl_coord_${ wrapNames[ texture.wrapS ] }S_${ wrapNames[ texture.wrapT ] }_${ texture.isData3DTexture ? '3d' : '2d' }T`;
 
 		let nodeCode = wgslCodeCache[ functionName ];
 
@@ -331,7 +331,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 			// For 3D textures, use vec3f; for texture arrays, keep vec2f since array index is separate
 			const coordType = texture.isData3DTexture ? 'vec3f' : 'vec2f';
-			let code = `fn ${functionName}( coord : ${coordType} ) -> ${coordType} {\n\n\treturn ${coordType}(\n`;
+			let code = `fn ${ functionName }( coord : ${ coordType } ) -> ${ coordType } {\n\n\treturn ${ coordType }(\n`;
 
 			const addWrapSnippet = ( wrap, axis ) => {
 
@@ -516,7 +516,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 		const textureDimension = this.generateTextureDimension( texture, textureProperty, levelSnippet );
 
 		const vecType = texture.isData3DTexture ? 'vec3' : 'vec2';
-		const coordSnippet = `${vecType}<u32>(${wrapFunction}(${uvSnippet}) * ${vecType}<f32>(${textureDimension}))`;
+		const coordSnippet = `${ vecType }<u32>(${ wrapFunction }(${ uvSnippet }) * ${ vecType }<f32>(${ textureDimension }))`;
 
 		return this.generateTextureLoad( texture, textureProperty, coordSnippet, depthSnippet, levelSnippet );