From 1565767371000f1e7519ca7eebf9a87ccf98b359 Mon Sep 17 00:00:00 2001 From: Renaud Rohlinger Date: Sat, 9 Mar 2024 16:51:50 +0900 Subject: [PATCH 1/4] improve info system on threejs --- examples/jsm/renderers/common/Animation.js | 2 + examples/jsm/renderers/common/Info.js | 11 +-- examples/jsm/renderers/common/Renderer.js | 6 +- .../jsm/renderers/webgpu/WebGPUBackend.js | 46 ++++++------ examples/webgpu_compute_particles.html | 4 -- examples/webgpu_compute_particles_snow.html | 70 ++++++++++++++----- 6 files changed, 81 insertions(+), 58 deletions(-) diff --git a/examples/jsm/renderers/common/Animation.js b/examples/jsm/renderers/common/Animation.js index d3a5f2043b767b..0a082ca25c3967 100644 --- a/examples/jsm/renderers/common/Animation.js +++ b/examples/jsm/renderers/common/Animation.js @@ -18,6 +18,8 @@ class Animation { this.requestId = self.requestAnimationFrame( update ); + if ( this.info.autoReset === true ) this.info.reset(); + this.nodes.nodeFrame.update(); this.info.frame = this.nodes.nodeFrame.frameId; diff --git a/examples/jsm/renderers/common/Info.js b/examples/jsm/renderers/common/Info.js index 802fb08689c95b..03af95829506e9 100644 --- a/examples/jsm/renderers/common/Info.js +++ b/examples/jsm/renderers/common/Info.js @@ -66,22 +66,17 @@ class Info { } - resetCompute() { - - this.compute.computeCalls = 0; - - this.timestamp.compute = 0; - - } - reset() { this.render.drawCalls = 0; + this.compute.computeCalls = 0; + this.render.triangles = 0; this.render.points = 0; this.render.lines = 0; this.timestamp.render = 0; + this.timestamp.compute = 0; } diff --git a/examples/jsm/renderers/common/Renderer.js b/examples/jsm/renderers/common/Renderer.js index 91dd5228656a09..29310bac19c08b 100644 --- a/examples/jsm/renderers/common/Renderer.js +++ b/examples/jsm/renderers/common/Renderer.js @@ -312,9 +312,8 @@ class Renderer { if ( this._initialized === false ) await this.init(); - const renderContext = this._renderContext( scene, camera ); + this._renderContext( scene, camera ); - await this.backend.resolveTimestampAsync( renderContext, 'render' ); } @@ -378,7 +377,6 @@ class Renderer { if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld(); - if ( this.info.autoReset === true ) this.info.reset(); // @@ -508,6 +506,7 @@ class Renderer { sceneRef.onAfterRender( this, scene, camera, renderTarget ); // + this.backend.resolveTimestampAsync( renderContext, 'render' ); return renderContext; @@ -889,7 +888,6 @@ class Renderer { const previousRenderId = nodeFrame.renderId; // - if ( this.info.autoReset === true ) this.info.resetCompute(); this.info.calls ++; this.info.compute.calls ++; diff --git a/examples/jsm/renderers/webgpu/WebGPUBackend.js b/examples/jsm/renderers/webgpu/WebGPUBackend.js index 11af2c0e16a415..1c3f0936abce47 100644 --- a/examples/jsm/renderers/webgpu/WebGPUBackend.js +++ b/examples/jsm/renderers/webgpu/WebGPUBackend.js @@ -1049,9 +1049,11 @@ class WebGPUBackend extends Backend { beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins. endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends. }; + Object.assign( descriptor, { timestampWrites, } ); + renderContextData.timeStampQuerySet = timeStampQuerySet; } @@ -1084,33 +1086,29 @@ class WebGPUBackend extends Backend { } - async resolveTimestampAsync( renderContext, type = 'render' ) { - - if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return; - - const renderContextData = this.get( renderContext ); - - // handle timestamp query results - + async resolveTimestampAsync(renderContext, type = 'render') { + if (!this.hasFeature(GPUFeatureName.TimestampQuery) || !this.trackTimestamp) return; + + const renderContextData = this.get(renderContext); const { currentTimestampQueryBuffer } = renderContextData; - - if ( currentTimestampQueryBuffer ) { - - renderContextData.currentTimestampQueryBuffer = null; - - await currentTimestampQueryBuffer.mapAsync( GPUMapMode.READ ); - - const times = new BigUint64Array( currentTimestampQueryBuffer.getMappedRange() ); - - const duration = Number( times[ 1 ] - times[ 0 ] ) / 1000000; - // console.log( `Compute ${type} duration: ${Number( times[ 1 ] - times[ 0 ] ) / 1000000}ms` ); - this.renderer.info.updateTimestamp( type, duration ); - - currentTimestampQueryBuffer.unmap(); - + + if (currentTimestampQueryBuffer === undefined) return; + + const buffer = currentTimestampQueryBuffer; + + try { + await buffer.mapAsync(GPUMapMode.READ); + const times = new BigUint64Array(buffer.getMappedRange()); + const duration = Number(times[1] - times[0]) / 1000000; + this.renderer.info.updateTimestamp(type, duration); + } catch (error) { + console.error(`Error mapping buffer: ${error}`); + // Optionally handle the error, e.g., re-queue the buffer or skip it + } finally { + buffer.unmap(); } - } + // node builder diff --git a/examples/webgpu_compute_particles.html b/examples/webgpu_compute_particles.html index eaba39dbcfe327..bcd030fa11f825 100644 --- a/examples/webgpu_compute_particles.html +++ b/examples/webgpu_compute_particles.html @@ -192,8 +192,6 @@ // - renderer.info.autoReset = false; - renderer.compute( computeInit ); // click event @@ -305,8 +303,6 @@ } - renderer.info.resetCompute(); - renderer.info.reset(); } diff --git a/examples/webgpu_compute_particles_snow.html b/examples/webgpu_compute_particles_snow.html index 77f12648307c08..ef118f16ee4212 100644 --- a/examples/webgpu_compute_particles_snow.html +++ b/examples/webgpu_compute_particles_snow.html @@ -9,6 +9,19 @@
three.js WebGPU - Compute Snow - 100K Particles +
@@ -50,7 +51,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - import Stats from 'three/addons/libs/stats.module.js'; + import Stats from 'stats-gl'; const maxParticleCount = 100000; const timestamps = document.getElementById( 'timestamps' ); @@ -292,14 +293,18 @@ // - renderer = new WebGPURenderer( { antialias: true, trackTimestamp: true } ); + renderer = new WebGPURenderer( { antialias: true } ); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animate ); document.body.appendChild( renderer.domElement ); - stats = new Stats(); + stats = new Stats( { + precision: 3, + horizontal: false + } ); + stats.init( renderer ); document.body.appendChild( stats.dom ); @@ -361,7 +366,6 @@ async function animate() { - stats.update(); controls.update(); @@ -383,23 +387,8 @@ await postProcessing.renderAsync(); - // throttle the logging - if ( renderer.hasFeature( 'timestamp-query' ) ) { - - if ( renderer.info.render.calls % 5 === 0 ) { - - timestamps.innerHTML = ` - - Compute ${renderer.info.compute.computeCalls} pass in ${renderer.info.timestamp.compute.toFixed( 6 )}ms
- Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.timestamp.render.toFixed( 6 )}ms`; - - } - - } else { - - timestamps.innerHTML = 'Timestamp queries not supported'; - - } + + stats.update(); } From ee67652c401b18ca5b53409afc3361a3215aa55d Mon Sep 17 00:00:00 2001 From: Renaud Rohlinger Date: Wed, 13 Mar 2024 16:11:48 +0900 Subject: [PATCH 3/4] fix bot warning --- examples/webgpu_compute_particles_snow.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/examples/webgpu_compute_particles_snow.html b/examples/webgpu_compute_particles_snow.html index 3b36a721ea5e54..071cc7892924f8 100644 --- a/examples/webgpu_compute_particles_snow.html +++ b/examples/webgpu_compute_particles_snow.html @@ -54,7 +54,6 @@ import Stats from 'stats-gl'; const maxParticleCount = 100000; - const timestamps = document.getElementById( 'timestamps' ); let camera, scene, renderer; let controls, stats; @@ -366,7 +365,6 @@ async function animate() { - controls.update(); // position @@ -385,8 +383,6 @@ renderer.setRenderTarget( null ); await postProcessing.renderAsync(); - - stats.update(); From afb956a04cb9524915aa04c4cf2f4f6b8b79112f Mon Sep 17 00:00:00 2001 From: Renaud Rohlinger Date: Wed, 13 Mar 2024 16:14:02 +0900 Subject: [PATCH 4/4] remove unused dom --- examples/webgpu_compute_particles_snow.html | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/examples/webgpu_compute_particles_snow.html b/examples/webgpu_compute_particles_snow.html index 071cc7892924f8..3227797c600b86 100644 --- a/examples/webgpu_compute_particles_snow.html +++ b/examples/webgpu_compute_particles_snow.html @@ -9,19 +9,6 @@
three.js WebGPU - Compute Snow - 100K Particles -