NodeFrame

examples/js/loaders/NodeMaterialLoader.js

@@ -372,6 +372,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 				case "TimerNode":
 
+					object.scope = node.scope;
 					object.scale = node.scale;
 
 					break;

examples/js/nodes/NodeFrame.js

@@ -0,0 +1,35 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+THREE.NodeFrame = function ( time ) {
+
+	this.time = time !== undefined ? time : 0;
+	this.delta = 0;
+
+	this.frameId = 0;
+
+};
+
+THREE.NodeFrame.prototype.update = function ( delta ) {
+
+	++this.frameId;
+
+	this.time += delta;
+	this.delta = delta;
+
+	return this;
+
+};
+
+THREE.NodeFrame.prototype.updateFrame = function ( node ) {
+
+	if ( node.frameId === this.frameId ) return this;
+
+	node.updateFrame( this );
+
+	node.frameId = this.frameId;
+
+	return this;
+
+};

examples/js/nodes/NodeMaterial.js

@@ -9,6 +9,8 @@ THREE.NodeMaterial = function ( vertex, fragment ) {
 	this.vertex = vertex || new THREE.RawNode( new THREE.PositionNode( THREE.PositionNode.PROJECTION ) );
 	this.fragment = fragment || new THREE.RawNode( new THREE.ColorNode( 0xFF0000 ) );
 
+	this.updaters = [];
+
 };
 
 THREE.NodeMaterial.types = {
@@ -66,11 +68,11 @@ THREE.NodeMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
 THREE.NodeMaterial.prototype.constructor = THREE.NodeMaterial;
 THREE.NodeMaterial.prototype.type = "NodeMaterial";
 
-THREE.NodeMaterial.prototype.updateFrame = function ( delta ) {
+THREE.NodeMaterial.prototype.updateFrame = function ( frame ) {
 
 	for ( var i = 0; i < this.updaters.length; ++ i ) {
 
-		this.updaters[ i ].updateFrame( delta );
+		frame.updateFrame( this.updaters[ i ] );
 
 	}
 

examples/js/nodes/utils/TimerNode.js

@@ -2,21 +2,37 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-THREE.TimerNode = function ( value, scale ) {
+THREE.TimerNode = function ( scope, scale ) {
 
-	THREE.FloatNode.call( this, value );
+	THREE.FloatNode.call( this );
 
+	this.scope = scope || THREE.TimerNode.GLOBAL;
 	this.scale = scale !== undefined ? scale : 1;
 
 };
 
+THREE.TimerNode.GLOBAL = 'global';
+THREE.TimerNode.LOCAL = 'local';
+
 THREE.TimerNode.prototype = Object.create( THREE.FloatNode.prototype );
 THREE.TimerNode.prototype.constructor = THREE.TimerNode;
 THREE.TimerNode.prototype.nodeType = "Timer";
 
-THREE.TimerNode.prototype.updateFrame = function ( delta ) {
+THREE.TimerNode.prototype.updateFrame = function ( frame ) {
+
+	switch( this.scope ) {
+
+		case THREE.TimerNode.LOCAL:
+
+			this.number += frame.delta * this.scale;
 
-	this.number += delta * this.scale;
+			break;
+
+		default:
+
+			this.number = frame.time * this.scale;
+
+	}
 
 };
 
@@ -28,6 +44,7 @@ THREE.TimerNode.prototype.toJSON = function ( meta ) {
 
 		data = this.createJSONNode( meta );
 
+		data.scope = this.scope;
 		data.scale = this.scale;
 
 	}

examples/webgl_loader_nodes.html

@@ -52,6 +52,7 @@
 		<script src="js/nodes/AttributeNode.js"></script>
 		<script src="js/nodes/NodeBuilder.js"></script>
 		<script src="js/nodes/NodeLib.js"></script>
+		<script src="js/nodes/NodeFrame.js"></script>
 		<script src="js/nodes/NodeMaterial.js"></script>
 
 		<!-- Accessors -->
@@ -111,6 +112,7 @@
 		var container = document.getElementById( 'container' );
 
 		var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+		var frame = new THREE.NodeFrame();
 		var teapot, mesh, cloud;
 		var controls;
 		var gui;
@@ -272,7 +274,7 @@
 			var delta = clock.getDelta();
 
 			// update material animation and/or gpu calcs (pre-renderer)
-			if ( mesh.material instanceof THREE.NodeMaterial ) mesh.material.updateFrame( delta );
+			if ( mesh.material instanceof THREE.NodeMaterial ) frame.update( delta ).updateFrame( mesh.material );
 
 			renderer.render( scene, camera );
 

examples/webgl_materials_nodes.html

@@ -52,6 +52,7 @@
 		<script src="js/nodes/AttributeNode.js"></script>
 		<script src="js/nodes/NodeBuilder.js"></script>
 		<script src="js/nodes/NodeLib.js"></script>
+		<script src="js/nodes/NodeFrame.js"></script>
 		<script src="js/nodes/NodeMaterial.js"></script>
 
 		<!-- Accessors -->
@@ -112,6 +113,7 @@
 		var container = document.getElementById( 'container' );
 
 		var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+		var frame = new THREE.NodeFrame();
 		var teapot, mesh;
 		var controls;
 		var move = false;
@@ -2372,7 +2374,7 @@
 			//mesh.rotation.z += .01;
 
 			// update material animation and/or gpu calcs (pre-renderer)
-			mesh.material.updateFrame( delta );
+			frame.update( delta ).updateFrame( mesh.material );
 
 			// render to texture for sss/translucent material only
 			if ( rtTexture ) {

examples/webgl_mirror_nodes.html

@@ -50,6 +50,7 @@
 		<script src="js/nodes/FunctionCallNode.js"></script>
 		<script src="js/nodes/NodeBuilder.js"></script>
 		<script src="js/nodes/NodeLib.js"></script>
+		<script src="js/nodes/NodeFrame.js"></script>
 		<script src="js/nodes/NodeMaterial.js"></script>
 
 		<!-- Accessors -->
@@ -126,6 +127,8 @@
 		var sphereGroup, smallSphere;
 		var groundMirrorMaterial;
 
+		var frame = new THREE.NodeFrame();
+
 		function init() {
 
 			// renderer
@@ -322,7 +325,7 @@
 			smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
 			smallSphere.rotation.z = timer * 0.8;
 
-			groundMirrorMaterial.updateFrame( delta );
+			frame.update( delta ).updateFrame( groundMirrorMaterial );
 
 			render();
 

examples/webgl_postprocessing_nodes.html

@@ -51,6 +51,7 @@
 		<script src="js/nodes/FunctionCallNode.js"></script>
 		<script src="js/nodes/NodeBuilder.js"></script>
 		<script src="js/nodes/NodeLib.js"></script>
+		<script src="js/nodes/NodeFrame.js"></script>
 		<script src="js/nodes/NodeMaterial.js"></script>
 
 		<!-- Accessors -->
@@ -94,7 +95,9 @@
 			var camera, scene, renderer, composer;
 			var object, light, nodepass;
 			var gui, guiElements = [];
+
 			var clock = new THREE.Clock();
+			var frame = new THREE.NodeFrame();
 
 			var param = { example: 'color-adjustment' };
 
@@ -588,7 +591,7 @@
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;
 
-				nodepass.node.updateFrame( delta );
+				frame.update( delta ).updateFrame( nodepass.node );
 
 				composer.render();
 

examples/webgl_sprites_nodes.html

@@ -51,6 +51,7 @@
 		<script src="js/nodes/AttributeNode.js"></script>
 		<script src="js/nodes/NodeBuilder.js"></script>
 		<script src="js/nodes/NodeLib.js"></script>
+		<script src="js/nodes/NodeFrame.js"></script>
 		<script src="js/nodes/NodeMaterial.js"></script>
 
 		<!-- Accessors -->
@@ -106,6 +107,7 @@
 		var container = document.getElementById( 'container' );
 
 		var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+		var frame = new THREE.NodeFrame();
 		var plane, sprite1, sprite2, sprite3;
 		var walkingManTexture, walkingManTextureURL;
 		var library = {};
@@ -299,9 +301,10 @@
 			var delta = clock.getDelta();
 
 			// update material animation and/or gpu calcs (pre-renderer)
-			sprite1.material.updateFrame( delta );
-			sprite2.material.updateFrame( delta );
-			sprite3.material.updateFrame( delta );
+			frame.update( delta )
+				.updateFrame( sprite1.material )
+				.updateFrame( sprite2.material )
+				.updateFrame( sprite3.material );
 
 			// rotate sprite
 			sprite3.rotation.z -= Math.PI * .005;