rewok and extend

mrdoob · Oct 28, 2023 · 94a572c · 94a572c
1 parent 4781365
commit 94a572c
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 28 deletions.
diff --git a/build/three.module.min.js b/build/three.module.min.js
diff --git a/examples/jsm/renderers/common/Renderer.js b/examples/jsm/renderers/common/Renderer.js
@@ -316,6 +316,7 @@ class Renderer {
 
 		//
 
+		const startTime  = performance.now();
 		this.backend.beginRender( renderContext );
 
 		// process render lists
@@ -342,6 +343,9 @@ class Renderer {
 
 		sceneRef.onAfterRender( this, scene, camera, renderTarget );
 
+		console.log( this.info.render.drawCalls, 'elapsed:', performance.now() - startTime );
+		this.sortObjects = scene.static === false;
+
 	}
 
 	getActiveCubeFace() {
@@ -904,6 +908,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 );
 
 		//
@@ -912,15 +917,18 @@ class Renderer {
 
 		//
 
+		const updateGeometery = renderContext.static === false ? true : renderContext.static.skipGeometry !== true;
+		const updateNodes = renderContext.static === false ? true : renderContext.static.skipNodes !== 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 );
+		if ( renderContext.static === false ) this._pipelines.updateForRender( renderObject );
 
 		//
 

diff --git a/examples/jsm/renderers/webgpu/WebGPUBackend.js b/examples/jsm/renderers/webgpu/WebGPUBackend.js
@@ -66,9 +66,6 @@ class WebGPUBackend extends Backend {
 		this.textureUtils = new WebGPUTextureUtils( this );
 		this.occludedResolveCache = new Map();
 
-		this.createSnapshotBundle = false;
-		this.snapshotRenderBundles = null;
-
 	}
 
 	async init( renderer ) {
@@ -138,13 +135,27 @@ class WebGPUBackend extends Backend {
 
 	beginRender( renderContext ) {
 
-		if ( this.createSnapshotBundle ) {
+		const renderContextData = this.get( renderContext );
 
-			return this._beginCreateSnapshot( renderContext );
+		if ( renderContext.static ) {
 
-		}
+			if ( ! renderContextData.staticRenderBundlesCreated ) {
 
-		const renderContextData = this.get( renderContext );
+				return this._beginCreateRenderBundles( renderContext );
+
+			}
+
+		} else {
+
+			if ( renderContextData.staticRenderBundlesCreated ) {
+
+				renderContextData.staticRenderBundlesCreated = false;
+				renderContextData.renderBundles = null;
+				renderContextData.bundleDescriptor = null;
+
+			}
+
+		}
 
 		const device = this.device;
 		const occlusionQueryCount = renderContext.occlusionQueryCount;
@@ -378,11 +389,10 @@ class WebGPUBackend extends Backend {
 
 		}
 
-		if ( this.createSnapshotBundle ) {
-
-			this.createSnapshotBundle = false;
+		if ( renderContext.static && ! renderContextData.staticRenderBundlesCreated ) {
 
-			this.snapshotRenderBundles = [ renderContextData.currentPass.finish() ];
+			renderContextData.renderBundles = [ renderContextData.currentPass.finish() ];
+			renderContextData.staticRenderBundlesCreated = true;
 
 			// start real pass
 
@@ -391,9 +401,9 @@ class WebGPUBackend extends Backend {
 
 		}
 
-		if ( this.snapshotRenderBundles !== null ) {
+		if ( renderContextData.staticRenderBundlesCreated ) {
 
-			renderContextData.currentPass.executeBundles( this.snapshotRenderBundles );
+			renderContextData.currentPass.executeBundles( renderContextData.renderBundles );
 
 		}
 
@@ -634,12 +644,12 @@ class WebGPUBackend extends Backend {
 
 	draw( renderObject, info ) {
 
-		if ( this.snapshotRenderBundles !== null ) return;
-
 		const { object, geometry, context, pipeline } = renderObject;
+		const contextData = this.get( context );
+
+		if ( contextData.staticRenderBundlesCreated ) return;
 
 		const bindingsData = this.get( renderObject.getBindings() );
-		const contextData = this.get( context );
 		const pipelineGPU = this.get( pipeline ).pipeline;
 		const currentSets = contextData.currentSets;
 
@@ -1110,15 +1120,20 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	_beginCreateSnapshot( renderContext ) {
+	_beginCreateRenderBundles( renderContext ) {
 
 		const renderContextData = this.get( renderContext );
 
-		renderContextData.currentPass = this.device.createRenderBundleEncoder( {
+		const descriptor = {
 			colorFormats: [ GPUTextureFormat.BGRA8Unorm ],
 			depthStencilFormat: this._getDepthBufferGPU( renderContext ).format,
-			sampleCount: this.parameters.sampleCount
-		} );
+			sampleCount: this.parameters.sampleCount,
+//			depthReadOnly: false,
+//			stencilReadOnly: false
+		};
+
+		renderContextData.currentPass = this.device.createRenderBundleEncoder( descriptor );
+		renderContextData.bundleDescriptor = descriptor;
 
 		renderContextData.currentSets = { attributes: {} };
 

diff --git a/examples/webgpu_sprites.html b/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>