WIP: WebGPURenderer support renderBundle object visibility with indirect draw

examples/webgpu_performance_renderbundle.html

@@ -68,7 +68,9 @@
 			renderBundle: true,
 			count: MAX_GEOMETRY_COUNT,
 			opacity: 1,
-			dynamic: false
+			dynamic: false,
+			visible: true,
+			layer1: true,
 		};
 
 
@@ -126,6 +128,22 @@
 
 		}
 
+		function setVisibility( visible ) {
+
+			group.traverse( object => {
+
+				const geometry = object.geometry;
+
+				if ( geometry !== undefined && geometry.type === 'BoxGeometry' ) {
+
+					object.visible = visible;
+
+				}
+
+			} );
+
+		}
+
 		function cleanup() {
 
 			if ( group ) {
@@ -166,6 +184,10 @@
 				child.matrix.decompose( child.position, child.quaternion, child.scale );
 				child.userData.rotationSpeed = randomizeRotationSpeed( new THREE.Euler() );
 				child.frustumCulled = false;
+
+				// split across two layers
+				child.layers.set( i % 2 );
+
 				group.add( child );
 
 			}
@@ -195,7 +217,7 @@
 
 			camera = new THREE.PerspectiveCamera( 70, aspect, 1, 100 );
 			camera.position.z = 50;
-
+			camera.layers.enable( 1 );
 			// renderer
 
 			renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL } );
@@ -251,6 +273,26 @@
 
 			gui.add( api, 'dynamic' );
 
+			gui.add( api, 'visible' ).onChange( ( v ) => {
+
+				setVisibility( v );
+
+			} );
+
+			gui.add( api, 'layer1' ).onChange( ( v ) => {
+
+				if ( v ) {
+
+					camera.layers.enable( 1 );
+
+				} else {
+
+					camera.layers.disable( 1 );
+
+				}
+
+			} );
+
 			// listeners
 
 			window.addEventListener( 'resize', onWindowResize );

src/renderers/common/Renderer.js

@@ -418,6 +418,7 @@ class Renderer {
 		const renderBundle = this._bundles.get( bundleGroup, camera );
 		const renderBundleData = this.backend.get( renderBundle );
 
+
 		if ( renderBundleData.renderContexts === undefined ) renderBundleData.renderContexts = new Set();
 
 		//
@@ -428,7 +429,11 @@ class Renderer {
 
 		if ( renderBundleNeedsUpdate ) {
 
-			this.backend.beginBundle( renderContext );
+			const opaqueObjects = renderList.opaque;
+
+			renderBundle.size = opaqueObjects.length;
+
+			this.backend.beginBundle( renderContext, renderBundle );
 
 			if ( renderBundleData.renderObjects === undefined || bundleGroup.needsUpdate === true ) {
 
@@ -438,9 +443,7 @@ class Renderer {
 
 			this._currentRenderBundle = renderBundle;
 
-			const opaqueObjects = renderList.opaque;
-
-			if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
+			if ( renderBundle.size > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
 
 			this._currentRenderBundle = null;
 
@@ -458,6 +461,8 @@ class Renderer {
 
 				const renderObject = renderObjects[ i ];
 
+				this.backend.updateIndirect( renderObject, renderBundle, i );
+
 				this._nodes.updateBefore( renderObject );
 
 				this._nodes.updateForRender( renderObject );
@@ -1581,15 +1586,20 @@ class Renderer {
 
 		//
 
+		let offset = null;
+
 		if ( this._currentRenderBundle !== null ) {
 
 			const renderBundleData = this.backend.get( this._currentRenderBundle );
+			offset = renderBundleData.renderObjects.length;
 
 			renderBundleData.renderObjects.push( renderObject );
 
+			this.backend.updateIndirect( renderObject, this._currentRenderBundle, offset );
+
 		}
 
-		this.backend.draw( renderObject, this.info );
+		this.backend.draw( renderObject, this.info, offset );
 
 		this._nodes.updateAfter( renderObject );
 

src/renderers/webgpu/WebGPUBackend.js

@@ -825,9 +825,7 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	// render object
-
-	draw( renderObject, info ) {
+	draw( renderObject, info, offset = null ) {
 
 		const { object, context, pipeline } = renderObject;
 		const bindings = renderObject.getBindings();
@@ -837,6 +835,7 @@ class WebGPUBackend extends Backend {
 		const passEncoderGPU = renderContextData.currentPass;
 
 		const drawParms = renderObject.getDrawParameters();
+		const indirectBuffer = currentSets.indirectBuffer;
 
 		if ( drawParms === null ) return;
 
@@ -954,6 +953,7 @@ class WebGPUBackend extends Backend {
 				const count = drawInstances ? drawInstances[ i ] : 1;
 				const firstInstance = count > 1 ? 0 : i;
 
+				// @TODO indirect support
 				passEncoderGPU.drawIndexed( counts[ i ], count, starts[ i ] / bytesPerElement, 0, firstInstance );
 
 			}
@@ -962,22 +962,99 @@ class WebGPUBackend extends Backend {
 
 			const { vertexCount: indexCount, instanceCount, firstVertex: firstIndex } = drawParms;
 
-			passEncoderGPU.drawIndexed( indexCount, instanceCount, firstIndex, 0, 0 );
+			if ( offset === null ) {
+
+				passEncoderGPU.drawIndexed( indexCount, instanceCount, firstIndex, 0, 0 );
+
+				info.update( object, indexCount, instanceCount );
+
+			} else {
+
+				passEncoderGPU.drawIndexedIndirect( indirectBuffer, offset * 20 );
 
-			info.update( object, indexCount, instanceCount );
+			}
 
 		} else {
 
 			const { vertexCount, instanceCount, firstVertex } = drawParms;
 
-			passEncoderGPU.draw( vertexCount, instanceCount, firstVertex, 0 );
+			if ( offset === null ) {
+
+				passEncoderGPU.draw( vertexCount, instanceCount, firstVertex, 0 );
 
-			info.update( object, vertexCount, instanceCount );
+				info.update( object, vertexCount, instanceCount );
+
+			} else {
+
+				passEncoderGPU.drawIndirect( indirectBuffer, offset * 20 );
+
+			}
 
 		}
 
 	}
 
+	updateIndirect( renderObject, bundle, offset ) {
+
+		const { object, camera } = renderObject;
+		const buffer = this.get( bundle ).buffer;
+
+		offset *= 5;
+
+		const visible = object.visible && object.layers.test( camera.layers );
+
+		if ( ! visible ) {
+
+			// set instanceCount to 0
+			buffer[ offset + 1 ] = 0;
+			return;
+
+		}
+
+		const drawParms = renderObject.getDrawParameters();
+
+		if ( drawParms === null ) return;
+
+		if ( object.isBatchedMesh === true ) {
+
+			// @TODO indirect support
+			const index = renderObject.getIndex();
+			const hasIndex = ( index !== null );
+
+			const starts = object._multiDrawStarts;
+			const counts = object._multiDrawCounts;
+			const drawCount = object._multiDrawCount;
+			const drawInstances = object._multiDrawInstances;
+
+			const bytesPerElement = hasIndex ? index.array.BYTES_PER_ELEMENT : 1;
+
+			for ( let i = 0; i < drawCount; i ++ ) {
+
+				const count = drawInstances ? drawInstances[ i ] : 1;
+				const firstInstance = count > 1 ? 0 : i;
+
+				buffer[ offset + 0 ] = counts[ i ];
+				buffer[ offset + 1 ] = count;
+				buffer[ offset + 2 ] = starts[ i ] / bytesPerElement;
+				buffer[ offset + 3 ] = 0;
+				buffer[ offset + 4 ] = firstInstance;
+
+			}
+
+			return;
+
+		}
+
+		const { vertexCount, firstVertex, instanceCount } = drawParms;
+
+		buffer[ offset + 0 ] = vertexCount;
+		buffer[ offset + 1 ] = instanceCount;
+		buffer[ offset + 2 ] = firstVertex;
+		buffer[ offset + 3 ] = 0;
+		buffer[ offset + 4 ] = 0;
+
+	}
+
 	// cache key
 
 	needsRenderUpdate( renderObject ) {
@@ -1250,14 +1327,24 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	beginBundle( renderContext ) {
+	beginBundle( renderContext, bundle ) {
 
 		const renderContextData = this.get( renderContext );
 
 		renderContextData._currentPass = renderContextData.currentPass;
 		renderContextData._currentSets = renderContextData.currentSets;
 
-		renderContextData.currentSets = { attributes: {}, bindingGroups: [], pipeline: null, index: null };
+		const bundleData = this.get( bundle );
+
+		const indirectBuffer = this.device.createBuffer( {
+			size: bundle.size * 20,
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.INDIRECT
+		} );
+
+		bundleData.indirectBuffer = indirectBuffer;
+		bundleData.buffer = new Uint32Array( bundle.size * 5 );
+
+		renderContextData.currentSets = { attributes: {}, bindingGroups: [], pipeline: null, index: null, indirectBuffer };
 		renderContextData.currentPass = this.pipelineUtils.createBundleEncoder( renderContext );
 
 	}
@@ -1267,6 +1354,7 @@ class WebGPUBackend extends Backend {
 		const renderContextData = this.get( renderContext );
 
 		const bundleEncoder = renderContextData.currentPass;
+
 		const bundleGPU = bundleEncoder.finish();
 
 		this.get( bundle ).bundleGPU = bundleGPU;
@@ -1281,8 +1369,11 @@ class WebGPUBackend extends Backend {
 	addBundle( renderContext, bundle ) {
 
 		const renderContextData = this.get( renderContext );
+		const bundleData = this.get( bundle );
+
+		renderContextData.renderBundles.push( bundleData.bundleGPU );
 
-		renderContextData.renderBundles.push( this.get( bundle ).bundleGPU );
+		this.device.queue.writeBuffer( bundleData.indirectBuffer, 0, bundleData.buffer );
 
 	}