ComputeNode: add method .onInit() (#24363)

* add method ComputeNode.onInit()

* update webgpu_compute example

examples/jsm/nodes/gpgpu/ComputeNode.js

@@ -34,6 +34,8 @@ class ComputeNode extends Node {
 
 	}
 
+	onInit() { }
+
 	update( { renderer } ) {
 
 		renderer.compute( this );

examples/jsm/renderers/webgpu/WebGPUComputePipelines.js

@@ -14,6 +14,12 @@ class WebGPUComputePipelines {
 
 	}
 
+	has( computeNode ) {
+
+		return this.pipelines.get( computeNode ) !== undefined;
+
+	}
+
 	get( computeNode ) {
 
 		let pipeline = this.pipelines.get( computeNode );

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -588,14 +588,24 @@ class WebGPURenderer {
 	compute( ...computeNodes ) {
 
 		const device = this._device;
+		const computePipelines = this._computePipelines;
+
 		const cmdEncoder = device.createCommandEncoder( {} );
 		const passEncoder = cmdEncoder.beginComputePass();
 
 		for ( const computeNode of computeNodes ) {
 
+			// onInit
+
+			if ( computePipelines.has( computeNode ) === false ) {
+
+				computeNode.onInit( { renderer: this } );
+
+			}
+
 			// pipeline
 
-			const pipeline = this._computePipelines.get( computeNode );
+			const pipeline = computePipelines.get( computeNode );
 			passEncoder.setPipeline( pipeline );
 
 			// node

examples/webgpu_compute.html

@@ -29,8 +29,8 @@
 
 			import {
 				ShaderNode, compute,
-				uniform, element, storage, attribute,
-				temp, assign, add, sub, cond, abs, negate, max, min, length, vec3, color,
+				uniform, element, storage, attribute, mul, sin, cos,
+				temp, assign, add, sub, cond, abs, negate, max, min, length, float, vec2, vec3, color,
 				greaterThanEqual, lessThanEqual, instanceIndex
 			} from 'three-nodes/Nodes.js';
 
@@ -70,16 +70,6 @@
 				const particleArray = new Float32Array( particleNum * particleSize );
 				const velocityArray = new Float32Array( particleNum * particleSize );
 
-				for ( let i = 0; i < particleNum; i ++ ) {
-
-					const r = Math.random() * 0.01 + 0.005;
-					const degree = Math.random() * 360;
-
-					velocityArray[ i * particleSize + 0 ] = r * Math.sin( degree * Math.PI / 180 ); // x
-					velocityArray[ i * particleSize + 1 ] = r * Math.cos( degree * Math.PI / 180 ); // y
-
-				}
-
 				// create buffers
 
 				const particleBuffer = new THREE.InstancedBufferAttribute( particleArray, 2 );
@@ -90,7 +80,7 @@
 
 				// create function
 
-				const FnNode = new ShaderNode( ( inputs, builder ) => {
+				const computeShaderNode = new ShaderNode( ( inputs, builder ) => {
 
 					const particle = element( particleBufferNode, instanceIndex );
 					const velocity = element( velocityBufferNode, instanceIndex );
@@ -115,7 +105,28 @@
 
 				// compute
 
-				computeNode = compute( FnNode, particleNum );
+				computeNode = compute( computeShaderNode, particleNum );
+				computeNode.onInit = ( { renderer } ) => {
+
+					const precomputeShaderNode = new ShaderNode( ( inputs, builder ) => {
+
+						const particleIndex = float( instanceIndex );
+
+						const randomAngle = mul( mul( particleIndex, .005 ), Math.PI * 2 );
+						const randomSpeed = add( mul( particleIndex, 0.00000001 ), 0.0000001 );
+
+						const velX = mul( sin( randomAngle ), randomSpeed );
+						const velY = mul( cos( randomAngle ), randomSpeed );
+
+						const velocity = element( velocityBufferNode, instanceIndex );
+
+						assign( velocity.xy, vec2( velX, velY ) ).build( builder );
+
+					} );
+
+					renderer.compute( compute( precomputeShaderNode, computeNode.count ) );
+
+				};
 
 				// use a compute shader to animate the point cloud's vertex data.