WebGPURenderer: Add support for non-instanced meshes to StorageBuffer (#27712)

* add support for non-instanced meshes for storage buffer

* Introduce StorageInstancedBufferAttribute.js

examples/jsm/renderers/common/StorageBufferAttribute.js

@@ -1,6 +1,6 @@
-import { InstancedBufferAttribute } from 'three';
+import { BufferAttribute } from 'three';
 
-class StorageBufferAttribute extends InstancedBufferAttribute {
+class StorageBufferAttribute extends BufferAttribute {
 
 	constructor( array, itemSize, typeClass = Float32Array ) {
 

examples/jsm/renderers/common/StorageInstancedBufferAttribute.js

@@ -0,0 +1,17 @@
+import { InstancedBufferAttribute } from 'three';
+
+class StorageInstancedBufferAttribute extends InstancedBufferAttribute {
+
+	constructor( array, itemSize, typeClass = Float32Array ) {
+
+		if ( ArrayBuffer.isView( array ) === false ) array = new typeClass( array * itemSize );
+
+		super( array, itemSize );
+
+		this.isStorageBufferAttribute = true;
+
+	}
+
+}
+
+export default StorageInstancedBufferAttribute;

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -422,7 +422,15 @@ class WebGLBackend extends Backend {
 		gl.bindTransformFeedback( gl.TRANSFORM_FEEDBACK, transformFeedbackGPU );
 		gl.beginTransformFeedback( gl.POINTS );
 
-		gl.drawArraysInstanced( gl.POINTS, 0, 1, computeNode.count );
+		if ( attributes[ 0 ].isInstancedBufferAttribute ) {
+
+			gl.drawArraysInstanced( gl.POINTS, 0, 1, computeNode.count );
+
+		} else {
+
+			gl.drawArrays( gl.POINTS, 0, computeNode.count );
+
+		}
 
 		gl.endTransformFeedback();
 		gl.bindTransformFeedback( gl.TRANSFORM_FEEDBACK, null );

examples/webgpu_compute_audio.html

@@ -34,7 +34,7 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
 
 			let camera, scene, renderer;
 			let computeNode;
@@ -108,14 +108,14 @@
 
 				// create webgpu buffers
 
-				waveGPUBuffer = new StorageBufferAttribute( waveBuffer, 1 );
+				waveGPUBuffer = new StorageInstancedBufferAttribute( waveBuffer, 1 );
 
 				const waveStorageNode = storage( waveGPUBuffer, 'float', waveBuffer.length );
 
 
 				// read-only buffer
 
-				const waveNode = storageObject( new StorageBufferAttribute( waveBuffer, 1 ), 'float', waveBuffer.length );
+				const waveNode = storageObject( new StorageInstancedBufferAttribute( waveBuffer, 1 ), 'float', waveBuffer.length );
 
 
 				// params

examples/webgpu_compute_particles.html

@@ -42,7 +42,7 @@
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGL from 'three/addons/capabilities/WebGL.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import Stats from 'three/addons/libs/stats.module.js';
@@ -90,7 +90,7 @@
 
 				//
 
-				const createBuffer = () => storage( new StorageBufferAttribute( particleCount, 3 ), 'vec3', particleCount );
+				const createBuffer = () => storage( new StorageInstancedBufferAttribute( particleCount, 3 ), 'vec3', particleCount );
 
 				const positionBuffer = createBuffer();
 				const velocityBuffer = createBuffer();

examples/webgpu_compute_particles_rain.html

@@ -29,7 +29,7 @@
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGL from 'three/addons/capabilities/WebGL.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import Stats from 'three/addons/libs/stats.module.js';
@@ -103,7 +103,7 @@
 
 				//
 
-				const createBuffer = ( type = 'vec3' ) => storage( new StorageBufferAttribute( maxParticleCount, 3 ), type, maxParticleCount );
+				const createBuffer = ( type = 'vec3' ) => storage( new StorageInstancedBufferAttribute( maxParticleCount, 3 ), type, maxParticleCount );
 
 				const positionBuffer = createBuffer();
 				const velocityBuffer = createBuffer();

examples/webgpu_compute_particles_snow.html

@@ -31,7 +31,7 @@
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGL from 'three/addons/capabilities/WebGL.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
 
 			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
 
@@ -104,7 +104,7 @@
 
 				//
 
-				const createBuffer = ( type = 'vec3' ) => storage( new StorageBufferAttribute( maxParticleCount, type === 'vec4' ? 4 : 3 ), type, maxParticleCount );
+				const createBuffer = ( type = 'vec3' ) => storage( new StorageInstancedBufferAttribute( maxParticleCount, type === 'vec4' ? 4 : 3 ), type, maxParticleCount );
 
 				const positionBuffer = createBuffer();
 				const scaleBuffer = createBuffer();

examples/webgpu_compute_points.html

@@ -32,7 +32,7 @@
 			import WebGL from 'three/addons/capabilities/WebGL.js';
 
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
 
 			let camera, scene, renderer;
 			let computeNode;
@@ -64,8 +64,8 @@
 
 				// create buffers
 
-				const particleBuffer = new StorageBufferAttribute( particleNum, particleSize );
-				const velocityBuffer = new StorageBufferAttribute( particleNum, particleSize );
+				const particleBuffer = new StorageInstancedBufferAttribute( particleNum, particleSize );
+				const velocityBuffer = new StorageInstancedBufferAttribute( particleNum, particleSize );
 
 				const particleBufferNode = storage( particleBuffer, 'vec2', particleNum );
 				const velocityBufferNode = storage( velocityBuffer, 'vec2', particleNum );

examples/webgpu_storage_buffer.html

@@ -29,7 +29,7 @@
 			import { storageObject, If, vec3, uv, uint, float, tslFn, instanceIndex, MeshBasicNodeMaterial } from 'three/nodes';
 
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
 
 			// WebGPU Backend
 			init();
@@ -59,7 +59,7 @@
 					const typeSize = i + 1;
 					const array = new Array( size * typeSize ).fill( 0 );
 
-					const arrayBuffer = new StorageBufferAttribute( new Float32Array( array ), typeSize );
+					const arrayBuffer = new StorageInstancedBufferAttribute( new Float32Array( array ), typeSize );
 
 					arrayBufferNodes.push( storageObject( arrayBuffer, type[ i ], size ) );