WebGPURenderer: Fix integer uniforms (#29976)

* WebGPU: Fix integer uniforms (#29952) * Update WebGPU Compute Attractors Particles Demo to use uint uniform for number of attractors
mrdoob · Nov 26, 2024 · 92e60c2 · 92e60c2
1 parent 96e5149
commit 92e60c2
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 5 deletions.
diff --git a/examples/webgpu_tsl_compute_attractors_particles.html b/examples/webgpu_tsl_compute_attractors_particles.html
@@ -82,7 +82,7 @@
 					new THREE.Vector3( 0, 1, 0 ),
 					new THREE.Vector3( 1, 0, - 0.5 ).normalize()
 				] );
-				const attractorsLength = uniform( attractorsPositions.array.length );
+				const attractorsLength = uniform( attractorsPositions.array.length, 'uint' );
 				const attractors = [];
 				const helpersRingGeometry = new THREE.RingGeometry( 1, 1.02, 32, 1, 0, Math.PI * 1.5 );
 				const helpersArrowGeometry = new THREE.ConeGeometry( 0.1, 0.4, 12, 1, false );

diff --git a/src/renderers/common/UniformsGroup.js b/src/renderers/common/UniformsGroup.js
@@ -149,10 +149,11 @@ class UniformsGroup extends UniformBuffer {
 		const a = this.values;
 		const v = uniform.getValue();
 		const offset = uniform.offset;
+		const type = uniform.getType();
 
 		if ( a[ offset ] !== v ) {
 
-			const b = this.buffer;
+			const b = this._getBufferForType( type );
 
 			b[ offset ] = a[ offset ] = v;
 			updated = true;
@@ -170,10 +171,11 @@ class UniformsGroup extends UniformBuffer {
 		const a = this.values;
 		const v = uniform.getValue();
 		const offset = uniform.offset;
+		const type = uniform.getType();
 
 		if ( a[ offset + 0 ] !== v.x || a[ offset + 1 ] !== v.y ) {
 
-			const b = this.buffer;
+			const b = this._getBufferForType( type );
 
 			b[ offset + 0 ] = a[ offset + 0 ] = v.x;
 			b[ offset + 1 ] = a[ offset + 1 ] = v.y;
@@ -193,10 +195,11 @@ class UniformsGroup extends UniformBuffer {
 		const a = this.values;
 		const v = uniform.getValue();
 		const offset = uniform.offset;
+		const type = uniform.getType();
 
 		if ( a[ offset + 0 ] !== v.x || a[ offset + 1 ] !== v.y || a[ offset + 2 ] !== v.z ) {
 
-			const b = this.buffer;
+			const b = this._getBufferForType( type );
 
 			b[ offset + 0 ] = a[ offset + 0 ] = v.x;
 			b[ offset + 1 ] = a[ offset + 1 ] = v.y;
@@ -217,10 +220,11 @@ class UniformsGroup extends UniformBuffer {
 		const a = this.values;
 		const v = uniform.getValue();
 		const offset = uniform.offset;
+		const type = uniform.getType();
 
 		if ( a[ offset + 0 ] !== v.x || a[ offset + 1 ] !== v.y || a[ offset + 2 ] !== v.z || a[ offset + 4 ] !== v.w ) {
 
-			const b = this.buffer;
+			const b = this._getBufferForType( type );
 
 			b[ offset + 0 ] = a[ offset + 0 ] = v.x;
 			b[ offset + 1 ] = a[ offset + 1 ] = v.y;
@@ -312,6 +316,14 @@ class UniformsGroup extends UniformBuffer {
 
 	}
 
+	_getBufferForType( type ) {
+
+		if ( type === 'int' || type === 'ivec2' || type === 'ivec3' || type === 'ivec4' ) return new Int32Array( this.buffer.buffer );
+		if ( type === 'uint' || type === 'uvec2' || type === 'uvec3' || type === 'uvec4' ) return new Uint32Array( this.buffer.buffer );
+		return this.buffer;
+
+	}
+
 }
 
 function setArray( a, b, offset ) {

diff --git a/src/renderers/common/nodes/NodeUniform.js b/src/renderers/common/nodes/NodeUniform.js
@@ -19,6 +19,12 @@ class NumberNodeUniform extends NumberUniform {
 
 	}
 
+	getType() {
+
+		return this.nodeUniform.type;
+
+	}
+
 }
 
 class Vector2NodeUniform extends Vector2Uniform {
@@ -37,6 +43,12 @@ class Vector2NodeUniform extends Vector2Uniform {
 
 	}
 
+	getType() {
+
+		return this.nodeUniform.type;
+
+	}
+
 }
 
 class Vector3NodeUniform extends Vector3Uniform {
@@ -55,6 +67,12 @@ class Vector3NodeUniform extends Vector3Uniform {
 
 	}
 
+	getType() {
+
+		return this.nodeUniform.type;
+
+	}
+
 }
 
 class Vector4NodeUniform extends Vector4Uniform {
@@ -73,6 +91,12 @@ class Vector4NodeUniform extends Vector4Uniform {
 
 	}
 
+	getType() {
+
+		return this.nodeUniform.type;
+
+	}
+
 }
 
 class ColorNodeUniform extends ColorUniform {
@@ -91,6 +115,12 @@ class ColorNodeUniform extends ColorUniform {
 
 	}
 
+	getType() {
+
+		return this.nodeUniform.type;
+
+	}
+
 }
 
 class Matrix3NodeUniform extends Matrix3Uniform {
@@ -109,6 +139,12 @@ class Matrix3NodeUniform extends Matrix3Uniform {
 
 	}
 
+	getType() {
+
+		return this.nodeUniform.type;
+
+	}
+
 }
 
 class Matrix4NodeUniform extends Matrix4Uniform {
@@ -127,6 +163,12 @@ class Matrix4NodeUniform extends Matrix4Uniform {
 
 	}
 
+	getType() {
+
+		return this.nodeUniform.type;
+
+	}
+
 }
 
 export {