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

@@ -771,7 +771,7 @@ class WebGPURenderer {
 
 			const indexCount = ( drawRange.count !== Infinity ) ? drawRange.count : index.count;
 
-			passEncoder.drawIndexed( indexCount, 1, firstVertex, 0, 0 );
+			passEncoder.drawIndexed( indexCount, geometry.instanceCount || 1, firstVertex, 0, 0 );
 
 			info.update( object, indexCount );
 
@@ -780,7 +780,7 @@ class WebGPURenderer {
 			const positionAttribute = geometry.attributes.position;
 			const vertexCount = ( drawRange.count !== Infinity ) ? drawRange.count : positionAttribute.count;
 
-			passEncoder.draw( vertexCount, 1, firstVertex, 0 );
+			passEncoder.draw( vertexCount, geometry.instanceCount || 1, firstVertex, 0 );
 
 			info.update( object, vertexCount );
 

examples/jsm/renderers/webgpu/constants.js

@@ -220,6 +220,11 @@ export const GPUStencilOperation = {
 	DecrementWrap: 'decrement-wrap'
 };
 
+export const GPUInputStepMode = {
+	Vertex: 'vertex',
+	Instance: 'instance'
+};
+
 // @TODO: Move to src/constants.js
 
 export const BlendColorFactor = 211;