WebGPURenderer: Improve performance tracking logic for better accuracy (#28748)

examples/jsm/renderers/common/Info.js

@@ -9,17 +9,22 @@ class Info {
 
 		this.render = {
 			calls: 0,
+			frameCalls: 0,
 			drawCalls: 0,
 			triangles: 0,
 			points: 0,
 			lines: 0,
-			timestamp: 0
+			timestamp: 0,
+			previousFrameCalls: 0,
+			timestampCalls: 0
 		};
 
 		this.compute = {
 			calls: 0,
-			computeCalls: 0,
-			timestamp: 0
+			frameCalls: 0,
+			timestamp: 0,
+			previousFrameCalls: 0,
+			timestampCalls: 0
 		};
 
 		this.memory = {
@@ -59,21 +64,44 @@ class Info {
 
 	updateTimestamp( type, time ) {
 
+		if ( this[ type ].timestampCalls === 0 ) {
+
+			this[ type ].timestamp = 0;
+
+		}
+
+
 		this[ type ].timestamp += time;
 
+		this[ type ].timestampCalls ++;
+
+
+		if ( this[ type ].timestampCalls >= this[ type ].previousFrameCalls ) {
+
+			this[ type ].timestampCalls = 0;
+
+		}
+
+
 	}
 
 	reset() {
 
+		const previousRenderFrameCalls = this.render.frameCalls;
+		this.render.previousFrameCalls = previousRenderFrameCalls;
+
+		const previousComputeFrameCalls = this.compute.frameCalls;
+		this.compute.previousFrameCalls = previousComputeFrameCalls;
+
+
 		this.render.drawCalls = 0;
-		this.compute.computeCalls = 0;
+		this.render.frameCalls = 0;
+		this.compute.frameCalls = 0;
 
 		this.render.triangles = 0;
 		this.render.points = 0;
 		this.render.lines = 0;
 
-		this.render.timestamp = 0;
-		this.compute.timestamp = 0;
 
 	}
 

examples/jsm/renderers/common/Renderer.js

@@ -521,6 +521,7 @@ class Renderer {
 
 		this.info.calls ++;
 		this.info.render.calls ++;
+		this.info.render.frameCalls ++;
 
 		nodeFrame.renderId = this.info.calls;
 
@@ -1079,7 +1080,7 @@ class Renderer {
 
 		this.info.calls ++;
 		this.info.compute.calls ++;
-		this.info.compute.computeCalls ++;
+		this.info.compute.frameCalls ++;
 
 		nodeFrame.renderId = this.info.calls;
 

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -1163,15 +1163,17 @@ class WebGPUBackend extends Backend {
 
         renderContextData.currentTimestampQueryBuffers.isMappingPending = true;
 
-		await resultBuffer.mapAsync( GPUMapMode.READ );
+		resultBuffer.mapAsync( GPUMapMode.READ ).then( () => {
+			const times = new BigUint64Array( resultBuffer.getMappedRange() );
+			const duration = Number( times[ 1 ] - times[ 0 ] ) / 1000000;
 
-		const times = new BigUint64Array( resultBuffer.getMappedRange() );
-		const duration = Number( times[ 1 ] - times[ 0 ] ) / 1000000;
 
-		this.renderer.info.updateTimestamp( type, duration );
-		resultBuffer.unmap();
+			this.renderer.info.updateTimestamp( type, duration );
 
-		renderContextData.currentTimestampQueryBuffers.isMappingPending = false;
+			resultBuffer.unmap();
+
+			renderContextData.currentTimestampQueryBuffers.isMappingPending = false;
+		})
 
 	}
 	

examples/webgpu_compute_particles.html

@@ -291,7 +291,7 @@
 
 						timestamps.innerHTML = `
 
-							Compute ${renderer.info.compute.computeCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
+							Compute ${renderer.info.compute.frameCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
 							Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.render.timestamp.toFixed( 6 )}ms`;
 
 					}

examples/webgpu_storage_buffer.html

@@ -221,7 +221,7 @@
 
 					timestamps[ forceWebGL ? 'webgl' : 'webgpu' ].innerHTML = `
 
-							Compute ${renderer.info.compute.computeCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
+							Compute ${renderer.info.compute.frameCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
 							Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.render.timestamp.toFixed( 6 )}ms`;
 
 					setTimeout( stepAnimation, 1000 );