WebGPURenderer: BatchMesh support for Instanced rendering with sorting, frustum culling

examples/jsm/nodes/Nodes.js

@@ -11,7 +11,7 @@ export { default as BypassNode, bypass } from './core/BypassNode.js';
 export { default as CacheNode, cache } from './core/CacheNode.js';
 export { default as ConstNode } from './core/ConstNode.js';
 export { default as ContextNode, context, label } from './core/ContextNode.js';
-export { default as IndexNode, vertexIndex, instanceIndex } from './core/IndexNode.js';
+export { default as IndexNode, vertexIndex, instanceIndex, batchingIndex } from './core/IndexNode.js';
 export { default as LightingModel } from './core/LightingModel.js';
 export { default as Node, addNodeClass, createNodeFromType } from './core/Node.js';
 export { default as VarNode, temp } from './core/VarNode.js';

examples/jsm/nodes/accessors/BatchNode.js

@@ -1,11 +1,12 @@
 import Node, { addNodeClass } from '../core/Node.js';
 import { normalLocal } from './NormalNode.js';
 import { positionLocal } from './PositionNode.js';
-import { nodeProxy, vec3, mat3, mat4, int, ivec2, float } from '../shadernode/ShaderNode.js';
+import { nodeProxy, vec3, mat3, mat4, int, ivec2, float, tslFn } from '../shadernode/ShaderNode.js';
 import { textureLoad } from './TextureNode.js';
 import { textureSize } from './TextureSizeNode.js';
-import { attribute } from '../core/AttributeNode.js';
 import { tangentLocal } from './TangentNode.js';
+import { instanceIndex, batchingIndex } from '../core/IndexNode.js';
+import { uniform } from '../core/UniformNode.js';
 
 class BatchNode extends Node {
 
@@ -28,14 +29,37 @@
 
 		if ( this.batchingIdNode === null ) {
 
-			this.batchingIdNode = attribute( 'batchId' );
+			if ( builder.getBatchingIndex() === false ) {
+
+				this.batchingIdNode = instanceIndex;
+
+			} else {
+
+				this.batchingIdNode = batchingIndex;
+
+			}
 
 		}
 
+		const getIndirectIndex = tslFn( ( [ id ] ) => {
+
+			const size = textureSize( textureLoad( this.batchMesh._indirectTexture ), 0 );
+			const x = int( id ).remainder( int( size ) );
+			const y = int( id ).div( int( size ) );
+			return textureLoad( this.batchMesh._indirectTexture, ivec2( x, y ) ).x.toFloat();
+
+		} ).setLayout( {
+			name: 'getIndirectIndex',
+			type: 'float',
+			inputs: [
+				{ name: 'id', type: 'int' }
+			]
+		} );
+
 		const matriceTexture = this.batchMesh._matricesTexture;
 
 		const size = textureSize( textureLoad( matriceTexture ), 0 );
-		const j = float( int( this.batchingIdNode ) ).mul( 4 ).toVar();
+		const j = float( getIndirectIndex( int( this.batchingIdNode ) ) ).mul( 4 ).toVar();
 
 		const x = int( j.mod( size ) );
 		const y = int( j ).div( int( size ) );

examples/jsm/nodes/accessors/TextureNode.js

@@ -64,6 +64,18 @@ class TextureNode extends UniformNode {
 
 		if ( this.value.isDepthTexture === true ) return 'float';
 
+		if ( this.value.isDataTexture === true ) {
+
+			const prefix = this.value.source.data.data.constructor.name.toLowerCase().charAt( 0 );
+
+			if ( prefix === 'u' || prefix === 'i' ) {
+
+				return prefix + 'vec4';
+
+			}
+
+		}
+
 		return 'vec4';
 
 	}

examples/jsm/nodes/core/IndexNode.js

@@ -29,6 +29,10 @@ class IndexNode extends Node {
 
 			propertyName = builder.getInstanceIndex();
 
+		} else if ( scope === IndexNode.BATCH ) {
+
+			propertyName = builder.getBatchingIndex();
+
 		} else {
 
 			throw new Error( 'THREE.IndexNode: Unknown scope: ' + scope );
@@ -57,10 +61,12 @@ class IndexNode extends Node {
 
 IndexNode.VERTEX = 'vertex';
 IndexNode.INSTANCE = 'instance';
+IndexNode.BATCH = 'batch';
 
 export default IndexNode;
 
 export const vertexIndex = nodeImmutable( IndexNode, IndexNode.VERTEX );
 export const instanceIndex = nodeImmutable( IndexNode, IndexNode.INSTANCE );
+export const batchingIndex = nodeImmutable( IndexNode, IndexNode.BATCH );
 
 addNodeClass( 'IndexNode', IndexNode );

examples/jsm/nodes/core/NodeBuilder.js

@@ -451,6 +451,12 @@ class NodeBuilder {
 
 	}
 
+	getBatchingIndex() {
+
+		console.warn( 'Abstract function.' );
+
+	}
+
 	getFrontFacing() {
 
 		console.warn( 'Abstract function.' );

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -51,6 +51,8 @@ class WebGLBackend extends Backend {
 		this.trackTimestamp = ( parameters.trackTimestamp === true );
 
 		this.extensions.get( 'EXT_color_buffer_float' );
+		this.extensions.get( 'WEBGL_multi_draw' );
+
 		this.disjoint = this.extensions.get( 'EXT_disjoint_timer_query_webgl2' );
 		this.parallel = this.extensions.get( 'KHR_parallel_shader_compile' );
 		this._currentContext = null;
@@ -703,11 +705,56 @@ class WebGLBackend extends Backend {
 
 			if ( object._multiDrawInstances !== null ) {
 
-				renderer.renderMultiDrawInstances( object._multiDrawStarts, object._multiDrawCounts, object._multiDrawCount, object._multiDrawInstances );
+				if ( ! this.hasFeature( 'WEBGL_multi_draw' ) ) {
+
+					const starts = object._multiDrawStarts;
+					const counts = object._multiDrawCounts;
+					const drawCount = object._multiDrawCount;
+					const instanceCount = object._multiDrawInstances;
+
+					const bytesPerElement = index ? this.get( index ).bytesPerElement : 1;
+
+					// const drawId = object.gl_DrawID;
+
+					for ( let i = 0; i < drawCount; i ++ ) {
+
+						// TODO: @Sunag how to manually update isolated uniform drawId
+						// drawId.value = i;
+						renderer.renderInstances( starts[ i ] / bytesPerElement, counts[ i ], instanceCount[ i ] );
+
+					}
+
+				} else {
+
+					renderer.renderMultiDrawInstances( object._multiDrawStarts, object._multiDrawCounts, object._multiDrawCount, object._multiDrawInstances );
+
+				}
 
 			} else {
 
-				renderer.renderMultiDraw( object._multiDrawStarts, object._multiDrawCounts, object._multiDrawCount );
+				if ( ! this.hasFeature( 'WEBGL_multi_draw' ) ) {
+
+					const starts = object._multiDrawStarts;
+					const counts = object._multiDrawCounts;
+					const drawCount = object._multiDrawCount;
+
+					const bytesPerElement = index ? this.get( index ).bytesPerElement : 1;
+
+					// const drawId = object.gl_DrawID;
+
+					for ( let i = 0; i < drawCount; i ++ ) {
+
+						// TODO: @Sunag how to manually update isolated uniform drawId
+						// drawId.value = i;
+						renderer.render( starts[ i ] / bytesPerElement, counts[ i ] );
+
+					}
+
+				} else {
+
+					renderer.renderMultiDraw( object._multiDrawStarts, object._multiDrawCounts, object._multiDrawCount );
+
+				}
 
 			}
 

examples/jsm/renderers/webgl/nodes/GLSLNodeBuilder.js

@@ -358,7 +358,7 @@ ${ flowData.code }
 
 				let typePrefix = '';
 
-				if ( texture.isPBOTexture === true ) {
+				if ( texture.isDataTexture === true ) {
 
 					const prefix = texture.source.data.data.constructor.name.toLowerCase().charAt( 0 );
 
@@ -594,6 +594,20 @@ ${ flowData.code }
 
 	}
 
+	getBatchingIndex() {
+
+		const extensions = this.renderer.backend.extensions;
+
+		if ( extensions.has( 'WEBGL_multi_draw' ) ) {
+
+			return 'uint( gl_DrawID )';
+
+		}
+
+		return false;
+
+	}
+
 	getFrontFacing() {
 
 		return 'gl_FrontFacing';
@@ -612,6 +626,27 @@ ${ flowData.code }
 
 	}
 
+	getExtensions( shaderStage ) {
+
+		let extensions = '';
+
+		if ( shaderStage === 'vertex' ) {
+
+			const ext = this.renderer.backend.extensions;
+			const isBatchedMesh = this.object.isBatchedMesh;
+
+			if ( isBatchedMesh && ext.has( 'WEBGL_multi_draw' ) ) {
+
+				extensions += '#extension GL_ANGLE_multi_draw : require\n';
+
+			}
+
+		}
+
+		return extensions;
+
+	}
+
 	isAvailable( name ) {
 
 		let result = supports[ name ];
@@ -620,11 +655,11 @@ ${ flowData.code }
 
 			if ( name === 'float32Filterable' ) {
 
-				const extentions = this.renderer.backend.extensions;
+				const extensions = this.renderer.backend.extensions;
 
-				if ( extentions.has( 'OES_texture_float_linear' ) ) {
+				if ( extensions.has( 'OES_texture_float_linear' ) ) {
 
-					extentions.get( 'OES_texture_float_linear' );
+					extensions.get( 'OES_texture_float_linear' );
 					result = true;
 
 				} else {
@@ -688,7 +723,8 @@ ${vars}
 
 		return `#version 300 es
 
-${ this.getSignature() }
+// extensions 
+${shaderData.extensions}
 
 // precision
 ${ defaultPrecisions }
@@ -809,6 +845,7 @@ void main() {
 
 			const stageData = shadersData[ shaderStage ];
 
+			stageData.extensions = this.getExtensions( shaderStage );
 			stageData.uniforms = this.getUniforms( shaderStage );
 			stageData.attributes = this.getAttributes( shaderStage );
 			stageData.varyings = this.getVaryings( shaderStage );

examples/jsm/renderers/webgl/utils/WebGLConstants.js

@@ -1,5 +1,6 @@
 export const GLFeatureName = {
 
+	'WEBGL_multi_draw': 'WEBGL_multi_draw',
 	'WEBGL_compressed_texture_astc': 'texture-compression-astc',
 	'WEBGL_compressed_texture_etc': 'texture-compression-etc2',
 	'WEBGL_compressed_texture_etc1': 'texture-compression-etc1',

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -918,7 +918,21 @@ class WebGPUBackend extends Backend {
 		const instanceCount = this.getInstanceCount( renderObject );
 		if ( instanceCount === 0 ) return;
 
-		if ( hasIndex === true ) {
+		if ( object.isBatchedMesh === true ) {
+
+			const starts = object._multiDrawStarts;
+			const counts = object._multiDrawCounts;
+			const drawCount = object._multiDrawCount;
+
+			const bytesPerElement = index.bytesPerElement || 1;
+
+			for ( let i = 0; i < drawCount; i ++ ) {
+
+				passEncoderGPU.drawIndexed( counts[ i ] / bytesPerElement, 1, starts[ i ] / 4, 0, i );
+
+			}
+
+		} else if ( hasIndex === true ) {
 
 			const indexCount = ( drawRange.count !== Infinity ) ? drawRange.count : index.count;
 

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

@@ -603,6 +603,12 @@ ${ flowData.code }
 
 	}
 
+	getBatchingIndex() {
+
+		return false;
+
+	}
+
 	getFrontFacing() {
 
 		return this.getBuiltin( 'front_facing', 'isFront', 'bool' );

examples/webgpu_mesh_batch.html

@@ -65,7 +65,7 @@
 		const MAX_GEOMETRY_COUNT = 20000;
 
 		const api = {
-			webgpu: true,
+			webgpu: false,
 			count: 512,
 			dynamic: 16,
 
@@ -76,7 +76,7 @@
 		};
 
 
-		init();
+		init( ! api.webgpu );
 
 		//
 
@@ -155,8 +155,8 @@
 		function initBatchedMesh() {
 
 			const geometryCount = api.count;
-			const vertexCount = api.count * 512;
-			const indexCount = api.count * 1024;
+			const vertexCount = geometries.length * 512;
+			const indexCount = geometries.length * 1024;
 
 			const euler = new THREE.Euler();
 			const matrix = new THREE.Matrix4();
@@ -168,9 +168,14 @@
 
 			ids.length = 0;
 
+			const geometryIds = [
+				mesh.addGeometry( geometries[ 0 ] ),
+				mesh.addGeometry( geometries[ 1 ] ),
+				mesh.addGeometry( geometries[ 2 ] ),
+			];
 			for ( let i = 0; i < api.count; i ++ ) {
 
-				const id = mesh.addGeometry( geometries[ i % geometries.length ] );
+				const id = mesh.addInstance( geometryIds[ i % geometryIds.length ] );
 				mesh.setMatrixAt( id, randomizeMatrix( matrix ) );
 
 				const rotationMatrix = new THREE.Matrix4();