WebGPURenderer: Fix types for indirect compute and modify example to show usage (#32129)

* Fix type annotations, handle IndirectStorageBufferAttribute in webgl fallback renderer.

* Modify webgpu_compute_particles example to utilize indirect compute dispatch

* Respect dispatchSize when backend is not initialized

* Revert "Modify webgpu_compute_particles example to utilize indirect compute dispatch"

This reverts commit ca125d8.

* Update puppeteer.js

---------

Co-authored-by: Kuklin Georgiy <theblekbern@gmail.com>

Author: TheBlek

src/renderers/common/Renderer.js

@@ -2420,10 +2420,10 @@ class Renderer {
 	 * if the renderer has been initialized.
 	 *
 	 * @param {Node|Array<Node>} computeNodes - The compute node(s).
-	 * @param {number|Array<number>|GPUBuffer} [dispatchSize=null]
+	 * @param {number|Array<number>|IndirectStorageBufferAttribute} [dispatchSize=null]
 	 * - A single number representing count, or
 	 * - An array [x, y, z] representing dispatch size, or
-	 * - A GPUBuffer for indirect dispatch size.
+	 * - A IndirectStorageBufferAttribute for indirect dispatch size.
 	 * @return {Promise|undefined} A Promise that resolve when the compute has finished. Only returned when the renderer has not been initialized.
 	 */
 	compute( computeNodes, dispatchSize = null ) {
@@ -2434,7 +2434,7 @@ class Renderer {
 
 			warn( 'Renderer: .compute() called before the backend is initialized. Try using .computeAsync() instead.' );
 
-			return this.computeAsync( computeNodes );
+			return this.computeAsync( computeNodes, dispatchSize );
 
 		}
 
@@ -2532,10 +2532,10 @@ class Renderer {
 	 *
 	 * @async
 	 * @param {Node|Array<Node>} computeNodes - The compute node(s).
-	 * @param {number|Array<number>|GPUBuffer} [dispatchSize=null]
+	 * @param {number|Array<number>|IndirectStorageBufferAttribute} [dispatchSize=null]
 	 * - A single number representing count, or
 	 * - An array [x, y, z] representing dispatch size, or
-	 * - A GPUBuffer for indirect dispatch size.
+	 * - A IndirectStorageBufferAttribute for indirect dispatch size.
 	 * @return {Promise} A Promise that resolve when the compute has finished.
 	 */
 	async computeAsync( computeNodes, dispatchSize = null ) {

src/renderers/webgl-fallback/WebGLBackend.js

@@ -852,6 +852,12 @@ class WebGLBackend extends Backend {
 
 			count = count[ 0 ];
 
+		} else if ( count && typeof count === 'object' && count.isIndirectStorageBufferAttribute ) {
+
+			warnOnce( 'WebGLBackend.compute(): The count parameter must be a single number, not IndirectStorageBufferAttribute' );
+
+			count = computeNode.count;
+
 		}
 
 		if ( attributes[ 0 ].isStorageInstancedBufferAttribute ) {

src/renderers/webgpu/WebGPUBackend.js

@@ -1343,10 +1343,10 @@ class WebGPUBackend extends Backend {
 	 * @param {Node} computeNode - The compute node.
 	 * @param {Array<BindGroup>} bindings - The bindings.
 	 * @param {ComputePipeline} pipeline - The compute pipeline.
-	 * @param {number|Array<number>|GPUBuffer} [dispatchSize=null]
+	 * @param {number|Array<number>|IndirectStorageBufferAttribute} [dispatchSize=null]
 	 * - A single number representing count, or
 	 * - An array [x, y, z] representing dispatch size, or
-	 * - A GPUBuffer for indirect dispatch size.
+	 * - A IndirectStorageBufferAttribute for indirect dispatch size.
 	 */
 	compute( computeGroup, computeNode, bindings, pipeline, dispatchSize = null ) {
 

test/e2e/puppeteer.js

@@ -22,6 +22,7 @@ const exceptionList = [
 	'webgpu_postprocessing_traa',
 	'webgpu_reflection',
 	'webgpu_texturegrad',
+	'webgpu_tsl_vfx_flames',
 
 	// Need more time
 	'css3d_mixed',