WebGPURenderer: Improve TimestampQueryPool logs (#30393)

Author: RenaudRohlinger

examples/webgpu_compute_particles.html

@@ -266,8 +266,10 @@
 				stats.update();
 
 				await renderer.computeAsync( computeParticles );
+				renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
 
 				await renderer.renderAsync( scene, camera );
+				renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );
 
 				// throttle the logging
 

examples/webgpu_compute_sort_bitonic.html

@@ -57,6 +57,8 @@
 			import * as THREE from 'three';
 			import { storage, If, vec3, not, uniform, uv, uint, float, Fn, vec2, abs, int, invocationLocalIndex, workgroupArray, uvec2, floor, instanceIndex, workgroupBarrier, atomicAdd, atomicStore, workgroupId } from 'three/tsl';
 
+			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			const StepType = {
@@ -130,6 +132,15 @@
 			// When forceGlobalSwap is true, force all valid local swaps to be global swaps.
 			async function init( forceGlobalSwap = false ) {
 
+
+				if ( WebGPU.isAvailable() === false ) {
+
+					document.body.appendChild( WebGPU.getErrorMessage() );
+
+					throw new Error( 'No WebGPU support' );
+
+				}
+
 				let currentStep = 0;
 				let nextStepGlobal = false;
 
@@ -515,11 +526,15 @@
 
 					}
 
+					renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
+
+
 					const algo = new Uint32Array( await renderer.getArrayBufferAsync( nextAlgoBuffer ) );
 					algo > StepType.DISPERSE_LOCAL ? ( nextStepGlobal = true ) : ( nextStepGlobal = false );
 					const totalSwaps = new Uint32Array( await renderer.getArrayBufferAsync( counterBuffer ) );
 
 					renderer.render( scene, camera );
+					renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );
 
 					timestamps[ forceGlobalSwap ? 'global_swap' : 'local_swap' ].innerHTML = `
 

examples/webgpu_storage_buffer.html

@@ -53,7 +53,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { storageObject, If, vec3, uv, uint, float, Fn, instanceIndex, workgroupBarrier } from 'three/tsl';
+			import { storage, If, vec3, uv, uint, float, Fn, instanceIndex, workgroupBarrier } from 'three/tsl';
 
 			const timestamps = {
 				webgpu: document.getElementById( 'timestamps' ),
@@ -90,7 +90,7 @@
 
 					const arrayBuffer = new THREE.StorageInstancedBufferAttribute( new Float32Array( array ), typeSize );
 
-					arrayBufferNodes.push( storageObject( arrayBuffer, type[ i ], size ) );
+					arrayBufferNodes.push( storage( arrayBuffer, type[ i ], size ).setPBO( true ) );
 
 				}
 
@@ -218,6 +218,9 @@
 					await renderer.computeAsync( compute );
 					await renderer.renderAsync( scene, camera );
 
+					renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
+					renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );
+
 					timestamps[ forceWebGL ? 'webgl' : 'webgpu' ].innerHTML = `
 
 							Compute ${renderer.info.compute.frameCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>

examples/webgpu_texturegrad.html

@@ -90,7 +90,7 @@
 				const box = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( box );
 
-				const renderer = new THREE.WebGPURenderer( { antialias: false, forceWebGL: forceWebGL, trackTimestamp: true } );
+				const renderer = new THREE.WebGPURenderer( { antialias: false, forceWebGL: forceWebGL } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth / 2, window.innerHeight );
 

src/renderers/webgl-fallback/utils/WebGLTimestampQueryPool.js

@@ -1,3 +1,4 @@
+import { warnOnce } from '../../../utils.js';
 import TimestampQueryPool from '../../common/TimestampQueryPool.js';
 
 /**
@@ -57,6 +58,7 @@ class WebGLTimestampQueryPool extends TimestampQueryPool {
 		// Check if we have enough space for a new query pair
 		if ( this.currentQueryIndex + 2 > this.maxQueries ) {
 
+			warnOnce( `WebGPUTimestampQueryPool [${ this.type }]: Maximum number of queries exceeded, when using trackTimestamp it is necessary to resolves the queries via renderer.resolveTimestampsAsync( THREE.TimestampQuery.${ this.type.toUpperCase() } ).` );
 			return null;
 
 		}

src/renderers/webgpu/utils/WebGPUTimestampQueryPool.js

@@ -52,7 +52,7 @@ class WebGPUTimestampQueryPool extends TimestampQueryPool {
 
 		if ( this.currentQueryIndex + 2 > this.maxQueries ) {
 
-			warnOnce( 'WebGPUTimestampQueryPool: Maximum number of queries exceeded.' );
+			warnOnce( `WebGPUTimestampQueryPool [${ this.type }]: Maximum number of queries exceeded, when using trackTimestamp it is necessary to resolves the queries via renderer.resolveTimestampsAsync( THREE.TimestampQuery.${ this.type.toUpperCase() } ).` );
 			return null;
 
 		}