Renderer: Added sync `.compute()` support (#29547)

* Renderer: Added sync `compute()`

* ComputeNode: Use `.onInit( fn )` instead of `.onInit=fn`

* update examples

* update example

examples/webgpu_compute_geometry.html

@@ -132,7 +132,7 @@
 
 			async function animate() {
 
-				if ( computeUpdate ) await renderer.computeAsync( computeUpdate );
+				if ( computeUpdate ) renderer.compute( computeUpdate );
 
 				renderer.render( scene, camera );
 

examples/webgpu_compute_particles.html

@@ -178,7 +178,7 @@
 
 				//
 
-				renderer.compute( computeInit );
+				renderer.computeAsync( computeInit );
 
 				// click event
 
@@ -219,7 +219,7 @@
 
 						// compute
 
-						renderer.compute( computeHit );
+						renderer.computeAsync( computeHit );
 
 					}
 

examples/webgpu_compute_particles_rain.html

@@ -292,7 +292,7 @@
 
 				//
 
-				renderer.compute( computeInit );
+				renderer.computeAsync( computeInit );
 
 				//
 

examples/webgpu_compute_points.html

@@ -83,7 +83,7 @@
 				// compute
 
 				computeNode = computeShaderFn().compute( particleNum );
-				computeNode.onInit = ( { renderer } ) => {
+				computeNode.onInit( ( { renderer } ) => {
 
 					const precomputeShaderNode = Fn( () => {
 
@@ -101,9 +101,9 @@
 
 					} );
 
-					renderer.compute( precomputeShaderNode().compute( particleNum ) );
+					renderer.computeAsync( precomputeShaderNode().compute( particleNum ) );
 
-				};
+				} );
 
 				// use a compute shader to animate the point cloud's vertex data.
 

examples/webgpu_compute_texture.html

@@ -99,7 +99,7 @@
 				document.body.appendChild( renderer.domElement );
 
 				// compute texture
-				renderer.compute( computeNode );
+				renderer.computeAsync( computeNode );
 
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgpu_compute_water.html

@@ -411,7 +411,7 @@
 				const buttonCompute = {
 					smoothWater: function () {
 
-						renderer.compute( computeSmooth );
+						renderer.computeAsync( computeSmooth );
 
 					}
 				};
@@ -488,11 +488,11 @@
 
 				}
 			
-				renderer.compute( computeHeight );
+				renderer.computeAsync( computeHeight );
 
 				if ( effectController.spheresEnabled ) {
 
-					renderer.compute( computeSphere );
+					renderer.computeAsync( computeSphere );
 
 				}
 

examples/webgpu_tsl_compute_attractors_particles.html

@@ -194,7 +194,7 @@
 
 				const reset = () => {
 
-					renderer.compute( initCompute );
+					renderer.computeAsync( initCompute );
 			
 				};
 

examples/webgpu_tsl_vfx_linkedparticles.html

@@ -108,7 +108,7 @@
 				const particleVelocities = storage( new THREE.StorageInstancedBufferAttribute( nbParticles, 4 ), 'vec4', nbParticles );
 
 				// init particles buffers
-				renderer.compute( /*#__PURE__*/ Fn( () => {
+				renderer.computeAsync( /*#__PURE__*/ Fn( () => {
 
 					particlePositions.element( instanceIndex ).xyz.assign( vec3( 10000.0 ) );
 					particlePositions.element( instanceIndex ).w.assign( vec3( - 1.0 ) ); // life is stored in w component; x<0 means dead

src/nodes/gpgpu/ComputeNode.js

@@ -25,6 +25,8 @@ class ComputeNode extends Node {
 		this.version = 1;
 		this.updateBeforeType = NodeUpdateType.OBJECT;
 
+		this.onInitFunction = null;
+
 		this.updateDispatchCount();
 
 	}
@@ -54,7 +56,13 @@ class ComputeNode extends Node {
 
 	}
 
-	onInit() { }
+	onInit( callback ) {
+
+		this.onInitFunction = callback;
+
+		return this;
+
+	}
 
 	updateBefore( { renderer } ) {
 

src/renderers/common/Renderer.js

@@ -1149,9 +1149,17 @@ class Renderer {
 
 	}
 
-	async computeAsync( computeNodes ) {
+	compute( computeNodes ) {
 
-		if ( this._initialized === false ) await this.init();
+		if ( this._initialized === false ) {
+
+			console.warn( 'THREE.Renderer: .compute() called before the backend is initialized. Try using .computeAsync() instead.' );
+
+			return this.computeAsync( computeNodes );
+
+		}
+
+		//
 
 		const nodeFrame = this._nodes.nodeFrame;
 
@@ -1202,7 +1210,13 @@ class Renderer {
 
 				//
 
-				computeNode.onInit( { renderer: this } );
+				const onInitFn = computeNode.onInitFunction;
+
+				if ( onInitFn !== null ) {
+
+					onInitFn.call( computeNode, { renderer: this } );
+
+				}
 
 			}
 
@@ -1218,14 +1232,22 @@ class Renderer {
 
 		backend.finishCompute( computeNodes );
 
-		await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
-
 		//
 
 		nodeFrame.renderId = previousRenderId;
 
 	}
 
+	async computeAsync( computeNodes ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		this.compute( computeNodes );
+
+		await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
+
+	}
+
 	async hasFeatureAsync( name ) {
 
 		if ( this._initialized === false ) await this.init();
@@ -1633,12 +1655,6 @@ class Renderer {
 
 	}
 
-	get compute() {
-
-		return this.computeAsync;
-
-	}
-
 	get compile() {
 
 		return this.compileAsync;