WebGPURenderer: Introduce TimestampQueryPool

[RenaudRohlinger]

Description
Refactor of timestamp and timer query handling in WebGPU/WebGL for the WebGPURenderer.

It is now more stable and performant through the use of TimestampQueryPool, which maintains a single querySet per type (render/compute) and global buffers. This resolves multiple errors and limitations that users have previously reported.

The API now supports multiple render passes (postprocessing) through a new resolveTimestampsAsync method in the Renderer, which resolves all timestamps appended in the loop from different render/compute calls.

Another significant improvement addresses a previous limitation by separating compute and render contexts. Compute operations can now be monitored independently of render calls, as they are often isolated for tasks such as simulations and other complex calculations (with the exception of material.geometryNode).

Example of the new API:

// Render to collision position render target
renderer.setRenderTarget( collisionPosRT );
renderer.render( scene, collisionCamera ); // doesn't require to use renderAsync anymore to calculate timestamp, everything gets calculated in resolveAllTimestampsAsync

// Independent compute pass
renderer.computeAsync( computeParticles );
renderer.resolveTimestampsAsync( 'compute' ); // Resolve compute-specific timing data

// Final render with post-processing for example
renderer.setRenderTarget( null );
await postProcessing.renderAsync();
renderer.resolveTimestampsAsync(); // Resolve all render-specific pass timings

// Performance monitoring or do something with renderer.info
stats.update();

While testing the tool I took the opportunity to improve one of the main example that seems to be affected by excessive buffer access within the loop, resolved by using const and vars:
Before (in WebGPU velocity affects performances 8/9ms per compute):

After quick optimization tests (velocity compute program speed up by ~50%):

If that's ok this refactor will introduce breaking changes. Rather than attempting to maintain backwards compatibility, which would significantly pollute the codebase, I will document the necessary updates in the migration guide for affected components.

This contribution is funded by Utsubo

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	336.25 78.28	336.25 78.28	+0 B +0 B
WebGPU	503.66 139.88	507.53 140.94	+3.87 kB +1.06 kB
WebGPU Nodes	503.13 139.77	506.99 140.84	+3.87 kB +1.07 kB

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	465.25 112.13	465.25 112.13	+0 B +0 B
WebGPU	577.44 156.5	581.32 157.56	+3.88 kB +1.06 kB
WebGPU Nodes	532.82 146.06	536.7 147.16	+3.88 kB +1.1 kB

[Mugen87]

It's nice to see the timestamp related code is moved into specific modules. That makes the backends easier to maintain.

[sunag]

I think it would be better to have a static definition for this like TimestampQuery.COMPUTE ?

[sunag]

@RenaudRohlinger Do you now why I am getting this warning in some examples like webgpu_compute_particles?

• WebGPUTimestampQueryPool: Maximum number of queries exceeded.

[RenaudRohlinger]

@sunag

It's because trackTimestamp is being used but we need resolveTimestampsAsync to resolve the timestamp queries. In the example it's currently never being called so the timestamp queries gets accumulated ultimately reaching the max number of queries.
Here we should add resolveTimestampsAsync:

await renderer.computeAsync( computeParticles );
renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );

await renderer.renderAsync( scene, camera );
renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );

[RenaudRohlinger]

Maybe we could improve the log:

Maximum number of queries exceeded, renderer.resolveTimestampsAsync is probably missing.
or:
Maximum number of queries exceeded,
when using trackTimestamp it is necessary to resolves the queries via renderer.resolveTimestampsAsync.

[mrdoob]

These break in gh-pages:
https://threejs.org/examples/?q=snow#webgpu_compute_particles_snow

[Mugen87]

#30432