Node: Introduce `onUpdate` (#27964)

* Node: Introduce `onUpdate`

* update example

* cleanup

examples/jsm/nodes/core/Node.js

@@ -47,6 +47,33 @@ class Node extends EventDispatcher {
 
 	}
 
+	onUpdate( callback, updateType ) {
+
+		this.updateType = updateType;
+		this.update = callback.bind( this.getSelf() );
+
+		return this;
+
+	}
+
+	onFrameUpdate( callback ) {
+
+		return this.onUpdate( callback, NodeUpdateType.FRAME );
+
+	}
+
+	onRenderUpdate( callback ) {
+
+		return this.onUpdate( callback, NodeUpdateType.RENDER );
+
+	}
+
+	onObjectUpdate( callback ) {
+
+		return this.onUpdate( callback, NodeUpdateType.OBJECT );
+
+	}
+
 	getSelf() {
 
 		// Returns non-node object.

examples/jsm/nodes/core/UniformNode.js

@@ -35,6 +35,26 @@ class UniformNode extends InputNode {
 
 	}
 
+	onUpdate( callback, updateType ) {
+
+		const self = this.getSelf();
+
+		callback = callback.bind( self );
+
+		return super.onUpdate( ( frame ) => {
+
+			const value = callback( frame, self );
+
+			if ( value !== undefined ) {
+
+				this.value = value;
+
+			}
+
+	 	}, updateType );
+
+	}
+
 	generate( builder, output ) {
 
 		const type = this.getNodeType( builder );

examples/webgpu_custom_fog.html

@@ -24,7 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, fog, float, positionWorld, triNoise3D, positionView, normalWorld, timerLocal, MeshPhongNodeMaterial } from 'three/nodes';
+			import { color, fog, float, positionWorld, triNoise3D, positionView, normalWorld, uniform, MeshPhongNodeMaterial } from 'three/nodes';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGL from 'three/addons/capabilities/WebGL.js';
@@ -64,7 +64,8 @@
 				const alpha = .98;
 				const groundFogArea = float( distance ).sub( positionWorld.y ).div( distance ).pow( 3 ).saturate().mul( alpha );
 
-				const timer = timerLocal( 1 );
+				// a alternative way to create a TimerNode
+				const timer = uniform( 0 ).onFrameUpdate( ( frame ) => frame.time );
 
 				const fogNoiseA = triNoise3D( positionWorld.mul( .005 ), 0.2, timer );
 				const fogNoiseB = triNoise3D( positionWorld.mul( .01 ), 0.2, timer.mul( 1.2 ) );

examples/webgpu_materials.html

@@ -222,7 +222,7 @@
 				materials.push( material );
 
 				const loopCount = 10;
-				material.colorNode = loop( loopCount, ( { i }, stack ) => {
+				material.colorNode = loop( loopCount, ( { i } ) => {
 
 					const output = vec4().temp();
 					const scale = oscSine().mul( .09 ); // just a value to test