TSL: Better support for the `mod` method (#27517)

examples/jsm/nodes/math/MathNode.js

@@ -57,6 +57,10 @@ class MathNode extends TempNode {
 
 			return 'vec3';
 
+		} else if ( method === MathNode.MOD ) {
+
+			return this.aNode.getNodeType( builder );
+
 		} else {
 
 			return this.getInputType( builder );
@@ -120,7 +124,7 @@ class MathNode extends TempNode {
 
 			const params = [];
 
-			if ( method === MathNode.CROSS ) {
+			if ( method === MathNode.CROSS || method === MathNode.MOD ) {
 
 				params.push(
 					a.build( builder, type ),
@@ -165,7 +169,7 @@ class MathNode extends TempNode {
 
 			}
 
-			return builder.format( `${ builder.getMethod( method ) }( ${params.join( ', ' )} )`, type, output );
+			return builder.format( `${ builder.getMethod( method, type ) }( ${params.join( ', ' )} )`, type, output );
 
 		}
 

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

@@ -68,7 +68,10 @@ const wgslTypeLib = {
 const wgslMethods = {
 	dFdx: 'dpdx',
 	dFdy: '- dpdy',
-	mod: 'threejs_mod',
+	mod_float: 'threejs_mod_float',
+	mod_vec2: 'threejs_mod_vec2',
+	mod_vec3: 'threejs_mod_vec3',
+	mod_vec4: 'threejs_mod_vec4',
 	lessThanEqual: 'threejs_lessThanEqual',
 	greaterThan: 'threejs_greaterThan',
 	inversesqrt: 'inverseSqrt',
@@ -97,13 +100,10 @@ fn threejs_greaterThan( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
 
 }
 ` ),
-	mod: new CodeNode( `
-fn threejs_mod( x : f32, y : f32 ) -> f32 {
-
-	return x - y * floor( x / y );
-
-}
-` ),
+	mod_float: new CodeNode( 'fn threejs_mod_float( x : f32, y : f32 ) -> f32 { return x - y * floor( x / y ); }' ),
+	mod_vec2: new CodeNode( 'fn threejs_mod_vec2( x : vec2f, y : vec2f ) -> vec2f { return x - y * floor( x / y ); }' ),
+	mod_vec3: new CodeNode( 'fn threejs_mod_vec3( x : vec3f, y : vec3f ) -> vec3f { return x - y * floor( x / y ); }' ),
+	mod_vec4: new CodeNode( 'fn threejs_mod_vec4( x : vec4f, y : vec4f ) -> vec4f { return x - y * floor( x / y ); }' ),
 	repeatWrapping: new CodeNode( `
 fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
 
@@ -921,15 +921,23 @@ ${ flowData.code }
 
 	}
 
-	getMethod( method ) {
+	getMethod( method, output = null ) {
 
-		if ( wgslPolyfill[ method ] !== undefined ) {
+		let wgslMethod;
 
-			this._include( method );
+		if ( output !== null ) {
+
+			wgslMethod = this._getWGSLMethod( method + '_' + output );
+
+		}
+
+		if ( wgslMethod === undefined ) {
+
+			wgslMethod = this._getWGSLMethod( method );
 
 		}
 
-		return wgslMethods[ method ] || method;
+		return wgslMethod || method;
 
 	}
 
@@ -945,6 +953,18 @@ ${ flowData.code }
 
 	}
 
+	_getWGSLMethod( method ) {
+
+		if ( wgslPolyfill[ method ] !== undefined ) {
+
+			this._include( method );
+
+		}
+
+		return wgslMethods[ method ];
+
+	}
+
 	_include( name ) {
 
 		const codeNode = wgslPolyfill[ name ];