WebGPURenderer: Add snapshot facility, record scene pass as a RenderBundle for reuse,

examples/jsm/renderers/common/Backend.js

@@ -80,6 +80,12 @@ class Backend {
 
 	destroyAttribute( attribute ) { }
 
+	// snapshot
+
+	createSnapshot() {}
+
+	destroySnapshot() {}
+
 	// canvas
 
 	updateSize() { }

examples/jsm/renderers/common/Renderer.js

@@ -259,6 +259,14 @@ class Renderer {
 		renderContext.depth = this.depth;
 		renderContext.stencil = this.stencil;
 
+		renderContext.static = scene.static;
+
+		if ( ! scene.static && renderContext.staticEnabled ) {
+
+			renderContext.staticEnabled = false;
+
+		}
+
 		//
 
 		sceneRef.onBeforeRender( this, scene, camera, renderTarget );
@@ -275,7 +283,7 @@ class Renderer {
 
 		renderList.finish();
 
-		if ( this.sortObjects === true ) {
+		if ( this.sortObjects === true && ! renderContext.staticEnabled ) {
 
 			renderList.sort( this._opaqueSort, this._transparentSort );
 
@@ -319,6 +327,7 @@ class Renderer {
 
 		//
 
+		const startTime  = performance.now();
 		this.backend.beginRender( renderContext );
 
 		// process render lists
@@ -332,6 +341,12 @@ class Renderer {
 
 		// finish render pass
 
+		if ( renderContext.static ) {
+
+			renderContext.staticEnabled = true;
+
+		}
+
 		this.backend.finishRender( renderContext );
 
 		// restore render tree
@@ -347,6 +362,9 @@ class Renderer {
 
 		sceneRef.onAfterRender( this, scene, camera, renderTarget );
 
+		console.log( this.info.render.drawCalls, 'elapsed:', performance.now() - startTime );
+
+
 	}
 
 	getActiveCubeFace() {
@@ -921,6 +939,7 @@ class Renderer {
 
 	_renderObjectDirect( object, material, scene, camera, lightsNode, passId ) {
 
+		const renderContext = this._currentRenderContext;
 		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
 
 		//
@@ -929,13 +948,15 @@ class Renderer {
 
 		//
 
+		const updateGeometery = renderContext.staticEnabled ? renderContext.static.skipGeometry !== true : true;
+
 		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
 		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
 
 		//
 
 		this._nodes.updateForRender( renderObject );
-		this._geometries.updateForRender( renderObject );
+		if ( updateGeometery ) this._geometries.updateForRender( renderObject );
 		this._bindings.updateForRender( renderObject );
 		this._pipelines.updateForRender( renderObject );
 

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -137,6 +137,25 @@ class WebGPUBackend extends Backend {
 
 		const renderContextData = this.get( renderContext );
 
+		if ( renderContext.static ) {
+
+			if ( ! renderContext.staticEnabled ) {
+
+				return this._beginCreateRenderBundles( renderContext );
+
+			}
+
+		} else {
+
+			if ( renderContextData.renderBundles !== null ) {
+
+				renderContextData.renderBundles = null;
+				renderContextData.bundleDescriptor = null;
+
+			}
+
+		}
+
 		const device = this.device;
 		const occlusionQueryCount = renderContext.occlusionQueryCount;
 
@@ -369,6 +388,23 @@ class WebGPUBackend extends Backend {
 
 		}
 
+		if ( renderContext.static && ! renderContextData.renderBundles ) {
+
+			renderContextData.renderBundles = [ renderContextData.currentPass.finish() ];
+
+			// start real pass
+
+			this.beginRender( renderContext );
+
+
+		}
+
+		if ( renderContextData.renderBundles ) {
+
+			renderContextData.currentPass.executeBundles( renderContextData.renderBundles );
+
+		}
+
 		renderContextData.currentPass.end();
 
 		if ( occlusionQueryCount > 0 ) {
@@ -607,9 +643,11 @@ class WebGPUBackend extends Backend {
 	draw( renderObject, info ) {
 
 		const { object, geometry, context, pipeline } = renderObject;
+		const contextData = this.get( context );
+
+		if ( contextData.renderBundles ) return;
 
 		const bindingsData = this.get( renderObject.getBindings() );
-		const contextData = this.get( context );
 		const pipelineGPU = this.get( pipeline ).pipeline;
 		const currentSets = contextData.currentSets;
 
@@ -1080,6 +1118,25 @@ class WebGPUBackend extends Backend {
 
 	}
 
+	_beginCreateRenderBundles( renderContext ) {
+
+		const renderContextData = this.get( renderContext );
+console.log( 'x');
+		const descriptor = {
+			colorFormats: [ GPUTextureFormat.BGRA8Unorm ],
+			depthStencilFormat: this._getDepthBufferGPU( renderContext ).format,
+			sampleCount: this.parameters.sampleCount,
+//			depthReadOnly: false,
+//			stencilReadOnly: false
+		};
+
+		renderContextData.currentPass = this.device.createRenderBundleEncoder( descriptor );
+		renderContextData.bundleDescriptor = descriptor;
+
+		renderContextData.currentSets = { attributes: {} };
+
+	}
+
 }
 
 export default WebGPUBackend;

examples/webgpu_sprites.html

@@ -26,6 +26,7 @@
 			import * as THREE from 'three';
 			import { texture, uv, userData, rangeFog, color, SpriteNodeMaterial } from 'three/nodes';
 
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGL from 'three/addons/capabilities/WebGL.js';
 
@@ -39,6 +40,8 @@
 
 			let imageWidth = 1, imageHeight = 1;
 
+			let amount = 8000;
+
 			init();
 
 			function init() {
@@ -60,9 +63,11 @@
 				scene = new THREE.Scene();
 				scene.fogNode = rangeFog( color( 0x0000ff ), 1500, 2100 );
 
+				// enable static mode
+				scene.false = true;
+
 				// create sprites
 
-				const amount = 200;
 				const radius = 500;
 
 				const textureLoader = new THREE.TextureLoader();
@@ -115,6 +120,8 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
+				initGui();
+
 			}
 
 			function onWindowResize() {
@@ -138,19 +145,41 @@
 					const sprite = group.children[ i ];
 					const scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
 
-					sprite.userData.rotation += 0.1 * ( i / l );
+					sprite.userData.rotation += 0.01 * ( i / l );
 					sprite.scale.set( scale * imageWidth, scale * imageHeight, 1.0 );
 
 				}
 
-				group.rotation.x = time * 0.5;
-				group.rotation.y = time * 0.75;
-				group.rotation.z = time * 1.0;
+				group.rotation.x = time * 0.05;
+				group.rotation.y = time * 0.075;
+				group.rotation.z = time * 0.1;
 
 				renderer.render( scene, camera );
 
 			}
 
+			function initGui() {
+
+				const gui = new GUI();
+
+				const param = {
+					'static': false,
+				};
+
+
+				const staticConfig = {
+					skipGeometry: true,
+					skipNodes: true
+				};
+
+				gui.add( param, 'static' ).onChange( function ( val ) {
+
+					scene.static = val ? staticConfig : false;
+
+				} );
+
+			}
+
 		</script>
 	</body>
 </html>

src/scenes/Scene.js

@@ -19,6 +19,8 @@ class Scene extends Object3D {
 
 		this.overrideMaterial = null;
 
+		this.static = false;
+
 		if ( typeof __THREE_DEVTOOLS__ !== 'undefined' ) {
 
 			__THREE_DEVTOOLS__.dispatchEvent( new CustomEvent( 'observe', { detail: this } ) );