Merge pull request mrdoob#13239 from sunag/90dev-root

NodeFrame

examples/js/loaders/NodeMaterialLoader.js

@@ -270,6 +270,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 				case "PositionNode":
 				case "NormalNode":
 				case "ReflectNode":
+				case "LightNode":
 
 					object.scope = node.scope;
 
@@ -372,6 +373,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 				case "TimerNode":
 
+					object.scope = node.scope;
 					object.scale = node.scale;
 
 					break;
@@ -462,7 +464,6 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 					break;
 
-				case "LightNode":
 				case "RoughnessToBlinnExponentNode":
 					break;
 

examples/js/nodes/NodeFrame.js

@@ -0,0 +1,34 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+THREE.NodeFrame = function ( time ) {
+
+	this.time = time !== undefined ? time : 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/accessors/CameraNode.js

@@ -142,7 +142,7 @@ THREE.CameraNode.prototype.generate = function ( builder, output ) {
 
 };
 
-THREE.CameraNode.prototype.onUpdateFrame = function ( delta ) {
+THREE.CameraNode.prototype.onUpdateFrame = function ( frame ) {
 
 	switch ( this.scope ) {
 

examples/js/nodes/accessors/LightNode.js

@@ -2,12 +2,16 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-THREE.LightNode = function () {
+THREE.LightNode = function ( scope ) {
 
 	THREE.TempNode.call( this, 'v3', { shared: false } );
 
+	this.scope = scope || THREE.LightNode.TOTAL;
+
 };
 
+THREE.LightNode.TOTAL = 'total';
+
 THREE.LightNode.prototype = Object.create( THREE.TempNode.prototype );
 THREE.LightNode.prototype.constructor = THREE.LightNode;
 THREE.LightNode.prototype.nodeType = "Light";
@@ -27,3 +31,19 @@ THREE.LightNode.prototype.generate = function ( builder, output ) {
 	}
 
 };
+
+THREE.LightNode.prototype.toJSON = function ( meta ) {
+
+	var data = this.getJSONNode( meta );
+
+	if ( ! data ) {
+
+		data = this.createJSONNode( meta );
+
+		data.scope = this.scope;
+
+	}
+
+	return data;
+
+};

examples/js/nodes/utils/BlurNode.js

@@ -55,7 +55,7 @@ THREE.BlurNode.prototype = Object.create( THREE.TempNode.prototype );
 THREE.BlurNode.prototype.constructor = THREE.BlurNode;
 THREE.BlurNode.prototype.nodeType = "Blur";
 
-THREE.BlurNode.prototype.updateFrame = function ( delta ) {
+THREE.BlurNode.prototype.updateFrame = function ( frame ) {
 
 	if ( this.size ) {
 

examples/js/nodes/utils/ResolutionNode.js

@@ -14,7 +14,7 @@ THREE.ResolutionNode.prototype = Object.create( THREE.Vector2Node.prototype );
 THREE.ResolutionNode.prototype.constructor = THREE.ResolutionNode;
 THREE.ResolutionNode.prototype.nodeType = "Resolution";
 
-THREE.ResolutionNode.prototype.updateFrame = function ( delta ) {
+THREE.ResolutionNode.prototype.updateFrame = function ( frame ) {
 
 	var size = this.renderer.getSize(),
 		pixelRatio = this.renderer.getPixelRatio();

examples/js/nodes/utils/TimerNode.js

@@ -2,21 +2,44 @@
  * @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.DELTA = 'delta';
+
 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;
+
+			break;
+
+		case THREE.TimerNode.DELTA:
 
-	this.number += delta * this.scale;
+			this.number = frame.delta * this.scale;
+
+			break;
+
+		default:
+
+			this.number = frame.time * this.scale;
+
+	}
 
 };
 
@@ -28,6 +51,7 @@ THREE.TimerNode.prototype.toJSON = function ( meta ) {
 
 		data = this.createJSONNode( meta );
 
+		data.scope = this.scope;
 		data.scale = this.scale;
 
 	}

examples/js/nodes/utils/VelocityNode.js

@@ -75,7 +75,7 @@ THREE.VelocityNode.prototype.setTarget = function ( target ) {
 
 };
 
-THREE.VelocityNode.prototype.updateFrameVelocity = function ( delta ) {
+THREE.VelocityNode.prototype.updateFrameVelocity = function ( frame ) {
 
 	if ( this.target ) {
 
@@ -87,16 +87,16 @@ THREE.VelocityNode.prototype.updateFrameVelocity = function ( delta ) {
 
 };
 
-THREE.VelocityNode.prototype.updateFrame = function ( delta ) {
+THREE.VelocityNode.prototype.updateFrame = function ( frame ) {
 
-	this.updateFrameVelocity( delta );
+	this.updateFrameVelocity( frame );
 
 	switch ( this.params.type ) {
 
 		case "elastic":
 
 			// convert to real scale: 0 at 1 values
-			var deltaFps = delta * ( this.params.fps || 60 );
+			var deltaFps = frame.delta * ( this.params.fps || 60 );
 
 			var spring = Math.pow( this.params.spring, deltaFps ),
 				damping = Math.pow( this.params.damping, deltaFps );

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;