Merge pull request #20407 from takahirox/WebGPUInstancing

WebGPURenderer: Initial instancing support

examples/jsm/renderers/webgpu/WebGPURenderPipelines.js

@@ -1,4 +1,4 @@
-import { GPUPrimitiveTopology, GPUIndexFormat, GPUTextureFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation } from './constants.js';
+import { GPUPrimitiveTopology, GPUIndexFormat, GPUTextureFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';
 import {
 	FrontSide, BackSide, DoubleSide,
 	NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth,
@@ -100,19 +100,24 @@ class WebGPURenderPipelines {
 			// vertex buffers
 
 			const vertexBuffers = [];
+			const geometry = object.geometry;
 
 			for ( const attribute of shaderAttributes ) {
 
+				const name = attribute.name;
+				const geometryAttribute = geometry.getAttribute( name );
+				const stepMode = geometryAttribute && geometryAttribute.isInstancedBufferAttribute ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
+
 				vertexBuffers.push( {
 					arrayStride: attribute.arrayStride,
-					attributes: [ { shaderLocation: attribute.slot, offset: 0, format: attribute.format } ]
+					attributes: [ { shaderLocation: attribute.slot, offset: 0, format: attribute.format } ],
+					stepMode: stepMode
 				} );
 
 			}
 
 			//
 
-			const geometry = object.geometry;
 			let indexFormat;
 
 			if ( object.isLine ) {

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -770,23 +770,24 @@ class WebGPURenderer {
 
 		const drawRange = geometry.drawRange;
 		const firstVertex = drawRange.start;
+		const instanceCount = geometry.instanceCount || 1;
 
 		if ( hasIndex === true ) {
 
 			const indexCount = ( drawRange.count !== Infinity ) ? drawRange.count : index.count;
 
-			passEncoder.drawIndexed( indexCount, 1, firstVertex, 0, 0 );
+			passEncoder.drawIndexed( indexCount, instanceCount, firstVertex, 0, 0 );
 
-			info.update( object, indexCount );
+			info.update( object, indexCount, instanceCount );
 
 		} else {
 
 			const positionAttribute = geometry.attributes.position;
 			const vertexCount = ( drawRange.count !== Infinity ) ? drawRange.count : positionAttribute.count;
 
-			passEncoder.draw( vertexCount, 1, firstVertex, 0 );
+			passEncoder.draw( vertexCount, instanceCount, firstVertex, 0 );
 
-			info.update( object, vertexCount );
+			info.update( object, vertexCount, instanceCount );
 
 		}
 

examples/jsm/renderers/webgpu/constants.js

@@ -247,6 +247,11 @@ export const GPUTextureViewDimension = {
 	ThreeD: '3d'
 };
 
+export const GPUInputStepMode = {
+	Vertex: 'vertex',
+	Instance: 'instance'
+};
+
 // @TODO: Move to src/constants.js
 
 export const BlendColorFactor = 211;