Merge pull request #14427 from sunag/dev-nodematerial-r7

NodeMaterial - r7 (2)

examples/files.js

@@ -209,6 +209,7 @@ var files = {
 		"webgl_panorama_equirectangular",
 		"webgl_performance",
 		"webgl_performance_doublesided",
+		"webgl_performance_nodes",
 		"webgl_performance_static",
 		"webgl_physics_cloth",
 		"webgl_physics_convex_break",
@@ -232,6 +233,7 @@ var files = {
 		"webgl_postprocessing_ssaa",
 		"webgl_postprocessing_ssaa_unbiased",
 		"webgl_postprocessing_nodes",
+		"webgl_postprocessing_nodes_pass",
 		"webgl_postprocessing_outline",
 		"webgl_postprocessing_pixel",
 		"webgl_postprocessing_procedural",

examples/js/nodes/Nodes.js

@@ -2,7 +2,7 @@
 
 // core
 
-export { GLNode } from './core/GLNode.js';
+export { Node } from './core/Node.js';
 export { TempNode } from './core/TempNode.js';
 export { InputNode } from './core/InputNode.js';
 export { ConstNode } from './core/ConstNode.js';
@@ -10,6 +10,7 @@ export { VarNode } from './core/VarNode.js';
 export { StructNode } from './core/StructNode.js';
 export { AttributeNode } from './core/AttributeNode.js';
 export { FunctionNode } from './core/FunctionNode.js';
+export { ExpressionNode } from './core/ExpressionNode.js';
 export { FunctionCallNode } from './core/FunctionCallNode.js';
 export { NodeLib } from './core/NodeLib.js';
 export { NodeUtils } from './core/NodeUtils.js';
@@ -32,6 +33,7 @@ export { CubeTextureNode } from './inputs/CubeTextureNode.js';
 export { ScreenNode } from './inputs/ScreenNode.js';
 export { ReflectorNode } from './inputs/ReflectorNode.js';
 export { PropertyNode } from './inputs/PropertyNode.js';
+export { RTTNode } from './inputs/RTTNode.js';
 
 // accessors
 
@@ -51,10 +53,12 @@ export { Math1Node } from './math/Math1Node.js';
 export { Math2Node } from './math/Math2Node.js';
 export { Math3Node } from './math/Math3Node.js';
 export { OperatorNode } from './math/OperatorNode.js';
+export { CondNode } from './math/CondNode.js';
 
 // procedural
 
 export { NoiseNode } from './procedural/NoiseNode.js';
+export { CheckerNode } from './procedural/CheckerNode.js';
 
 // bsdfs
 
@@ -78,6 +82,7 @@ export { TimerNode } from './utils/TimerNode.js';
 export { VelocityNode } from './utils/VelocityNode.js';
 export { UVTransformNode } from './utils/UVTransformNode.js';
 export { MaxMIPLevelNode } from './utils/MaxMIPLevelNode.js';
+export { ColorSpaceNode } from './utils/ColorSpaceNode.js';
 
 // effects
 
@@ -103,4 +108,5 @@ export { MeshStandardNodeMaterial } from './materials/MeshStandardNodeMaterial.j
 
 // postprocessing
 
+export { NodePostProcessing } from './postprocessing/NodePostProcessing.js';
 //export { NodePass } from './postprocessing/NodePass.js';

examples/js/nodes/THREE.Nodes.js

@@ -1,8 +1,8 @@
-import { 
+import {
 
 	// core
-	
-	GLNode,
+
+	Node,
 	TempNode,
 	InputNode,
 	ConstNode,
@@ -10,15 +10,16 @@ import {
 	StructNode,
 	AttributeNode,
 	FunctionNode,
+	ExpressionNode,
 	FunctionCallNode,
 	NodeLib,
 	NodeUtils,
 	NodeFrame,
 	NodeUniform,
 	NodeBuilder,
-	
+
 	// inputs
-	
+
 	IntNode,
 	FloatNode,
 	Vector2Node,
@@ -32,9 +33,10 @@ import {
 	ScreenNode,
 	ReflectorNode,
 	PropertyNode,
-	
+	RTTNode,
+
 	// accessors
-	
+
 	UVNode,
 	ColorsNode,
 	PositionNode,
@@ -44,33 +46,35 @@ import {
 	ReflectNode,
 	ScreenUVNode,
 	ResolutionNode,
-	
+
 	// math
-	
+
 	Math1Node,
 	Math2Node,
 	Math3Node,
 	OperatorNode,
-	
+	CondNode,
+
 	// procedural
-	
+
 	NoiseNode,
-	
+	CheckerNode,
+
 	// bsdfs
-	
+
 	BlinnShininessExponentNode,
 	BlinnExponentToRoughnessNode,
 	RoughnessToBlinnExponentNode,
-	
+
 	// misc
-	
+
 	TextureCubeUVNode,
 	TextureCubeNode,
 	NormalMapNode,
 	BumpMapNode,
-	
+
 	// utils
-	
+
 	BypassNode,
 	JoinNode,
 	SwitchNode,
@@ -78,34 +82,39 @@ import {
 	VelocityNode,
 	UVTransformNode,
 	MaxMIPLevelNode,
-	
+	ColorSpaceNode,
+
 	// effects
-	
+
 	BlurNode,
 	ColorAdjustmentNode,
 	LuminanceNode,
 
 	// material nodes
-	
+
 	RawNode,
 	SpriteNode,
 	PhongNode,
 	StandardNode,
 	MeshStandardNode,
-	
+
 	// materials
-	
+
 	NodeMaterial,
 	SpriteNodeMaterial,
 	PhongNodeMaterial,
 	StandardNodeMaterial,
-	MeshStandardNodeMaterial
-	
+	MeshStandardNodeMaterial,
+
+	// post-processing
+
+	NodePostProcessing
+
 } from './Nodes.js';
 
 // core
 
-THREE.GLNode = GLNode;
+THREE.Node = Node;
 THREE.TempNode = TempNode;
 THREE.InputNode = InputNode;
 THREE.ConstNode = ConstNode;
@@ -113,6 +122,7 @@ THREE.VarNode = VarNode;
 THREE.StructNode = StructNode;
 THREE.AttributeNode = AttributeNode;
 THREE.FunctionNode = FunctionNode;
+THREE.ExpressionNode = ExpressionNode;
 THREE.FunctionCallNode = FunctionCallNode;
 THREE.NodeLib = NodeLib;
 THREE.NodeUtils = NodeUtils;
@@ -135,6 +145,7 @@ THREE.CubeTextureNode = CubeTextureNode;
 THREE.ScreenNode = ScreenNode;
 THREE.ReflectorNode = ReflectorNode;
 THREE.PropertyNode = PropertyNode;
+THREE.RTTNode = RTTNode;
 
 // accessors
 
@@ -154,10 +165,12 @@ THREE.Math1Node = Math1Node;
 THREE.Math2Node = Math2Node;
 THREE.Math3Node = Math3Node;
 THREE.OperatorNode = OperatorNode;
+THREE.CondNode = CondNode;
 
 // procedural
 
 THREE.NoiseNode = NoiseNode;
+THREE.CheckerNode = CheckerNode;
 
 // bsdfs
 
@@ -181,6 +194,7 @@ THREE.TimerNode = TimerNode;
 THREE.VelocityNode = VelocityNode;
 THREE.UVTransformNode = UVTransformNode;
 THREE.MaxMIPLevelNode = MaxMIPLevelNode;
+THREE.ColorSpaceNode = ColorSpaceNode;
 
 // effects
 
@@ -203,3 +217,7 @@ THREE.SpriteNodeMaterial = SpriteNodeMaterial;
 THREE.PhongNodeMaterial = PhongNodeMaterial;
 THREE.StandardNodeMaterial = StandardNodeMaterial;
 THREE.MeshStandardNodeMaterial = MeshStandardNodeMaterial;
+
+// post-processing
+
+THREE.NodePostProcessing = NodePostProcessing;

examples/js/nodes/accessors/CameraNode.js

@@ -6,7 +6,7 @@ import { TempNode } from '../core/TempNode.js';
 import { FunctionNode } from '../core/FunctionNode.js';
 import { FloatNode } from '../inputs/FloatNode.js';
 import { PositionNode } from '../accessors/PositionNode.js';
- 
+
 function CameraNode( scope, camera ) {
 
 	TempNode.call( this, 'v3' );
@@ -14,33 +14,33 @@ function CameraNode( scope, camera ) {
 	this.setScope( scope || CameraNode.POSITION );
 	this.setCamera( camera );
 
-};
+}
+
+CameraNode.Nodes = ( function () {
 
-CameraNode.Nodes = (function() {
-	
 	var depthColor = new FunctionNode( [
 		"float depthColor( float mNear, float mFar ) {",
-		
+
 		"	#ifdef USE_LOGDEPTHBUF_EXT",
-		
+
 		"		float depth = gl_FragDepthEXT / gl_FragCoord.w;",
-		
+
 		"	#else",
-		
+
 		"		float depth = gl_FragCoord.z / gl_FragCoord.w;",
-		
+
 		"	#endif",
-		
+
 		"	return 1.0 - smoothstep( mNear, mFar, depth );",
-		
+
 		"}"
 	].join( "\n" ) );
-	
+
 	return {
 		depthColor: depthColor
 	};
-	
-})();
+
+} )();
 
 CameraNode.POSITION = 'position';
 CameraNode.DEPTH = 'depth';
@@ -92,7 +92,7 @@ CameraNode.prototype.getType = function ( builder ) {
 	switch ( this.scope ) {
 
 		case CameraNode.DEPTH:
-		
+
 			return 'f';
 
 	}
@@ -107,7 +107,7 @@ CameraNode.prototype.isUnique = function ( builder ) {
 
 		case CameraNode.DEPTH:
 		case CameraNode.TO_VERTEX:
-		
+
 			return true;
 
 	}
@@ -121,7 +121,7 @@ CameraNode.prototype.isShared = function ( builder ) {
 	switch ( this.scope ) {
 
 		case CameraNode.POSITION:
-		
+
 			return false;
 
 	}
@@ -180,15 +180,15 @@ CameraNode.prototype.onUpdateFrame = function ( frame ) {
 };
 
 CameraNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.setScope( source.scope );
 
 	if ( source.camera ) {
-		
+
 		this.setCamera( source.camera );
-		
+
 	}
 
 	switch ( source.scope ) {
@@ -201,7 +201,7 @@ CameraNode.prototype.copy = function ( source ) {
 			break;
 
 	}
-	
+
 };
 
 CameraNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/accessors/ColorsNode.js

@@ -1,20 +1,19 @@
 /**
  * @author sunag / http://www.sunag.com.br/
  */
- 
+
 import { TempNode } from '../core/TempNode.js';
-import { NodeLib } from '../core/NodeLib.js';
- 
+
 var vertexDict = [ 'color', 'color2' ],
 	fragmentDict = [ 'vColor', 'vColor2' ];
- 
+
 function ColorsNode( index ) {
 
 	TempNode.call( this, 'v4', { shared: false } );
 
 	this.index = index || 0;
 
-};
+}
 
 ColorsNode.prototype = Object.create( TempNode.prototype );
 ColorsNode.prototype.constructor = ColorsNode;
@@ -30,11 +29,11 @@ ColorsNode.prototype.generate = function ( builder, output ) {
 };
 
 ColorsNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.index = source.index;
-	
+
 };
 
 ColorsNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/accessors/LightNode.js

@@ -10,7 +10,7 @@ function LightNode( scope ) {
 
 	this.scope = scope || LightNode.TOTAL;
 
-};
+}
 
 LightNode.TOTAL = 'total';
 
@@ -22,24 +22,24 @@ LightNode.prototype.generate = function ( builder, output ) {
 
 	if ( builder.isCache( 'light' ) ) {
 
-		return builder.format( 'reflectedLight.directDiffuse', this.getType( builder ), output );
+		return builder.format( 'reflectedLight.directDiffuse', this.type, output );
 
 	} else {
 
 		console.warn( "THREE.LightNode is only compatible in \"light\" channel." );
 
-		return builder.format( 'vec3( 0.0 )', this.getType( builder ), output );
+		return builder.format( 'vec3( 0.0 )', this.type, output );
 
 	}
 
 };
 
 LightNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.scope = source.scope;
-	
+
 };
 
 LightNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/accessors/NormalNode.js

@@ -4,14 +4,14 @@
 
 import { TempNode } from '../core/TempNode.js';
 import { NodeLib } from '../core/NodeLib.js';
- 
+
 function NormalNode( scope ) {
 
 	TempNode.call( this, 'v3' );
 
 	this.scope = scope || NormalNode.LOCAL;
 
-};
+}
 
 NormalNode.LOCAL = 'local';
 NormalNode.WORLD = 'world';
@@ -45,7 +45,7 @@ NormalNode.prototype.generate = function ( builder, output ) {
 
 			builder.requires.normal = true;
 
-			result = builder.isShader( 'vertex' ) ? 'normal' : 'vObjectNormal';
+			result = 'normal';
 
 			break;
 
@@ -54,7 +54,7 @@ NormalNode.prototype.generate = function ( builder, output ) {
 			builder.requires.worldNormal = true;
 
 			result = builder.isShader( 'vertex' ) ? '( modelMatrix * vec4( objectNormal, 0.0 ) ).xyz' : 'vWNormal';
-			
+
 			break;
 
 		case NormalNode.VIEW:
@@ -70,11 +70,11 @@ NormalNode.prototype.generate = function ( builder, output ) {
 };
 
 NormalNode.prototype.copy = function ( source ) {
-	
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.scope = source.scope;
-	
+
 };
 
 NormalNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/accessors/PositionNode.js

@@ -4,14 +4,14 @@
 
 import { TempNode } from '../core/TempNode.js';
 import { NodeLib } from '../core/NodeLib.js';
- 
+
 function PositionNode( scope ) {
 
 	TempNode.call( this, 'v3' );
 
 	this.scope = scope || PositionNode.LOCAL;
 
-};
+}
 
 PositionNode.LOCAL = 'local';
 PositionNode.WORLD = 'world';
@@ -22,12 +22,12 @@ PositionNode.prototype = Object.create( TempNode.prototype );
 PositionNode.prototype.constructor = PositionNode;
 PositionNode.prototype.nodeType = "Position";
 
-PositionNode.prototype.getType = function ( builder ) {
+PositionNode.prototype.getType = function ( ) {
 
 	switch ( this.scope ) {
 
 		case PositionNode.PROJECTION:
-		
+
 			return 'v4';
 
 	}
@@ -42,7 +42,7 @@ PositionNode.prototype.isShared = function ( builder ) {
 
 		case PositionNode.LOCAL:
 		case PositionNode.WORLD:
-		
+
 			return false;
 
 	}
@@ -92,11 +92,11 @@ PositionNode.prototype.generate = function ( builder, output ) {
 };
 
 PositionNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.scope = source.scope;
-	
+
 };
 
 PositionNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/accessors/ReflectNode.js

@@ -10,7 +10,7 @@ function ReflectNode( scope ) {
 
 	this.scope = scope || ReflectNode.CUBE;
 
-};
+}
 
 ReflectNode.CUBE = 'cube';
 ReflectNode.SPHERE = 'sphere';
@@ -37,7 +37,7 @@ ReflectNode.prototype.getType = function ( builder ) {
 ReflectNode.prototype.generate = function ( builder, output ) {
 
 	if ( builder.isShader( 'fragment' ) ) {
-		
+
 		var result;
 
 		switch ( this.scope ) {
@@ -72,14 +72,14 @@ ReflectNode.prototype.generate = function ( builder, output ) {
 
 		}
 
-		return builder.format( result, this.getType( this.type ), output );
-	
+		return builder.format( result, this.getType( builder ), output );
+
 	} else {
-		
+
 		console.warn( "THREE.ReflectNode is not compatible with " + builder.shader + " shader." );
 
 		return builder.format( 'vec3( 0.0 )', this.type, output );
-		
+
 	}
 
 };

examples/js/nodes/accessors/ResolutionNode.js

@@ -3,14 +3,12 @@
  */
 
 import { Vector2Node } from '../inputs/Vector2Node.js';
- 
-function ResolutionNode( renderer ) {
 
-	Vector2Node.call( this );
+function ResolutionNode() {
 
-	this.renderer = renderer;
+	Vector2Node.call( this );
 
-};
+}
 
 ResolutionNode.prototype = Object.create( Vector2Node.prototype );
 ResolutionNode.prototype.constructor = ResolutionNode;
@@ -18,20 +16,28 @@ ResolutionNode.prototype.nodeType = "Resolution";
 
 ResolutionNode.prototype.updateFrame = function ( frame ) {
 
-	var size = this.renderer.getSize(),
-		pixelRatio = this.renderer.getPixelRatio();
+	if ( frame.renderer ) {
+
+		var size = frame.renderer.getSize(),
+			pixelRatio = frame.renderer.getPixelRatio();
+
+		this.x = size.width * pixelRatio;
+		this.y = size.height * pixelRatio;
+
+	} else {
 
-	this.x = size.width * pixelRatio;
-	this.y = size.height * pixelRatio;
+		console.warn( "ResolutionNode need a renderer in NodeFrame" );
+
+	}
 
 };
 
 ResolutionNode.prototype.copy = function ( source ) {
-			
+
 	Vector2Node.prototype.copy.call( this, source );
-	
+
 	this.renderer = source.renderer;
-	
+
 };
 
 ResolutionNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/accessors/ScreenUVNode.js

@@ -3,14 +3,15 @@
  */
 
 import { TempNode } from '../core/TempNode.js';
- 
+import { ResolutionNode } from './ResolutionNode.js';
+
 function ScreenUVNode( resolution ) {
 
 	TempNode.call( this, 'v2' );
 
-	this.resolution = resolution;
+	this.resolution = resolution || new ResolutionNode();
 
-};
+}
 
 ScreenUVNode.prototype = Object.create( TempNode.prototype );
 ScreenUVNode.prototype.constructor = ScreenUVNode;
@@ -37,11 +38,11 @@ ScreenUVNode.prototype.generate = function ( builder, output ) {
 };
 
 ScreenUVNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.resolution = source.resolution;
-	
+
 };
 
 ScreenUVNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/accessors/UVNode.js

@@ -4,17 +4,17 @@
 
 import { TempNode } from '../core/TempNode.js';
 import { NodeLib } from '../core/NodeLib.js';
- 
+
 var vertexDict = [ 'uv', 'uv2' ],
 	fragmentDict = [ 'vUv', 'vUv2' ];
- 
+
 function UVNode( index ) {
 
 	TempNode.call( this, 'v2', { shared: false } );
 
 	this.index = index || 0;
 
-};
+}
 
 UVNode.prototype = Object.create( TempNode.prototype );
 UVNode.prototype.constructor = UVNode;
@@ -31,11 +31,11 @@ UVNode.prototype.generate = function ( builder, output ) {
 };
 
 UVNode.prototype.copy = function ( source ) {
-		
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.index = source.index;
-	
+
 };
 
 UVNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/bsdfs/BlinnExponentToRoughnessNode.js

@@ -11,7 +11,7 @@ function BlinnExponentToRoughnessNode( blinnExponent ) {
 
 	this.blinnExponent = blinnExponent || new BlinnShininessExponentNode();
 
-};
+}
 
 BlinnExponentToRoughnessNode.prototype = Object.create( TempNode.prototype );
 BlinnExponentToRoughnessNode.prototype.constructor = BlinnExponentToRoughnessNode;
@@ -24,11 +24,11 @@ BlinnExponentToRoughnessNode.prototype.generate = function ( builder, output ) {
 };
 
 BlinnExponentToRoughnessNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.blinnExponent = source.blinnExponent;
-	
+
 };
 
 BlinnExponentToRoughnessNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/bsdfs/BlinnShininessExponentNode.js

@@ -8,7 +8,7 @@ function BlinnShininessExponentNode() {
 
 	TempNode.call( this, 'f' );
 
-};
+}
 
 BlinnShininessExponentNode.prototype = Object.create( TempNode.prototype );
 BlinnShininessExponentNode.prototype.constructor = BlinnShininessExponentNode;

examples/js/nodes/bsdfs/RoughnessToBlinnExponentNode.js

@@ -6,7 +6,7 @@ import { TempNode } from '../core/TempNode.js';
 import { FunctionNode } from '../core/FunctionNode.js';
 import { MaxMIPLevelNode } from '../utils/MaxMIPLevelNode.js';
 import { BlinnShininessExponentNode } from './BlinnShininessExponentNode.js';
- 
+
 function RoughnessToBlinnExponentNode( texture ) {
 
 	TempNode.call( this, 'f' );
@@ -16,9 +16,9 @@ function RoughnessToBlinnExponentNode( texture ) {
 	this.maxMIPLevel = new MaxMIPLevelNode( texture );
 	this.blinnShininessExponent = new BlinnShininessExponentNode();
 
-};
+}
 
-RoughnessToBlinnExponentNode.Nodes = (function() {
+RoughnessToBlinnExponentNode.Nodes = ( function () {
 
 	var getSpecularMIPLevel = new FunctionNode( [
 		// taken from here: http://casual-effects.blogspot.ca/2011/08/plausible-environment-lighting-in-two.html
@@ -27,18 +27,19 @@ RoughnessToBlinnExponentNode.Nodes = (function() {
 		//	float envMapWidth = pow( 2.0, maxMIPLevelScalar );
 		//	float desiredMIPLevel = log2( envMapWidth * sqrt( 3.0 ) ) - 0.5 * log2( pow2( blinnShininessExponent ) + 1.0 );
 
-		"	float desiredMIPLevel = maxMIPLevelScalar - 0.79248 - 0.5 * log2( pow2( blinnShininessExponent ) + 1.0 );",
+		"	float desiredMIPLevel = maxMIPLevelScalar + 0.79248 - 0.5 * log2( pow2( blinnShininessExponent ) + 1.0 );",
 
 		// clamp to allowable LOD ranges.
 		"	return clamp( desiredMIPLevel, 0.0, maxMIPLevelScalar );",
+
 		"}"
 	].join( "\n" ) );
-	
+
 	return {
 		getSpecularMIPLevel: getSpecularMIPLevel
 	};
-	
-})();
+
+} )();
 
 RoughnessToBlinnExponentNode.prototype = Object.create( TempNode.prototype );
 RoughnessToBlinnExponentNode.prototype.constructor = RoughnessToBlinnExponentNode;
@@ -49,7 +50,7 @@ RoughnessToBlinnExponentNode.prototype.generate = function ( builder, output ) {
 	if ( builder.isShader( 'fragment' ) ) {
 
 		this.maxMIPLevel.texture = this.texture;
-	
+
 		var getSpecularMIPLevel = builder.include( RoughnessToBlinnExponentNode.Nodes.getSpecularMIPLevel );
 
 		return builder.format( getSpecularMIPLevel + '( ' + this.blinnShininessExponent.build( builder, 'f' ) + ', ' + this.maxMIPLevel.build( builder, 'f' ) + ' )', this.type, output );
@@ -65,11 +66,11 @@ RoughnessToBlinnExponentNode.prototype.generate = function ( builder, output ) {
 };
 
 RoughnessToBlinnExponentNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.texture = source.texture;
-	
+
 };
 
 RoughnessToBlinnExponentNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/core/AttributeNode.js

@@ -2,17 +2,17 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from './GLNode.js';
+import { Node } from './Node.js';
 
 function AttributeNode( name, type ) {
 
-	GLNode.call( this, type );
+	Node.call( this, type );
 
 	this.name = name;
 
-};
+}
 
-AttributeNode.prototype = Object.create( GLNode.prototype );
+AttributeNode.prototype = Object.create( Node.prototype );
 AttributeNode.prototype.constructor = AttributeNode;
 AttributeNode.prototype.nodeType = "Attribute";
 
@@ -38,17 +38,17 @@ AttributeNode.prototype.generate = function ( builder, output ) {
 		name = builder.isShader( 'vertex' ) ? this.name : attribute.varying.name;
 
 	console.log( attribute );
-		
+
 	return builder.format( name, this.getType( builder ), output );
 
 };
 
 AttributeNode.prototype.copy = function ( source ) {
-			
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	this.type = source.type;
-	
+
 };
 
 AttributeNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/core/ConstNode.js

@@ -4,13 +4,15 @@
 
 import { TempNode } from './TempNode.js';
 
+var declarationRegexp = /^([a-z_0-9]+)\s([a-z_0-9]+)\s?\=?\s?(.*?)(\;|$)/i;
+
 function ConstNode( src, useDefine ) {
 
 	TempNode.call( this );
 
 	this.eval( src || ConstNode.PI, useDefine );
 
-};
+}
 
 ConstNode.PI = 'PI';
 ConstNode.PI2 = 'PI2';
@@ -19,8 +21,6 @@ ConstNode.RECIPROCAL_PI2 = 'RECIPROCAL_PI2';
 ConstNode.LOG2 = 'LOG2';
 ConstNode.EPSILON = 'EPSILON';
 
-ConstNode.rDeclaration = /^([a-z_0-9]+)\s([a-z_0-9]+)\s?\=?\s?(.*?)(\;|$)/i;
-
 ConstNode.prototype = Object.create( TempNode.prototype );
 ConstNode.prototype.constructor = ConstNode;
 ConstNode.prototype.nodeType = "Const";
@@ -37,9 +37,9 @@ ConstNode.prototype.eval = function ( src, useDefine ) {
 
 	var name, type, value = "";
 
-	var match = this.src.match( ConstNode.rDeclaration );
+	var match = this.src.match( declarationRegexp );
 
-	this.useDefine = useDefine || this.src.charAt(0) === '#';
+	this.useDefine = useDefine || this.src.charAt( 0 ) === '#';
 
 	if ( match && match.length > 1 ) {
 
@@ -74,10 +74,10 @@ ConstNode.prototype.build = function ( builder, output ) {
 
 			return 'const ' + this.type + ' ' + this.name + ' = ' + this.value + ';';
 
-		} else if (this.useDefine) {
-		
+		} else if ( this.useDefine ) {
+
 			return this.src;
-			
+
 		}
 
 	} else {
@@ -97,11 +97,11 @@ ConstNode.prototype.generate = function ( builder, output ) {
 };
 
 ConstNode.prototype.copy = function ( source ) {
-	
+
 	TempNode.prototype.copy.call( this, source );
-	
-	this.eval( source.src, source.useDefine );	
-	
+
+	this.eval( source.src, source.useDefine );
+
 };
 
 ConstNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/core/ExpressionNode.js

@@ -0,0 +1,17 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+import { FunctionNode } from './FunctionNode.js';
+
+function ExpressionNode( src, type, keywords, extensions, includes ) {
+
+	FunctionNode.call( this, src, includes, extensions, keywords, type );
+
+}
+
+ExpressionNode.prototype = Object.create( FunctionNode.prototype );
+ExpressionNode.prototype.constructor = ExpressionNode;
+ExpressionNode.prototype.nodeType = "Expression";
+
+export { ExpressionNode };

examples/js/nodes/core/FunctionCallNode.js

@@ -3,14 +3,14 @@
  */
 
 import { TempNode } from './TempNode.js';
- 
+
 function FunctionCallNode( func, inputs ) {
 
 	TempNode.call( this );
 
 	this.setFunction( func, inputs );
 
-};
+}
 
 FunctionCallNode.prototype = Object.create( TempNode.prototype );
 FunctionCallNode.prototype.constructor = FunctionCallNode;
@@ -59,9 +59,9 @@ FunctionCallNode.prototype.generate = function ( builder, output ) {
 };
 
 FunctionCallNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	for ( var prop in source.inputs ) {
 
 		this.inputs[ prop ] = source.inputs[ prop ];
@@ -69,7 +69,7 @@ FunctionCallNode.prototype.copy = function ( source ) {
 	}
 
 	this.value = source.value;
-	
+
 };
 
 FunctionCallNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/core/FunctionNode.js

@@ -6,32 +6,25 @@
 import { TempNode } from './TempNode.js';
 import { NodeLib } from './NodeLib.js';
 
-function FunctionNode( src, includesOrType, extensionsOrKeywords, keywordsOrExtensions, includes ) {
+var declarationRegexp = /^([a-z_0-9]+)\s([a-z_0-9]+)\s*\((.*?)\)/i,
+	propertiesRegexp = /[a-z_0-9]+/ig;
 
-	this.isMethod = typeof includesOrType !== "string";
-	this.useKeywords = true;
+function FunctionNode( src, includes, extensions, keywords, type ) {
 
-	TempNode.call( this, this.isMethod ? null : includesOrType );
+	this.isMethod = type === undefined;
 
-	if ( this.isMethod ) {
-		
-		this.eval( src, includesOrType, extensionsOrKeywords, keywordsOrExtensions );
-		
-	} else {
-		
-		this.eval( src, includes, keywordsOrExtensions, extensionsOrKeywords );
-
-	}
+	TempNode.call( this, type );
 
-};
+	this.eval( src, includes, extensions, keywords );
 
-FunctionNode.rDeclaration = /^([a-z_0-9]+)\s([a-z_0-9]+)\s*\((.*?)\)/i;
-FunctionNode.rProperties = /[a-z_0-9]+/ig;
+}
 
 FunctionNode.prototype = Object.create( TempNode.prototype );
 FunctionNode.prototype.constructor = FunctionNode;
 FunctionNode.prototype.nodeType = "Function";
 
+FunctionNode.prototype.useKeywords = true;
+
 FunctionNode.prototype.isShared = function ( builder, output ) {
 
 	return ! this.isMethod;
@@ -50,9 +43,12 @@ FunctionNode.prototype.getInputByName = function ( name ) {
 
 	while ( i -- ) {
 
-		if ( this.inputs[ i ].name === name )
+		if ( this.inputs[ i ].name === name ) {
+
 			return this.inputs[ i ];
 
+		}
+
 	}
 
 };
@@ -63,9 +59,12 @@ FunctionNode.prototype.getIncludeByName = function ( name ) {
 
 	while ( i -- ) {
 
-		if ( this.includes[ i ].name === name )
+		if ( this.includes[ i ].name === name ) {
+
 			return this.includes[ i ];
 
+		}
+
 	}
 
 };
@@ -86,9 +85,9 @@ FunctionNode.prototype.generate = function ( builder, output ) {
 
 	}
 
-	while ( match = FunctionNode.rProperties.exec( this.src ) ) {
+	while ( match = propertiesRegexp.exec( this.src ) ) {
 
-		var prop = match[ 0 ], 
+		var prop = match[ 0 ],
 			isGlobal = this.isMethod ? ! this.getInputByName( prop ) : true,
 			reference = prop;
 
@@ -156,7 +155,7 @@ FunctionNode.prototype.eval = function ( src, includes, extensions, keywords ) {
 
 	if ( this.isMethod ) {
 
-		var match = this.src.match( FunctionNode.rDeclaration );
+		var match = this.src.match( declarationRegexp );
 
 		this.inputs = [];
 
@@ -165,7 +164,7 @@ FunctionNode.prototype.eval = function ( src, includes, extensions, keywords ) {
 			this.type = match[ 1 ];
 			this.name = match[ 2 ];
 
-			var inputs = match[ 3 ].match( FunctionNode.rProperties );
+			var inputs = match[ 3 ].match( propertiesRegexp );
 
 			if ( inputs ) {
 
@@ -211,16 +210,16 @@ FunctionNode.prototype.eval = function ( src, includes, extensions, keywords ) {
 };
 
 FunctionNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.isMethod = source.isMethod;
 	this.useKeywords = source.useKeywords;
-	
+
 	this.eval( source.src, source.includes, source.extensions, source.keywords );
 
 	if ( source.type !== undefined ) this.type = source.type;
-	
+
 };
 
 FunctionNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/core/InputNode.js

@@ -13,7 +13,7 @@ function InputNode( type, params ) {
 
 	this.readonly = false;
 
-};
+}
 
 InputNode.prototype = Object.create( TempNode.prototype );
 InputNode.prototype.constructor = InputNode;
@@ -25,17 +25,17 @@ InputNode.prototype.isReadonly = function ( builder ) {
 };
 
 InputNode.prototype.copy = function ( source ) {
-	
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	if ( source.readonly !== undefined ) this.readonly = source.readonly;
-	
+
 };
 
 InputNode.prototype.createJSONNode = function ( meta ) {
 
 	var data = TempNode.prototype.createJSONNode.call( this, meta );
-	
+
 	if ( this.readonly === true ) data.readonly = this.readonly;
 
 	return data;

examples/js/nodes/core/GLNode.js → examples/js/nodes/core/Node.js

@@ -2,7 +2,7 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-function GLNode( type ) {
+function Node( type ) {
 
 	this.uuid = THREE.Math.generateUUID();
 
@@ -12,31 +12,31 @@ function GLNode( type ) {
 
 	this.userData = {};
 
-};
+}
+
+Node.prototype = {
 
-GLNode.prototype = {
+	constructor: Node,
 
-	constructor: GLNode,
-	
 	isNode: true,
-	
+
 	parse: function ( builder, settings ) {
 
 		settings = settings || {};
 
 		builder.parsing = true;
 
-		this.build( builder.addCache( settings.cache, settings.requires ).addSlot( settings.slot ), 'v4' );
+		this.build( builder.addFlow( settings.slot, settings.cache, settings.context ), 'v4' );
 
-		builder.clearVertexNodeCode()
+		builder.clearVertexNodeCode();
 		builder.clearFragmentNodeCode();
 
-		builder.removeCache().removeSlot();
+		builder.removeFlow();
 
 		builder.parsing = false;
 
 	},
-	
+
 	parseAndBuildCode: function ( builder, output, settings ) {
 
 		settings = settings || {};
@@ -44,21 +44,21 @@ GLNode.prototype = {
 		this.parse( builder, settings );
 
 		return this.buildCode( builder, output, settings );
-	
+
 	},
-	
+
 	buildCode: function ( builder, output, settings ) {
 
 		settings = settings || {};
 
-		var data = { result: this.build( builder.addCache( settings.cache, settings.context ).addSlot( settings.slot ), output ) };
+		var data = { result: this.build( builder.addFlow( settings.slot, settings.cache, settings.context ), output ) };
 
 		data.code = builder.clearNodeCode();
 
-		builder.removeCache().removeSlot();
+		builder.removeFlow();
 
 		return data;
-	
+
 	},
 
 	build: function ( builder, output, uuid ) {
@@ -67,7 +67,11 @@ GLNode.prototype = {
 
 		var data = builder.getNodeData( uuid || this );
 
-		if ( builder.parsing ) this.appendDepsNode( builder, data, output );
+		if ( builder.parsing ) {
+
+			this.appendDepsNode( builder, data, output );
+
+		}
 
 		if ( builder.nodes.indexOf( this ) === - 1 ) {
 
@@ -82,9 +86,9 @@ GLNode.prototype = {
 		}
 
 		return this.generate( builder, output, uuid );
-	
+
 	},
-	
+
 	appendDepsNode: function ( builder, data, output ) {
 
 		data.deps = ( data.deps || 0 ) + 1;
@@ -97,29 +101,29 @@ GLNode.prototype = {
 			data.output = output;
 
 		}
-	
+
 	},
-	
-	setName: function( name ) {
-		
+
+	setName: function ( name ) {
+
 		this.name = name;
-		
+
 		return this;
-		
+
 	},
-	
-	getName: function( builder ) {
-		
+
+	getName: function ( builder ) {
+
 		return this.name;
-		
+
 	},
-	
+
 	getType: function ( builder, output ) {
 
 		return output === 'sampler2D' || output === 'samplerCube' ? output : this.type;
-	
+
 	},
-	
+
 	getJSONNode: function ( meta ) {
 
 		var isRootObject = ( meta === undefined || typeof meta === 'string' );
@@ -129,17 +133,17 @@ GLNode.prototype = {
 			return meta.nodes[ this.uuid ];
 
 		}
-	
+
 	},
-	
+
 	copy: function ( source ) {
 
 		if ( source.name !== undefined ) this.name = source.name;
-	
+
 		if ( source.userData !== undefined ) this.userData = JSON.parse( JSON.stringify( source.userData ) );
-	
+
 	},
-	
+
 	createJSONNode: function ( meta ) {
 
 		var isRootObject = ( meta === undefined || typeof meta === 'string' );
@@ -162,15 +166,15 @@ GLNode.prototype = {
 		}
 
 		return data;
-	
+
 	},
-	
+
 	toJSON: function ( meta ) {
 
 		return this.getJSONNode( meta ) || this.createJSONNode( meta );
-	
+
 	}
-	
+
 };
 
-export { GLNode };
+export { Node };

examples/js/nodes/core/NodeBuilder.js

@@ -37,16 +37,17 @@ var elements = NodeUtils.elements,
 		m3: 'mat3',
 		m4: 'mat4'
 	};
- 
+
 function NodeBuilder() {
 
-	this.caches = [];
 	this.slots = [];
+	this.caches = [];
+	this.contexts = [];
 
 	this.keywords = {};
-	
+
 	this.nodeData = {};
-	
+
 	this.requires = {
 		uv: [],
 		color: [],
@@ -59,11 +60,11 @@ function NodeBuilder() {
 		functions: [],
 		structs: []
 	};
-	
+
 	this.attributes = {};
-	
+
 	this.prefixCode = [
-		"#ifdef GL_EXT_shader_texture_lod",
+		"#ifdef TEXTURE_LOD_EXT",
 
 		"	#define texCube(a, b) textureCube(a, b)",
 		"	#define texCubeBias(a, b, c) textureCubeLodEXT(a, b, c)",
@@ -81,35 +82,36 @@ function NodeBuilder() {
 
 		"#endif",
 
-		"#include <packing>"
+		"#include <packing>",
+		"#include <common>"
 
 	].join( "\n" );
-	
+
 	this.parsCode = {
 		vertex: '',
 		fragment: ''
 	};
-	
+
 	this.code = {
 		vertex: '',
 		fragment: ''
 	};
-	
+
 	this.nodeCode = {
 		vertex: '',
 		fragment: ''
 	};
-	
+
 	this.resultCode = {
 		vertex: '',
 		fragment: ''
 	};
-	
+
 	this.finalCode = {
 		vertex: '',
 		fragment: ''
 	};
-	
+
 	this.inputs = {
 		uniforms: {
 			list: [],
@@ -122,45 +124,43 @@ function NodeBuilder() {
 			fragment: []
 		}
 	};
-	
+
 	// send to material
-	
+
 	this.defines = {};
-	
+
 	this.uniforms = {};
-	
+
 	this.extensions = {};
-	
+
 	this.updaters = [];
-	
+
 	this.nodes = [];
-	
+
 	// --
-	
+
 	this.parsing = false;
 	this.optimize = true;
 
-	this.update();
-
-};
+}
 
 NodeBuilder.prototype = {
 
 	constructor: NodeBuilder,
 
-	build: function( vertex, fragment ) {
-		
+	build: function ( vertex, fragment ) {
+
 		this.buildShader( 'vertex', vertex );
 		this.buildShader( 'fragment', fragment );
-		
+
 		if ( this.requires.uv[ 0 ] ) {
 
 			this.addVaryCode( 'varying vec2 vUv;' );
-		
+
 			this.addVertexFinalCode( 'vUv = uv;' );
 
 		}
-		
+
 		if ( this.requires.uv[ 1 ] ) {
 
 			this.addVaryCode( 'varying vec2 vUv2;' );
@@ -169,7 +169,7 @@ NodeBuilder.prototype = {
 			this.addVertexFinalCode( 'vUv2 = uv2;' );
 
 		}
-		
+
 		if ( this.requires.color[ 0 ] ) {
 
 			this.addVaryCode( 'varying vec4 vColor;' );
@@ -178,7 +178,7 @@ NodeBuilder.prototype = {
 			this.addVertexFinalCode( 'vColor = color;' );
 
 		}
-		
+
 		if ( this.requires.color[ 1 ] ) {
 
 			this.addVaryCode( 'varying vec4 vColor2;' );
@@ -187,7 +187,7 @@ NodeBuilder.prototype = {
 			this.addVertexFinalCode( 'vColor2 = color2;' );
 
 		}
-		
+
 		if ( this.requires.position ) {
 
 			this.addVaryCode( 'varying vec3 vPosition;' );
@@ -195,15 +195,15 @@ NodeBuilder.prototype = {
 			this.addVertexFinalCode( 'vPosition = transformed;' );
 
 		}
-		
+
 		if ( this.requires.worldPosition ) {
 
 			this.addVaryCode( 'varying vec3 vWPosition;' );
-			
+
 			this.addVertexFinalCode( 'vWPosition = ( modelMatrix * vec4( transformed, 1.0 ) ).xyz;' );
 
 		}
-		
+
 		if ( this.requires.normal ) {
 
 			this.addVaryCode( 'varying vec3 vObjectNormal;' );
@@ -211,7 +211,7 @@ NodeBuilder.prototype = {
 			this.addVertexFinalCode( 'vObjectNormal = normal;' );
 
 		}
-		
+
 		if ( this.requires.worldNormal ) {
 
 			this.addVaryCode( 'varying vec3 vWNormal;' );
@@ -219,67 +219,98 @@ NodeBuilder.prototype = {
 			this.addVertexFinalCode( 'vWNormal = ( modelMatrix * vec4( objectNormal, 0.0 ) ).xyz;' );
 
 		}
-		
+
 		return this;
-		
+
 	},
-	
-	buildShader: function( shader, node ) {
-		
-		this.resultCode[shader] = node.build( this.setShader( shader ), 'v4' );
-		
+
+	buildShader: function ( shader, node ) {
+
+		this.resultCode[ shader ] = node.build( this.setShader( shader ), 'v4' );
+
 	},
-	
-	setMaterial: function( material, renderer ) {
-		
+
+	setMaterial: function ( material, renderer ) {
+
 		this.material = material;
 		this.renderer = renderer;
-		
+
 		this.requires.lights = material.lights;
 		this.requires.fog = material.fog;
-		
+
+		this.mergeDefines( material.defines );
+
 		return this;
-		
+
 	},
-	
-	addCache: function ( name, context ) {
 
-		this.caches.push( {
-			name: name || '',
-			context: context || {}
-		} );
+	addFlow: function ( slot, cache, context ) {
 
-		return this.update();
+		return this.addSlot( slot ).addCache( cache ).addContext( context );
+
+	},
+
+	removeFlow: function () {
+
+		return this.removeSlot().removeCache().removeContext();
+
+	},
+
+	addCache: function ( name ) {
+
+		this.cache = name || '';
+		this.caches.push( this.cache );
+
+		return this;
 
 	},
 
 	removeCache: function () {
 
 		this.caches.pop();
+		this.cache = this.caches[ this.caches.length - 1 ] || '';
+
+		return this;
+
+	},
+
+	addContext: function ( context ) {
+
+		this.context = Object.assign( {}, this.context, context );
+		this.contexts.push( this.context );
+
+		return this;
+
+	},
 
-		return this.update();
+	removeContext: function () {
+
+		this.contexts.pop();
+		this.context = this.contexts[ this.contexts.length - 1 ] || {};
+
+		return this;
 
 	},
 
 	addSlot: function ( name ) {
 
-		this.slots.push( {
-			name: name || ''
-		} );
+		this.slot = name || '';
+		this.slots.push( this.slot );
 
-		return this.update();
+		return this;
 
 	},
 
 	removeSlot: function () {
 
 		this.slots.pop();
+		this.slot = this.slots[ this.slots.length - 1 ] || '';
 
-		return this.update();
+		return this;
 
 	},
 
-	
+
 	addVertexCode: function ( code ) {
 
 		this.addCode( code, 'vertex' );
@@ -291,14 +322,14 @@ NodeBuilder.prototype = {
 		this.addCode( code, 'fragment' );
 
 	},
-	
+
 	addCode: function ( code, shader ) {
 
-		this.code[shader || this.shader] += code + '\n';
+		this.code[ shader || this.shader ] += code + '\n';
 
 	},
-	
-	
+
+
 	addVertexNodeCode: function ( code ) {
 
 		this.addNodeCode( code, 'vertex' );
@@ -310,37 +341,37 @@ NodeBuilder.prototype = {
 		this.addNodeCode( code, 'fragment' );
 
 	},
-	
+
 	addNodeCode: function ( code, shader ) {
 
-		this.nodeCode[shader || this.shader] += code + '\n';
+		this.nodeCode[ shader || this.shader ] += code + '\n';
 
 	},
-	
+
 	clearNodeCode: function ( shader ) {
 
 		shader = shader || this.shader;
-	
-		var code = this.nodeCode[shader];
-		
-		this.nodeCode[shader] = '';
+
+		var code = this.nodeCode[ shader ];
+
+		this.nodeCode[ shader ] = '';
 
 		return code;
-		
+
 	},
-	
-	clearVertexNodeCode: function (  ) {
+
+	clearVertexNodeCode: function ( ) {
 
 		return this.clearNodeCode( 'vertex' );
 
 	},
-	
-	clearFragmentNodeCode: function (  ) {
+
+	clearFragmentNodeCode: function ( ) {
 
 		return this.clearNodeCode( 'fragment' );
 
 	},
-	
+
 	addVertexFinalCode: function ( code ) {
 
 		this.addFinalCode( code, 'vertex' );
@@ -352,79 +383,50 @@ NodeBuilder.prototype = {
 		this.addFinalCode( code, 'fragment' );
 
 	},
-	
+
 	addFinalCode: function ( code, shader ) {
 
-		this.finalCode[shader || this.shader] += code + '\n';
+		this.finalCode[ shader || this.shader ] += code + '\n';
 
 	},
-	
-	
+
+
 	addVertexParsCode: function ( code ) {
 
 		this.addParsCode( code, 'vertex' );
 
 	},
-	
+
 	addFragmentParsCode: function ( code ) {
 
 		this.addParsCode( code, 'fragment' );
 
 	},
-	
+
 	addParsCode: function ( code, shader ) {
 
-		this.parsCode[shader || this.shader] += code + '\n';
+		this.parsCode[ shader || this.shader ] += code + '\n';
 
 	},
-	
-	
+
+
 	addVaryCode: function ( code ) {
 
 		this.addVertexParsCode( code );
 		this.addFragmentParsCode( code );
 
 	},
-	
-	
-	isCache: function ( name ) {
 
-		var i = this.caches.length;
 
-		while ( i -- ) {
-
-			if ( this.caches[ i ].name === name ) return true;
-
-		}
+	isCache: function ( name ) {
 
-		return false;
+		return this.caches.indexOf( name ) !== - 1;
 
 	},
 
 	isSlot: function ( name ) {
 
-		var i = this.slots.length;
-
-		while ( i -- ) {
-
-			if ( this.slots[ i ].name === name ) return true;
-
-		}
-
-		return false;
-
-	},
-
-	update: function () {
-
-		var cache = this.caches[ this.caches.length - 1 ];
-		var slot = this.slots[ this.slots.length - 1 ];
-
-		this.slot = slot ? slot.name : '';
-		this.cache = cache ? cache.name : '';
-		this.context = cache ? cache.context : {};
-
-		return this;
+		return this.slots.indexOf( name ) !== - 1;
 
 	},
 
@@ -433,7 +435,7 @@ NodeBuilder.prototype = {
 		this.defines[ name ] = value === undefined ? 1 : value;
 
 	},
-	
+
 	isDefined: function ( name ) {
 
 		return this.defines[ name ] !== undefined;
@@ -443,8 +445,8 @@ NodeBuilder.prototype = {
 	getVar: function ( uuid, type, ns, shader ) {
 
 		shader = shader || 'varying';
-	
-		var vars = this.getVars(shader),
+
+		var vars = this.getVars( shader ),
 			data = vars[ uuid ];
 
 		if ( ! data ) {
@@ -462,13 +464,13 @@ NodeBuilder.prototype = {
 		return data;
 
 	},
-	
+
 	getTempVar: function ( uuid, type, ns ) {
 
 		return this.getVar( uuid, type, ns, this.shader );
 
 	},
-	
+
 	getAttribute: function ( name, type ) {
 
 		if ( ! this.attributes[ name ] ) {
@@ -485,45 +487,45 @@ NodeBuilder.prototype = {
 		return this.attributes[ name ];
 
 	},
-	
-	getCode: function( shader ) {
-		
+
+	getCode: function ( shader ) {
+
 		return [
 			this.prefixCode,
 			this.parsCode[ shader ],
-			this.getVarListCode( this.getVars('varying'), 'varying' ),
-			this.getVarListCode( this.inputs.uniforms[shader], 'uniform' ),
+			this.getVarListCode( this.getVars( 'varying' ), 'varying' ),
+			this.getVarListCode( this.inputs.uniforms[ shader ], 'uniform' ),
 			this.getIncludesCode( 'consts', shader ),
 			this.getIncludesCode( 'structs', shader ),
 			this.getIncludesCode( 'functions', shader ),
 			'void main() {',
-				this.getVarListCode( this.getVars(shader) ),
-				this.code[ shader ], 
-				this.resultCode[ shader ],
-				this.finalCode[ shader ],
+			this.getVarListCode( this.getVars( shader ) ),
+			this.code[ shader ],
+			this.resultCode[ shader ],
+			this.finalCode[ shader ],
 			'}'
 		].join( "\n" );
-		
+
 	},
-	
+
 	getVarListCode: function ( vars, prefix ) {
 
 		prefix = prefix || '';
-	
+
 		var code = '';
 
 		for ( var i = 0, l = vars.length; i < l; ++ i ) {
 
-			var nVar = vars[i],
+			var nVar = vars[ i ],
 				type = nVar.type,
 				name = nVar.name;
-			
+
 			var formatType = this.getFormatByType( type );
 
 			if ( formatType === undefined ) {
-				
+
 				throw new Error( "Node pars " + formatType + " not found." );
-				
+
 			}
 
 			code += prefix + ' ' + formatType + ' ' + name + ';\n';
@@ -533,21 +535,21 @@ NodeBuilder.prototype = {
 		return code;
 
 	},
-	
+
 	getVars: function ( shader ) {
 
 		return this.inputs.vars[ shader || this.shader ];
 
 	},
-	
+
 	getNodeData: function ( node ) {
 
 		var uuid = node.isNode ? node.uuid : node;
-	
+
 		return this.nodeData[ uuid ] = this.nodeData[ uuid ] || {};
 
 	},
-	
+
 	createUniform: function ( shader, type, node, ns, needsUpdate ) {
 
 		var uniforms = this.inputs.uniforms,
@@ -555,40 +557,47 @@ NodeBuilder.prototype = {
 
 		var uniform = new NodeUniform( {
 			type: type,
-			name: ns ? ns : 'nVu' + index + '_' + THREE.Math.generateUUID().substr(0, 8),
+			name: ns ? ns : 'nVu' + index,
 			node: node,
 			needsUpdate: needsUpdate
 		} );
 
 		uniforms.list.push( uniform );
 
-		uniforms[shader].push( uniform );
-		uniforms[shader][ uniform.name ] = uniform;
-		
+		uniforms[ shader ].push( uniform );
+		uniforms[ shader ][ uniform.name ] = uniform;
+
 		this.uniforms[ uniform.name ] = uniform;
-		
+
 		return uniform;
 
 	},
-	
+
 	createVertexUniform: function ( type, node, ns, needsUpdate ) {
 
 		return this.createUniform( 'vertex', type, node, ns, needsUpdate );
 
 	},
-	
+
 	createFragmentUniform: function ( type, node, ns, needsUpdate ) {
 
 		return this.createUniform( 'fragment', type, node, ns, needsUpdate );
 
 	},
-	
+
 	include: function ( node, parent, source ) {
 
 		var includesStruct;
 
 		node = typeof node === 'string' ? NodeLib.get( node ) : node;
 
+		if ( this.context.include === false ) {
+
+			return node.name;
+
+		}
+
+
 		if ( node instanceof FunctionNode ) {
 
 			includesStruct = this.includes.functions;
@@ -596,17 +605,17 @@ NodeBuilder.prototype = {
 		} else if ( node instanceof ConstNode ) {
 
 			includesStruct = this.includes.consts;
-			
+
 		} else if ( node instanceof StructNode ) {
 
 			includesStruct = this.includes.structs;
 
 		}
-		
+
 		var includes = includesStruct[ this.shader ] = includesStruct[ this.shader ] || [];
 
-		if (node) {
-		
+		if ( node ) {
+
 			var included = includes[ node.name ];
 
 			if ( ! included ) {
@@ -645,13 +654,13 @@ NodeBuilder.prototype = {
 				included.src = source;
 
 			}
-			
+
 			return node.name;
-			
+
 		} else {
-			
-			throw new Error("Include not found.");
-			
+
+			throw new Error( "Include not found." );
+
 		}
 
 	},
@@ -661,7 +670,7 @@ NodeBuilder.prototype = {
 		return color.replace( 'r', 'x' ).replace( 'g', 'y' ).replace( 'b', 'z' ).replace( 'a', 'w' );
 
 	},
-	
+
 	colorToVector: function ( color ) {
 
 		return color.replace( /c/g, 'v3' );
@@ -670,10 +679,10 @@ NodeBuilder.prototype = {
 
 	getIncludes: function ( type, shader ) {
 
-		return this.includes[type][shader || this.shader];
+		return this.includes[ type ][ shader || this.shader ];
 
 	},
-	
+
 	getIncludesCode: function () {
 
 		function sortByPosition( a, b ) {
@@ -685,10 +694,10 @@ NodeBuilder.prototype = {
 		return function getIncludesCode( type, shader ) {
 
 			var includes = this.getIncludes( type, shader );
-	
+
 			if ( ! includes ) return '';
 
-			var code = '', 
+			var code = '',
 				includes = includes.sort( sortByPosition );
 
 			for ( var i = 0; i < includes.length; i ++ ) {
@@ -702,7 +711,7 @@ NodeBuilder.prototype = {
 		};
 
 	}(),
-	
+
 	getConstructorFromLength: function ( len ) {
 
 		return constructors[ len - 1 ];
@@ -718,7 +727,7 @@ NodeBuilder.prototype = {
 	getTypeLength: function ( type ) {
 
 		if ( type === 'f' ) return 1;
-	
+
 		return parseInt( this.colorToVector( type ).substr( 1 ) );
 
 	},
@@ -730,109 +739,109 @@ NodeBuilder.prototype = {
 		return 'v' + len;
 
 	},
-	
-	findNode: function() {
-		
-		for(var i = 0; i < arguments.length; i++) {
-			
-			var nodeCandidate = arguments[i];
-			
-			if (nodeCandidate !== undefined && nodeCandidate.isNode) {
-				
+
+	findNode: function () {
+
+		for ( var i = 0; i < arguments.length; i ++ ) {
+
+			var nodeCandidate = arguments[ i ];
+
+			if ( nodeCandidate !== undefined && nodeCandidate.isNode ) {
+
 				return nodeCandidate;
-				
+
 			}
-			
+
 		}
-		
-	},
-	
-	resolve: function() {
-		
-		for(var i = 0; i < arguments.length; i++) {
-			
-			var nodeCandidate = arguments[i];
-			
-			if (nodeCandidate !== undefined) {
-				
-				if (nodeCandidate.isNode) {
-				
+
+	},
+
+	resolve: function () {
+
+		for ( var i = 0; i < arguments.length; i ++ ) {
+
+			var nodeCandidate = arguments[ i ];
+
+			if ( nodeCandidate !== undefined ) {
+
+				if ( nodeCandidate.isNode ) {
+
 					return nodeCandidate;
-					
-				} else if (nodeCandidate.isTexture) {
-					
-					switch( nodeCandidate.mapping ) {
-					
+
+				} else if ( nodeCandidate.isTexture ) {
+
+					switch ( nodeCandidate.mapping ) {
+
 						case THREE.CubeReflectionMapping:
 						case THREE.CubeRefractionMapping:
 
 							return new CubeTextureNode( nodeCandidate );
 
 							break;
-						
+
 						case THREE.CubeUVReflectionMapping:
 						case THREE.CubeUVRefractionMapping:
 
 							return new TextureCubeNode( new TextureNode( nodeCandidate ) );
 
 							break;
-							
+
 						default:
-						
+
 							return new TextureNode( nodeCandidate );
-						
+
 					}
-					
-				} else if (nodeCandidate.isVector2) {
-					
+
+				} else if ( nodeCandidate.isVector2 ) {
+
 					return new Vector2Node( nodeCandidate );
-					
-				} else if (nodeCandidate.isVector3) {
-					
+
+				} else if ( nodeCandidate.isVector3 ) {
+
 					return new Vector3Node( nodeCandidate );
-					
-				} else if (nodeCandidate.isVector4) {
-					
+
+				} else if ( nodeCandidate.isVector4 ) {
+
 					return new Vector4Node( nodeCandidate );
-					
+
 				}
-				
+
 			}
-			
+
 		}
-		
+
 	},
 
 	format: function ( code, from, to ) {
 
-		var typeToType = this.colorToVector( to + ' = ' + from );
+		var typeToType = this.colorToVector( to + ' <- ' + from );
 
 		switch ( typeToType ) {
 
-			case 'f = v2': return code + '.x';
-			case 'f = v3': return code + '.x';
-			case 'f = v4': return code + '.x';
-			case 'f = i': return 'float( ' + code + ' )';
+			case 'f <- v2' : return code + '.x';
+			case 'f <- v3' : return code + '.x';
+			case 'f <- v4' : return code + '.x';
+			case 'f <- i' : return 'float( ' + code + ' )';
 
-			case 'v2 = f': return 'vec2( ' + code + ' )';
-			case 'v2 = v3': return code + '.xy';
-			case 'v2 = v4': return code + '.xy';
-			case 'v2 = i': return 'vec2( float( ' + code + ' ) )';
+			case 'v2 <- f' : return 'vec2( ' + code + ' )';
+			case 'v2 <- v3': return code + '.xy';
+			case 'v2 <- v4': return code + '.xy';
+			case 'v2 <- i' : return 'vec2( float( ' + code + ' ) )';
 
-			case 'v3 = f': return 'vec3( ' + code + ' )';
-			case 'v3 = v2': return 'vec3( ' + code + ', 0.0 )';
-			case 'v3 = v4': return code + '.xyz';
-			case 'v3 = i': return 'vec2( float( ' + code + ' ) )';
+			case 'v3 <- f' : return 'vec3( ' + code + ' )';
+			case 'v3 <- v2': return 'vec3( ' + code + ', 0.0 )';
+			case 'v3 <- v4': return code + '.xyz';
+			case 'v3 <- i' : return 'vec2( float( ' + code + ' ) )';
 
-			case 'v4 = f': return 'vec4( ' + code + ' )';
-			case 'v4 = v2': return 'vec4( ' + code + ', 0.0, 1.0 )';
-			case 'v4 = v3': return 'vec4( ' + code + ', 1.0 )';
-			case 'v4 = i': return 'vec4( float( ' + code + ' ) )';
+			case 'v4 <- f' : return 'vec4( ' + code + ' )';
+			case 'v4 <- v2': return 'vec4( ' + code + ', 0.0, 1.0 )';
+			case 'v4 <- v3': return 'vec4( ' + code + ', 1.0 )';
+			case 'v4 <- i' : return 'vec4( float( ' + code + ' ) )';
 
-			case 'i = f': return 'int( ' + code + ' )';
-			case 'i = v2': return 'int( ' + code + '.x )';
-			case 'i = v3': return 'int( ' + code + '.x )';
-			case 'i = v4': return 'int( ' + code + '.x )';
+			case 'i <- f' : return 'int( ' + code + ' )';
+			case 'i <- v2' : return 'int( ' + code + '.x )';
+			case 'i <- v3' : return 'int( ' + code + '.x )';
+			case 'i <- v4' : return 'int( ' + code + '.x )';
 
 		}
 
@@ -845,7 +854,7 @@ NodeBuilder.prototype = {
 		return convertFormatToType[ format ] || format;
 
 	},
-	
+
 	getFormatByType: function ( type ) {
 
 		return convertTypeToFormat[ type ] || type;
@@ -887,93 +896,35 @@ NodeBuilder.prototype = {
 		return this;
 
 	},
-	
-	mergeUniform: function ( uniforms ) {
-
-		for ( var name in uniforms ) {
-
-			this.uniforms[ name ] = uniforms[ name ];
-
-		}
-
-	},
-
-	getTexelDecodingFunctionFromTexture: function( code, texture ) {
-
-		var gammaOverrideLinear = this.getTextureEncodingFromMap( texture, this.context.gamma && ( this.renderer ? this.renderer.gammaInput : false ) )
-
-		return this.getTexelDecodingFunction( code, gammaOverrideLinear );
-
-	},
-
-	getTexelDecodingFunction: function( value, encoding ) {
-
-		var components = this.getEncodingComponents( encoding );
 
-		return components[ 0 ] + 'ToLinear' + components[ 1 ].replace( 'value', value );
+	mergeDefines: function ( defines ) {
 
-	},
+		for ( var name in defines ) {
 
-	getTexelEncodingFunction: function( value, encoding ) {
+			this.defines[ name ] = defines[ name ];
 
-		var components = this.getEncodingComponents( encoding );
+		}
 
-		return 'LinearTo' + components[ 0 ] + components[ 1 ].replace( 'value', value );
+		return this.defines;
 
 	},
 
-	getEncodingComponents: function( encoding ) {
+	mergeUniform: function ( uniforms ) {
 
-		switch ( encoding ) {
+		for ( var name in uniforms ) {
 
-			case THREE.LinearEncoding:
-				return [ 'Linear', '( value )' ];
-			case THREE.sRGBEncoding:
-				return [ 'sRGB', '( value )' ];
-			case THREE.RGBEEncoding:
-				return [ 'RGBE', '( value )' ];
-			case THREE.RGBM7Encoding:
-				return [ 'RGBM', '( value, 7.0 )' ];
-			case THREE.RGBM16Encoding:
-				return [ 'RGBM', '( value, 16.0 )' ];
-			case THREE.RGBDEncoding:
-				return [ 'RGBD', '( value, 256.0 )' ];
-			case THREE.GammaEncoding:
-				return [ 'Gamma', '( value, float( GAMMA_FACTOR ) )' ];
-			default:
-				throw new Error( 'unsupported encoding: ' + encoding );
+			this.uniforms[ name ] = uniforms[ name ];
 
 		}
 
-	},
-
-	getEncodingComponents: function( encoding ) {
-
-		switch ( encoding ) {
-
-			case THREE.LinearEncoding:
-				return [ 'Linear', '( value )' ];
-			case THREE.sRGBEncoding:
-				return [ 'sRGB', '( value )' ];
-			case THREE.RGBEEncoding:
-				return [ 'RGBE', '( value )' ];
-			case THREE.RGBM7Encoding:
-				return [ 'RGBM', '( value, 7.0 )' ];
-			case THREE.RGBM16Encoding:
-				return [ 'RGBM', '( value, 16.0 )' ];
-			case THREE.RGBDEncoding:
-				return [ 'RGBD', '( value, 256.0 )' ];
-			case THREE.GammaEncoding:
-				return [ 'Gamma', '( value, float( GAMMA_FACTOR ) )' ];
-			default:
-				throw new Error( 'unsupported encoding: ' + encoding );
-
-		}
+		return this.uniforms;
 
 	},
-	
+
 	getTextureEncodingFromMap: function ( map, gammaOverrideLinear ) {
 
+		gammaOverrideLinear = gammaOverrideLinear !== undefined ? gammaOverrideLinear : this.context.gamma && ( this.renderer ? this.renderer.gammaInput : false );
+
 		var encoding;
 
 		if ( ! map ) {

examples/js/nodes/core/NodeFrame.js

@@ -6,9 +6,9 @@ function NodeFrame( time ) {
 
 	this.time = time !== undefined ? time : 0;
 
-	this.frameId = 0;
+	this.id = 0;
 
-};
+}
 
 NodeFrame.prototype = {
 
@@ -16,7 +16,7 @@ NodeFrame.prototype = {
 
 	update: function ( delta ) {
 
-		++this.frameId;
+		++ this.id;
 
 		this.time += delta;
 		this.delta = delta;
@@ -24,19 +24,35 @@ NodeFrame.prototype = {
 		return this;
 
 	},
-	
+
+	setRenderer: function ( renderer ) {
+
+		this.renderer = renderer;
+
+		return this;
+
+	},
+
+	setRenderTexture: function ( renderTexture ) {
+
+		this.renderTexture = renderTexture;
+
+		return this;
+
+	},
+
 	updateNode: function ( node ) {
 
-		if ( node.frameId === this.frameId ) return this;
+		if ( node.frameId === this.id ) return this;
 
 		node.updateFrame( this );
 
-		node.frameId = this.frameId;
+		node.frameId = this.id;
 
 		return this;
 
 	}
-	
+
 };
 
 export { NodeFrame };

examples/js/nodes/core/NodeUniform.js

@@ -11,26 +11,26 @@ function NodeUniform( params ) {
 	this.node = params.node;
 	this.needsUpdate = params.needsUpdate;
 
-};
+}
 
 Object.defineProperties( NodeUniform.prototype, {
-	
+
 	value: {
-		
+
 		get: function () {
 
 			return this.node.value;
 
 		},
-		
+
 		set: function ( val ) {
 
 			this.node.value = val;
 
 		}
-		
+
 	}
-	
+
 } );
 
 export { NodeUniform };

examples/js/nodes/core/NodeUtils.js

@@ -13,37 +13,37 @@ var NodeUtils = {
 			if ( subProperty ) {
 
 				return {
-					
+
 					get: function () {
 
 						return this[ proxy ][ property ][ subProperty ];
 
 					},
-					
+
 					set: function ( val ) {
 
 						this[ proxy ][ property ][ subProperty ] = val;
 
 					}
-					
+
 				};
 
 			} else {
 
 				return {
-					
+
 					get: function () {
 
 						return this[ proxy ][ property ];
 
 					},
-					
+
 					set: function ( val ) {
 
 						this[ proxy ][ property ] = val;
 
 					}
-					
+
 				};
 
 			}
@@ -57,8 +57,8 @@ var NodeUtils = {
 			for ( var i = 0; i < list.length; ++ i ) {
 
 				var data = list[ i ].split( "." ),
-					property = data[0],
-					subProperty = data[1];
+					property = data[ 0 ],
+					subProperty = data[ 1 ];
 
 				shortcuts[ property ] = applyShortcut( proxy, property, subProperty );
 
@@ -69,7 +69,7 @@ var NodeUtils = {
 		};
 
 	}()
-	
+
 };
 
 export { NodeUtils };

examples/js/nodes/core/StructNode.js

@@ -3,18 +3,17 @@
  */
 
 import { TempNode } from './TempNode.js';
-import { FunctionNode } from './FunctionNode.js';
+
+var declarationRegexp = /^struct\s*([a-z_0-9]+)\s*{\s*((.|\n)*?)}/img,
+	propertiesRegexp = /\s*(\w*?)\s*(\w*?)(\=|\;)/img;
 
 function StructNode( src ) {
 
-	TempNode.call( this);
+	TempNode.call( this );
 
 	this.eval( src );
 
-};
-
-StructNode.rDeclaration = /^struct\s*([a-z_0-9]+)\s*{\s*((.|\n)*?)}/img;
-StructNode.rProperties = /\s*(\w*?)\s*(\w*?)(\=|\;)/img;
+}
 
 StructNode.prototype = Object.create( TempNode.prototype );
 StructNode.prototype.constructor = StructNode;
@@ -32,9 +31,12 @@ StructNode.prototype.getInputByName = function ( name ) {
 
 	while ( i -- ) {
 
-		if ( this.inputs[ i ].name === name )
+		if ( this.inputs[ i ].name === name ) {
+
 			return this.inputs[ i ];
 
+		}
+
 	}
 
 };
@@ -47,7 +49,7 @@ StructNode.prototype.generate = function ( builder, output ) {
 
 	} else {
 
-		return builder.format( "(" + src + ")", this.getType( builder ), output );
+		return builder.format( '( ' + src + ' )', this.getType( builder ), output );
 
 	}
 
@@ -56,34 +58,32 @@ StructNode.prototype.generate = function ( builder, output ) {
 StructNode.prototype.eval = function ( src ) {
 
 	this.src = src || '';
-	
+
 	this.inputs = [];
-	
-	var declaration = StructNode.rDeclaration.exec( this.src );
-	
-	if (declaration) {
-		
-		var properties = declaration[2], matchType, matchName;
-		
-		while ( matchType = FunctionNode.rProperties.exec( properties ) ) {
-			
-			matchName = FunctionNode.rProperties.exec( properties )[0];
-			
+
+	var declaration = declarationRegexp.exec( this.src );
+
+	if ( declaration ) {
+
+		var properties = declaration[ 2 ], match;
+
+		while ( match = propertiesRegexp.exec( properties ) ) {
+
 			this.inputs.push( {
-				name: matchName,
-				type: matchType
+				type: match[ 1 ],
+				name: match[ 2 ]
 			} );
-			
+
 		}
-		
-		this.name = declaration[1];
+
+		this.name = declaration[ 1 ];
 
 	} else {
-		
+
 		this.name = '';
-		
+
 	}
-	
+
 	this.type = this.name;
 
 };

examples/js/nodes/core/TempNode.js

@@ -3,20 +3,20 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from './GLNode.js';
+import { Node } from './Node.js';
 
 function TempNode( type, params ) {
 
-	GLNode.call( this, type );
+	Node.call( this, type );
 
 	params = params || {};
 
 	this.shared = params.shared !== undefined ? params.shared : true;
 	this.unique = params.unique !== undefined ? params.unique : false;
 
-};
+}
 
-TempNode.prototype = Object.create( GLNode.prototype );
+TempNode.prototype = Object.create( Node.prototype );
 TempNode.prototype.constructor = TempNode;
 
 TempNode.prototype.build = function ( builder, output, uuid, ns ) {
@@ -35,36 +35,36 @@ TempNode.prototype.build = function ( builder, output, uuid, ns ) {
 
 		uuid = builder.getUuid( uuid || this.getUuid(), ! isUnique );
 
-		var data = builder.getNodeData( uuid );
+		var data = builder.getNodeData( uuid ),
+			type = data.output || this.getType( builder );
 
 		if ( builder.parsing ) {
 
-			if ( data.deps || 0 > 0 ) {
+			if ( ( data.deps || 0 ) > 0 ) {
 
 				this.appendDepsNode( builder, data, output );
 
-				return this.generate( builder, type, uuid );
+				return this.generate( builder, output, uuid );
 
 			}
 
-			return GLNode.prototype.build.call( this, builder, output, uuid );
+			return Node.prototype.build.call( this, builder, output, uuid );
 
 		} else if ( isUnique ) {
 
-			data.name = data.name || GLNode.prototype.build.call( this, builder, output, uuid );
+			data.name = data.name || Node.prototype.build.call( this, builder, output, uuid );
 
 			return data.name;
 
-		} else if ( ! builder.optimize || data.deps == 1 ) {
+		} else if ( ! this.isShared( builder, type ) || ( ! builder.optimize || data.deps == 1 ) ) {
 
-			return GLNode.prototype.build.call( this, builder, output, uuid );
+			return Node.prototype.build.call( this, builder, output, uuid );
 
 		}
 
 		uuid = this.getUuid( false );
 
-		var name = this.getTemp( builder, uuid ),
-			type = data.output || this.getType( builder );
+		var name = this.getTemp( builder, uuid );
 
 		if ( name ) {
 
@@ -84,7 +84,7 @@ TempNode.prototype.build = function ( builder, output, uuid, ns ) {
 
 	}
 
-	return GLNode.prototype.build.call( this, builder, output, uuid );
+	return Node.prototype.build.call( this, builder, output, uuid );
 
 };
 
@@ -114,10 +114,10 @@ TempNode.prototype.getTemp = function ( builder, uuid ) {
 
 	uuid = uuid || this.uuid;
 
-	var tempVar = builder.getVars()[uuid]
-	
+	var tempVar = builder.getVars()[ uuid ];
+
 	return tempVar ? tempVar.name : undefined;
-	
+
 };
 
 TempNode.prototype.generate = function ( builder, output, uuid, type, ns ) {

examples/js/nodes/core/VarNode.js

@@ -2,17 +2,17 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from './GLNode.js';
+import { Node } from './Node.js';
 
 function VarNode( type, value ) {
 
-	GLNode.call( this, type );
-	
+	Node.call( this, type );
+
 	this.value = value;
 
-};
+}
 
-VarNode.prototype = Object.create( GLNode.prototype );
+VarNode.prototype = Object.create( Node.prototype );
 VarNode.prototype.constructor = VarNode;
 VarNode.prototype.nodeType = "Var";
 
@@ -31,18 +31,18 @@ VarNode.prototype.generate = function ( builder, output ) {
 		builder.addNodeCode( varying.name + ' = ' + this.value.build( builder, this.getType( builder ) ) + ';' );
 
 	}
-	
+
 	return builder.format( varying.name, this.getType( builder ), output );
 
 };
 
 VarNode.prototype.copy = function ( source ) {
-	
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	this.type = source.type;
 	this.value = source.value;
-	
+
 };
 
 VarNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/effects/BlurNode.js

@@ -24,10 +24,10 @@ function BlurNode( value, uv, radius, size ) {
 	this.horizontal = new FloatNode( 1 / 64 );
 	this.vertical = new FloatNode( 1 / 64 );
 
-};
+}
+
+BlurNode.Nodes = ( function () {
 
-BlurNode.Nodes = (function() {
-	
 	var blurX = new FunctionNode( [
 		"vec4 blurX( sampler2D texture, vec2 uv, float s ) {",
 		"	vec4 sum = vec4( 0.0 );",
@@ -40,10 +40,10 @@ BlurNode.Nodes = (function() {
 		"	sum += texture2D( texture, vec2( uv.x + 2.0 * s, uv.y ) ) * 0.12245;",
 		"	sum += texture2D( texture, vec2( uv.x + 3.0 * s, uv.y ) ) * 0.0918;",
 		"	sum += texture2D( texture, vec2( uv.x + 4.0 * s, uv.y ) ) * 0.051;",
-		"	return sum;",
+		"	return sum * .667;",
 		"}"
 	].join( "\n" ) );
-	
+
 	var blurY = new FunctionNode( [
 		"vec4 blurY( sampler2D texture, vec2 uv, float s ) {",
 		"	vec4 sum = vec4( 0.0 );",
@@ -56,16 +56,16 @@ BlurNode.Nodes = (function() {
 		"	sum += texture2D( texture, vec2( uv.x, uv.y + 2.0 * s ) ) * 0.12245;",
 		"	sum += texture2D( texture, vec2( uv.x, uv.y + 3.0 * s ) ) * 0.0918;",
 		"	sum += texture2D( texture, vec2( uv.x, uv.y + 4.0 * s ) ) * 0.051;",
-		"	return sum;",
+		"	return sum * .667;",
 		"}"
 	].join( "\n" ) );
-	
+
 	return {
 		blurX: blurX,
 		blurY: blurY
 	};
-	
-})();
+
+} )();
 
 
 BlurNode.prototype = Object.create( TempNode.prototype );
@@ -98,7 +98,7 @@ BlurNode.prototype.generate = function ( builder, output ) {
 
 		var blurX = builder.include( BlurNode.Nodes.blurX ),
 			blurY = builder.include( BlurNode.Nodes.blurY );
-		
+
 		if ( this.blurX ) {
 
 			blurCode.push( blurX + '( ' + this.value.build( builder, 'sampler2D' ) + ', ' + this.uv.build( builder, 'v2' ) + ', ' + this.horizontal.build( builder, 'f' ) + ' )' );
@@ -111,7 +111,7 @@ BlurNode.prototype.generate = function ( builder, output ) {
 
 		}
 
-		if ( blurCode.length == 2 ) code = '( ' + blurCode.join( ' + ' ) + '/ 2.0 )';
+		if ( blurCode.length == 2 ) code = '( ' + blurCode.join( ' + ' ) + ' / 2.0 )';
 		else if ( blurCode.length ) code = '( ' + blurCode[ 0 ] + ' )';
 		else code = 'vec4( 0.0 )';
 
@@ -128,9 +128,9 @@ BlurNode.prototype.generate = function ( builder, output ) {
 };
 
 BlurNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.value = source.value;
 	this.uv = source.uv;
 	this.radius = source.radius;
@@ -139,7 +139,7 @@ BlurNode.prototype.copy = function ( source ) {
 
 	this.blurX = source.blurX;
 	this.blurY = source.blurY;
-					
+
 };
 
 BlurNode.prototype.toJSON = function ( meta ) {
@@ -165,4 +165,4 @@ BlurNode.prototype.toJSON = function ( meta ) {
 
 };
 
-export { BlurNode };
+export { BlurNode };

examples/js/nodes/effects/ColorAdjustmentNode.js

@@ -15,58 +15,58 @@ function ColorAdjustmentNode( rgb, adjustment, method ) {
 
 	this.method = method || ColorAdjustmentNode.SATURATION;
 
-};
+}
+
+ColorAdjustmentNode.Nodes = ( function () {
 
-ColorAdjustmentNode.Nodes = (function() {
-	
 	var hue = new FunctionNode( [
 		"vec3 hue(vec3 rgb, float adjustment) {",
-		
+
 		"	const mat3 RGBtoYIQ = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);",
 		"	const mat3 YIQtoRGB = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.107, 1.7046);",
-		
+
 		"	vec3 yiq = RGBtoYIQ * rgb;",
-		
+
 		"	float hue = atan(yiq.z, yiq.y) + adjustment;",
 		"	float chroma = sqrt(yiq.z * yiq.z + yiq.y * yiq.y);",
-		
+
 		"	return YIQtoRGB * vec3(yiq.x, chroma * cos(hue), chroma * sin(hue));",
-		
+
 		"}"
 	].join( "\n" ) );
-	
+
 	var saturation = new FunctionNode( [
 		// Algorithm from Chapter 16 of OpenGL Shading Language
 		"vec3 saturation(vec3 rgb, float adjustment) {",
-		
+
 		"	vec3 intensity = vec3( luminance( rgb ) );",
-		
+
 		"	return mix( intensity, rgb, adjustment );",
-		
+
 		"}"
 	].join( "\n" ), [ LuminanceNode.Nodes.luminance ] ); // include LuminanceNode function
-	
+
 	var vibrance = new FunctionNode( [
 		// Shader by Evan Wallace adapted by @lo-th
 		"vec3 vibrance(vec3 rgb, float adjustment) {",
-		
+
 		"	float average = (rgb.r + rgb.g + rgb.b) / 3.0;",
-		
+
 		"	float mx = max(rgb.r, max(rgb.g, rgb.b));",
 		"	float amt = (mx - average) * (-3.0 * adjustment);",
-		
+
 		"	return mix(rgb.rgb, vec3(mx), amt);",
-		
+
 		"}"
 	].join( "\n" ) );
-	
+
 	return {
 		hue: hue,
 		saturation: saturation,
 		vibrance: vibrance
 	};
-	
-})();
+
+} )();
 
 ColorAdjustmentNode.SATURATION = 'saturation';
 ColorAdjustmentNode.HUE = 'hue';
@@ -99,16 +99,16 @@ ColorAdjustmentNode.prototype.generate = function ( builder, output ) {
 
 	}
 
-	var method = builder.include( ColorAdjustmentNode.Nodes[this.method] );
+	var method = builder.include( ColorAdjustmentNode.Nodes[ this.method ] );
 
 	return builder.format( method + '( ' + rgb + ', ' + adjustment + ' )', this.getType( builder ), output );
 
 };
 
 ColorAdjustmentNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.rgb = source.rgb;
 	this.adjustment = source.adjustment;
 	this.method = source.method;
@@ -133,4 +133,4 @@ ColorAdjustmentNode.prototype.toJSON = function ( meta ) {
 
 };
 
-export { ColorAdjustmentNode };
+export { ColorAdjustmentNode };

examples/js/nodes/effects/LuminanceNode.js

@@ -12,18 +12,18 @@ function LuminanceNode( rgb ) {
 
 	this.rgb = rgb;
 
-};
+}
+
+LuminanceNode.Nodes = ( function () {
 
-LuminanceNode.Nodes = (function() {
-	
 	var LUMA = new ConstNode( "vec3 LUMA vec3( 0.2125, 0.7154, 0.0721 )" );
 
 	var luminance = new FunctionNode( [
 		// Algorithm from Chapter 10 of Graphics Shaders
 		"float luminance( vec3 rgb ) {",
-		
+
 		"	return dot( rgb, LUMA );",
-		
+
 		"}"
 	].join( "\n" ), [ LUMA ] );
 
@@ -31,8 +31,8 @@ LuminanceNode.Nodes = (function() {
 		LUMA: LUMA,
 		luminance: luminance
 	};
-	
-})();
+
+} )();
 
 LuminanceNode.prototype = Object.create( TempNode.prototype );
 LuminanceNode.prototype.constructor = LuminanceNode;
@@ -47,11 +47,11 @@ LuminanceNode.prototype.generate = function ( builder, output ) {
 };
 
 LuminanceNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.rgb = source.rgb;
-	
+
 };
 
 LuminanceNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/ColorNode.js

@@ -11,7 +11,7 @@ function ColorNode( color, g, b ) {
 
 	this.value = color instanceof THREE.Color ? color : new THREE.Color( color || 0, g, b );
 
-};
+}
 
 ColorNode.prototype = Object.create( InputNode.prototype );
 ColorNode.prototype.constructor = ColorNode;
@@ -26,11 +26,11 @@ ColorNode.prototype.generateReadonly = function ( builder, output, uuid, type, n
 };
 
 ColorNode.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.value.copy( source );
-	
+
 };
 
 ColorNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/CubeTextureNode.js

@@ -4,6 +4,7 @@
 
 import { InputNode } from '../core/InputNode.js';
 import { ReflectNode } from '../accessors/ReflectNode.js';
+import { ColorSpaceNode } from '../utils/ColorSpaceNode.js';
 
 function CubeTextureNode( value, uv, bias ) {
 
@@ -13,7 +14,7 @@ function CubeTextureNode( value, uv, bias ) {
 	this.uv = uv || new ReflectNode();
 	this.bias = bias;
 
-};
+}
 
 CubeTextureNode.prototype = Object.create( InputNode.prototype );
 CubeTextureNode.prototype.constructor = CubeTextureNode;
@@ -48,22 +49,29 @@ CubeTextureNode.prototype.generate = function ( builder, output ) {
 	if ( bias ) code = 'texCubeBias( ' + cubetex + ', ' + uv + ', ' + bias + ' )';
 	else code = 'texCube( ' + cubetex + ', ' + uv + ' )';
 
-	code = builder.getTexelDecodingFunctionFromTexture( code, this.value );
+	// add this context to replace ColorSpaceNode.input to code
+
+	builder.addContext( { input: code, encoding: builder.getTextureEncodingFromMap( this.value ), include: builder.isShader( 'vertex' ) } );
+
+	this.colorSpace = this.colorSpace || new ColorSpaceNode( this );
+	code = this.colorSpace.build( builder, this.type );
+
+	builder.removeContext();
 
 	return builder.format( code, this.type, output );
 
 };
 
 CubeTextureNode.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	if ( source.value ) this.value = source.value;
 
 	this.uv = source.uv;
 
 	if ( source.bias ) this.bias = source.bias;
-	
+
 };
 
 CubeTextureNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/FloatNode.js

@@ -10,7 +10,7 @@ function FloatNode( value ) {
 
 	this.value = value || 0;
 
-};
+}
 
 FloatNode.prototype = Object.create( InputNode.prototype );
 FloatNode.prototype.constructor = FloatNode;
@@ -23,11 +23,11 @@ FloatNode.prototype.generateReadonly = function ( builder, output, uuid, type, n
 };
 
 FloatNode.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.value = source.value;
-	
+
 };
 
 FloatNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/IntNode.js

@@ -10,7 +10,7 @@ function IntNode( value ) {
 
 	this.value = Math.floor( value || 0 );
 
-};
+}
 
 IntNode.prototype = Object.create( InputNode.prototype );
 IntNode.prototype.constructor = IntNode;
@@ -23,11 +23,11 @@ IntNode.prototype.generateReadonly = function ( builder, output, uuid, type, ns,
 };
 
 IntNode.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.value = source.value;
-	
+
 };
 
 IntNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/Matrix3Node.js

@@ -10,7 +10,7 @@ function Matrix3Node( matrix ) {
 
 	this.value = matrix || new THREE.Matrix3();
 
-};
+}
 
 Matrix3Node.prototype = Object.create( InputNode.prototype );
 Matrix3Node.prototype.constructor = Matrix3Node;
@@ -19,19 +19,19 @@ Matrix3Node.prototype.nodeType = "Matrix3";
 Object.defineProperties( Matrix3Node.prototype, {
 
 	elements: {
-		
-		set: function (val) {
+
+		set: function ( val ) {
 
 			this.value.elements = val;
 
 		},
-		
+
 		get: function () {
 
 			return this.value.elements;
 
 		}
-		
+
 	}
 
 } );
@@ -44,11 +44,11 @@ Matrix3Node.prototype.generateReadonly = function ( builder, output, uuid, type,
 
 
 Matrix3Node.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.value.fromArray( source.elements );
-	
+
 };
 
 Matrix3Node.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/Matrix4Node.js

@@ -10,7 +10,7 @@ function Matrix4Node( matrix ) {
 
 	this.value = matrix || new THREE.Matrix4();
 
-};
+}
 
 Matrix4Node.prototype = Object.create( InputNode.prototype );
 Matrix4Node.prototype.constructor = Matrix4Node;
@@ -19,19 +19,19 @@ Matrix4Node.prototype.nodeType = "Matrix4";
 Object.defineProperties( Matrix4Node.prototype, {
 
 	elements: {
-		
-		set: function (val) {
+
+		set: function ( val ) {
 
 			this.value.elements = val;
 
 		},
-		
+
 		get: function () {
 
 			return this.value.elements;
 
 		}
-		
+
 	}
 
 } );
@@ -43,11 +43,11 @@ Matrix4Node.prototype.generateReadonly = function ( builder, output, uuid, type,
 };
 
 Matrix4Node.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.scope.value.fromArray( source.elements );
-	
+
 };
 
 Matrix4Node.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/PropertyNode.js

@@ -3,15 +3,15 @@
  */
 
 import { InputNode } from '../core/InputNode.js';
- 
+
 function PropertyNode( object, property, type ) {
 
 	InputNode.call( this, type );
-	
+
 	this.object = object;
 	this.property = property;
 
-};
+}
 
 PropertyNode.prototype = Object.create( InputNode.prototype );
 PropertyNode.prototype.constructor = PropertyNode;
@@ -20,19 +20,19 @@ PropertyNode.prototype.nodeType = "Property";
 Object.defineProperties( PropertyNode.prototype, {
 
 	value: {
-		
+
 		get: function () {
 
 			return this.object[ this.property ];
 
 		},
-		
-		set: function ( val ) { 
-		
+
+		set: function ( val ) {
+
 			this.object[ this.property ] = val;
-		
+
 		}
-		
+
 	}
 
 } );

examples/js/nodes/inputs/RTTNode.js

@@ -0,0 +1,143 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+import { NodeMaterial } from '../materials/NodeMaterial.js';
+import { TextureNode } from './TextureNode.js';
+
+function RTTNode( width, height, input, options ) {
+
+	options = options || {};
+
+	this.input = input;
+
+	this.clear = options.clear !== undefined ? options.clear : true;
+
+	this.renderTarget = new THREE.WebGLRenderTarget( width, height, options );
+
+	this.material = new NodeMaterial();
+
+	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+	this.scene = new THREE.Scene();
+
+	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), this.material );
+	this.quad.frustumCulled = false; // Avoid getting clipped
+	this.scene.add( this.quad );
+
+	this.render = true;
+
+	TextureNode.call( this, this.renderTarget.texture );
+
+}
+
+RTTNode.prototype = Object.create( TextureNode.prototype );
+RTTNode.prototype.constructor = RTTNode;
+RTTNode.prototype.nodeType = "RTT";
+
+RTTNode.prototype.build = function ( builder, output, uuid ) {
+
+	var rttBuilder = new THREE.NodeBuilder();
+	rttBuilder.nodes = builder.nodes;
+	rttBuilder.updaters = builder.updaters;
+
+	this.material.fragment.value = this.input;
+	this.material.build( { builder: rttBuilder } );
+
+	return TextureNode.prototype.build.call( this, builder, output, uuid );
+
+};
+
+RTTNode.prototype.updateFramesaveTo = function ( frame ) {
+
+	this.saveTo.render = false;
+
+	if ( this.saveTo !== this.saveToCurrent ) {
+
+		if ( this.saveToMaterial ) this.saveToMaterial.dispose();
+
+		var material = new NodeMaterial();
+		material.fragment.value = this;
+		material.build();
+
+		var scene = new THREE.Scene();
+
+		var quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), material );
+		quad.frustumCulled = false; // Avoid getting clipped
+		scene.add( quad );
+
+		this.saveToScene = scene;
+		this.saveToMaterial = material;
+
+	}
+
+	this.saveToCurrent = this.saveTo;
+
+	frame.renderer.render( this.saveToScene, this.camera, this.saveTo.renderTarget, this.saveTo.clear );
+
+};
+
+RTTNode.prototype.updateFrame = function ( frame ) {
+
+	if ( frame.renderer ) {
+
+		// from the second frame
+
+		if ( this.saveTo && this.saveTo.render === false ) {
+
+			this.updateFramesaveTo( frame );
+
+		}
+
+		if ( this.render ) {
+
+			if ( this.material.uniforms.renderTexture ) {
+
+				this.material.uniforms.renderTexture.value = frame.renderTexture;
+
+			}
+
+			frame.renderer.render( this.scene, this.camera, this.renderTarget, this.clear );
+
+		}
+
+		// first frame
+
+		if ( this.saveTo && this.saveTo.render === true ) {
+
+			this.updateFramesaveTo( frame );
+
+		}
+
+	} else {
+
+		console.warn( "RTTNode need a renderer in NodeFrame" );
+
+	}
+
+};
+
+RTTNode.prototype.copy = function ( source ) {
+
+	TextureNode.prototype.copy.call( this, source );
+
+	this.saveTo = source.saveTo;
+
+};
+
+RTTNode.prototype.toJSON = function ( meta ) {
+
+	var data = this.getJSONNode( meta );
+
+	if ( ! data ) {
+
+		data = THREE.TextureNode.prototype.toJSON.call( this, meta );
+
+		if ( this.saveTo ) data.saveTo = this.saveTo.toJSON( meta ).uuid;
+
+	}
+
+	return data;
+
+};
+
+export { RTTNode };

examples/js/nodes/inputs/ReflectorNode.js

@@ -14,7 +14,7 @@ function ReflectorNode( mirror ) {
 
 	if ( mirror ) this.setMirror( mirror );
 
-};
+}
 
 ReflectorNode.prototype = Object.create( TempNode.prototype );
 ReflectorNode.prototype.constructor = ReflectorNode;
@@ -36,7 +36,7 @@ ReflectorNode.prototype.setMirror = function ( mirror ) {
 };
 
 ReflectorNode.prototype.generate = function ( builder, output ) {
-	
+
 	if ( builder.isShader( 'fragment' ) ) {
 
 		this.uvResult.a = this.offset;
@@ -61,9 +61,9 @@ ReflectorNode.prototype.generate = function ( builder, output ) {
 };
 
 ReflectorNode.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.scope.mirror = source.mirror;
 
 };

examples/js/nodes/inputs/ScreenNode.js

@@ -9,7 +9,7 @@ function ScreenNode( uv ) {
 
 	TextureNode.call( this, undefined, uv );
 
-};
+}
 
 ScreenNode.prototype = Object.create( TextureNode.prototype );
 ScreenNode.prototype.constructor = ScreenNode;

examples/js/nodes/inputs/TextureNode.js

@@ -3,8 +3,8 @@
  */
 
 import { InputNode } from '../core/InputNode.js';
-import { NodeBuilder } from '../core/NodeBuilder.js';
 import { UVNode } from '../accessors/UVNode.js';
+import { ColorSpaceNode } from '../utils/ColorSpaceNode.js';
 
 function TextureNode( value, uv, bias, project ) {
 
@@ -15,7 +15,7 @@ function TextureNode( value, uv, bias, project ) {
 	this.bias = bias;
 	this.project = project !== undefined ? project : false;
 
-};
+}
 
 TextureNode.prototype = Object.create( InputNode.prototype );
 TextureNode.prototype.constructor = TextureNode;
@@ -53,23 +53,30 @@ TextureNode.prototype.generate = function ( builder, output ) {
 	if ( bias ) code = method + '( ' + tex + ', ' + uv + ', ' + bias + ' )';
 	else code = method + '( ' + tex + ', ' + uv + ' )';
 
-	code = builder.getTexelDecodingFunctionFromTexture( code, this.value );
+	// add this context to replace ColorSpaceNode.input to code
+
+	builder.addContext( { input: code, encoding: builder.getTextureEncodingFromMap( this.value ), include: builder.isShader( 'vertex' ) } );
+
+	this.colorSpace = this.colorSpace || new ColorSpaceNode( this );
+	code = this.colorSpace.build( builder, this.type );
+
+	builder.removeContext();
 
 	return builder.format( code, this.type, output );
 
 };
 
 TextureNode.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	if ( source.value ) this.value = source.value;
 
 	this.uv = source.uv;
 
 	if ( source.bias ) this.bias = source.bias;
 	if ( source.project !== undefined ) this.project = source.project;
-	
+
 };
 
 TextureNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/Vector2Node.js

@@ -11,7 +11,7 @@ function Vector2Node( x, y ) {
 
 	this.value = x instanceof THREE.Vector2 ? x : new THREE.Vector2( x, y );
 
-};
+}
 
 Vector2Node.prototype = Object.create( InputNode.prototype );
 Vector2Node.prototype.constructor = Vector2Node;
@@ -26,9 +26,9 @@ Vector2Node.prototype.generateReadonly = function ( builder, output, uuid, type,
 };
 
 Vector2Node.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.value.copy( source );
 
 };

examples/js/nodes/inputs/Vector3Node.js

@@ -11,7 +11,7 @@ function Vector3Node( x, y, z ) {
 
 	this.value = x instanceof THREE.Vector3 ? x : new THREE.Vector3( x, y, z );
 
-};
+}
 
 Vector3Node.prototype = Object.create( InputNode.prototype );
 Vector3Node.prototype.constructor = Vector3Node;
@@ -26,11 +26,11 @@ Vector3Node.prototype.generateReadonly = function ( builder, output, uuid, type,
 };
 
 Vector3Node.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.value.copy( source );
-	
+
 };
 
 Vector3Node.prototype.toJSON = function ( meta ) {

examples/js/nodes/inputs/Vector4Node.js

@@ -11,7 +11,7 @@ function Vector4Node( x, y, z, w ) {
 
 	this.value = x instanceof THREE.Vector4 ? x : new THREE.Vector4( x, y, z, w );
 
-};
+}
 
 Vector4Node.prototype = Object.create( InputNode.prototype );
 Vector4Node.prototype.constructor = Vector4Node;
@@ -26,9 +26,9 @@ Vector4Node.prototype.generateReadonly = function ( builder, output, uuid, type,
 };
 
 Vector4Node.prototype.copy = function ( source ) {
-			
+
 	InputNode.prototype.copy.call( this, source );
-	
+
 	this.value.copy( source );
 
 };

examples/js/nodes/materials/MeshStandardNodeMaterial.js

@@ -14,7 +14,7 @@ function MeshStandardNodeMaterial() {
 
 	this.type = "MeshStandardNodeMaterial";
 
-};
+}
 
 MeshStandardNodeMaterial.prototype = Object.create( NodeMaterial.prototype );
 MeshStandardNodeMaterial.prototype.constructor = MeshStandardNodeMaterial;

examples/js/nodes/materials/NodeMaterial.js

@@ -6,21 +6,17 @@ import { NodeBuilder } from '../core/NodeBuilder.js';
 import { ColorNode } from '../inputs/ColorNode.js';
 import { PositionNode } from '../accessors/PositionNode.js';
 import { RawNode } from './nodes/RawNode.js';
- 
+
 function NodeMaterial( vertex, fragment ) {
 
 	THREE.ShaderMaterial.call( this );
 
-	// prevent code share conflict, remove in future
-	
-	this.defines.UUID = this.uuid;
-
 	this.vertex = vertex || new RawNode( new PositionNode( PositionNode.PROJECTION ) );
 	this.fragment = fragment || new RawNode( new ColorNode( 0xFF0000 ) );
 
 	this.updaters = [];
 
-};
+}
 
 NodeMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
 NodeMaterial.prototype.constructor = NodeMaterial;
@@ -31,13 +27,13 @@ NodeMaterial.prototype.isNodeMaterial = true;
 Object.defineProperties( NodeMaterial.prototype, {
 
 	properties: {
-		
+
 		get: function () {
 
 			return this.fragment.properties;
 
 		}
-		
+
 	}
 
 } );
@@ -71,47 +67,47 @@ NodeMaterial.prototype.build = function ( params ) {
 	params = params || {};
 
 	var builder = params.builder || new NodeBuilder();
-	
+
 	builder.setMaterial( this, params.renderer );
 	builder.build( this.vertex, this.fragment );
-	
-	this.vertexShader = builder.getCode('vertex');
-	this.fragmentShader = builder.getCode('fragment');
-	
+
+	this.vertexShader = builder.getCode( 'vertex' );
+	this.fragmentShader = builder.getCode( 'fragment' );
+
 	this.defines = builder.defines;
 	this.uniforms = builder.uniforms;
 	this.extensions = builder.extensions;
 	this.updaters = builder.updaters;
-	
+
 	this.fog = builder.requires.fog;
 	this.lights = builder.requires.lights;
 
 	this.transparent = builder.requires.transparent || this.blending > THREE.NormalBlending;
 
 	this.needsUpdate = false;
-	
+
 	return this;
 
 };
 
 NodeMaterial.prototype.copy = function ( source ) {
-	
+
 	var uuid = this.uuid;
-	
-	for (var name in source) {
-		
-		this[name] = source[name];
-		
+
+	for ( var name in source ) {
+
+		this[ name ] = source[ name ];
+
 	}
-	
+
 	this.uuid = uuid;
-	
-	if ( source.userData !== undefined) {
-		
+
+	if ( source.userData !== undefined ) {
+
 		this.userData = JSON.parse( JSON.stringify( source.userData ) );
-		
+
 	}
-	
+
 };
 
 NodeMaterial.prototype.toJSON = function ( meta ) {
@@ -157,7 +153,7 @@ NodeMaterial.prototype.toJSON = function ( meta ) {
 		if ( this.scale !== undefined ) data.scale = this.scale;
 
 		if ( this.dithering === true ) data.dithering = true;
-		
+
 		if ( this.wireframe === true ) data.wireframe = this.wireframe;
 		if ( this.wireframeLinewidth > 1 ) data.wireframeLinewidth = this.wireframeLinewidth;
 		if ( this.wireframeLinecap !== 'round' ) data.wireframeLinecap = this.wireframeLinecap;
@@ -165,7 +161,7 @@ NodeMaterial.prototype.toJSON = function ( meta ) {
 
 		if ( this.alphaTest > 0 ) data.alphaTest = this.alphaTest;
 		if ( this.premultipliedAlpha === true ) data.premultipliedAlpha = this.premultipliedAlpha;
-		
+
 		if ( this.morphTargets === true ) data.morphTargets = true;
 		if ( this.skinning === true ) data.skinning = true;
 
@@ -174,7 +170,7 @@ NodeMaterial.prototype.toJSON = function ( meta ) {
 
 		data.fog = this.fog;
 		data.lights = this.lights;
-		
+
 		data.vertex = this.vertex.toJSON( meta ).uuid;
 		data.fragment = this.fragment.toJSON( meta ).uuid;
 

examples/js/nodes/materials/PhongNodeMaterial.js

@@ -14,25 +14,25 @@ function PhongNodeMaterial() {
 
 	this.type = "PhongNodeMaterial";
 
-};
+}
 
 PhongNodeMaterial.prototype = Object.create( NodeMaterial.prototype );
 PhongNodeMaterial.prototype.constructor = PhongNodeMaterial;
 
-NodeUtils.addShortcuts( PhongNodeMaterial.prototype, 'fragment', [ 
-	'color', 
-	'alpha', 
-	'specular', 
-	'shininess', 
-	'normal', 
-	'emissive', 
-	'ambient', 
-	'light', 
-	'shadow', 
-	'ao', 
-	'environment', 
+NodeUtils.addShortcuts( PhongNodeMaterial.prototype, 'fragment', [
+	'color',
+	'alpha',
+	'specular',
+	'shininess',
+	'normal',
+	'emissive',
+	'ambient',
+	'light',
+	'shadow',
+	'ao',
+	'environment',
 	'environmentAlpha',
-	'transform' 
+	'position'
 ] );
 
 export { PhongNodeMaterial };

examples/js/nodes/materials/SpriteNodeMaterial.js

@@ -14,16 +14,16 @@ function SpriteNodeMaterial() {
 
 	this.type = "SpriteNodeMaterial";
 
-};
+}
 
 SpriteNodeMaterial.prototype = Object.create( NodeMaterial.prototype );
 SpriteNodeMaterial.prototype.constructor = SpriteNodeMaterial;
 
-NodeUtils.addShortcuts( SpriteNodeMaterial.prototype, 'fragment', [ 
-	'color', 
-	'alpha', 
-	'transform', 
-	'spherical' 
+NodeUtils.addShortcuts( SpriteNodeMaterial.prototype, 'fragment', [
+	'color',
+	'alpha',
+	'position',
+	'spherical'
 ] );
 
 export { SpriteNodeMaterial };

examples/js/nodes/materials/StandardNodeMaterial.js

@@ -14,27 +14,27 @@ function StandardNodeMaterial() {
 
 	this.type = "StandardNodeMaterial";
 
-};
+}
 
 StandardNodeMaterial.prototype = Object.create( NodeMaterial.prototype );
 StandardNodeMaterial.prototype.constructor = StandardNodeMaterial;
 
-NodeUtils.addShortcuts( StandardNodeMaterial.prototype, 'fragment', [ 
-	'color', 
-	'alpha', 
-	'roughness', 
-	'metalness', 
-	'reflectivity', 
-	'clearCoat', 
-	'clearCoatRoughness', 
-	'normal', 
-	'emissive', 
-	'ambient', 
-	'light', 
-	'shadow', 
-	'ao', 
-	'environment', 
-	'transform' 
+NodeUtils.addShortcuts( StandardNodeMaterial.prototype, 'fragment', [
+	'color',
+	'alpha',
+	'roughness',
+	'metalness',
+	'reflectivity',
+	'clearCoat',
+	'clearCoatRoughness',
+	'normal',
+	'emissive',
+	'ambient',
+	'light',
+	'shadow',
+	'ao',
+	'environment',
+	'position'
 ] );
 
 export { StandardNodeMaterial };

examples/js/nodes/materials/nodes/MeshStandardNode.js

@@ -18,7 +18,7 @@ function MeshStandardNode() {
 		metalness: 0.5,
 		normalScale: new THREE.Vector2( 1, 1 )
 	};
-	
+
 	this.inputs = {
 		color: new PropertyNode( this.properties, 'color', 'c' ),
 		roughness: new PropertyNode( this.properties, 'roughness', 'f' ),
@@ -26,7 +26,7 @@ function MeshStandardNode() {
 		normalScale: new PropertyNode( this.properties, 'normalScale', 'v2' )
 	};
 
-};
+}
 
 MeshStandardNode.prototype = Object.create( StandardNode.prototype );
 MeshStandardNode.prototype.constructor = MeshStandardNode;
@@ -37,53 +37,57 @@ MeshStandardNode.prototype.build = function ( builder ) {
 	var props = this.properties,
 		inputs = this.inputs;
 
-	if ( builder.isShader('fragment') ) {
-		
+	if ( builder.isShader( 'fragment' ) ) {
+
 		// slots
 		// * color
 		// * map
-		
+
 		var color = builder.findNode( props.color, inputs.color ),
 			map = builder.resolve( props.map );
-		
+
 		this.color = map ? new OperatorNode( color, map, OperatorNode.MUL ) : color;
-		
+
 		// slots
 		// * roughness
 		// * roughnessMap
-		
+
 		var roughness = builder.findNode( props.roughness, inputs.roughness ),
 			roughnessMap = builder.resolve( props.roughnessMap );
-		
+
 		this.roughness = roughnessMap ? new OperatorNode( roughness, new SwitchNode( roughnessMap, "g" ), OperatorNode.MUL ) : roughness;
-		
+
 		// slots
 		// * metalness
 		// * metalnessMap
-		
+
 		var metalness = builder.findNode( props.metalness, inputs.metalness ),
 			metalnessMap = builder.resolve( props.metalnessMap );
-		
+
 		this.metalness = metalnessMap ? new OperatorNode( metalness, new SwitchNode( metalnessMap, "b" ), OperatorNode.MUL ) : metalness;
 
 		// slots
 		// * normalMap
 		// * normalScale
-		
+
 		if ( props.normalMap ) {
-			
+
 			this.normal = new NormalMapNode( builder.resolve( props.normalMap ) );
-			this.normal.scale = builder.findNode( props.normalScale, inputs.normalScale )
+			this.normal.scale = builder.findNode( props.normalScale, inputs.normalScale );
+
+		} else {
+
+			this.normal = undefined;
 
 		}
 
 		// slots
 		// * envMap
-		
+
 		this.environment = builder.resolve( props.envMap );
-		
+
 	}
-	
+
 	// build code
 
 	return StandardNode.prototype.build.call( this, builder );
@@ -97,9 +101,9 @@ MeshStandardNode.prototype.toJSON = function ( meta ) {
 	if ( ! data ) {
 
 		data = this.createJSONNode( meta );
-		
-		console.warn(".toJSON not implemented in", this);
-		
+
+		console.warn( ".toJSON not implemented in", this );
+
 	}
 
 	return data;

examples/js/nodes/materials/nodes/PhongNode.js

@@ -2,21 +2,21 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from '../../core/GLNode.js';
+import { Node } from '../../core/Node.js';
 import { ColorNode } from '../../inputs/ColorNode.js';
 import { FloatNode } from '../../inputs/FloatNode.js';
- 
+
 function PhongNode() {
 
-	GLNode.call( this );
+	Node.call( this );
 
 	this.color = new ColorNode( 0xEEEEEE );
 	this.specular = new ColorNode( 0x111111 );
 	this.shininess = new FloatNode( 30 );
 
-};
+}
 
-PhongNode.prototype = Object.create( GLNode.prototype );
+PhongNode.prototype = Object.create( Node.prototype );
 PhongNode.prototype.constructor = PhongNode;
 PhongNode.prototype.nodeType = "Phong";
 
@@ -25,18 +25,17 @@ PhongNode.prototype.build = function ( builder ) {
 	var code;
 
 	builder.define( 'PHONG' );
-	builder.define( 'ALPHATEST', '0.0' );
 
 	builder.requires.lights = true;
 
 	if ( builder.isShader( 'vertex' ) ) {
 
-		var transform = this.transform ? this.transform.parseAndBuildCode( builder, 'v3', { cache: 'transform' } ) : undefined;
+		var position = this.position ? this.position.parseAndBuildCode( builder, 'v3', { cache: 'position' } ) : undefined;
 
 		builder.mergeUniform( THREE.UniformsUtils.merge( [
 
-			THREE.UniformsLib[ "fog" ],
-			THREE.UniformsLib[ "lights" ]
+			THREE.UniformsLib.fog,
+			THREE.UniformsLib.lights
 
 		] ) );
 
@@ -49,13 +48,13 @@ PhongNode.prototype.build = function ( builder ) {
 
 			"#endif",
 
-			"#include <common>",
-			"#include <encodings_pars_fragment>", // encoding functions
+			//"#include <encodings_pars_fragment>", // encoding functions
 			"#include <fog_pars_vertex>",
 			"#include <morphtarget_pars_vertex>",
 			"#include <skinning_pars_vertex>",
 			"#include <shadowmap_pars_vertex>",
-			"#include <logdepthbuf_pars_vertex>"
+			"#include <logdepthbuf_pars_vertex>",
+			"#include <clipping_planes_pars_vertex>"
 		].join( "\n" ) );
 
 		var output = [
@@ -65,7 +64,7 @@ PhongNode.prototype.build = function ( builder ) {
 			"#include <skinnormal_vertex>",
 			"#include <defaultnormal_vertex>",
 
-			"#ifndef FLAT_SHADED", // Normal computed with derivatives when FLAT_SHADED
+			"#ifndef FLAT_SHADED", // normal computed with derivatives when FLAT_SHADED
 
 			"	vNormal = normalize( transformedNormal );",
 
@@ -74,11 +73,11 @@ PhongNode.prototype.build = function ( builder ) {
 			"#include <begin_vertex>"
 		];
 
-		if ( transform ) {
+		if ( position ) {
 
 			output.push(
-				transform.code,
-				transform.result ? "transformed = " + transform.result + ";" : ''
+				position.code,
+				position.result ? "transformed = " + position.result + ";" : ''
 			);
 
 		}
@@ -89,11 +88,13 @@ PhongNode.prototype.build = function ( builder ) {
 			"	#include <project_vertex>",
 			"	#include <fog_vertex>",
 			"	#include <logdepthbuf_vertex>",
+			"	#include <clipping_planes_vertex>",
 
 			"	vViewPosition = - mvPosition.xyz;",
 
 			"	#include <worldpos_vertex>",
-			"	#include <shadowmap_vertex>"
+			"	#include <shadowmap_vertex>",
+			"	#include <fog_vertex>"
 		);
 
 		code = output.join( "\n" );
@@ -109,7 +110,6 @@ PhongNode.prototype.build = function ( builder ) {
 		if ( this.alpha ) this.alpha.parse( builder );
 
 		if ( this.normal ) this.normal.parse( builder );
-		if ( this.normalScale && this.normal ) this.normalScale.parse( builder );
 
 		if ( this.light ) this.light.parse( builder, { cache: 'light' } );
 
@@ -130,7 +130,6 @@ PhongNode.prototype.build = function ( builder ) {
 		var alpha = this.alpha ? this.alpha.buildCode( builder, 'f' ) : undefined;
 
 		var normal = this.normal ? this.normal.buildCode( builder, 'v3' ) : undefined;
-		var normalScale = this.normalScale && this.normal ? this.normalScale.buildCode( builder, 'v2' ) : undefined;
 
 		var light = this.light ? this.light.buildCode( builder, 'v3', { cache: 'light' } ) : undefined;
 
@@ -145,7 +144,6 @@ PhongNode.prototype.build = function ( builder ) {
 		builder.requires.transparent = alpha != undefined;
 
 		builder.addParsCode( [
-			"#include <common>",
 			"#include <fog_pars_fragment>",
 			"#include <bsdfs>",
 			"#include <lights_pars_begin>",
@@ -180,7 +178,11 @@ PhongNode.prototype.build = function ( builder ) {
 
 			output.push(
 				alpha.code,
-				'if ( ' + alpha.result + ' <= ALPHATEST ) discard;'
+				'#ifdef ALPHATEST',
+
+				'if ( ' + alpha.result + ' <= ALPHATEST ) discard;',
+
+				'#endif'
 			);
 
 		}
@@ -191,7 +193,7 @@ PhongNode.prototype.build = function ( builder ) {
 				normal.code,
 				'normal = ' + normal.result + ';'
 			);
-		
+
 		}
 
 		// optimization for now
@@ -281,19 +283,19 @@ PhongNode.prototype.build = function ( builder ) {
 			}
 
 		}
-/*
+		/*
 		switch( builder.material.combine ) {
 
 			case THREE.ENVMAP_BLENDING_MULTIPLY:
-				
+
 				//output.push( "vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular;" );
 				//outgoingLight = mix( outgoingLight, outgoingLight * envColor.xyz, specularStrength * reflectivity );
-				
+
 				break;
-			
-			
+
+
 		}
-	*/	
+	*/
 		if ( alpha ) {
 
 			output.push( "gl_FragColor = vec4( outgoingLight, " + alpha.result + " );" );
@@ -320,12 +322,12 @@ PhongNode.prototype.build = function ( builder ) {
 };
 
 PhongNode.prototype.copy = function ( source ) {
-			
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	// vertex
 
-	if ( source.transform ) this.transform = source.transform;
+	if ( source.position ) this.position = source.position;
 
 	// fragment
 
@@ -341,7 +343,7 @@ PhongNode.prototype.copy = function ( source ) {
 	if ( source.shadow ) this.shadow = source.shadow;
 
 	if ( source.ao ) this.ao = source.ao;
-	
+
 	if ( source.emissive ) this.emissive = source.emissive;
 	if ( source.ambient ) this.ambient = source.ambient;
 
@@ -360,7 +362,7 @@ PhongNode.prototype.toJSON = function ( meta ) {
 
 		// vertex
 
-		if ( this.transform ) data.transform = this.transform.toJSON( meta ).uuid;
+		if ( this.position ) data.position = this.position.toJSON( meta ).uuid;
 
 		// fragment
 

examples/js/nodes/materials/nodes/RawNode.js

@@ -2,17 +2,17 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from '../../core/GLNode.js';
+import { Node } from '../../core/Node.js';
 
 function RawNode( value ) {
 
-	GLNode.call( this, 'v4' );
+	Node.call( this, 'v4' );
 
 	this.value = value;
 
-};
+}
 
-RawNode.prototype = Object.create( GLNode.prototype );
+RawNode.prototype = Object.create( Node.prototype );
 RawNode.prototype.constructor = RawNode;
 RawNode.prototype.nodeType = "Raw";
 
@@ -36,11 +36,11 @@ RawNode.prototype.generate = function ( builder ) {
 };
 
 RawNode.prototype.copy = function ( source ) {
-	
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	this.value = source.value;
-	
+
 };
 
 RawNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/materials/nodes/SpriteNode.js

@@ -2,19 +2,19 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from '../../core/GLNode.js';
+import { Node } from '../../core/Node.js';
 import { ColorNode } from '../../inputs/ColorNode.js';
 
 function SpriteNode() {
 
-	GLNode.call( this );
+	Node.call( this );
 
 	this.color = new ColorNode( 0xEEEEEE );
 	this.spherical = true;
 
-};
+}
 
-SpriteNode.prototype = Object.create( GLNode.prototype );
+SpriteNode.prototype = Object.create( Node.prototype );
 SpriteNode.prototype.constructor = SpriteNode;
 SpriteNode.prototype.nodeType = "Sprite";
 
@@ -25,29 +25,32 @@ SpriteNode.prototype.build = function ( builder ) {
 	builder.define( 'SPRITE' );
 
 	builder.requires.lights = false;
-	builder.requires.transparent = this.alpha != undefined;
+	builder.requires.transparent = this.alpha !== undefined;
 
 	if ( builder.isShader( 'vertex' ) ) {
 
-		var transform = this.transform ? this.transform.parseAndBuildCode( builder, 'v3', { cache: 'transform' } ) : undefined;
+		var position = this.position ? this.position.parseAndBuildCode( builder, 'v3', { cache: 'position' } ) : undefined;
 
 		builder.mergeUniform( THREE.UniformsUtils.merge( [
-			THREE.UniformsLib[ "fog" ]
+			THREE.UniformsLib.fog
 		] ) );
 
 		builder.addParsCode( [
-			"#include <fog_pars_vertex>"
+			"#include <fog_pars_vertex>",
+			"#include <logdepthbuf_pars_vertex>",
+			"#include <clipping_planes_pars_vertex>"
 		].join( "\n" ) );
 
 		output = [
+			"#include <clipping_planes_fragment>",
 			"#include <begin_vertex>"
 		];
 
-		if ( transform ) {
+		if ( position ) {
 
 			output.push(
-				transform.code,
-				transform.result ? "transformed = " + transform.result + ";" : ''
+				position.code,
+				position.result ? "transformed = " + position.result + ";" : ''
 			);
 
 		}
@@ -98,43 +101,64 @@ SpriteNode.prototype.build = function ( builder ) {
 			'modelViewMtx[2][1] = 0.0;',
 			'modelViewMtx[2][2] = 1.0;',
 
-			// apply
-			'gl_Position = projectionMatrix * modelViewMtx * modelMtx * vec4( transformed, 1.0 );'
+			"gl_Position = projectionMatrix * modelViewMtx * modelMtx * vec4( transformed, 1.0 );",
+
+			"#include <logdepthbuf_vertex>",
+			"#include <clipping_planes_vertex>",
+			"#include <fog_vertex>"
 		);
 
 	} else {
 
 		builder.addParsCode( [
 			"#include <fog_pars_fragment>",
+			"#include <logdepthbuf_pars_fragment>",
+			"#include <clipping_planes_pars_fragment>"
 		].join( "\n" ) );
 
-		// parse all nodes to reuse generate codes
+		builder.addCode( [
+			"#include <clipping_planes_fragment>",
+			"#include <logdepthbuf_fragment>"
+		].join( "\n" ) );
 
-		this.color.parse( builder, { slot: 'color' } );
+		// parse all nodes to reuse generate codes
 
 		if ( this.alpha ) this.alpha.parse( builder );
 
-		// build code
+		this.color.parse( builder, { slot: 'color' } );
 
-		var color = this.color.buildCode( builder, 'c', { slot: 'color' } );
-		var alpha = this.alpha ? this.alpha.buildCode( builder, 'f' ) : undefined;
+		// build code
 
-		output = [ color.code ];
+		var alpha = this.alpha ? this.alpha.buildCode( builder, 'f' ) : undefined,
+			color = this.color.buildCode( builder, 'c', { slot: 'color' } );
 
 		if ( alpha ) {
 
-			output.push(
+			output = [
 				alpha.code,
+				'#ifdef ALPHATEST',
+
+				'if ( ' + alpha.result + ' <= ALPHATEST ) discard;',
+
+				'#endif',
+				color.code,
 				"gl_FragColor = vec4( " + color.result + ", " + alpha.result + " );"
-			);
+			];
 
 		} else {
 
-			output.push( "gl_FragColor = vec4( " + color.result + ", 1.0 );" );
+			output = [
+				color.code,
+				"gl_FragColor = vec4( " + color.result + ", 1.0 );"
+			];
 
 		}
 
-		output.push( "#include <fog_fragment>" );
+		output.push(
+			"#include <tonemapping_fragment>",
+			"#include <encodings_fragment>",
+			"#include <fog_fragment>"
+		);
 
 	}
 
@@ -143,19 +167,19 @@ SpriteNode.prototype.build = function ( builder ) {
 };
 
 SpriteNode.prototype.copy = function ( source ) {
-			
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	// vertex
-	
-	if ( source.transform ) this.transform = source.transform;
-	
+
+	if ( source.position ) this.position = source.position;
+
 	// fragment
-	
+
 	this.color = source.color;
-	
-	if ( source.spherical !== undefined ) this.spherical = source.transform;
-	
+
+	if ( source.spherical !== undefined ) this.spherical = source.spherical;
+
 	if ( source.alpha ) this.alpha = source.alpha;
 
 };
@@ -170,12 +194,12 @@ SpriteNode.prototype.toJSON = function ( meta ) {
 
 		// vertex
 
-		if ( this.transform ) data.transform = this.transform.toJSON( meta ).uuid;
+		if ( this.position ) data.position = this.position.toJSON( meta ).uuid;
 
 		// fragment
 
 		data.color = this.color.toJSON( meta ).uuid;
-		
+
 		if ( this.spherical === false ) data.spherical = false;
 
 		if ( this.alpha ) data.alpha = this.alpha.toJSON( meta ).uuid;

examples/js/nodes/materials/nodes/StandardNode.js

@@ -2,22 +2,22 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from '../../core/GLNode.js';
+import { Node } from '../../core/Node.js';
 import { ColorNode } from '../../inputs/ColorNode.js';
 import { FloatNode } from '../../inputs/FloatNode.js';
 import { RoughnessToBlinnExponentNode } from '../../bsdfs/RoughnessToBlinnExponentNode.js';
- 
+
 function StandardNode() {
 
-	GLNode.call( this );
+	Node.call( this );
 
 	this.color = new ColorNode( 0xEEEEEE );
 	this.roughness = new FloatNode( 0.5 );
 	this.metalness = new FloatNode( 0.5 );
 
-};
+}
 
-StandardNode.prototype = Object.create( GLNode.prototype );
+StandardNode.prototype = Object.create( Node.prototype );
 StandardNode.prototype.constructor = StandardNode;
 StandardNode.prototype.nodeType = "Standard";
 
@@ -26,7 +26,6 @@ StandardNode.prototype.build = function ( builder ) {
 	var code;
 
 	builder.define( this.clearCoat || this.clearCoatRoughness ? 'PHYSICAL' : 'STANDARD' );
-	builder.define( 'ALPHATEST', '0.0' );
 
 	builder.requires.lights = true;
 
@@ -34,12 +33,12 @@ StandardNode.prototype.build = function ( builder ) {
 
 	if ( builder.isShader( 'vertex' ) ) {
 
-		var transform = this.transform ? this.transform.parseAndBuildCode( builder, 'v3', { cache: 'transform' } ) : undefined;
+		var position = this.position ? this.position.parseAndBuildCode( builder, 'v3', { cache: 'position' } ) : undefined;
 
 		builder.mergeUniform( THREE.UniformsUtils.merge( [
 
-			THREE.UniformsLib[ "fog" ],
-			THREE.UniformsLib[ "lights" ]
+			THREE.UniformsLib.fog,
+			THREE.UniformsLib.lights
 
 		] ) );
 
@@ -52,13 +51,13 @@ StandardNode.prototype.build = function ( builder ) {
 
 			"#endif",
 
-			"#include <common>",
-			"#include <encodings_pars_fragment>", // encoding functions
+			//"#include <encodings_pars_fragment>", // encoding functions
 			"#include <fog_pars_vertex>",
 			"#include <morphtarget_pars_vertex>",
 			"#include <skinning_pars_vertex>",
 			"#include <shadowmap_pars_vertex>",
-			"#include <logdepthbuf_pars_vertex>"
+			"#include <logdepthbuf_pars_vertex>",
+			"#include <clipping_planes_pars_vertex>"
 
 		].join( "\n" ) );
 
@@ -68,9 +67,6 @@ StandardNode.prototype.build = function ( builder ) {
 			"#include <skinbase_vertex>",
 			"#include <skinnormal_vertex>",
 			"#include <defaultnormal_vertex>",
-			"#include <logdepthbuf_pars_vertex>",
-			"#include <logdepthbuf_pars_vertex>",
-			"#include <logdepthbuf_pars_vertex>",
 
 			"#ifndef FLAT_SHADED", // Normal computed with derivatives when FLAT_SHADED
 
@@ -81,11 +77,11 @@ StandardNode.prototype.build = function ( builder ) {
 			"#include <begin_vertex>"
 		];
 
-		if ( transform ) {
+		if ( position ) {
 
 			output.push(
-				transform.code,
-				transform.result ? "transformed = " + transform.result + ";" : ''
+				position.code,
+				position.result ? "transformed = " + position.result + ";" : ''
 			);
 
 		}
@@ -96,6 +92,7 @@ StandardNode.prototype.build = function ( builder ) {
 			"#include <project_vertex>",
 			"#include <fog_vertex>",
 			"#include <logdepthbuf_vertex>",
+			"#include <clipping_planes_vertex>",
 
 			"	vViewPosition = - mvPosition.xyz;",
 
@@ -127,7 +124,6 @@ StandardNode.prototype.build = function ( builder ) {
 		if ( this.alpha ) this.alpha.parse( builder );
 
 		if ( this.normal ) this.normal.parse( builder );
-		if ( this.normalScale && this.normal ) this.normalScale.parse( builder );
 
 		if ( this.clearCoat ) this.clearCoat.parse( builder );
 		if ( this.clearCoatRoughness ) this.clearCoatRoughness.parse( builder );
@@ -152,7 +148,6 @@ StandardNode.prototype.build = function ( builder ) {
 		var alpha = this.alpha ? this.alpha.buildCode( builder, 'f' ) : undefined;
 
 		var normal = this.normal ? this.normal.buildCode( builder, 'v3' ) : undefined;
-		var normalScale = this.normalScale && this.normal ? this.normalScale.buildCode( builder, 'v2' ) : undefined;
 
 		var clearCoat = this.clearCoat ? this.clearCoat.buildCode( builder, 'f' ) : undefined;
 		var clearCoatRoughness = this.clearCoatRoughness ? this.clearCoatRoughness.buildCode( builder, 'f' ) : undefined;
@@ -182,7 +177,7 @@ StandardNode.prototype.build = function ( builder ) {
 
 			"#endif",
 
-			"#include <common>",
+			"#include <dithering_pars_fragment>",
 			"#include <fog_pars_fragment>",
 			"#include <bsdfs>",
 			"#include <lights_pars_begin>",
@@ -193,10 +188,12 @@ StandardNode.prototype.build = function ( builder ) {
 		].join( "\n" ) );
 
 		var output = [
-			// prevent undeclared normal
+			"#include <clipping_planes_fragment>",
+
+			// add before: prevent undeclared normal
 			"	#include <normal_fragment_begin>",
 
-			// prevent undeclared material
+			// add before: prevent undeclared material
 			"	PhysicalMaterial material;",
 			"	material.diffuseColor = vec3( 1.0 );",
 
@@ -217,7 +214,11 @@ StandardNode.prototype.build = function ( builder ) {
 
 			output.push(
 				alpha.code,
-				'if ( ' + alpha.result + ' <= ALPHATEST ) discard;'
+				'#ifdef ALPHATEST',
+
+				'if ( ' + alpha.result + ' <= ALPHATEST ) discard;',
+
+				'#endif'
 			);
 
 		}
@@ -228,7 +229,7 @@ StandardNode.prototype.build = function ( builder ) {
 				normal.code,
 				'normal = ' + normal.result + ';'
 			);
-		
+
 		}
 
 		// optimization for now
@@ -356,7 +357,7 @@ StandardNode.prototype.build = function ( builder ) {
 			output.push( "radiance += " + environment.result + ";" );
 
 		}
-		
+
 		output.push(
 			"#include <lights_fragment_end>"
 		);
@@ -374,7 +375,6 @@ StandardNode.prototype.build = function ( builder ) {
 		}
 
 		output.push(
-			"#include <premultiplied_alpha_fragment>",
 			"#include <tonemapping_fragment>",
 			"#include <encodings_fragment>",
 			"#include <fog_fragment>",
@@ -391,12 +391,12 @@ StandardNode.prototype.build = function ( builder ) {
 };
 
 StandardNode.prototype.copy = function ( source ) {
-			
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	// vertex
 
-	if ( source.transform ) this.transform = source.transform;
+	if ( source.position ) this.position = source.position;
 
 	// fragment
 
@@ -417,7 +417,7 @@ StandardNode.prototype.copy = function ( source ) {
 	if ( source.shadow ) this.shadow = source.shadow;
 
 	if ( source.ao ) this.ao = source.ao;
-	
+
 	if ( source.emissive ) this.emissive = source.emissive;
 	if ( source.ambient ) this.ambient = source.ambient;
 
@@ -435,7 +435,7 @@ StandardNode.prototype.toJSON = function ( meta ) {
 
 		// vertex
 
-		if ( this.transform ) data.transform = this.transform.toJSON( meta ).uuid;
+		if ( this.position ) data.position = this.position.toJSON( meta ).uuid;
 
 		// fragment
 
@@ -456,7 +456,7 @@ StandardNode.prototype.toJSON = function ( meta ) {
 		if ( this.shadow ) data.shadow = this.shadow.toJSON( meta ).uuid;
 
 		if ( this.ao ) data.ao = this.ao.toJSON( meta ).uuid;
-		
+
 		if ( this.emissive ) data.emissive = this.emissive.toJSON( meta ).uuid;
 		if ( this.ambient ) data.ambient = this.ambient.toJSON( meta ).uuid;
 

examples/js/nodes/math/CondNode.js

@@ -0,0 +1,107 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+import { TempNode } from '../core/TempNode.js';
+
+function CondNode( a, b, ifNode, elseNode, op ) {
+
+	TempNode.call( this );
+
+	this.a = a;
+	this.b = b;
+
+	this.ifNode = ifNode;
+	this.elseNode = elseNode;
+
+	this.op = op;
+
+}
+
+CondNode.EQUAL = '==';
+CondNode.NOT_EQUAL = '!=';
+CondNode.GREATER = '>';
+CondNode.GREATER_EQUAL = '>=';
+CondNode.LESS = '<';
+CondNode.LESS_EQUAL = '<=';
+
+CondNode.prototype = Object.create( TempNode.prototype );
+CondNode.prototype.constructor = CondNode;
+CondNode.prototype.nodeType = "Cond";
+
+CondNode.prototype.getType = function ( builder ) {
+
+	if ( builder.getTypeLength( this.elseNode.getType( builder ) ) > builder.getTypeLength( this.ifNode.getType( builder ) ) ) {
+
+		return this.elseNode.getType( builder );
+
+	}
+
+	return this.ifNode.getType( builder );
+
+};
+
+CondNode.prototype.getCondType = function ( builder ) {
+
+	if ( builder.getTypeLength( this.b.getType( builder ) ) > builder.getTypeLength( this.a.getType( builder ) ) ) {
+
+		return this.b.getType( builder );
+
+	}
+
+	return this.a.getType( builder );
+
+};
+
+CondNode.prototype.generate = function ( builder, output ) {
+
+	var type = this.getType( builder ),
+		condType = this.getCondType( builder ),
+		a = this.a.build( builder, condType ),
+		b = this.b.build( builder, condType ),
+		ifNode = this.ifNode.build( builder, type ),
+		elseNode = this.elseNode.build( builder, type );
+
+	var code = '( ' + [ a, this.op, b, '?', ifNode, ':', elseNode ].join( ' ' ) + ' )';
+
+	return builder.format( code, this.getType( builder ), output );
+
+};
+
+CondNode.prototype.copy = function ( source ) {
+
+	TempNode.prototype.copy.call( this, source );
+
+	this.a = source.a;
+	this.b = source.b;
+
+	this.ifNode = source.ifNode;
+	this.elseNode = source.elseNode;
+
+	this.op = source.op;
+
+};
+
+CondNode.prototype.toJSON = function ( meta ) {
+
+	var data = this.getJSONNode( meta );
+
+	if ( ! data ) {
+
+		data = this.createJSONNode( meta );
+
+		data.a = this.a.toJSON( meta ).uuid;
+		data.b = this.b.toJSON( meta ).uuid;
+
+		data.ifNode = this.ifNode.toJSON( meta ).uuid;
+		data.elseNode = this.elseNode.toJSON( meta ).uuid;
+
+		data.op = this.op;
+
+	}
+
+	return data;
+
+};
+
+export { CondNode };

examples/js/nodes/math/Math1Node.js

@@ -10,9 +10,9 @@ function Math1Node( a, method ) {
 
 	this.a = a;
 
-	this.method = method || Math1Node.SIN;
+	this.method = method;
 
-};
+}
 
 Math1Node.RAD = 'radians';
 Math1Node.DEG = 'degrees';
@@ -48,7 +48,7 @@ Math1Node.prototype.getType = function ( builder ) {
 	switch ( this.method ) {
 
 		case Math1Node.LENGTH:
-		
+
 			return 'f';
 
 	}
@@ -65,21 +65,21 @@ Math1Node.prototype.generate = function ( builder, output ) {
 	switch ( this.method ) {
 
 		case Math1Node.NEGATE:
-		
+
 			result = '( -' + result + ' )';
-			
+
 			break;
 
 		case Math1Node.INVERT:
-		
+
 			result = '( 1.0 - ' + result + ' )';
-			
+
 			break;
 
 		default:
-		
+
 			result = this.method + '( ' + result + ' )';
-			
+
 			break;
 
 	}
@@ -89,12 +89,12 @@ Math1Node.prototype.generate = function ( builder, output ) {
 };
 
 Math1Node.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.a = source.a;
 	this.method = source.method;
-	
+
 };
 
 Math1Node.prototype.toJSON = function ( meta ) {

examples/js/nodes/math/Math2Node.js

@@ -1,7 +1,7 @@
 /**
  * @author sunag / http://www.sunag.com.br/
  */
- 
+
 import { TempNode } from '../core/TempNode.js';
 
 function Math2Node( a, b, method ) {
@@ -11,9 +11,9 @@ function Math2Node( a, b, method ) {
 	this.a = a;
 	this.b = b;
 
-	this.method = method || Math2Node.DISTANCE;
+	this.method = method;
 
-};
+}
 
 Math2Node.MIN = 'min';
 Math2Node.MAX = 'max';
@@ -32,7 +32,7 @@ Math2Node.prototype.nodeType = "Math2";
 Math2Node.prototype.getInputType = function ( builder ) {
 
 	// use the greater length vector
-	
+
 	if ( builder.getTypeLength( this.b.getType( builder ) ) > builder.getTypeLength( this.a.getType( builder ) ) ) {
 
 		return this.b.getType( builder );
@@ -49,11 +49,11 @@ Math2Node.prototype.getType = function ( builder ) {
 
 		case Math2Node.DISTANCE:
 		case Math2Node.DOT:
-		
+
 			return 'f';
 
 		case Math2Node.CROSS:
-		
+
 			return 'v3';
 
 	}
@@ -64,43 +64,43 @@ Math2Node.prototype.getType = function ( builder ) {
 
 Math2Node.prototype.generate = function ( builder, output ) {
 
-	var a, b, 
+	var a, b,
 		type = this.getInputType( builder ),
 		al = builder.getTypeLength( this.a.getType( builder ) ),
 		bl = builder.getTypeLength( this.b.getType( builder ) );
-		
+
 	// optimzer
 
 	switch ( this.method ) {
 
 		case Math2Node.CROSS:
-		
+
 			a = this.a.build( builder, 'v3' );
 			b = this.b.build( builder, 'v3' );
-			
+
 			break;
 
 		case Math2Node.STEP:
-		
+
 			a = this.a.build( builder, al === 1 ? 'f' : type );
 			b = this.b.build( builder, type );
-			
+
 			break;
 
 		case Math2Node.MIN:
 		case Math2Node.MAX:
 		case Math2Node.MOD:
-		
+
 			a = this.a.build( builder, type );
 			b = this.b.build( builder, bl === 1 ? 'f' : type );
-			
+
 			break;
 
 		default:
-		
+
 			a = this.a.build( builder, type );
 			b = this.b.build( builder, type );
-			
+
 			break;
 
 	}
@@ -110,13 +110,13 @@ Math2Node.prototype.generate = function ( builder, output ) {
 };
 
 Math2Node.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.a = source.a;
 	this.b = source.b;
 	this.method = source.method;
-	
+
 };
 
 Math2Node.prototype.toJSON = function ( meta ) {

examples/js/nodes/math/Math3Node.js

@@ -1,7 +1,7 @@
 /**
  * @author sunag / http://www.sunag.com.br/
  */
- 
+
 import { TempNode } from '../core/TempNode.js';
 
 function Math3Node( a, b, c, method ) {
@@ -12,9 +12,9 @@ function Math3Node( a, b, c, method ) {
 	this.b = b;
 	this.c = c;
 
-	this.method = method || Math3Node.MIX;
+	this.method = method;
 
-};
+}
 
 Math3Node.MIX = 'mix';
 Math3Node.REFRACT = 'refract';
@@ -32,13 +32,13 @@ Math3Node.prototype.getType = function ( builder ) {
 	var c = builder.getTypeLength( this.c.getType( builder ) );
 
 	if ( a > b && a > c ) {
-		
+
 		return this.a.getType( builder );
-		
+
 	} else if ( b > c ) {
-		
+
 		return this.b.getType( builder );
-		
+
 	}
 
 	return this.c.getType( builder );
@@ -58,27 +58,27 @@ Math3Node.prototype.generate = function ( builder, output ) {
 	switch ( this.method ) {
 
 		case Math3Node.REFRACT:
-		
+
 			a = this.a.build( builder, type );
 			b = this.b.build( builder, type );
 			c = this.c.build( builder, 'f' );
-			
+
 			break;
 
 		case Math3Node.MIX:
-		
+
 			a = this.a.build( builder, type );
 			b = this.b.build( builder, type );
 			c = this.c.build( builder, cl === 1 ? 'f' : type );
-			
+
 			break;
 
 		default:
-		
+
 			a = this.a.build( builder, type );
 			b = this.b.build( builder, type );
 			c = this.c.build( builder, type );
-			
+
 			break;
 
 	}
@@ -88,14 +88,14 @@ Math3Node.prototype.generate = function ( builder, output ) {
 };
 
 Math3Node.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.a = source.a;
 	this.b = source.b;
 	this.c = source.c;
 	this.method = source.method;
-	
+
 };
 
 Math3Node.prototype.toJSON = function ( meta ) {

examples/js/nodes/math/OperatorNode.js

@@ -3,16 +3,16 @@
  */
 
 import { TempNode } from '../core/TempNode.js';
- 
+
 function OperatorNode( a, b, op ) {
 
 	TempNode.call( this );
 
 	this.a = a;
 	this.b = b;
-	this.op = op || OperatorNode.ADD;
+	this.op = op;
 
-};
+}
 
 OperatorNode.ADD = '+';
 OperatorNode.SUB = '-';
@@ -52,18 +52,18 @@ OperatorNode.prototype.generate = function ( builder, output ) {
 	var a = this.a.build( builder, type ),
 		b = this.b.build( builder, type );
 
-	return builder.format( '( ' + a + ' ' +  this.op + ' '+ b + ' )', type, output );
+	return builder.format( '( ' + a + ' ' + this.op + ' ' + b + ' )', type, output );
 
 };
 
 OperatorNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.a = source.a;
 	this.b = source.b;
 	this.op = source.op;
-	
+
 };
 
 OperatorNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/misc/BumpMapNode.js

@@ -16,31 +16,31 @@ function BumpMapNode( value, scale ) {
 	this.scale = scale || new FloatNode( 1 );
 
 	this.toNormalMap = false;
-	
-};
 
-BumpMapNode.Nodes = (function() {
-	
+}
+
+BumpMapNode.Nodes = ( function () {
+
 	var dHdxy_fwd = new FunctionNode( [
 
 		// Bump Mapping Unparametrized Surfaces on the GPU by Morten S. Mikkelsen
 		// http://api.unrealengine.com/attachments/Engine/Rendering/LightingAndShadows/BumpMappingWithoutTangentSpace/mm_sfgrad_bump.pdf
-		
+
 		// Evaluate the derivative of the height w.r.t. screen-space using forward differencing (listing 2)
 
 		"vec2 dHdxy_fwd( sampler2D bumpMap, vec2 vUv, float bumpScale ) {",
 
 		// Workaround for Adreno 3XX dFd*( vec3 ) bug. See #9988
-		
+
 		"	vec2 dSTdx = dFdx( vUv );",
 		"	vec2 dSTdy = dFdy( vUv );",
-		
+
 		"	float Hll = bumpScale * texture2D( bumpMap, vUv ).x;",
 		"	float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll;",
 		"	float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll;",
-		
+
 		"	return vec2( dBx, dBy );",
-		
+
 		"}"
 
 	].join( "\n" ), null, { derivatives: true } );
@@ -50,20 +50,20 @@ BumpMapNode.Nodes = (function() {
 		"vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy ) {",
 
 		// Workaround for Adreno 3XX dFd*( vec3 ) bug. See #9988
-		
+
 		"	vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) );",
 		"	vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) );",
 		"	vec3 vN = surf_norm;", // normalized
-		
+
 		"	vec3 R1 = cross( vSigmaY, vN );",
 		"	vec3 R2 = cross( vN, vSigmaX );",
 
 		"	float fDet = dot( vSigmaX, R1 );",
-		
+
 		"	fDet *= ( float( gl_FrontFacing ) * 2.0 - 1.0 );",
-		
+
 		"	vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );",
-		
+
 		"	return normalize( abs( fDet ) * surf_norm - vGrad );",
 
 		"}"
@@ -72,26 +72,26 @@ BumpMapNode.Nodes = (function() {
 
 	var bumpToNormal = new FunctionNode( [
 		"vec3 bumpToNormal( sampler2D bumpMap, vec2 uv, float scale ) {",
-		
+
 		"	vec2 dSTdx = dFdx( uv );",
 		"	vec2 dSTdy = dFdy( uv );",
-		
+
 		"	float Hll = texture2D( bumpMap, uv ).x;",
 		"	float dBx = texture2D( bumpMap, uv + dSTdx ).x - Hll;",
 		"	float dBy = texture2D( bumpMap, uv + dSTdy ).x - Hll;",
-		
+
 		"	return vec3( .5 - ( dBx * scale ), .5 - ( dBy * scale ), 1.0 );",
-		
+
 		"}"
 	].join( "\n" ), null, { derivatives: true } );
-	
+
 	return {
 		dHdxy_fwd: dHdxy_fwd,
 		perturbNormalArb: perturbNormalArb,
 		bumpToNormal: bumpToNormal
 	};
-	
-})();
+
+} )();
 
 BumpMapNode.prototype = Object.create( TempNode.prototype );
 BumpMapNode.prototype.constructor = BumpMapNode;
@@ -102,21 +102,21 @@ BumpMapNode.prototype.generate = function ( builder, output ) {
 	if ( builder.isShader( 'fragment' ) ) {
 
 		if ( this.toNormalMap ) {
-	
+
 			var bumpToNormal = builder.include( BumpMapNode.Nodes.bumpToNormal );
-		
+
 			return builder.format( bumpToNormal + '( ' + this.value.build( builder, 'sampler2D' ) + ', ' +
 				this.value.uv.build( builder, 'v2' ) + ', ' +
 				this.scale.build( builder, 'f' ) + ' )', this.getType( builder ), output );
-				
+
 		} else {
-			
+
 			var derivativeHeight = builder.include( BumpMapNode.Nodes.dHdxy_fwd ),
 				perturbNormalArb = builder.include( BumpMapNode.Nodes.perturbNormalArb );
-		
-			this.normal = this.normal || new NormalNode( NormalNode.VIEW );
+
+			this.normal = this.normal || new NormalNode();
 			this.position = this.position || new PositionNode( PositionNode.VIEW );
-		
+
 			var derivativeHeightCode = derivativeHeight + '( ' + this.value.build( builder, 'sampler2D' ) + ', ' +
 				this.value.uv.build( builder, 'v2' ) + ', ' +
 				this.scale.build( builder, 'f' ) + ' )';
@@ -124,7 +124,7 @@ BumpMapNode.prototype.generate = function ( builder, output ) {
 			return builder.format( perturbNormalArb + '( -' + this.position.build( builder, 'v3' ) + ', ' +
 				this.normal.build( builder, 'v3' ) + ', ' +
 				derivativeHeightCode + ' )', this.getType( builder ), output );
-			
+
 		}
 
 	} else {
@@ -138,12 +138,12 @@ BumpMapNode.prototype.generate = function ( builder, output ) {
 };
 
 BumpMapNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.value = source.value;
 	this.scale = source.scale;
-					
+
 };
 
 BumpMapNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/misc/NormalMapNode.js

@@ -16,10 +16,10 @@ function NormalMapNode( value, scale ) {
 	this.value = value;
 	this.scale = scale || new Vector2Node( 1, 1 );
 
-};
+}
+
+NormalMapNode.Nodes = ( function () {
 
-NormalMapNode.Nodes = (function() {
-	
 	var perturbNormal2Arb = new FunctionNode( [
 
 		// Per-Pixel Tangent Space Normal Mapping
@@ -28,24 +28,24 @@ NormalMapNode.Nodes = (function() {
 		"vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm, vec3 map, vec2 mUv, vec2 normalScale ) {",
 
 		// Workaround for Adreno 3XX dFd*( vec3 ) bug. See #9988
-		
+
 		"	vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) );",
 		"	vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) );",
 		"	vec2 st0 = dFdx( mUv.st );",
 		"	vec2 st1 = dFdy( mUv.st );",
-		
+
 		"	float scale = sign( st1.t * st0.s - st0.t * st1.s );", // we do not care about the magnitude
-		
+
 		"	vec3 S = normalize( ( q0 * st1.t - q1 * st0.t ) * scale );",
 		"	vec3 T = normalize( ( - q0 * st1.s + q1 * st0.s ) * scale );",
 		"	vec3 N = normalize( surf_norm );",
 		"	mat3 tsn = mat3( S, T, N );",
-		
+
 		"	vec3 mapN = map * 2.0 - 1.0;",
-		
+
 		"	mapN.xy *= normalScale;",
 		"	mapN.xy *= ( float( gl_FrontFacing ) * 2.0 - 1.0 );",
-		
+
 		"	return normalize( tsn * mapN );",
 
 		"}"
@@ -55,8 +55,8 @@ NormalMapNode.Nodes = (function() {
 	return {
 		perturbNormal2Arb: perturbNormal2Arb
 	};
-	
-})();
+
+} )();
 
 NormalMapNode.prototype = Object.create( TempNode.prototype );
 NormalMapNode.prototype.constructor = NormalMapNode;
@@ -68,7 +68,7 @@ NormalMapNode.prototype.generate = function ( builder, output ) {
 
 		var perturbNormal2Arb = builder.include( NormalMapNode.Nodes.perturbNormal2Arb );
 
-		this.normal = this.normal || new NormalNode( NormalNode.VIEW );
+		this.normal = this.normal || new NormalNode();
 		this.position = this.position || new PositionNode( PositionNode.VIEW );
 		this.uv = this.uv || new UVNode();
 
@@ -89,12 +89,12 @@ NormalMapNode.prototype.generate = function ( builder, output ) {
 };
 
 NormalMapNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.value = source.value;
 	this.scale = source.scale;
-	
+
 };
 
 NormalMapNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/misc/TextureCubeNode.js

@@ -4,7 +4,7 @@
 
 import { TempNode } from '../core/TempNode.js';
 import { TextureCubeUVNode } from './TextureCubeUVNode.js';
- 
+
 function TextureCubeNode( value, uv ) {
 
 	TempNode.call( this, 'v4' );
@@ -12,7 +12,7 @@ function TextureCubeNode( value, uv ) {
 	this.value = value;
 	this.uv = uv || new TextureCubeUVNode();
 
-};
+}
 
 TextureCubeNode.prototype = Object.create( TempNode.prototype );
 TextureCubeNode.prototype.constructor = TextureCubeNode;
@@ -25,12 +25,12 @@ TextureCubeNode.prototype.generate = function ( builder, output ) {
 		var uv_10 = this.uv.build( builder ) + '.uv_10',
 			uv_20 = this.uv.build( builder ) + '.uv_20',
 			t = this.uv.build( builder ) + '.t';
-		
+
 		var color10 = builder.getTexelDecodingFunctionFromTexture( 'texture2D( ' + this.value.build( builder, 'sampler2D' ) + ', ' + uv_10 + ' )', this.value.value ),
 			color20 = builder.getTexelDecodingFunctionFromTexture( 'texture2D( ' + this.value.build( builder, 'sampler2D' ) + ', ' + uv_20 + ' )', this.value.value );
 
 		return builder.format( 'vec4( mix( ' + color10 + ', ' + color20 + ', ' + t + ' ).rgb, 1.0 )', this.getType( builder ), output );
-			
+
 	} else {
 
 		console.warn( "THREE.TextureCubeNode is not compatible with " + builder.shader + " shader." );

examples/js/nodes/misc/TextureCubeUVNode.js

@@ -9,27 +9,27 @@ import { FunctionNode } from '../core/FunctionNode.js';
 import { ReflectNode } from '../accessors/ReflectNode.js';
 import { FloatNode } from '../inputs/FloatNode.js';
 import { BlinnExponentToRoughnessNode } from '../bsdfs/BlinnExponentToRoughnessNode.js';
- 
+
 function TextureCubeUVNode( uv, textureSize, blinnExponentToRoughness ) {
 
 	TempNode.call( this, 'TextureCubeUVData' ); // TextureCubeUVData is type as StructNode
 
 	this.uv = uv || new ReflectNode( ReflectNode.VECTOR );
 	this.textureSize = textureSize || new FloatNode( 1024 );
-	this.blinnExponentToRoughness = this.blinnExponentToRoughness || new BlinnExponentToRoughnessNode();
+	this.blinnExponentToRoughness = blinnExponentToRoughness || new BlinnExponentToRoughnessNode();
 
-};
+}
 
-TextureCubeUVNode.Nodes = (function() {
+TextureCubeUVNode.Nodes = ( function () {
 
-	var TextureCubeUVData = new StructNode([
+	var TextureCubeUVData = new StructNode( [
 		"struct TextureCubeUVData {",
 		"	vec2 uv_10;",
 		"	vec2 uv_20;",
 		"	float t;",
 		"}"
-	].join( "\n" ));
-	
+	].join( "\n" ) );
+
 	var getFaceFromDirection = new FunctionNode( [
 		"int getFaceFromDirection(vec3 direction) {",
 		"	vec3 absDirection = abs(direction);",
@@ -49,10 +49,10 @@ TextureCubeUVNode.Nodes = (function() {
 		"	return face;",
 		"}"
 	].join( "\n" ) );
-	
+
 	var cubeUV_maxLods1 = new ConstNode( "#define cubeUV_maxLods1 ( log2( cubeUV_textureSize * 0.25 ) - 1.0 )" );
 	var cubeUV_rangeClamp = new ConstNode( "#define cubeUV_rangeClamp ( exp2( ( 6.0 - 1.0 ) * 2.0 ) )" );
-	
+
 	var MipLevelInfo = new FunctionNode( [
 		"vec2 MipLevelInfo( vec3 vec, float roughnessLevel, float roughness, in float cubeUV_textureSize ) {",
 		"	float scale = exp2(cubeUV_maxLods1 - roughnessLevel);",
@@ -61,13 +61,13 @@ TextureCubeUVNode.Nodes = (function() {
 		"	vec3 dx = dFdx( vec * scale * dxRoughness );",
 		"	vec3 dy = dFdy( vec * scale * dyRoughness );",
 		"	float d = max( dot( dx, dx ), dot( dy, dy ) );",
-			// Clamp the value to the max mip level counts. hard coded to 6 mips"
+		// Clamp the value to the max mip level counts. hard coded to 6 mips"
 		"	d = clamp(d, 1.0, cubeUV_rangeClamp);",
 		"	float mipLevel = 0.5 * log2(d);",
 		"	return vec2(floor(mipLevel), fract(mipLevel));",
-		"}" 
+		"}"
 	].join( "\n" ), [ cubeUV_maxLods1, cubeUV_rangeClamp ], { derivatives: true } );
-	
+
 	var cubeUV_maxLods2 = new ConstNode( "#define cubeUV_maxLods2 ( log2( cubeUV_textureSize * 0.25 ) - 2.0 )" );
 	var cubeUV_rcpTextureSize = new ConstNode( "#define cubeUV_rcpTextureSize ( 1.0 / cubeUV_textureSize )" );
 
@@ -78,11 +78,11 @@ TextureCubeUVNode.Nodes = (function() {
 		"",
 		"	vec2 exp2_packed = exp2( vec2( roughnessLevel, mipLevel ) );",
 		"	vec2 rcp_exp2_packed = vec2( 1.0 ) / exp2_packed;",
-			// float powScale = exp2(roughnessLevel + mipLevel);"
+		// float powScale = exp2(roughnessLevel + mipLevel);"
 		"	float powScale = exp2_packed.x * exp2_packed.y;",
-			// float scale =  1.0 / exp2(roughnessLevel + 2.0 + mipLevel);"
+		// float scale =  1.0 / exp2(roughnessLevel + 2.0 + mipLevel);"
 		"	float scale = rcp_exp2_packed.x * rcp_exp2_packed.y * 0.25;",
-			// float mipOffset = 0.75*(1.0 - 1.0/exp2(mipLevel))/exp2(roughnessLevel);"
+		// float mipOffset = 0.75*(1.0 - 1.0/exp2(mipLevel))/exp2(roughnessLevel);"
 		"	float mipOffset = 0.75*(1.0 - rcp_exp2_packed.y) * rcp_exp2_packed.x;",
 		"",
 		"	bool bRes = mipLevel == 0.0;",
@@ -129,11 +129,11 @@ TextureCubeUVNode.Nodes = (function() {
 		"	vec2 s = ( r.yz / abs( r.x ) + vec2( 1.0 ) ) * 0.5;",
 		"	vec2 base = offset + vec2( texelOffset );",
 		"	return base + s * ( scale - 2.0 * texelOffset );",
-		"}" 
+		"}"
 	].join( "\n" ), [ cubeUV_maxLods2, cubeUV_rcpTextureSize, getFaceFromDirection ] );
-	
+
 	var cubeUV_maxLods3 = new ConstNode( "#define cubeUV_maxLods3 ( log2( cubeUV_textureSize * 0.25 ) - 3.0 )" );
-	
+
 	var textureCubeUV = new FunctionNode( [
 		"TextureCubeUVData textureCubeUV( vec3 reflectedDirection, float roughness, in float cubeUV_textureSize ) {",
 		"	float roughnessVal = roughness * cubeUV_maxLods3;",
@@ -146,23 +146,23 @@ TextureCubeUVNode.Nodes = (function() {
 		"	float level1 = level0 + 1.0;",
 		"	level1 = level1 > 5.0 ? 5.0 : level1;",
 		"",
-			// round to nearest mipmap if we are not interpolating."
+		// round to nearest mipmap if we are not interpolating."
 		"	level0 += min( floor( s + 0.5 ), 5.0 );",
 		"",
-			// Tri linear interpolation."
+		// Tri linear interpolation."
 		"	vec2 uv_10 = getCubeUV(reflectedDirection, r1, level0, cubeUV_textureSize);",
 		"	vec2 uv_20 = getCubeUV(reflectedDirection, r2, level0, cubeUV_textureSize);",
 		"",
 		"	return TextureCubeUVData(uv_10, uv_20, t);",
-		"}" 
+		"}"
 	].join( "\n" ), [ TextureCubeUVData, cubeUV_maxLods3, MipLevelInfo, getCubeUV ] );
-	
+
 	return {
 		TextureCubeUVData: TextureCubeUVData,
 		textureCubeUV: textureCubeUV
 	};
-	
-})();
+
+} )();
 
 TextureCubeUVNode.prototype = Object.create( TempNode.prototype );
 TextureCubeUVNode.prototype.constructor = TextureCubeUVNode;
@@ -173,11 +173,11 @@ TextureCubeUVNode.prototype.generate = function ( builder, output ) {
 	if ( builder.isShader( 'fragment' ) ) {
 
 		var textureCubeUV = builder.include( TextureCubeUVNode.Nodes.textureCubeUV );
-	
+
 		return builder.format( textureCubeUV + '( ' + this.uv.build( builder, 'v3' ) + ', ' +
 			this.blinnExponentToRoughness.build( builder, 'f' ) + ', ' +
 			this.textureSize.build( builder, 'f' ) + ' )', this.getType( builder ), output );
-			
+
 	} else {
 
 		console.warn( "THREE.TextureCubeUVNode is not compatible with " + builder.shader + " shader." );

examples/js/nodes/postprocessing/NodePass.js

@@ -2,9 +2,7 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { NodeUtils } from '../core/NodeUtils.js';
 import { NodeMaterial } from '../materials/NodeMaterial.js';
-import { RawNode } from '../materials/nodes/RawNode.js';
 import { ScreenNode } from '../inputs/ScreenNode.js';
 
 function NodePass() {
@@ -18,41 +16,39 @@ function NodePass() {
 
 	this.textureID = 'renderTexture';
 
-	this.fragment = new RawNode( new ScreenNode() );
+	this.input = new ScreenNode();
 
-	this.node = new NodeMaterial();
-	this.node.fragment = this.fragment;
+	this.material = new NodeMaterial();
 
 	this.needsUpdate = true;
 
-};
+}
 
 NodePass.prototype = Object.create( THREE.ShaderPass.prototype );
 NodePass.prototype.constructor = NodePass;
 
-NodeUtils.addShortcuts( NodePass.prototype, 'fragment', [ 'value' ] );
-
 NodePass.prototype.render = function () {
 
 	if ( this.needsUpdate ) {
 
-		this.node.dispose();
+		this.material.dispose();
+
+		this.material.fragment.value = this.input;
 
 		this.needsUpdate = false;
 
 	}
 
-	this.uniforms = this.node.uniforms;
-	this.material = this.node;
+	this.uniforms = this.material.uniforms;
 
 	THREE.ShaderPass.prototype.render.apply( this, arguments );
 
 };
 
 NodePass.prototype.copy = function ( source ) {
-	
-	this.value = source.value;
-	
+
+	this.input = source.input;
+
 };
 
 NodePass.prototype.toJSON = function ( meta ) {
@@ -82,7 +78,7 @@ NodePass.prototype.toJSON = function ( meta ) {
 
 		if ( JSON.stringify( this.userData ) !== '{}' ) data.userData = this.userData;
 
-		data.value = this.value.toJSON( meta ).uuid;
+		data.input = this.input.toJSON( meta ).uuid;
 
 	}
 

examples/js/nodes/postprocessing/NodePostProcessing.js

@@ -0,0 +1,128 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+import { NodeMaterial } from '../materials/NodeMaterial.js';
+import { ScreenNode } from '../inputs/ScreenNode.js';
+
+function NodePostProcessing( renderer, renderTarget ) {
+
+	if ( renderTarget === undefined ) {
+
+		var parameters = {
+			minFilter: THREE.LinearFilter,
+			magFilter: THREE.LinearFilter,
+			format: THREE.RGBAFormat,
+			stencilBuffer: false
+		};
+
+		var size = renderer.getDrawingBufferSize();
+		renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
+
+	}
+
+	this.renderer = renderer;
+	this.renderTarget = renderTarget;
+
+	this.output = new ScreenNode();
+	this.material = new NodeMaterial();
+
+	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+	this.scene = new THREE.Scene();
+
+	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), this.material );
+	this.quad.frustumCulled = false; // Avoid getting clipped
+	this.scene.add( this.quad );
+
+	this.needsUpdate = true;
+
+}
+
+NodePostProcessing.prototype = {
+
+	constructor: NodePostProcessing,
+
+	render: function ( scene, camera, frame ) {
+
+		if ( this.needsUpdate ) {
+
+			this.material.dispose();
+
+			this.material.fragment.value = this.output;
+			this.material.build();
+
+			if ( this.material.uniforms.renderTexture ) {
+
+				this.material.uniforms.renderTexture.value = this.renderTarget.texture;
+
+			}
+
+			this.needsUpdate = false;
+
+		}
+
+		frame.setRenderer( this.renderer )
+			.setRenderTexture( this.renderTarget.texture );
+
+		this.renderer.render( scene, camera, this.renderTarget );
+
+		frame.updateNode( this.material );
+
+		this.renderer.render( this.scene, this.camera );
+
+	},
+
+	setSize: function ( width, height ) {
+
+		this.renderTarget.setSize( width, height );
+
+		this.renderer.setSize( width, height );
+
+	},
+
+	copy: function ( source ) {
+
+		this.output = source.output;
+
+	},
+
+	toJSON: function ( meta ) {
+
+		var isRootObject = ( meta === undefined || typeof meta === 'string' );
+
+		if ( isRootObject ) {
+
+			meta = {
+				nodes: {}
+			};
+
+		}
+
+		if ( meta && ! meta.post ) meta.post = {};
+
+		if ( ! meta.post[ this.uuid ] ) {
+
+			var data = {};
+
+			data.uuid = this.uuid;
+			data.type = "NodePostProcessing";
+
+			meta.post[ this.uuid ] = data;
+
+			if ( this.name !== "" ) data.name = this.name;
+
+			if ( JSON.stringify( this.userData ) !== '{}' ) data.userData = this.userData;
+
+			data.output = this.output.toJSON( meta ).uuid;
+
+		}
+
+		meta.post = this.uuid;
+
+		return meta;
+
+	}
+
+};
+
+export { NodePostProcessing };

examples/js/nodes/procedural/CheckerNode.js

@@ -0,0 +1,75 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+import { TempNode } from '../core/TempNode.js';
+import { FunctionNode } from '../core/FunctionNode.js';
+import { UVNode } from '../accessors/UVNode.js';
+
+function CheckerNode( uv ) {
+
+	TempNode.call( this, 'f' );
+
+	this.uv = uv || new UVNode();
+
+}
+
+CheckerNode.prototype = Object.create( TempNode.prototype );
+CheckerNode.prototype.constructor = CheckerNode;
+CheckerNode.prototype.nodeType = "Noise";
+
+CheckerNode.Nodes = ( function () {
+
+	// https://github.com/mattdesl/glsl-checker/blob/master/index.glsl
+
+	var checker = new FunctionNode( [
+		"float checker( vec2 uv ) {",
+
+		"	float cx = floor( uv.x );",
+		"	float cy = floor( uv.y ); ",
+		"	float result = mod( cx + cy, 2.0 );",
+
+		"	return sign( result );",
+
+		"}"
+	].join( "\n" ) );
+
+	return {
+		checker: checker
+	};
+
+} )();
+
+CheckerNode.prototype.generate = function ( builder, output ) {
+
+	var snoise = builder.include( CheckerNode.Nodes.checker );
+
+	return builder.format( snoise + '( ' + this.uv.build( builder, 'v2' ) + ' )', this.getType( builder ), output );
+
+};
+
+CheckerNode.prototype.copy = function ( source ) {
+
+	TempNode.prototype.copy.call( this, source );
+
+	this.uv = source.uv;
+
+};
+
+CheckerNode.prototype.toJSON = function ( meta ) {
+
+	var data = this.getJSONNode( meta );
+
+	if ( ! data ) {
+
+		data = this.createJSONNode( meta );
+
+		data.uv = this.uv.toJSON( meta ).uuid;
+
+	}
+
+	return data;
+
+};
+
+export { CheckerNode };

examples/js/nodes/procedural/NoiseNode.js

@@ -12,27 +12,27 @@ function NoiseNode( uv ) {
 
 	this.uv = uv || new UVNode();
 
-};
+}
 
 NoiseNode.prototype = Object.create( TempNode.prototype );
 NoiseNode.prototype.constructor = NoiseNode;
 NoiseNode.prototype.nodeType = "Noise";
 
-NoiseNode.Nodes = (function() {
-	
+NoiseNode.Nodes = ( function () {
+
 	var snoise = new FunctionNode( [
 		"float snoise(vec2 co) {",
-		
+
 		"	return fract( sin( dot( co.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );",
-		
+
 		"}"
 	].join( "\n" ) );
 
 	return {
 		snoise: snoise
 	};
-	
-})();
+
+} )();
 
 NoiseNode.prototype.generate = function ( builder, output ) {
 
@@ -43,11 +43,11 @@ NoiseNode.prototype.generate = function ( builder, output ) {
 };
 
 NoiseNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	this.uv = source.uv;
-	
+
 };
 
 NoiseNode.prototype.toJSON = function ( meta ) {
@@ -66,4 +66,4 @@ NoiseNode.prototype.toJSON = function ( meta ) {
 
 };
 
-export { NoiseNode };
+export { NoiseNode };

examples/js/nodes/utils/BypassNode.js

@@ -2,33 +2,33 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from '../core/GLNode.js';
+import { Node } from '../core/Node.js';
 
 function BypassNode( code, value ) {
 
-	GLNode.call( this );
+	Node.call( this );
 
 	this.code = code;
 	this.value = value;
 
-};
+}
 
-BypassNode.prototype = Object.create( GLNode.prototype );
+BypassNode.prototype = Object.create( Node.prototype );
 BypassNode.prototype.constructor = BypassNode;
 BypassNode.prototype.nodeType = "Bypass";
 
 BypassNode.prototype.getType = function ( builder ) {
 
 	if ( this.value ) {
-		
+
 		return this.value.getType( builder );
-		
-	} else if (builder.isShader( 'fragment' )) {
-		
+
+	} else if ( builder.isShader( 'fragment' ) ) {
+
 		return 'f';
-		
+
 	}
-	
+
 	return 'void';
 
 };
@@ -38,30 +38,30 @@ BypassNode.prototype.generate = function ( builder, output ) {
 	var code = this.code.build( builder, output ) + ';';
 
 	builder.addNodeCode( code );
-	
+
 	if ( builder.isShader( 'vertex' ) ) {
-		
-		if (this.value) {
-		
+
+		if ( this.value ) {
+
 			return this.value.build( builder, output );
-			
+
 		}
-		
+
 	} else {
-		
+
 		return this.value ? this.value.build( builder, output ) : builder.format( '0.0', 'f', output );
-		
+
 	}
 
 };
 
 BypassNode.prototype.copy = function ( source ) {
-	
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	this.code = source.code;
 	this.value = source.value;
-	
+
 };
 
 BypassNode.prototype.toJSON = function ( meta ) {
@@ -74,7 +74,7 @@ BypassNode.prototype.toJSON = function ( meta ) {
 
 		data.code = this.code.toJSON( meta ).uuid;
 
-		if (this.value) data.value = this.value.toJSON( meta ).uuid;
+		if ( this.value ) data.value = this.value.toJSON( meta ).uuid;
 
 	}
 

examples/js/nodes/utils/ColorSpaceNode.js

@@ -0,0 +1,297 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+import { TempNode } from '../core/TempNode.js';
+import { ConstNode } from '../core/ConstNode.js';
+import { FunctionNode } from '../core/FunctionNode.js';
+
+function ColorSpaceNode( input, method ) {
+
+	TempNode.call( this, 'v4' );
+
+	this.input = input;
+
+	this.method = method || ColorSpaceNode.LINEAR;
+
+}
+
+ColorSpaceNode.Nodes = ( function () {
+
+	// For a discussion of what this is, please read this: http://lousodrome.net/blog/light/2013/05/26/gamma-correct-and-hdr-rendering-in-a-32-bits-buffer/
+
+	var LinearToLinear = new FunctionNode( [
+		"vec4 LinearToLinear( in vec4 value ) {",
+
+		"	return value;",
+
+		"}"
+	].join( "\n" ) );
+
+	var GammaToLinear = new FunctionNode( [
+		"vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {",
+
+		"	return vec4( pow( value.xyz, vec3( gammaFactor ) ), value.w );",
+
+		"}"
+	].join( "\n" ) );
+
+	var LinearToGamma = new FunctionNode( [
+		"vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {",
+
+		"	return vec4( pow( value.xyz, vec3( 1.0 / gammaFactor ) ), value.w );",
+
+		"}"
+	].join( "\n" ) );
+
+	var sRGBToLinear = new FunctionNode( [
+		"vec4 sRGBToLinear( in vec4 value ) {",
+
+		"	return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.w );",
+
+		"}"
+	].join( "\n" ) );
+
+	var LinearTosRGB = new FunctionNode( [
+		"vec4 LinearTosRGB( in vec4 value ) {",
+
+		"	return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.w );",
+
+		"}"
+	].join( "\n" ) );
+
+	var RGBEToLinear = new FunctionNode( [
+		"vec4 RGBEToLinear( in vec4 value ) {",
+
+		"	return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );",
+
+		"}"
+	].join( "\n" ) );
+
+	var LinearToRGBE = new FunctionNode( [
+		"vec4 LinearToRGBE( in vec4 value ) {",
+
+		"	float maxComponent = max( max( value.r, value.g ), value.b );",
+		"	float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );",
+		"	return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );",
+		//  return vec4( value.brg, ( 3.0 + 128.0 ) / 256.0 );
+
+		"}"
+	].join( "\n" ) );
+
+	// reference: http://iwasbeingirony.blogspot.ca/2010/06/difference-between-rgbm-and-rgbd.html
+
+	var RGBMToLinear = new FunctionNode( [
+		"vec3 RGBMToLinear( in vec4 value, in float maxRange ) {",
+
+		"	return vec4( value.xyz * value.w * maxRange, 1.0 );",
+
+		"}"
+	].join( "\n" ) );
+
+	var LinearToRGBM = new FunctionNode( [
+		"vec3 LinearToRGBM( in vec4 value, in float maxRange ) {",
+
+		"	float maxRGB = max( value.x, max( value.g, value.b ) );",
+		"	float M      = clamp( maxRGB / maxRange, 0.0, 1.0 );",
+		"	M            = ceil( M * 255.0 ) / 255.0;",
+		"	return vec4( value.rgb / ( M * maxRange ), M );",
+
+		"}"
+	].join( "\n" ) );
+
+	// reference: http://iwasbeingirony.blogspot.ca/2010/06/difference-between-rgbm-and-rgbd.html
+
+	var RGBDToLinear = new FunctionNode( [
+		"vec3 RGBDToLinear( in vec4 value, in float maxRange ) {",
+
+		"	return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );",
+
+		"}"
+	].join( "\n" ) );
+
+
+	var LinearToRGBD = new FunctionNode( [
+		"vec3 LinearToRGBD( in vec4 value, in float maxRange ) {",
+
+		"	float maxRGB = max( value.x, max( value.g, value.b ) );",
+		"	float D      = max( maxRange / maxRGB, 1.0 );",
+		"	D            = min( floor( D ) / 255.0, 1.0 );",
+		"	return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );",
+
+		"}"
+	].join( "\n" ) );
+
+	// LogLuv reference: http://graphicrants.blogspot.ca/2009/04/rgbm-color-encoding.html
+
+	// M matrix, for encoding
+
+	var cLogLuvM = new ConstNode( "const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );" );
+
+	var LinearToLogLuv = new FunctionNode( [
+		"vec4 LinearToLogLuv( in vec4 value ) {",
+
+		"	vec3 Xp_Y_XYZp = value.rgb * cLogLuvM;",
+		"	Xp_Y_XYZp = max(Xp_Y_XYZp, vec3(1e-6, 1e-6, 1e-6));",
+		"	vec4 vResult;",
+		"	vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;",
+		"	float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;",
+		"	vResult.w = fract(Le);",
+		"	vResult.z = (Le - (floor(vResult.w*255.0))/255.0)/255.0;",
+		"	return vResult;",
+
+		"}"
+	].join( "\n" ), [ cLogLuvM ] );
+
+	// Inverse M matrix, for decoding
+
+	var cLogLuvInverseM = new ConstNode( "const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );" );
+
+	var LogLuvToLinear = new FunctionNode( [
+		"vec4 LogLuvToLinear( in vec4 value ) {",
+
+		"	float Le = value.z * 255.0 + value.w;",
+		"	vec3 Xp_Y_XYZp;",
+		"	Xp_Y_XYZp.y = exp2((Le - 127.0) / 2.0);",
+		"	Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;",
+		"	Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;",
+		"	vec3 vRGB = Xp_Y_XYZp.rgb * cLogLuvInverseM;",
+		"	return vec4( max(vRGB, 0.0), 1.0 );",
+
+		"}"
+	].join( "\n" ), [ cLogLuvInverseM ] );
+
+	return {
+		LinearToLinear: LinearToLinear,
+		GammaToLinear: GammaToLinear,
+		LinearToGamma: LinearToGamma,
+		sRGBToLinear: sRGBToLinear,
+		LinearTosRGB: LinearTosRGB,
+		RGBEToLinear: RGBEToLinear,
+		LinearToRGBE: LinearToRGBE,
+		RGBMToLinear: RGBMToLinear,
+		LinearToRGBM: LinearToRGBM,
+		RGBDToLinear: RGBDToLinear,
+		LinearToRGBD: LinearToRGBD,
+		cLogLuvM: cLogLuvM,
+		LinearToLogLuv: LinearToLogLuv,
+		cLogLuvInverseM: cLogLuvInverseM,
+		LogLuvToLinear: LogLuvToLinear
+	};
+
+} )();
+
+ColorSpaceNode.LINEAR_TO_LINEAR = 'LinearToLinear';
+
+ColorSpaceNode.GAMMA_TO_LINEAR = 'GammaToLinear';
+ColorSpaceNode.LINEAR_TO_GAMMA = 'LinearToGamma';
+
+ColorSpaceNode.SRGB_TO_LINEAR = 'sRGBToLinear';
+ColorSpaceNode.LINEAR_TO_SRGB = 'LinearTosRGB';
+
+ColorSpaceNode.RGBE_TO_LINEAR = 'RGBEToLinear';
+ColorSpaceNode.LINEAR_TO_RGBE = 'LinearToRGBE';
+
+ColorSpaceNode.RGBM_TO_LINEAR = 'RGBMToLinear';
+ColorSpaceNode.LINEAR_TO_RGBM = 'LinearToRGBM';
+
+ColorSpaceNode.RGBD_TO_LINEAR = 'RGBDToLinear';
+ColorSpaceNode.LINEAR_TO_RGBD = 'LinearToRGBD';
+
+ColorSpaceNode.LINEAR_TO_LOG_LUV = 'LinearToLogLuv';
+ColorSpaceNode.LOG_LUV_TO_LINEAR = 'LogLuvToLinear';
+
+ColorSpaceNode.prototype = Object.create( TempNode.prototype );
+ColorSpaceNode.prototype.constructor = ColorSpaceNode;
+ColorSpaceNode.prototype.nodeType = "ColorAdjustment";
+
+ColorSpaceNode.prototype.generate = function ( builder, output ) {
+
+	var input = builder.context.input || this.input.build( builder, 'v4' ),
+		encodingMethod = builder.context.encoding !== undefined ? this.getEncodingMethod( builder.context.encoding ) : [ this.method ],
+		factor = this.factor ? this.factor.build( builder, 'f' ) : encodingMethod[ 1 ];
+
+	var method = builder.include( ColorSpaceNode.Nodes[ encodingMethod[ 0 ] ] );
+
+	if ( factor ) {
+
+		return builder.format( method + '( ' + input + ', ' + factor + ' )', this.getType( builder ), output );
+
+	} else {
+
+		return builder.format( method + '( ' + input + ' )', this.getType( builder ), output );
+
+	}
+
+};
+
+ColorSpaceNode.prototype.getDecodingMethod = function ( encoding ) {
+
+	var components = this.getEncodingComponents( encoding );
+
+	components[ 0 ] += 'ToLinear';
+
+	return components;
+
+};
+
+ColorSpaceNode.prototype.getEncodingMethod = function ( encoding ) {
+
+	var components = this.getEncodingComponents( encoding );
+
+	components[ 0 ] = 'LinearTo' + components[ 0 ];
+
+	return components;
+
+};
+
+ColorSpaceNode.prototype.getEncodingComponents = function ( encoding ) {
+
+	switch ( encoding ) {
+
+		case THREE.LinearEncoding:
+			return [ 'Linear' ];
+		case THREE.sRGBEncoding:
+			return [ 'sRGB' ];
+		case THREE.RGBEEncoding:
+			return [ 'RGBE' ];
+		case THREE.RGBM7Encoding:
+			return [ 'RGBM', '7.0' ];
+		case THREE.RGBM16Encoding:
+			return [ 'RGBM', '16.0' ];
+		case THREE.RGBDEncoding:
+			return [ 'RGBD', '256.0' ];
+		case THREE.GammaEncoding:
+			return [ 'Gamma', 'float( GAMMA_FACTOR )' ];
+
+	}
+
+};
+
+ColorSpaceNode.prototype.copy = function ( source ) {
+
+	TempNode.prototype.copy.call( this, source );
+
+	this.input = source.input;
+	this.method = source.method;
+
+};
+
+ColorSpaceNode.prototype.toJSON = function ( meta ) {
+
+	var data = this.getJSONNode( meta );
+
+	if ( ! data ) {
+
+		data = this.createJSONNode( meta );
+
+		data.input = this.input.toJSON( meta ).uuid;
+		data.method = this.method;
+
+	}
+
+	return data;
+
+};
+
+export { ColorSpaceNode };

examples/js/nodes/utils/JoinNode.js

@@ -4,9 +4,9 @@
 
 import { TempNode } from '../core/TempNode.js';
 import { NodeUtils } from '../core/NodeUtils.js';
- 
+
 var inputs = NodeUtils.elements;
- 
+
 function JoinNode( x, y, z, w ) {
 
 	TempNode.call( this, 'f' );
@@ -16,7 +16,7 @@ function JoinNode( x, y, z, w ) {
 	this.z = z;
 	this.w = w;
 
-};
+}
 
 JoinNode.prototype = Object.create( TempNode.prototype );
 JoinNode.prototype.constructor = JoinNode;
@@ -31,7 +31,7 @@ JoinNode.prototype.getNumElements = function () {
 		if ( this[ inputs[ i ] ] !== undefined ) {
 
 			++ i;
-			
+
 			break;
 
 		}
@@ -69,15 +69,15 @@ JoinNode.prototype.generate = function ( builder, output ) {
 };
 
 JoinNode.prototype.copy = function ( source ) {
-			
+
 	TempNode.prototype.copy.call( this, source );
-	
+
 	for ( var prop in source.inputs ) {
 
 		this[ prop ] = source.inputs[ prop ];
 
 	}
-	
+
 };
 
 JoinNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/utils/MaxMIPLevelNode.js

@@ -3,7 +3,7 @@
  */
 
 import { FloatNode } from '../inputs/FloatNode.js';
- 
+
 function MaxMIPLevelNode( texture ) {
 
 	FloatNode.call( this );
@@ -12,7 +12,7 @@ function MaxMIPLevelNode( texture ) {
 
 	this.maxMIPLevel = 0;
 
-};
+}
 
 MaxMIPLevelNode.prototype = Object.create( FloatNode.prototype );
 MaxMIPLevelNode.prototype.constructor = MaxMIPLevelNode;
@@ -21,23 +21,23 @@ MaxMIPLevelNode.prototype.nodeType = "MaxMIPLevel";
 Object.defineProperties( MaxMIPLevelNode.prototype, {
 
 	value: {
-		
+
 		get: function () {
 
 			if ( this.maxMIPLevel === 0 ) {
 
-				var image = this.texture.value.image ? this.texture.value.image[0] : undefined;
+				var image = this.texture.value.image ? this.texture.value.image[ 0 ] : undefined;
 
-				this.maxMIPLevel = image !== undefined ? ( Math.log( Math.max( image.width, image.height ) ) + 1 ) * Math.LOG2E : 0;
+				this.maxMIPLevel = image !== undefined ? Math.log( Math.max( image.width, image.height ) ) * Math.LOG2E : 0;
 
 			}
 
 			return this.maxMIPLevel;
 
 		},
-		
+
 		set: function () { }
-		
+
 	}
 
 } );

examples/js/nodes/utils/SwitchNode.js

@@ -2,18 +2,18 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { GLNode } from '../core/GLNode.js';
- 
+import { Node } from '../core/Node.js';
+
 function SwitchNode( node, components ) {
 
-	GLNode.call( this );
+	Node.call( this );
 
 	this.node = node;
 	this.components = components || 'x';
 
-};
+}
 
-SwitchNode.prototype = Object.create( GLNode.prototype );
+SwitchNode.prototype = Object.create( Node.prototype );
 SwitchNode.prototype.constructor = SwitchNode;
 SwitchNode.prototype.nodeType = "Switch";
 
@@ -74,12 +74,12 @@ SwitchNode.prototype.generate = function ( builder, output ) {
 };
 
 SwitchNode.prototype.copy = function ( source ) {
-			
-	GLNode.prototype.copy.call( this, source );
-	
+
+	Node.prototype.copy.call( this, source );
+
 	this.node = source.node;
 	this.components = source.components;
-	
+
 };
 
 SwitchNode.prototype.toJSON = function ( meta ) {

examples/js/nodes/utils/TimerNode.js

@@ -4,17 +4,17 @@
 
 import { FloatNode } from '../inputs/FloatNode.js';
 import { NodeLib } from '../core/NodeLib.js';
- 
-function TimerNode( scale, scope, useTimeScale ) {
+
+function TimerNode( scale, scope, timeScale ) {
 
 	FloatNode.call( this );
 
 	this.scale = scale !== undefined ? scale : 1;
 	this.scope = scope || TimerNode.GLOBAL;
 
-	this.useTimeScale = useTimeScale !== undefined ? useTimeScale : this.scale !== 1;
+	this.timeScale = timeScale !== undefined ? timeScale : this.scale !== 1;
 
-};
+}
 
 TimerNode.GLOBAL = 'global';
 TimerNode.LOCAL = 'local';
@@ -26,6 +26,8 @@ TimerNode.prototype.nodeType = "Timer";
 
 TimerNode.prototype.isReadonly = function () {
 
+	// never use TimerNode as readonly but aways as "uniform"
+
 	return false;
 
 };
@@ -33,6 +35,7 @@ TimerNode.prototype.isReadonly = function () {
 TimerNode.prototype.isUnique = function () {
 
 	// share TimerNode "uniform" input if is used on more time with others TimerNode
+
 	return this.timeScale && ( this.scope === TimerNode.GLOBAL || this.scope === TimerNode.DELTA );
 
 };
@@ -41,7 +44,7 @@ TimerNode.prototype.updateFrame = function ( frame ) {
 
 	var scale = this.timeScale ? this.scale : 1;
 
-	switch( this.scope ) {
+	switch ( this.scope ) {
 
 		case TimerNode.LOCAL:
 
@@ -64,14 +67,14 @@ TimerNode.prototype.updateFrame = function ( frame ) {
 };
 
 TimerNode.prototype.copy = function ( source ) {
-			
+
 	FloatNode.prototype.copy.call( this, source );
-	
+
 	this.scope = source.scope;
 	this.scale = source.scale;
-	
-	this.useTimeScale = source.useTimeScale;
-	
+
+	this.timeScale = source.timeScale;
+
 };
 
 TimerNode.prototype.toJSON = function ( meta ) {
@@ -84,8 +87,8 @@ TimerNode.prototype.toJSON = function ( meta ) {
 
 		data.scope = this.scope;
 		data.scale = this.scale;
-		
-		data.useTimeScale = this.useTimeScale;
+
+		data.timeScale = this.timeScale;
 
 	}
 

examples/js/nodes/utils/UVTransformNode.js

@@ -2,29 +2,29 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-import { FunctionNode } from '../core/FunctionNode.js';
+import { ExpressionNode } from '../core/ExpressionNode.js';
 import { Matrix3Node } from '../inputs/Matrix3Node.js';
 import { UVNode } from '../accessors/UVNode.js';
- 
-function UVTransformNode( uv, transform ) {
 
-	FunctionNode.call( this, "( uvTransform * vec3( uvNode, 1 ) ).xy", "vec2" );
+function UVTransformNode( uv, position ) {
+
+	ExpressionNode.call( this, "( uvTransform * vec3( uvNode, 1 ) ).xy", "vec2" );
 
 	this.uv = uv || new UVNode();
-	this.transform = transform || new Matrix3Node();
+	this.position = position || new Matrix3Node();
 
-};
+}
 
-UVTransformNode.prototype = Object.create( FunctionNode.prototype );
+UVTransformNode.prototype = Object.create( ExpressionNode.prototype );
 UVTransformNode.prototype.constructor = UVTransformNode;
 UVTransformNode.prototype.nodeType = "UVTransform";
 
 UVTransformNode.prototype.generate = function ( builder, output ) {
 
 	this.keywords[ "uvNode" ] = this.uv;
-	this.keywords[ "uvTransform" ] = this.transform;
+	this.keywords[ "uvTransform" ] = this.position;
 
-	return FunctionNode.prototype.generate.call( this, builder, output );
+	return ExpressionNode.prototype.generate.call( this, builder, output );
 
 };
 
@@ -33,17 +33,17 @@ UVTransformNode.prototype.setUvTransform = function ( tx, ty, sx, sy, rotation,
 	cx = cx !== undefined ? cx : .5;
 	cy = cy !== undefined ? cy : .5;
 
-	this.transform.value.setUvTransform( tx, ty, sx, sy, rotation, cx, cy );
+	this.position.value.setUvTransform( tx, ty, sx, sy, rotation, cx, cy );
 
 };
 
 UVTransformNode.prototype.copy = function ( source ) {
-			
-	FunctionNode.prototype.copy.call( this, source );
-	
+
+	ExpressionNode.prototype.copy.call( this, source );
+
 	this.uv = source.uv;
-	this.transform = source.transform;
-					
+	this.position = source.position;
+
 };
 
 UVTransformNode.prototype.toJSON = function ( meta ) {
@@ -55,7 +55,7 @@ UVTransformNode.prototype.toJSON = function ( meta ) {
 		data = this.createJSONNode( meta );
 
 		data.uv = this.uv.toJSON( meta ).uuid;
-		data.transform = this.transform.toJSON( meta ).uuid;
+		data.position = this.position.toJSON( meta ).uuid;
 
 	}
 
@@ -63,4 +63,4 @@ UVTransformNode.prototype.toJSON = function ( meta ) {
 
 };
 
-export { UVTransformNode };
+export { UVTransformNode };

examples/js/nodes/utils/VelocityNode.js

@@ -3,7 +3,7 @@
  */
 
 import { Vector3Node } from '../inputs/Vector3Node.js';
- 
+
 function VelocityNode( target, params ) {
 
 	Vector3Node.call( this );
@@ -15,7 +15,7 @@ function VelocityNode( target, params ) {
 	this.setTarget( target );
 	this.setParams( params );
 
-};
+}
 
 VelocityNode.prototype = Object.create( Vector3Node.prototype );
 VelocityNode.prototype.constructor = VelocityNode;
@@ -143,13 +143,13 @@ VelocityNode.prototype.updateFrame = function ( frame ) {
 };
 
 VelocityNode.prototype.copy = function ( source ) {
-			
+
 	Vector3Node.prototype.copy.call( this, source );
-	
+
 	if ( source.target ) object.setTarget( source.target );
-	
+
 	object.setParams( source.params );
-	
+
 };
 
 VelocityNode.prototype.toJSON = function ( meta ) {
@@ -171,4 +171,4 @@ VelocityNode.prototype.toJSON = function ( meta ) {
 
 };
 
-export { VelocityNode };
+export { VelocityNode };

examples/webgl_loader_nodes.html

@@ -42,187 +42,187 @@
 
 		<script type="module">
 
-		import './js/nodes/THREE.Nodes.js';
-		import './js/loaders/NodeMaterialLoader.js';
+			import './js/nodes/THREE.Nodes.js';
+			import './js/loaders/NodeMaterialLoader.js';
 
-		var container = document.getElementById( 'container' );
+			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;
+			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+			var frame = new THREE.NodeFrame();
+			var teapot, mesh, cloud;
+			var controls;
+			var gui;
 
-		var param = { load: 'caustic' };
+			var param = { load: 'caustic' };
 
-		window.addEventListener( 'load', init );
+			window.addEventListener( 'load', init );
 
-		function init() {
+			function init() {
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			container.appendChild( renderer.domElement );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-			scene = new THREE.Scene();
+				scene = new THREE.Scene();
 
-			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
-			camera.position.x = 50;
-			camera.position.z = - 50;
-			camera.position.y = 30;
-			camera.target = new THREE.Vector3();
+				camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.x = 50;
+				camera.position.z = - 50;
+				camera.position.y = 30;
+				camera.target = new THREE.Vector3();
 
-			cloud = new THREE.TextureLoader().load( 'textures/lava/cloud.png' );
-			cloud.wrapS = cloud.wrapT = THREE.RepeatWrapping;
+				cloud = new THREE.TextureLoader().load( 'textures/lava/cloud.png' );
+				cloud.wrapS = cloud.wrapT = THREE.RepeatWrapping;
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
-			controls.minDistance = 50;
-			controls.maxDistance = 200;
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 50;
+				controls.maxDistance = 200;
 
-			scene.add( new THREE.AmbientLight( 0x464646 ) );
+				scene.add( new THREE.AmbientLight( 0x464646 ) );
 
-			var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-			light.position.set( 1, 0.75, 0.5 );
-			scene.add( light );
+				var light = new THREE.DirectionalLight( 0xffddcc, 1 );
+				light.position.set( 1, 0.75, 0.5 );
+				scene.add( light );
 
-			var light = new THREE.DirectionalLight( 0xccccff, 1 );
-			light.position.set( - 1, 0.75, - 0.5 );
-			scene.add( light );
+				var light = new THREE.DirectionalLight( 0xccccff, 1 );
+				light.position.set( - 1, 0.75, - 0.5 );
+				scene.add( light );
 
-			teapot = new THREE.TeapotBufferGeometry( 15, 18 );
+				teapot = new THREE.TeapotBufferGeometry( 15, 18 );
 
-			mesh = new THREE.Mesh( teapot );
-			scene.add( mesh );
+				mesh = new THREE.Mesh( teapot );
+				scene.add( mesh );
 
-			window.addEventListener( 'resize', onWindowResize, false );
+				window.addEventListener( 'resize', onWindowResize, false );
 
-			updateMaterial();
+				updateMaterial();
 
-			onWindowResize();
-			animate();
+				onWindowResize();
+				animate();
 
-		}
+			}
 
-		function clearGui() {
+			function clearGui() {
 
-			if ( gui ) gui.destroy();
+				if ( gui ) gui.destroy();
 
-			gui = new dat.GUI();
+				gui = new dat.GUI();
 
-			var example = gui.add( param, 'load', {
-				'caustic': 'caustic',
-				'displace': 'displace',
-				'wave': 'wave',
-				'xray': 'xray'
-			} ).onFinishChange( function () {
+				var example = gui.add( param, 'load', {
+					'caustic': 'caustic',
+					'displace': 'displace',
+					'wave': 'wave',
+					'xray': 'xray'
+				} ).onFinishChange( function () {
 
-				updateMaterial();
+					updateMaterial();
 
-			} );
+				} );
 
-			gui.open();
+				gui.open();
 
-		}
+			}
 
-		function addGui( name, value, callback, isColor, min, max ) {
+			function addGui( name, value, callback, isColor, min, max ) {
 
-			var node;
+				var node;
 
-			param[ name ] = value;
+				param[ name ] = value;
 
-			if ( isColor ) {
+				if ( isColor ) {
 
-				node = gui.addColor( param, name ).onChange( function () {
+					node = gui.addColor( param, name ).onChange( function () {
 
-					callback( param[ name ] );
+						callback( param[ name ] );
 
-				} );
+					} );
 
-			} else if ( typeof value == 'object' ) {
+				} else if ( typeof value == 'object' ) {
 
-				node = gui.add( param, name, value ).onChange( function () {
+					node = gui.add( param, name, value ).onChange( function () {
 
-					callback( param[ name ] );
+						callback( param[ name ] );
 
-				} );
+					} );
 
-			} else {
+				} else {
 
-				node = gui.add( param, name, min, max ).onChange( function () {
+					node = gui.add( param, name, min, max ).onChange( function () {
 
-					callback( param[ name ] );
+						callback( param[ name ] );
 
-				} );
+					} );
 
-			}
+				}
 
-			return node;
+				return node;
 
-		}
+			}
 
 
-		function updateMaterial() {
+			function updateMaterial() {
 
-			if ( mesh.material ) mesh.material.dispose();
+				if ( mesh.material ) mesh.material.dispose();
 
-			clearGui();
+				clearGui();
 
-			var url = "nodes/" + param.load + ".json";
+				var url = "nodes/" + param.load + ".json";
 
-			var library = {
-				"cloud": cloud
-			};
+				var library = {
+					"cloud": cloud
+				};
 
-			var loader = new THREE.NodeMaterialLoader( undefined, library ).load( url, function () {
+				var loader = new THREE.NodeMaterialLoader( undefined, library ).load( url, function () {
 
-				var time = loader.getObjectByName( "time" );
+					var time = loader.getObjectByName( "time" );
 
-				if ( time ) {
+					if ( time ) {
 
-					// enable time scale
+						// enable time scale
 
-					time.timeScale = true;
+						time.timeScale = true;
 
-					// gui
+						// gui
 
-					addGui( 'timeScale', time.scale, function ( val ) {
+						addGui( 'timeScale', time.scale, function ( val ) {
 
-						time.scale = val;
+							time.scale = val;
 
-					}, false, - 2, 2 );
+						}, false, - 2, 2 );
 
-				}
+					}
 
-				// set material
-				mesh.material = loader.material;
+					// set material
+					mesh.material = loader.material;
 
-			} );
+				} );
 
-		}
+			}
 
-		function onWindowResize() {
+			function onWindowResize() {
 
-			var width = window.innerWidth, height = window.innerHeight;
+				var width = window.innerWidth, height = window.innerHeight;
 
-			camera.aspect = width / height;
-			camera.updateProjectionMatrix();
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
 
-			renderer.setSize( width, height );
+				renderer.setSize( width, height );
 
-		}
+			}
 
-		function animate() {
+			function animate() {
 
-			var delta = clock.getDelta();
+				var delta = clock.getDelta();
 
-			// update material animation and/or gpu calcs (pre-renderer)
-			if ( mesh.material instanceof THREE.NodeMaterial ) frame.update( delta ).updateNode( mesh.material );
+				// update material animation and/or gpu calcs (pre-renderer)
+				if ( mesh.material instanceof THREE.NodeMaterial ) frame.update( delta ).updateNode( mesh.material );
 
-			renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-		}
+			}
 
 		</script>
 	</body>

examples/webgl_materials_compile.html

@@ -207,10 +207,10 @@
 			mtl.emissive = cos;
 			
 			
-			var transformer = new THREE.FunctionNode( "position + 0.0 * " + Math.random(), "vec3", [ ]);
+			var transformer = new THREE.ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ]);
 			mtl.transform = transformer;
 
-			// build shader
+			// build shader ( ignore auto build )
 			mtl.build();
 
 			// set material

examples/webgl_materials_nodes.html

@@ -42,2435 +42,2672 @@
 		
 		<script type="module">
 
-		import './js/nodes/THREE.Nodes.js';
-		import './js/loaders/NodeMaterialLoader.js';
+			import './js/nodes/THREE.Nodes.js';
+			import './js/loaders/NodeMaterialLoader.js';
 
-		var container = document.getElementById( 'container' );
+			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;
-		var rtTexture, rtMaterial;
-		var gui, guiElements = [];
-		var library = {};
-		var serialized = false;
-		var textures = {
-			brick: { url: 'textures/brick_diffuse.jpg' },
-			grass: { url: 'textures/terrain/grasslight-big.jpg' },
-			grassNormal: { url: 'textures/terrain/grasslight-big-nm.jpg' },
-			decalDiffuse: { url: 'textures/decal/decal-diffuse.png' },
-			cloud: { url: 'textures/lava/cloud.png' },
-			spherical: { url: 'textures/envmap.png' }
-		};
+			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+			var frame = new THREE.NodeFrame();
+			var teapot, mesh;
+			var controls;
+			var move = false;
+			var rtTexture, rtMaterial;
+			var gui;
+			var library = {};
+			var serialized = false;
+			var textures = {
+				brick: { url: 'textures/brick_diffuse.jpg' },
+				grass: { url: 'textures/terrain/grasslight-big.jpg' },
+				grassNormal: { url: 'textures/terrain/grasslight-big-nm.jpg' },
+				decalDiffuse: { url: 'textures/decal/decal-diffuse.png' },
+				decalNormal: { url: 'textures/decal/decal-normal.jpg' },
+				cloud: { url: 'textures/lava/cloud.png' },
+				spherical: { url: 'textures/envmap.png' }
+			};
 
-		var param = { example: new URL(window.location.href).searchParams.get('e') || 'mesh-standard' };
+			var param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'mesh-standard' };
 
-		function getTexture( name ) {
+			function getTexture( name ) {
 
-			var texture = textures[ name ].texture;
+				var texture = textures[ name ].texture;
 
-			if ( ! texture ) {
+				if ( ! texture ) {
 
-				texture = textures[ name ].texture = new THREE.TextureLoader().load( textures[ name ].url );
-				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+					texture = textures[ name ].texture = new THREE.TextureLoader().load( textures[ name ].url );
+					texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
-				library[ texture.uuid ] = texture;
+					library[ texture.uuid ] = texture;
+
+				}
+
+				return texture;
 
 			}
 
-			return texture;
+			var cubemap = function () {
 
-		}
+				var path = "textures/cube/Park2/";
+				var format = '.jpg';
+				var urls = [
+					path + 'posx' + format, path + 'negx' + format,
+					path + 'posy' + format, path + 'negy' + format,
+					path + 'posz' + format, path + 'negz' + format
+				];
 
-		var cubemap = function () {
+				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube.format = THREE.RGBFormat;
 
-			var path = "textures/cube/Park2/";
-			var format = '.jpg';
-			var urls = [
-				path + 'posx' + format, path + 'negx' + format,
-				path + 'posy' + format, path + 'negy' + format,
-				path + 'posz' + format, path + 'negz' + format
-			];
+				library[ textureCube.uuid ] = textureCube;
 
-			var textureCube = new THREE.CubeTextureLoader().load( urls );
-			textureCube.format = THREE.RGBFormat;
+				return textureCube;
 
-			library[ textureCube.uuid ] = textureCube;
+			}();
 
-			return textureCube;
+			window.addEventListener( 'load', init );
 
-		}();
+			function init() {
 
-		window.addEventListener( 'load', init );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.uuid = THREE.Math.generateUUID(); // generate to library
+				container.appendChild( renderer.domElement );
 
-		function init() {
+				scene = new THREE.Scene();
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.uuid = THREE.Math.generateUUID(); // generate to library
-			container.appendChild( renderer.domElement );
+				camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.x = 50;
+				camera.position.z = - 50;
+				camera.position.y = 30;
+				camera.target = new THREE.Vector3();
 
-			scene = new THREE.Scene();
 
-			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
-			camera.position.x = 50;
-			camera.position.z = - 50;
-			camera.position.y = 30;
-			camera.target = new THREE.Vector3();
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 50;
+				controls.maxDistance = 200;
 
+				scene.add( new THREE.AmbientLight( 0x464646 ) );
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
-			controls.minDistance = 50;
-			controls.maxDistance = 200;
+				var light = new THREE.DirectionalLight( 0xffddcc, 1 );
+				light.position.set( 1, 0.75, 0.5 );
+				scene.add( light );
 
-			scene.add( new THREE.AmbientLight( 0x464646 ) );
+				var light = new THREE.DirectionalLight( 0xccccff, 1 );
+				light.position.set( - 1, 0.75, - 0.5 );
+				scene.add( light );
 
-			var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-			light.position.set( 1, 0.75, 0.5 );
-			scene.add( light );
+				teapot = new THREE.TeapotBufferGeometry( 15, 18 );
 
-			var light = new THREE.DirectionalLight( 0xccccff, 1 );
-			light.position.set( - 1, 0.75, - 0.5 );
-			scene.add( light );
+				mesh = new THREE.Mesh( teapot );
+				scene.add( mesh );
 
-			teapot = new THREE.TeapotBufferGeometry( 15, 18 );
+				library[ renderer.uuid ] = renderer;
+				library[ camera.uuid ] = camera;
+				library[ mesh.uuid ] = mesh;
 
-			mesh = new THREE.Mesh( teapot );
-			scene.add( mesh );
+				window.addEventListener( 'resize', onWindowResize, false );
 
-			library[ renderer.uuid ] = renderer;
-			library[ camera.uuid ] = camera;
-			library[ mesh.uuid ] = mesh;
+				updateMaterial();
 
-			window.addEventListener( 'resize', onWindowResize, false );
+				onWindowResize();
+				animate();
 
-			updateMaterial();
+			}
 
-			onWindowResize();
-			animate();
+			function clearGui() {
+
+				if ( gui ) gui.destroy();
+
+				gui = new dat.GUI();
+
+				var example = gui.add( param, 'example', {
+					'basic / mesh-standard': 'mesh-standard',
+					'basic / standard': 'standard',
+					'basic / physical': 'physical',
+					'basic / phong': 'phong',
+					'basic / layers': 'layers',
+					'basic / rim': 'rim',
+					'basic / color-adjustment': 'color-adjustment',
+					'basic / uv-transform': 'uv-transform',
+					'basic / bump': 'bump',
+					'basic / blur': 'blur',
+					'basic / spherical-reflection': 'spherical-reflection',
+					'adv / fresnel': 'fresnel',
+					'adv / saturation': 'saturation',
+					'adv / top-bottom': 'top-bottom',
+					'adv / skin': 'skin',
+					'adv / skin-phong': 'skin-phong',
+					'adv / caustic': 'caustic',
+					'adv / displace': 'displace',
+					'adv / plush': 'plush',
+					'adv / toon': 'toon',
+					'adv / camera-depth': 'camera-depth',
+					'adv / soft-body': 'soft-body',
+					'adv / wave': 'wave',
+					'adv / triangle-blur': 'triangle-blur',
+					'adv / render-to-texture': 'rtt',
+					'adv / temporal-blur': 'temporal-blur',
+					'adv / conditional': 'conditional',
+					'adv / expression': 'expression',
+					'adv / sss': 'sss',
+					'adv / translucent': 'translucent',
+					'node / position': 'node-position',
+					'node / normal': 'node-normal',
+					'misc / smoke': 'smoke',
+					'misc / firefly': 'firefly',
+					'misc / reserved-keywords': 'reserved-keywords',
+					'misc / varying': 'varying',
+					'misc / void-function': 'void-function',
+					'misc / readonly': 'readonly',
+					'misc / custom-attribute': 'custom-attribute'
+				} ).onFinishChange( function () {
+
+					updateMaterial();
 
-		}
+				} );
 
-		function clearGui() {
+				gui.open();
 
-			if ( gui ) gui.destroy();
+			}
 
-			gui = new dat.GUI();
+			function addGui( name, value, callback, isColor, min, max ) {
 
-			var example = gui.add( param, 'example', {
-				'basic / mesh-standard': 'mesh-standard',
-				'basic / standard': 'standard',
-				'basic / physical': 'physical',
-				'basic / phong': 'phong',
-				'basic / layers': 'layers',
-				'basic / rim': 'rim',
-				'basic / color-adjustment': 'color-adjustment',
-				'basic / uv-transform': 'uv-transform',
-				'basic / bump': 'bump',
-				'basic / blur': 'blur',
-				'basic / spherical-reflection': 'spherical-reflection',
-				'adv / fresnel': 'fresnel',
-				'adv / saturation': 'saturation',
-				'adv / top-bottom': 'top-bottom',
-				'adv / skin': 'skin',
-				'adv / skin-phong': 'skin-phong',
-				'adv / caustic': 'caustic',
-				'adv / displace': 'displace',
-				'adv / plush': 'plush',
-				'adv / toon': 'toon',
-				'adv / camera-depth': 'camera-depth',
-				'adv / soft-body': 'soft-body',
-				'adv / wave': 'wave',
-				'adv / triangle-blur': 'triangle-blur',
-				'adv / expression': 'expression',
-				'adv / sss': 'sss',
-				'adv / translucent': 'translucent',
-				'misc / smoke': 'smoke',
-				'misc / firefly': 'firefly',
-				'misc / reserved-keywords': 'reserved-keywords',
-				'misc / varying': 'varying',
-				'misc / void-function': 'void-function',
-				'misc / readonly': 'readonly',
-				'misc / custom-attribute': 'custom-attribute'
-			} ).onFinishChange( function () {
+				var node;
 
-				updateMaterial();
+				param[ name ] = value;
 
-			} );
+				if ( isColor ) {
 
-			gui.open();
+					node = gui.addColor( param, name ).onChange( function () {
 
-		}
+						callback( param[ name ] );
 
-		function addGui( name, value, callback, isColor, min, max ) {
+					} );
 
-			var node;
+				} else if ( typeof value == 'object' ) {
 
-			param[ name ] = value;
+					param[ name ] = value[ Object.keys( value )[ 0 ] ];
 
-			if ( isColor ) {
+					node = gui.add( param, name, value ).onChange( function () {
 
-				node = gui.addColor( param, name ).onChange( function () {
+						callback( param[ name ] );
 
-					callback( param[ name ] );
+					} );
 
-				} );
+				} else {
 
-			} else if ( typeof value == 'object' ) {
+					node = gui.add( param, name, min, max ).onChange( function () {
 
-				param.blend = value[ Object.keys( value )[ 0 ] ];
+						callback( param[ name ] );
 
-				node = gui.add( param, name, value ).onChange( function () {
+					} );
 
-					callback( param[ name ] );
+				}
 
-				} );
+				return node;
 
-			} else {
+			}
 
-				node = gui.add( param, name, min, max ).onChange( function () {
+			function updateMaterial() {
 
-					callback( param[ name ] );
+				move = false;
 
-				} );
+				if ( mesh.material ) mesh.material.dispose();
 
-			}
+				if ( rtTexture ) {
 
-			return node;
+					delete library[ rtTexture.texture.uuid ];
 
-		}
+					rtTexture.dispose();
+					rtTexture = null;
 
-		function updateMaterial() {
+				}
 
-			move = false;
+				if ( rtMaterial ) {
 
-			if ( mesh.material ) mesh.material.dispose();
+					rtMaterial.dispose();
+					rtMaterial = null;
 
-			if ( rtTexture ) {
+				}
 
-				delete library[ rtTexture.texture.uuid ];
+				var name = param.example;
+				var mtl;
 
-				rtTexture.dispose();
-				rtTexture = null;
+				clearGui();
 
-			}
+				switch ( name ) {
 
-			if ( rtMaterial ) {
+					case 'phong':
 
-				rtMaterial.dispose();
-				rtMaterial = null;
+						// MATERIAL
 
-			}
+						mtl = new THREE.PhongNodeMaterial();
 
-			var name = param.example;
-			var mtl;
+						//mtl.color = // albedo (vec3)
+						//mtl.alpha = // opacity (float)
+						//mtl.specular = // specular color (vec3)
+						//mtl.shininess = // shininess (float)
+						//mtl.normal = // normal (vec3)
+						//mtl.emissive = // emissive color (vec3)
+						//mtl.ambient = // ambient color (vec3)
+						//mtl.shadow = // shadowmap (vec3)
+						//mtl.light = // custom-light (vec3)
+						//mtl.ao = // ambient occlusion (float)
+						//mtl.light = // input/output light (vec3)
+						//mtl.environment = // reflection/refraction (vec3)
+						//mtl.environmentAlpha = // environment alpha (float)
+						//mtl.position = // vertex local position (vec3)
 
-			clearGui();
+						var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
 
-			switch ( name ) {
+						mtl.color = new THREE.TextureNode( getTexture( "grass" ) );
+						mtl.specular = new THREE.FloatNode( .5 );
+						mtl.shininess = new THREE.FloatNode( 15 );
+						mtl.environment = new THREE.CubeTextureNode( cubemap );
+						mtl.environmentAlpha = mask;
+						mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
+						mtl.normal.scale = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
 
-				case 'phong':
+						break;
 
-					// MATERIAL
+					case 'standard':
 
-					mtl = new THREE.PhongNodeMaterial();
+						// MATERIAL
 
-					//mtl.color = // albedo (vec3)
-					//mtl.alpha = // opacity (float)
-					//mtl.specular = // specular color (vec3)
-					//mtl.shininess = // shininess (float)
-					//mtl.normal = // normal (vec3)
-					//mtl.emissive = // emissive color (vec3)
-					//mtl.ambient = // ambient color (vec3)
-					//mtl.shadow = // shadowmap (vec3)
-					//mtl.light = // custom-light (vec3)
-					//mtl.ao = // ambient occlusion (float)
-					//mtl.light = // input/output light (vec3)
-					//mtl.environment = // reflection/refraction (vec3)
-					//mtl.environmentAlpha = // environment alpha (float)
-					//mtl.transform = // vertex transformation (vec3)
+						mtl = new THREE.StandardNodeMaterial();
 
-					var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
+						//mtl.color = // albedo (vec3)
+						//mtl.alpha = // opacity (float)
+						//mtl.roughness = // roughness (float)
+						//mtl.metalness = // metalness (float)
+						//mtl.normal = // normal (vec3)
+						//mtl.emissive = // emissive color (vec3)
+						//mtl.ambient = // ambient color (vec3)
+						//mtl.shadow = // shadowmap (vec3)
+						//mtl.light = // custom-light (vec3)
+						//mtl.ao = // ambient occlusion (float)
+						//mtl.environment = // reflection/refraction (vec3)
+						//mtl.position = // vertex local position (vec3)
 
-					mtl.color = new THREE.TextureNode( getTexture( "grass" ) );
-					mtl.specular = new THREE.FloatNode( .5 );
-					mtl.shininess = new THREE.FloatNode( 15 );
-					mtl.environment = new THREE.CubeTextureNode( cubemap );
-					mtl.environmentAlpha = mask;
-					mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
-					mtl.normal.scale = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
+						var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
 
-					break;
+						var normalScale = new THREE.FloatNode( .3 );
 
-				case 'standard':
+						var roughnessA = new THREE.FloatNode( .5 );
+						var metalnessA = new THREE.FloatNode( .5 );
 
-					// MATERIAL
+						var roughnessB = new THREE.FloatNode( 0 );
+						var metalnessB = new THREE.FloatNode( 1 );
 
-					mtl = new THREE.StandardNodeMaterial();
+						var roughness = new THREE.Math3Node(
+							roughnessA,
+							roughnessB,
+							mask,
+							THREE.Math3Node.MIX
+						);
+
+						var metalness = new THREE.Math3Node(
+							metalnessA,
+							metalnessB,
+							mask,
+							THREE.Math3Node.MIX
+						);
+
+						var normalMask = new THREE.OperatorNode(
+							new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
+							normalScale,
+							THREE.OperatorNode.MUL
+						);
 
-					//mtl.color = // albedo (vec3)
-					//mtl.alpha = // opacity (float)
-					//mtl.roughness = // roughness (float)
-					//mtl.metalness = // metalness (float)
-					//mtl.normal = // normal (vec3)
-					//mtl.emissive = // emissive color (vec3)
-					//mtl.ambient = // ambient color (vec3)
-					//mtl.shadow = // shadowmap (vec3)
-					//mtl.light = // custom-light (vec3)
-					//mtl.ao = // ambient occlusion (float)
-					//mtl.environment = // reflection/refraction (vec3)
-					//mtl.transform = // vertex transformation (vec3)
+						mtl.color = new THREE.ColorNode( 0xEEEEEE );
+						mtl.roughness = roughness;
+						mtl.metalness = metalness;
+						mtl.environment = new THREE.CubeTextureNode( cubemap );
+						mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
+						mtl.normal.scale = normalMask;
 
-					var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
+						// GUI
 
-					var normalScale = new THREE.FloatNode( .3 );
+						addGui( 'color', mtl.color.value.getHex(), function ( val ) {
 
-					var roughnessA = new THREE.FloatNode( .5 );
-					var metalnessA = new THREE.FloatNode( .5 );
+							mtl.color.value.setHex( val );
 
-					var roughnessB = new THREE.FloatNode( 0 );
-					var metalnessB = new THREE.FloatNode( 1 );
+						}, true );
 
-					var roughness = new THREE.Math3Node(
-						roughnessA,
-						roughnessB,
-						mask,
-						THREE.Math3Node.MIX
-					);
+						addGui( 'roughnessA', roughnessA.value, function ( val ) {
 
-					var metalness = new THREE.Math3Node(
-						metalnessA,
-						metalnessB,
-						mask,
-						THREE.Math3Node.MIX
-					);
+							roughnessA.value = val;
 
-					var normalMask = new THREE.OperatorNode(
-						new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
-						normalScale,
-						THREE.OperatorNode.MUL
-					);
+						}, false, 0, 1 );
 
-					mtl.color = new THREE.ColorNode( 0xEEEEEE );
-					mtl.roughness = roughness;
-					mtl.metalness = metalness;
-					mtl.environment = new THREE.CubeTextureNode( cubemap );
-					mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
-					mtl.normal.scale = normalMask;
+						addGui( 'metalnessA', metalnessA.value, function ( val ) {
 
-					// GUI
+							metalnessA.value = val;
 
-					addGui( 'color', mtl.color.value.getHex(), function ( val ) {
+						}, false, 0, 1 );
 
-						mtl.color.value.setHex( val );
+						addGui( 'roughnessB', roughnessB.value, function ( val ) {
 
-					}, true );
+							roughnessB.value = val;
 
-					addGui( 'roughnessA', roughnessA.value, function ( val ) {
+						}, false, 0, 1 );
 
-						roughnessA.value = val;
+						addGui( 'metalnessB', metalnessB.value, function ( val ) {
 
-					}, false, 0, 1 );
-
-					addGui( 'metalnessA', metalnessA.value, function ( val ) {
-
-						metalnessA.value = val;
-
-					}, false, 0, 1 );
-
-					addGui( 'roughnessB', roughnessB.value, function ( val ) {
-
-						roughnessB.value = val;
+							metalnessB.value = val;
 
-					}, false, 0, 1 );
+						}, false, 0, 1 );
 
-					addGui( 'metalnessB', metalnessB.value, function ( val ) {
+						addGui( 'normalScale', normalScale.value, function ( val ) {
 
-						metalnessB.value = val;
+							normalScale.value = val;
 
-					}, false, 0, 1 );
+						}, false, 0, 1 );
 
-					addGui( 'normalScale', normalScale.value, function ( val ) {
+						break;
 
-						normalScale.value = val;
+					case 'mesh-standard':
 
-					}, false, 0, 1 );
+						// MATERIAL
 
-					break;
+						var sataturation = new THREE.FloatNode( 1 ),
+							useNodeMaterial = true,
+							useMap = true,
+							useNormals = true;
 
-				case 'mesh-standard':
+						function updateMaterial() {
+
+							var oldMaterial = mtl;
+
+							if ( oldMaterial ) oldMaterial.dispose();
+
+							mtl = useNodeMaterial ? new THREE.MeshStandardNodeMaterial() : new THREE.MeshStandardMaterial();
+
+							// default syntax ( backward-compatible )
+
+							mtl.map = useMap ? getTexture( "brick" ) : undefined;
+
+							mtl.normalMap = useNormals ? getTexture( "decalNormal" ) : undefined;
+							mtl.normalScale = oldMaterial ? oldMaterial.normalScale : new THREE.Vector2( .5, .5 );
+
+							mtl.envMap = cubemap;
+
+							mtl.roughness = oldMaterial ? oldMaterial.roughness : .5;
+							mtl.metalness = oldMaterial ? oldMaterial.metalness : .5;
+
+							// extended syntax ( only for NodeMaterial )
+
+							if ( useNodeMaterial && useMap ) {
+
+								mtl.map = new THREE.ColorAdjustmentNode(
+									new THREE.TextureNode( mtl.map ),
+									sataturation,
+									THREE.ColorAdjustmentNode.SATURATION
+								);
+
+							}
+
+							// apply material
+
+							mtl.side = THREE.DoubleSide;
+							mtl.needsUpdate = true;
+
+							mesh.material = mtl;
 
-					// MATERIAL
-					
-					var sataturation = new THREE.FloatNode( 1 );
-					
-					function updateMaterial( useNodeMaterial ) {
-					
-						var oldMaterial = mtl;
-					
-						if (oldMaterial) oldMaterial.dispose();
-					
-						mtl = useNodeMaterial ? new THREE.MeshStandardNodeMaterial() : new THREE.MeshStandardMaterial();
-					
-						// default syntax ( backward-compatible )
-					
-						mtl.map = getTexture( "brick" );
-						
-						mtl.normalMap = getTexture( "grassNormal" );
-						mtl.normalScale = new THREE.Vector2( .3, -.3 );
-						
-						mtl.envMap = cubemap;
-						
-						mtl.roughness = oldMaterial ? oldMaterial.roughness : .5;
-						mtl.metalness = oldMaterial ? oldMaterial.metalness : .5;
-						
-						// extended syntax ( only for NodeMaterial )
-						
-						if (useNodeMaterial) {
-						
-							mtl.map = new THREE.ColorAdjustmentNode( 
-								new THREE.TextureNode( mtl.map ), 
-								sataturation, 
-								THREE.ColorAdjustmentNode.SATURATION 
-							);
-							
 						}
-						
-						// apply material
-					
-						mtl.needsUpdate = true;
-					
-						mesh.material = mtl;
 
-					}
+						updateMaterial();
 
-					updateMaterial( true );
-					
-					// GUI
-					
-					addGui( 'use node material', true, function ( val ) {
+						// GUI
 
-						updateMaterial( val );
+						addGui( 'use node material', useNodeMaterial, function ( val ) {
 
-					} );
-					
-					addGui( 'roughness', mtl.roughness, function ( val ) {
+							useNodeMaterial = val;
 
-						mtl.roughness = val;
+							updateMaterial();
 
-					}, false, 0, 1 );
+						} );
 
-					addGui( 'metalness', mtl.roughness, function ( val ) {
+						addGui( 'roughness', mtl.roughness, function ( val ) {
 
-						mtl.metalness = val;
+							mtl.roughness = val;
 
-					}, false, 0, 1 );
-					
-					addGui( 'sat. (node)', sataturation.value, function ( val ) {
+						}, false, 0, 1 );
 
-						sataturation.value = val;
+						addGui( 'metalness', mtl.roughness, function ( val ) {
 
-					}, false, 0, 2 );
-					
-					break;
-					
-				case 'physical':
+							mtl.metalness = val;
 
-					// MATERIAL
+						}, false, 0, 1 );
 
-					mtl = new THREE.StandardNodeMaterial();
+						addGui( 'normalX', mtl.normalScale.x, function ( val ) {
 
-					//mtl.color = // albedo (vec3)
-					//mtl.alpha = // opacity (float)
-					//mtl.roughness = // roughness (float)
-					//mtl.metalness = // metalness (float)
-					//mtl.reflectivity = // reflectivity (float)
-					//mtl.clearCoat = // clearCoat (float)
-					//mtl.clearCoatRoughness = // clearCoatRoughness (float)
-					//mtl.normal = // normal (vec3)
-					//mtl.emissive = // emissive color (vec3)
-					//mtl.ambient = // ambient color (vec3)
-					//mtl.shadow = // shadowmap (vec3)
-					//mtl.light = // custom-light (vec3)
-					//mtl.ao = // ambient occlusion (float)
-					//mtl.environment = // reflection/refraction (vec3)
-					//mtl.transform = // vertex transformation (vec3)
+							mtl.normalScale.x = val;
 
-					var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
+						}, false, - 1, 1 );
 
-					var normalScale = new THREE.FloatNode( .3 );
+						addGui( 'normalY', mtl.normalScale.y, function ( val ) {
 
-					var roughnessA = new THREE.FloatNode( .5 );
-					var metalnessA = new THREE.FloatNode( .5 );
+							mtl.normalScale.y = val;
 
-					var roughnessB = new THREE.FloatNode( 0 );
-					var metalnessB = new THREE.FloatNode( 1 );
+						}, false, - 1, 1 );
 
-					var reflectivity = new THREE.FloatNode( 0 );
-					var clearCoat = new THREE.FloatNode( 1 );
-					var clearCoatRoughness = new THREE.FloatNode( 1 );
+						addGui( 'sat. (node)', sataturation.value, function ( val ) {
 
-					var roughness = new THREE.Math3Node(
-						roughnessA,
-						roughnessB,
-						mask,
-						THREE.Math3Node.MIX
-					);
+							sataturation.value = val;
 
-					var metalness = new THREE.Math3Node(
-						metalnessA,
-						metalnessB,
-						mask,
-						THREE.Math3Node.MIX
-					);
+						}, false, 0, 2 );
 
-					var normalMask = new THREE.OperatorNode(
-						new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
-						normalScale,
-						THREE.OperatorNode.MUL
-					);
+						addGui( 'colors', useMap, function ( val ) {
 
-					mtl.color = new THREE.ColorNode( 0xEEEEEE );
-					mtl.roughness = roughness;
-					mtl.metalness = metalness;
-					mtl.reflectivity = reflectivity;
-					mtl.clearCoat = clearCoat;
-					mtl.clearCoatRoughness = clearCoatRoughness;
-					mtl.environment = new THREE.CubeTextureNode( cubemap );
-					mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
-					mtl.normal.scale = normalMask;
+							useMap = val;
 
-					// GUI
+							updateMaterial();
 
-					addGui( 'color', mtl.color.value.getHex(), function ( val ) {
+						}, false );
 
-						mtl.color.value.setHex( val );
+						addGui( 'normals', useNormals, function ( val ) {
 
-					}, true );
+							useNormals = val;
 
-					addGui( 'reflectivity', reflectivity.value, function ( val ) {
+							updateMaterial();
 
-						reflectivity.value = val;
+						}, false );
 
-					}, false, 0, 1 );
+						break;
 
-					addGui( 'clearCoat', clearCoat.value, function ( val ) {
+					case 'physical':
 
-						clearCoat.value = val;
+						// MATERIAL
 
-					}, false, 0, 1 );
+						mtl = new THREE.StandardNodeMaterial();
 
-					addGui( 'clearCoatRoughness', clearCoatRoughness.value, function ( val ) {
+						//mtl.color = // albedo (vec3)
+						//mtl.alpha = // opacity (float)
+						//mtl.roughness = // roughness (float)
+						//mtl.metalness = // metalness (float)
+						//mtl.reflectivity = // reflectivity (float)
+						//mtl.clearCoat = // clearCoat (float)
+						//mtl.clearCoatRoughness = // clearCoatRoughness (float)
+						//mtl.normal = // normal (vec3)
+						//mtl.emissive = // emissive color (vec3)
+						//mtl.ambient = // ambient color (vec3)
+						//mtl.shadow = // shadowmap (vec3)
+						//mtl.light = // custom-light (vec3)
+						//mtl.ao = // ambient occlusion (float)
+						//mtl.environment = // reflection/refraction (vec3)
+						//mtl.position = // vertex local position (vec3)
 
-						clearCoatRoughness.value = val;
+						var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
 
-					}, false, 0, 1 );
+						var normalScale = new THREE.FloatNode( .3 );
 
-					addGui( 'roughnessA', roughnessA.value, function ( val ) {
+						var roughnessA = new THREE.FloatNode( .5 );
+						var metalnessA = new THREE.FloatNode( .5 );
 
-						roughnessA.value = val;
+						var roughnessB = new THREE.FloatNode( 0 );
+						var metalnessB = new THREE.FloatNode( 1 );
 
-					}, false, 0, 1 );
+						var reflectivity = new THREE.FloatNode( 0 );
+						var clearCoat = new THREE.FloatNode( 1 );
+						var clearCoatRoughness = new THREE.FloatNode( 1 );
 
-					addGui( 'metalnessA', metalnessA.value, function ( val ) {
+						var roughness = new THREE.Math3Node(
+							roughnessA,
+							roughnessB,
+							mask,
+							THREE.Math3Node.MIX
+						);
 
-						metalnessA.value = val;
+						var metalness = new THREE.Math3Node(
+							metalnessA,
+							metalnessB,
+							mask,
+							THREE.Math3Node.MIX
+						);
 
-					}, false, 0, 1 );
+						var normalMask = new THREE.OperatorNode(
+							new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
+							normalScale,
+							THREE.OperatorNode.MUL
+						);
 
-					addGui( 'roughnessB', roughnessB.value, function ( val ) {
+						mtl.color = new THREE.ColorNode( 0xEEEEEE );
+						mtl.roughness = roughness;
+						mtl.metalness = metalness;
+						mtl.reflectivity = reflectivity;
+						mtl.clearCoat = clearCoat;
+						mtl.clearCoatRoughness = clearCoatRoughness;
+						mtl.environment = new THREE.CubeTextureNode( cubemap );
+						mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
+						mtl.normal.scale = normalMask;
 
-						roughnessB.value = val;
+						// GUI
 
-					}, false, 0, 1 );
+						addGui( 'color', mtl.color.value.getHex(), function ( val ) {
 
-					addGui( 'metalnessB', metalnessB.value, function ( val ) {
+							mtl.color.value.setHex( val );
 
-						metalnessB.value = val;
+						}, true );
 
-					}, false, 0, 1 );
+						addGui( 'reflectivity', reflectivity.value, function ( val ) {
 
-					addGui( 'normalScale', normalScale.value, function ( val ) {
+							reflectivity.value = val;
 
-						normalScale.value = val;
+						}, false, 0, 1 );
 
-					}, false, 0, 1 );
+						addGui( 'clearCoat', clearCoat.value, function ( val ) {
 
-					break;
+							clearCoat.value = val;
 
-				case 'wave':
+						}, false, 0, 1 );
 
-					// MATERIAL
+						addGui( 'clearCoatRoughness', clearCoatRoughness.value, function ( val ) {
 
-					mtl = new THREE.PhongNodeMaterial();
+							clearCoatRoughness.value = val;
 
-					var time = new THREE.TimerNode();
-					var speed = new THREE.FloatNode( 5 );
-					var scale = new THREE.FloatNode( 1 );
-					var worldScale = new THREE.FloatNode( .4 );
-					var colorA = new THREE.ColorNode( 0xFFFFFF );
-					var colorB = new THREE.ColorNode( 0x0054df );
+						}, false, 0, 1 );
 
-					// used for serialization only
-					time.name = "time";
-					speed.name = "speed";
+						addGui( 'roughnessA', roughnessA.value, function ( val ) {
 
-					var timeScale = new THREE.OperatorNode(
-						time,
-						speed,
-						THREE.OperatorNode.MUL
-					);
+							roughnessA.value = val;
 
-					var worldScl = new THREE.OperatorNode(
-						new THREE.PositionNode(),
-						worldScale,
-						THREE.OperatorNode.MUL
-					);
+						}, false, 0, 1 );
 
-					var posContinuous = new THREE.OperatorNode(
-						worldScl,
-						timeScale,
-						THREE.OperatorNode.ADD
-					);
+						addGui( 'metalnessA', metalnessA.value, function ( val ) {
 
-					var wave = new THREE.Math1Node( posContinuous, THREE.Math1Node.SIN );
-					wave = new THREE.SwitchNode( wave, 'x' );
+							metalnessA.value = val;
 
-					var waveScale = new THREE.OperatorNode(
-						wave,
-						scale,
-						THREE.OperatorNode.MUL
-					);
+						}, false, 0, 1 );
 
-					var displaceY = new THREE.JoinNode(
-						new THREE.FloatNode(),
-						waveScale,
-						new THREE.FloatNode()
-					);
+						addGui( 'roughnessB', roughnessB.value, function ( val ) {
 
-					var displace = new THREE.OperatorNode(
-						new THREE.NormalNode(),
-						displaceY,
-						THREE.OperatorNode.MUL
-					);
+							roughnessB.value = val;
 
-					var blend = new THREE.OperatorNode(
-						new THREE.PositionNode(),
-						displaceY,
-						THREE.OperatorNode.ADD
-					);
+						}, false, 0, 1 );
 
-					var color = new THREE.Math3Node(
-						colorB,
-						colorA,
-						wave,
-						THREE.Math3Node.MIX
-					);
+						addGui( 'metalnessB', metalnessB.value, function ( val ) {
 
-					mtl.color = color;
-					mtl.transform = blend;
+							metalnessB.value = val;
 
-					// GUI
+						}, false, 0, 1 );
 
-					addGui( 'speed', speed.value, function ( val ) {
+						addGui( 'normalScale', normalScale.value, function ( val ) {
 
-						speed.value = val;
+							normalScale.value = val;
 
-					}, false, 0, 10 );
+						}, false, 0, 1 );
 
-					addGui( 'scale', scale.value, function ( val ) {
+						break;
 
-						scale.value = val;
+					case 'wave':
 
-					}, false, 0, 3 );
+						// MATERIAL
 
-					addGui( 'worldScale', worldScale.value, function ( val ) {
+						mtl = new THREE.PhongNodeMaterial();
 
-						worldScale.value = val;
+						var time = new THREE.TimerNode();
+						var speed = new THREE.FloatNode( 5 );
+						var scale = new THREE.FloatNode( 1 );
+						var worldScale = new THREE.FloatNode( .4 );
+						var colorA = new THREE.ColorNode( 0xFFFFFF );
+						var colorB = new THREE.ColorNode( 0x0054df );
 
-					}, false, 0, 1 );
+						// used for serialization only
+						time.name = "time";
+						speed.name = "speed";
 
-					addGui( 'colorA', colorA.value.getHex(), function ( val ) {
+						var timeScale = new THREE.OperatorNode(
+							time,
+							speed,
+							THREE.OperatorNode.MUL
+						);
 
-						colorA.value.setHex( val );
+						var worldScl = new THREE.OperatorNode(
+							new THREE.PositionNode(),
+							worldScale,
+							THREE.OperatorNode.MUL
+						);
 
-					}, true );
+						var posContinuous = new THREE.OperatorNode(
+							worldScl,
+							timeScale,
+							THREE.OperatorNode.ADD
+						);
 
-					addGui( 'colorB', colorB.value.getHex(), function ( val ) {
+						var wave = new THREE.Math1Node( posContinuous, THREE.Math1Node.SIN );
+						wave = new THREE.SwitchNode( wave, 'x' );
 
-						colorB.value.setHex( val );
+						var waveScale = new THREE.OperatorNode(
+							wave,
+							scale,
+							THREE.OperatorNode.MUL
+						);
 
-					}, true );
+						var displaceY = new THREE.JoinNode(
+							new THREE.FloatNode(),
+							waveScale,
+							new THREE.FloatNode()
+						);
 
-					addGui( 'useNormals', false, function ( val ) {
+						var displace = new THREE.OperatorNode(
+							new THREE.NormalNode(),
+							displaceY,
+							THREE.OperatorNode.MUL
+						);
 
-						blend.b = val ? displace : displaceY;
+						var blend = new THREE.OperatorNode(
+							new THREE.PositionNode(),
+							displaceY,
+							THREE.OperatorNode.ADD
+						);
 
-						mtl.needsUpdate = true;
+						var color = new THREE.Math3Node(
+							colorB,
+							colorA,
+							wave,
+							THREE.Math3Node.MIX
+						);
 
-					} );
+						mtl.color = color;
+						mtl.position = blend;
+
+						// GUI
+
+						addGui( 'speed', speed.value, function ( val ) {
+
+							speed.value = val;
+
+						}, false, 0, 10 );
+
+						addGui( 'scale', scale.value, function ( val ) {
+
+							scale.value = val;
+
+						}, false, 0, 3 );
+
+						addGui( 'worldScale', worldScale.value, function ( val ) {
+
+							worldScale.value = val;
+
+						}, false, 0, 1 );
+
+						addGui( 'colorA', colorA.value.getHex(), function ( val ) {
+
+							colorA.value.setHex( val );
+
+						}, true );
+
+						addGui( 'colorB', colorB.value.getHex(), function ( val ) {
+
+							colorB.value.setHex( val );
+
+						}, true );
+
+						addGui( 'useNormals', false, function ( val ) {
+
+							blend.b = val ? displace : displaceY;
 
-					break;
+							mtl.needsUpdate = true;
 
-				case 'rim':
+						} );
 
-					// MATERIAL
+						break;
 
-					mtl = new THREE.PhongNodeMaterial();
+					case 'rim':
 
-					var intensity = 1.3;
-					var power = new THREE.FloatNode( 3 );
-					var color = new THREE.ColorNode( 0xFFFFFF );
+						// MATERIAL
 
-					var viewZ = new THREE.Math2Node(
-						new THREE.NormalNode( THREE.NormalNode.VIEW ),
-						new THREE.Vector3Node( 0, 0, - intensity ),
-						THREE.Math2Node.DOT
-					);
+						mtl = new THREE.PhongNodeMaterial();
 
-					var rim = new THREE.OperatorNode(
-						viewZ,
-						new THREE.FloatNode( intensity ),
-						THREE.OperatorNode.ADD
-					);
+						var intensity = 1.3;
+						var power = new THREE.FloatNode( 3 );
+						var color = new THREE.ColorNode( 0xFFFFFF );
 
-					var rimPower = new THREE.Math2Node(
-						rim,
-						power,
-						THREE.Math2Node.POW
-					);
+						var viewZ = new THREE.Math2Node(
+							new THREE.NormalNode(),
+							new THREE.Vector3Node( 0, 0, - intensity ),
+							THREE.Math2Node.DOT
+						);
+
+						var rim = new THREE.OperatorNode(
+							viewZ,
+							new THREE.FloatNode( intensity ),
+							THREE.OperatorNode.ADD
+						);
+
+						var rimPower = new THREE.Math2Node(
+							rim,
+							power,
+							THREE.Math2Node.POW
+						);
+
+						var rimColor = new THREE.OperatorNode(
+							rimPower,
+							color,
+							THREE.OperatorNode.MUL
+						);
+
+						mtl.color = new THREE.ColorNode( 0x111111 );
+						mtl.emissive = rimColor;
+
+						// GUI
+
+						addGui( 'color', color.value.getHex(), function ( val ) {
+
+							color.value.setHex( val );
+
+						}, true );
+
+						addGui( 'intensity', intensity, function ( val ) {
+
+							intensity = val;
+
+							viewZ.b.z = - intensity;
+							rim.b.value = intensity;
+
+
+						}, false, 0, 3 );
+
+						addGui( 'power', power.value, function ( val ) {
+
+							power.value = val;
+
+						}, false, 0, 6 );
+
+						addGui( 'xray', false, function ( val ) {
+
+							if ( val ) {
+
+								mtl.emissive = color;
+								mtl.alpha = rimPower;
+								mtl.blending = THREE.AdditiveBlending;
+								mtl.depthWrite = false;
+
+							}				else {
+
+								mtl.emissive = rimColor;
+								mtl.alpha = null;
+								mtl.blending = THREE.NormalBlending;
+								mtl.depthWrite = true;
+
+							}
+
+							mtl.needsUpdate = true;
+
+						} );
+
+						break;
+
+					case 'color-adjustment':
+
+						// MATERIAL
+
+						mtl = new THREE.PhongNodeMaterial();
+
+						var texture = new THREE.TextureNode( getTexture( "brick" ) );
+
+						var hue = new THREE.FloatNode();
+						var sataturation = new THREE.FloatNode( 1 );
+						var vibrance = new THREE.FloatNode();
+						var brightness = new THREE.FloatNode( 0 );
+						var contrast = new THREE.FloatNode( 1 );
+
+						var hueNode = new THREE.ColorAdjustmentNode( texture, hue, THREE.ColorAdjustmentNode.HUE );
+						var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
+						var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
+						var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
+						var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
+
+						mtl.color = contrastNode;
+
+						// GUI
+
+						addGui( 'hue', hue.value, function ( val ) {
+
+							hue.value = val;
 
-					var rimColor = new THREE.OperatorNode(
-						rimPower,
-						color,
-						THREE.OperatorNode.MUL
-					);
+						}, false, 0, Math.PI * 2 );
 
-					mtl.color = new THREE.ColorNode( 0x111111 );
-					mtl.emissive = rimColor;
+						addGui( 'saturation', sataturation.value, function ( val ) {
 
-					// GUI
+							sataturation.value = val;
 
-					addGui( 'color', color.value.getHex(), function ( val ) {
+						}, false, 0, 2 );
 
-						color.value.setHex( val );
+						addGui( 'vibrance', vibrance.value, function ( val ) {
 
-					}, true );
+							vibrance.value = val;
 
-					addGui( 'intensity', intensity, function ( val ) {
+						}, false, - 1, 1 );
 
-						intensity = val;
+						addGui( 'brightness', brightness.value, function ( val ) {
 
-						viewZ.b.z = - intensity;
-						rim.b.value = intensity;
+							brightness.value = val;
 
+						}, false, 0, .5 );
 
-					}, false, 0, 3 );
+						addGui( 'contrast', contrast.value, function ( val ) {
 
-					addGui( 'power', power.value, function ( val ) {
+							contrast.value = val;
 
-						power.value = val;
+						}, false, 0, 2 );
 
-					}, false, 0, 6 );
+						break;
 
-					addGui( 'xray', false, function ( val ) {
+					case 'uv-transform':
 
-						if ( val ) {
+						// MATERIAL
 
-							mtl.emissive = color;
-							mtl.alpha = rimPower;
-							mtl.blending = THREE.AdditiveBlending;
-							mtl.depthWrite = false;
+						mtl = new THREE.PhongNodeMaterial();
 
-						}				else {
+						var translate = new THREE.Vector2();
+						var rotate = 0;
+						var scale = new THREE.Vector2( 1, 1 );
 
-							mtl.emissive = rimColor;
-							mtl.alpha = null;
-							mtl.blending = THREE.NormalBlending;
-							mtl.depthWrite = true;
+						var texture = new THREE.TextureNode( getTexture( "brick" ) );
+						texture.uv = new THREE.UVTransformNode();
+						//texture.uv.uv = new THREE.UVNode( 1 ); // uv2 for example
+
+						mtl.color = texture;
+
+						// GUI
+
+						function updateUVTransform() {
+
+							texture.uv.setUvTransform( translate.x, translate.y, scale.x, scale.y, THREE.Math.degToRad( rotate ) );
 
 						}
 
-						mtl.needsUpdate = true;
+						addGui( 'translateX', translate.x, function ( val ) {
 
-					} );
+							translate.x = val;
 
-					break;
+							updateUVTransform();
 
-				case 'color-adjustment':
+						}, false, 0, 10 );
 
-					// MATERIAL
+						addGui( 'translateY', translate.y, function ( val ) {
 
-					mtl = new THREE.PhongNodeMaterial();
+							translate.y = val;
 
-					var texture = new THREE.TextureNode( getTexture( "brick" ) );
+							updateUVTransform();
 
-					var hue = new THREE.FloatNode();
-					var sataturation = new THREE.FloatNode( 1 );
-					var vibrance = new THREE.FloatNode();
-					var brightness = new THREE.FloatNode( 0 );
-					var contrast = new THREE.FloatNode( 1 );
+						}, false, 0, 10 );
 
-					var hueNode = new THREE.ColorAdjustmentNode( texture, hue, THREE.ColorAdjustmentNode.HUE );
-					var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
-					var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
-					var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
-					var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
+						addGui( 'scaleX', scale.x, function ( val ) {
 
-					mtl.color = contrastNode;
+							scale.x = val;
 
-					// GUI
+							updateUVTransform();
 
-					addGui( 'hue', hue.value, function ( val ) {
+						}, false, .1, 5 );
 
-						hue.value = val;
+						addGui( 'scaleY', scale.y, function ( val ) {
 
-					}, false, 0, Math.PI * 2 );
+							scale.y = val;
 
-					addGui( 'saturation', sataturation.value, function ( val ) {
+							updateUVTransform();
 
-						sataturation.value = val;
+						}, false, .1, 5 );
 
-					}, false, 0, 2 );
+						addGui( 'rotate', rotate, function ( val ) {
 
-					addGui( 'vibrance', vibrance.value, function ( val ) {
+							rotate = val;
 
-						vibrance.value = val;
+							updateUVTransform();
 
-					}, false, - 1, 1 );
+						}, false, 0, 360 );
 
-					addGui( 'brightness', brightness.value, function ( val ) {
+						break;
 
-						brightness.value = val;
+					case 'bump':
 
-					}, false, 0, .5 );
+						// MATERIAL
 
-					addGui( 'contrast', contrast.value, function ( val ) {
+						mtl = new THREE.PhongNodeMaterial();
 
-						contrast.value = val;
+						var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
 
-					}, false, 0, 2 );
+						var bumpMap = new THREE.BumpMapNode( new THREE.TextureNode( getTexture( "brick" ) ) );
+						bumpMap.scale = new THREE.FloatNode( .5 );
 
-					break;
+						mtl.color = diffuse;
+						mtl.normal = bumpMap;
 
-				case 'uv-transform':
+						// convert BumpMap to NormalMap
+						//bumpMap.toNormalMap = true;
+						//mtl.normal = new THREE.NormalMapNode( bumpMap );
 
-					// MATERIAL
+						// GUI
 
-					mtl = new THREE.PhongNodeMaterial();
+						addGui( 'scale', bumpMap.scale.value, function ( val ) {
 
-					var translate = new THREE.Vector2();
-					var rotate = 0;
-					var scale = new THREE.Vector2( 1, 1 );
+							bumpMap.scale.value = val;
 
-					var texture = new THREE.TextureNode( getTexture( "brick" ) );
-					texture.uv = new THREE.UVTransformNode();
-					//texture.uv.uv = new THREE.UVNode( 1 ); // uv2 for example
+						}, false, - 2, 2 );
 
-					mtl.color = texture;
+						addGui( 'color', true, function ( val ) {
 
-					// GUI
+							mtl.color = val ? diffuse : new THREE.ColorNode( 0xEEEEEE );
 
-					function updateUVTransform() {
+							mtl.needsUpdate = true;
 
-						texture.uv.setUvTransform( translate.x, translate.y, scale.x, scale.y, THREE.Math.degToRad( rotate ) );
+						} );
 
-					}
+						break;
 
-					addGui( 'translateX', translate.x, function ( val ) {
+					case 'blur':
 
-						translate.x = val;
+						// MATERIAL
 
-						updateUVTransform();
+						mtl = new THREE.PhongNodeMaterial();
 
-					}, false, 0, 10 );
+						var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
 
-					addGui( 'translateY', translate.y, function ( val ) {
+						var blur = new THREE.BlurNode( new THREE.TextureNode( getTexture( "brick" ) ) );
 
-						translate.y = val;
+						mtl.color = blur;
 
-						updateUVTransform();
+						// GUI
 
-					}, false, 0, 10 );
+						addGui( 'radiusX', blur.radius.x, function ( val ) {
 
-					addGui( 'scaleX', scale.x, function ( val ) {
+							blur.radius.x = val;
 
-						scale.x = val;
+						}, false, 0, 15 );
 
-						updateUVTransform();
+						addGui( 'radiusY', blur.radius.y, function ( val ) {
 
-					}, false, .1, 5 );
+							blur.radius.y = val;
 
-					addGui( 'scaleY', scale.y, function ( val ) {
+						}, false, 0, 15 );
 
-						scale.y = val;
+						break;
 
-						updateUVTransform();
+					case 'spherical-reflection':
 
-					}, false, .1, 5 );
+						// MATERIAL
 
-					addGui( 'rotate', rotate, function ( val ) {
+						mtl = new THREE.PhongNodeMaterial();
 
-						rotate = val;
+						mtl.environment = new THREE.TextureNode( getTexture( "spherical" ), new THREE.ReflectNode( THREE.ReflectNode.SPHERE ) );
 
-						updateUVTransform();
+						break;
 
-					}, false, 0, 360 );
+					case 'fresnel':
 
-					break;
+						// MATERIAL
 
-				case 'bump':
+						mtl = new THREE.PhongNodeMaterial();
 
-					// MATERIAL
+						var reflectance = new THREE.FloatNode( 1.3 );
+						var power = new THREE.FloatNode( 1 );
+						var color = new THREE.CubeTextureNode( cubemap );
 
-					mtl = new THREE.PhongNodeMaterial();
+						var viewZ = new THREE.Math2Node(
+							new THREE.NormalNode(),
+							new THREE.Vector3Node( 0, 0, - 1 ),
+							THREE.Math2Node.DOT
+						);
 
-					var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
+						var theta = new THREE.OperatorNode(
+							viewZ,
+							new THREE.FloatNode( 1 ),
+							THREE.OperatorNode.ADD
+						);
 
-					var bumpMap = new THREE.BumpMapNode( new THREE.TextureNode( getTexture( "brick" ) ) );
-					bumpMap.scale = new THREE.FloatNode( .5 );
+						var thetaPower = new THREE.Math2Node(
+							theta,
+							power,
+							THREE.Math2Node.POW
+						);
 
-					mtl.color = diffuse;
-					mtl.normal = bumpMap;
+						var fresnel = new THREE.OperatorNode(
+							reflectance,
+							thetaPower,
+							THREE.OperatorNode.MUL
+						);
 
-					// convert BumpMap to NormalMap
-					//bumpMap.toNormalMap = true;
-					//mtl.normal = new THREE.NormalMapNode( bumpMap );
-					
-					// GUI
+						mtl.color = new THREE.ColorNode( 0x3399FF );
+						mtl.environment = color;
+						mtl.environmentAlpha = new THREE.Math1Node( fresnel, THREE.Math1Node.SAT );
 
-					addGui( 'scale', bumpMap.scale.value, function ( val ) {
+						// GUI
 
-						bumpMap.scale.value = val;
+						addGui( 'reflectance', reflectance.value, function ( val ) {
 
-					}, false, - 2, 2 );
+							reflectance.value = val;
 
-					addGui( 'color', true, function ( val ) {
+						}, false, 0, 3 );
 
-						mtl.color = val ? diffuse : new THREE.ColorNode( 0xEEEEEE );
+						addGui( 'power', power.value, function ( val ) {
 
-						mtl.needsUpdate = true;
+							power.value = val;
 
-					} );
+						}, false, 0, 5 );
 
-					break;
+						break;
 
-				case 'blur':
+					case 'layers':
 
-					// MATERIAL
+						// MATERIAL
 
-					mtl = new THREE.PhongNodeMaterial();
+						mtl = new THREE.PhongNodeMaterial();
 
-					var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
+						var tex1 = new THREE.TextureNode( getTexture( "grass" ) );
+						var tex2 = new THREE.TextureNode( getTexture( "brick" ) );
 
-					var blur = new THREE.BlurNode( new THREE.TextureNode( getTexture( "brick" ) ) );
+						var offset = new THREE.FloatNode( 0 );
+						var scale = new THREE.FloatNode( 1 );
+						var uv = new THREE.UVNode();
 
-					mtl.color = blur;
+						var uvOffset = new THREE.OperatorNode(
+							offset,
+							uv,
+							THREE.OperatorNode.ADD
+						);
 
-					// GUI
+						var uvScale = new THREE.OperatorNode(
+							uvOffset,
+							scale,
+							THREE.OperatorNode.MUL
+						);
 
-					addGui( 'radiusX', blur.radius.x, function ( val ) {
+						var mask = new THREE.TextureNode( getTexture( "decalDiffuse" ), uvScale );
+						var maskAlphaChannel = new THREE.SwitchNode( mask, 'w' );
 
-						blur.radius.x = val;
+						var blend = new THREE.Math3Node(
+							tex1,
+							tex2,
+							maskAlphaChannel,
+							THREE.Math3Node.MIX
+						);
 
-					}, false, 0, 15 );
+						mtl.color = blend;
 
-					addGui( 'radiusY', blur.radius.y, function ( val ) {
+						// GUI
 
-						blur.radius.y = val;
+						addGui( 'offset', offset.value, function ( val ) {
 
-					}, false, 0, 15 );
+							offset.value = val;
 
-					break;
+						}, false, 0, 1 );
 
-				case 'spherical-reflection':
+						addGui( 'scale', scale.value, function ( val ) {
 
-					// MATERIAL
+							scale.value = val;
 
-					mtl = new THREE.PhongNodeMaterial();
+						}, false, 0, 10 );
 
-					mtl.environment = new THREE.TextureNode( getTexture( "spherical" ), new THREE.ReflectNode( THREE.ReflectNode.SPHERE ) );
+						break;
 
-					break;
+					case 'saturation':
 
-				case 'fresnel':
+						// MATERIAL
 
-					// MATERIAL
+						mtl = new THREE.StandardNodeMaterial();
 
-					mtl = new THREE.PhongNodeMaterial();
+						var tex = new THREE.TextureNode( getTexture( "brick" ) );
+						var sat = new THREE.FloatNode( 0 );
 
-					var reflectance = new THREE.FloatNode( 1.3 );
-					var power = new THREE.FloatNode( 1 );
-					var color = new THREE.CubeTextureNode( cubemap );
+						var satrgb = new THREE.FunctionNode( [
+							"vec3 satrgb( vec3 rgb, float adjustment ) {",
+							// include luminance function from LuminanceNode
+							"	vec3 intensity = vec3( luminance( rgb ) );",
+							"	return mix( intensity, rgb, adjustment );",
+							"}"
+						].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
 
-					var viewZ = new THREE.Math2Node(
-						new THREE.NormalNode( THREE.NormalNode.VIEW ),
-						new THREE.Vector3Node( 0, 0, - 1 ),
-						THREE.Math2Node.DOT
-					);
+						var saturation = new THREE.FunctionCallNode( satrgb );
+						saturation.inputs.rgb = tex;
+						saturation.inputs.adjustment = sat;
 
-					var theta = new THREE.OperatorNode(
-						viewZ,
-						new THREE.FloatNode( 1 ),
-						THREE.OperatorNode.ADD
-					);
+						// or try
 
-					var thetaPower = new THREE.Math2Node(
-						theta,
-						power,
-						THREE.Math2Node.POW
-					);
+						//saturation.inputs[0] = tex;
+						//saturation.inputs[1] = sat;
 
-					var fresnel = new THREE.OperatorNode(
-						reflectance,
-						thetaPower,
-						THREE.OperatorNode.MUL
-					);
+						mtl.color = saturation;
 
-					mtl.color = new THREE.ColorNode( 0x3399FF );
-					mtl.environment = color;
-					mtl.environmentAlpha = new THREE.Math1Node( fresnel, THREE.Math1Node.SAT );
+						// GUI
 
-					// GUI
+						addGui( 'saturation', sat.value, function ( val ) {
 
-					addGui( 'reflectance', reflectance.value, function ( val ) {
+							sat.value = val;
 
-						reflectance.value = val;
+						}, false, 0, 2 );
 
-					}, false, 0, 3 );
+						break;
 
-					addGui( 'power', power.value, function ( val ) {
+					case 'top-bottom':
 
-						power.value = val;
+						// MATERIAL
 
-					}, false, 0, 5 );
+						mtl = new THREE.PhongNodeMaterial();
 
-					break;
+						var top = new THREE.TextureNode( getTexture( "grass" ) );
+						var bottom = new THREE.TextureNode( getTexture( "brick" ) );
 
-				case 'layers':
+						var normal = new THREE.NormalNode( THREE.NormalNode.WORLD );
+						var normalY = new THREE.SwitchNode( normal, 'y' );
 
-					// MATERIAL
+						var hard = new THREE.FloatNode( 9 );
+						var offset = new THREE.FloatNode( - 2.5 );
 
-					mtl = new THREE.PhongNodeMaterial();
+						var hardClamp = new THREE.OperatorNode(
+							normalY,
+							hard,
+							THREE.OperatorNode.MUL
+						);
 
-					var tex1 = new THREE.TextureNode( getTexture( "grass" ) );
-					var tex2 = new THREE.TextureNode( getTexture( "brick" ) );
+						var offsetClamp = new THREE.OperatorNode(
+							hardClamp,
+							offset,
+							THREE.OperatorNode.ADD
+						);
 
-					var offset = new THREE.FloatNode( 0 );
-					var scale = new THREE.FloatNode( 1 );
-					var uv = new THREE.UVNode();
+						var clamp0at1 = new THREE.Math1Node( offsetClamp, THREE.Math1Node.SAT );
 
-					var uvOffset = new THREE.OperatorNode(
-						offset,
-						uv,
-						THREE.OperatorNode.ADD
-					);
+						var blend = new THREE.Math3Node( top, bottom, clamp0at1, THREE.Math3Node.MIX );
 
-					var uvScale = new THREE.OperatorNode(
-						uvOffset,
-						scale,
-						THREE.OperatorNode.MUL
-					);
+						mtl.color = blend;
 
-					var mask = new THREE.TextureNode( getTexture( "decalDiffuse" ), uvScale );
-					var maskAlphaChannel = new THREE.SwitchNode( mask, 'w' );
+						// GUI
 
-					var blend = new THREE.Math3Node(
-						tex1,
-						tex2,
-						maskAlphaChannel,
-						THREE.Math3Node.MIX
-					);
+						addGui( 'hard', hard.value, function ( val ) {
 
-					mtl.color = blend;
+							hard.value = val;
 
-					// GUI
+						}, false, 0, 20 );
 
-					addGui( 'offset', offset.value, function ( val ) {
+						addGui( 'offset', offset.value, function ( val ) {
 
-						offset.value = val;
+							offset.value = val;
 
-					}, false, 0, 1 );
+						}, false, - 10, 10 );
 
-					addGui( 'scale', scale.value, function ( val ) {
+						break;
 
-						scale.value = val;
+					case 'displace':
 
-					}, false, 0, 10 );
+						// MATERIAL
 
-					break;
+						mtl = new THREE.PhongNodeMaterial();
 
-				case 'saturation':
+						var time = new THREE.TimerNode();
+						var scale = new THREE.FloatNode( 2 );
+						var speed = new THREE.FloatNode( .2 );
+						var colorA = new THREE.ColorNode( 0xFFFFFF );
+						var colorB = new THREE.ColorNode( 0x0054df );
 
-					// MATERIAL
+						// used for serialization only
+						time.name = "time";
+						speed.name = "speed";
 
-					mtl = new THREE.StandardNodeMaterial();
+						var uv = new THREE.UVNode();
 
-					var tex = new THREE.TextureNode( getTexture( "brick" ) );
-					var sat = new THREE.FloatNode( 0 );
+						var timeScl = new THREE.OperatorNode(
+							time,
+							speed,
+							THREE.OperatorNode.MUL
+						);
 
-					var satrgb = new THREE.FunctionNode( [
-						"vec3 satrgb( vec3 rgb, float adjustment ) {",
-						// include luminance function from LuminanceNode
-						"	vec3 intensity = vec3( luminance( rgb ) );",
-						"	return mix( intensity, rgb, adjustment );",
-						"}"
-					].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
+						var displaceOffset = new THREE.OperatorNode(
+							timeScl,
+							uv,
+							THREE.OperatorNode.ADD
+						);
 
-					var saturation = new THREE.FunctionCallNode( satrgb );
-					saturation.inputs.rgb = tex;
-					saturation.inputs.adjustment = sat;
+						var tex = new THREE.TextureNode( getTexture( "cloud" ), displaceOffset );
+						var texArea = new THREE.SwitchNode( tex, 'w' );
 
-					// or try
+						var displace = new THREE.OperatorNode(
+							new THREE.NormalNode(),
+							texArea,
+							THREE.OperatorNode.MUL
+						);
 
-					//saturation.inputs[0] = tex;
-					//saturation.inputs[1] = sat;
+						var displaceScale = new THREE.OperatorNode(
+							displace,
+							scale,
+							THREE.OperatorNode.MUL
+						);
 
-					mtl.color = saturation;
+						var blend = new THREE.OperatorNode(
+							new THREE.PositionNode(),
+							displaceScale,
+							THREE.OperatorNode.ADD
+						);
 
-					// GUI
+						var color = new THREE.Math3Node(
+							colorB,
+							colorA,
+							texArea,
+							THREE.Math3Node.MIX
+						);
 
-					addGui( 'saturation', sat.value, function ( val ) {
+						mtl.color = mtl.specular = new THREE.ColorNode( 0 );
+						mtl.emissive = color;
+						mtl.position = blend;
 
-						sat.value = val;
+						// GUI
 
-					}, false, 0, 2 );
+						addGui( 'speed', speed.value, function ( val ) {
 
-					break;
+							speed.value = val;
 
-				case 'top-bottom':
+						}, false, 0, 1 );
 
-					// MATERIAL
+						addGui( 'scale', scale.value, function ( val ) {
 
-					mtl = new THREE.PhongNodeMaterial();
+							scale.value = val;
 
-					var top = new THREE.TextureNode( getTexture( "grass" ) );
-					var bottom = new THREE.TextureNode( getTexture( "brick" ) );
+						}, false, 0, 10 );
 
-					var normal = new THREE.NormalNode( THREE.NormalNode.WORLD );
-					var normalY = new THREE.SwitchNode( normal, 'y' );
+						addGui( 'colorA', colorA.value.getHex(), function ( val ) {
 
-					var hard = new THREE.FloatNode( 9 );
-					var offset = new THREE.FloatNode( - 2.5 );
+							colorA.value.setHex( val );
 
-					var hardClamp = new THREE.OperatorNode(
-						normalY,
-						hard,
-						THREE.OperatorNode.MUL
-					);
+						}, true );
 
-					var offsetClamp = new THREE.OperatorNode(
-						hardClamp,
-						offset,
-						THREE.OperatorNode.ADD
-					);
+						addGui( 'colorB', colorB.value.getHex(), function ( val ) {
 
-					var clamp0at1 = new THREE.Math1Node( offsetClamp, THREE.Math1Node.SAT );
+							colorB.value.setHex( val );
 
-					var blend = new THREE.Math3Node( top, bottom, clamp0at1, THREE.Math3Node.MIX );
+						}, true );
 
-					mtl.color = blend;
+						break;
 
-					// GUI
+					case 'smoke':
 
-					addGui( 'hard', hard.value, function ( val ) {
+						// MATERIAL
 
-						hard.value = val;
+						mtl = new THREE.PhongNodeMaterial();
 
-					}, false, 0, 20 );
+						var time = new THREE.TimerNode();
+						var uv = new THREE.UVNode();
 
-					addGui( 'offset', offset.value, function ( val ) {
+						var timeSpeedA = new THREE.OperatorNode(
+							time,
+							new THREE.Vector2Node( 0.3, 0.1 ),
+							THREE.OperatorNode.MUL
+						);
 
-						offset.value = val;
+						var timeSpeedB = new THREE.OperatorNode(
+							time,
+							new THREE.Vector2Node( 0.15, 0.4 ),
+							THREE.OperatorNode.MUL
+						);
 
-					}, false, - 10, 10 );
+						var uvOffsetA = new THREE.OperatorNode(
+							timeSpeedA,
+							uv,
+							THREE.OperatorNode.ADD
+						);
 
-					break;
+						var uvOffsetB = new THREE.OperatorNode(
+							timeSpeedB,
+							uv,
+							THREE.OperatorNode.ADD
+						);
 
-				case 'displace':
+						var cloudA = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetA );
+						var cloudB = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetB );
 
-					// MATERIAL
+						var clouds = new THREE.OperatorNode(
+							cloudA,
+							cloudB,
+							THREE.OperatorNode.ADD
+						);
 
-					mtl = new THREE.PhongNodeMaterial();
+						mtl.environment = new THREE.ColorNode( 0xFFFFFF );
+						mtl.alpha = clouds;
 
-					var time = new THREE.TimerNode();
-					var scale = new THREE.FloatNode( 2 );
-					var speed = new THREE.FloatNode( .2 );
-					var colorA = new THREE.ColorNode( 0xFFFFFF );
-					var colorB = new THREE.ColorNode( 0x0054df );
+						// GUI
 
-					// used for serialization only
-					time.name = "time";
-					speed.name = "speed";
+						addGui( 'color', mtl.environment.value.getHex(), function ( val ) {
 
-					var uv = new THREE.UVNode();
+							mtl.environment.value.setHex( val );
 
-					var timeScl = new THREE.OperatorNode(
-						time,
-						speed,
-						THREE.OperatorNode.MUL
-					);
+						}, true );
 
-					var displaceOffset = new THREE.OperatorNode(
-						timeScl,
-						uv,
-						THREE.OperatorNode.ADD
-					);
+						break;
 
-					var tex = new THREE.TextureNode( getTexture( "cloud" ), displaceOffset );
-					var texArea = new THREE.SwitchNode( tex, 'w' );
+					case 'camera-depth':
 
-					var displace = new THREE.OperatorNode(
-						new THREE.NormalNode(),
-						texArea,
-						THREE.OperatorNode.MUL
-					);
+						// MATERIAL
 
-					var displaceScale = new THREE.OperatorNode(
-						displace,
-						scale,
-						THREE.OperatorNode.MUL
-					);
+						var colorA = new THREE.ColorNode( 0xFFFFFF );
+						var colorB = new THREE.ColorNode( 0x0054df );
 
-					var blend = new THREE.OperatorNode(
-						new THREE.PositionNode(),
-						displaceScale,
-						THREE.OperatorNode.ADD
-					);
+						var depth = new THREE.CameraNode( THREE.CameraNode.DEPTH );
+						depth.near.value = 1;
+						depth.far.value = 200;
 
-					var color = new THREE.Math3Node(
-						colorB,
-						colorA,
-						texArea,
-						THREE.Math3Node.MIX
-					);
+						var colors = new THREE.Math3Node(
+							colorB,
+							colorA,
+							depth,
+							THREE.Math3Node.MIX
+						);
 
-					mtl.color = mtl.specular = new THREE.ColorNode( 0 );
-					mtl.emissive = color;
-					mtl.transform = blend;
+						mtl = new THREE.PhongNodeMaterial();
+						mtl.color = colors;
 
-					// GUI
+						// GUI
 
-					addGui( 'speed', speed.value, function ( val ) {
+						addGui( 'near', depth.near.value, function ( val ) {
 
-						speed.value = val;
+							depth.near.value = val;
 
-					}, false, 0, 1 );
+						}, false, 1, 1200 );
 
-					addGui( 'scale', scale.value, function ( val ) {
+						addGui( 'far', depth.far.value, function ( val ) {
 
-						scale.value = val;
+							depth.far.value = val;
 
-					}, false, 0, 10 );
+						}, false, 1, 1200 );
 
-					addGui( 'colorA', colorA.value.getHex(), function ( val ) {
+						addGui( 'nearColor', colorA.value.getHex(), function ( val ) {
 
-						colorA.value.setHex( val );
+							colorA.value.setHex( val );
 
-					}, true );
+						}, true );
 
-					addGui( 'colorB', colorB.value.getHex(), function ( val ) {
+						addGui( 'farColor', colorB.value.getHex(), function ( val ) {
 
-						colorB.value.setHex( val );
+							colorB.value.setHex( val );
 
-					}, true );
+						}, true );
 
-					break;
+						break;
 
-				case 'smoke':
+					case 'caustic':
 
-					// MATERIAL
+						// MATERIAL
 
-					mtl = new THREE.PhongNodeMaterial();
+						mtl = new THREE.StandardNodeMaterial();
 
-					var time = new THREE.TimerNode();
-					var uv = new THREE.UVNode();
+						var hash2 = new THREE.FunctionNode( [
+							"vec2 hash2(vec2 p) {",
+							"	return fract(sin(vec2(dot(p, vec2(123.4, 748.6)), dot(p, vec2(547.3, 659.3))))*5232.85324);",
+							"}"
+						].join( "\n" ) );
 
-					var timeSpeedA = new THREE.OperatorNode(
-						time,
-						new THREE.Vector2Node( 0.3, 0.1 ),
-						THREE.OperatorNode.MUL
-					);
+						var voronoi = new THREE.FunctionNode( [
+							// Based off of iq's described here: http://www.iquilezles.org/www/articles/voronoili
+							"float voronoi(vec2 p, in float time) {",
+							"	vec2 n = floor(p);",
+							"	vec2 f = fract(p);",
+							"	float md = 5.0;",
+							"	vec2 m = vec2(0.0);",
+							"	for (int i = -1; i <= 1; i++) {",
+							"		for (int j = -1; j <= 1; j++) {",
+							"			vec2 g = vec2(i, j);",
+							"			vec2 o = hash2(n + g);",
+							"			o = 0.5 + 0.5 * sin(time + 5.038 * o);",
+							"			vec2 r = g + o - f;",
+							"			float d = dot(r, r);",
+							"			if (d < md) {",
+							"				md = d;",
+							"				m = n+g+o;",
+							"			}",
+							"		}",
+							"	}",
+							"	return md;",
+							"}"
+						].join( "\n" ), [ hash2 ] ); // define hash2 as dependencies
 
-					var timeSpeedB = new THREE.OperatorNode(
-						time,
-						new THREE.Vector2Node( 0.15, 0.4 ),
-						THREE.OperatorNode.MUL
-					);
+						var voronoiLayers = new THREE.FunctionNode( [
+							// based on https://www.shadertoy.com/view/4tXSDf
+							"float voronoiLayers(vec2 p, in float time) {",
+							"	float v = 0.0;",
+							"	float a = 0.4;",
+							"	for (int i = 0; i < 3; i++) {",
+							"		v += voronoi(p, time) * a;",
+							"		p *= 2.0;",
+							"		a *= 0.5;",
+							"	}",
+							"	return v;",
+							"}"
+						].join( "\n" ), [ voronoi ] ); // define voronoi as dependencies
 
-					var uvOffsetA = new THREE.OperatorNode(
-						timeSpeedA,
-						uv,
-						THREE.OperatorNode.ADD
-					);
+						var time = new THREE.TimerNode();
+						var timeScale = new THREE.FloatNode( 2 );
 
-					var uvOffsetB = new THREE.OperatorNode(
-						timeSpeedB,
-						uv,
-						THREE.OperatorNode.ADD
-					);
+						// used for serialization only
+						time.name = "time";
+						timeScale.name = "speed";
 
-					var cloudA = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetA );
-					var cloudB = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetB );
+						var alpha = new THREE.FloatNode( 1 );
+						var scale = new THREE.FloatNode( .1 );
+						var intensity = new THREE.FloatNode( 1.5 );
 
-					var clouds = new THREE.OperatorNode(
-						cloudA,
-						cloudB,
-						THREE.OperatorNode.ADD
-					);
+						var color = new THREE.ColorNode( 0xFFFFFF );
+						var colorA = new THREE.ColorNode( 0xFFFFFF );
+						var colorB = new THREE.ColorNode( 0x0054df );
 
-					mtl.environment = new THREE.ColorNode( 0xFFFFFF );
-					mtl.alpha = clouds;
+						var worldPos = new THREE.PositionNode( THREE.PositionNode.WORLD );
+						var worldPosTop = new THREE.SwitchNode( worldPos, 'xz' );
 
-					// GUI
+						var worldNormal = new THREE.NormalNode( THREE.NormalNode.WORLD );
 
-					addGui( 'color', mtl.environment.value.getHex(), function ( val ) {
+						var mask = new THREE.SwitchNode( worldNormal, 'y' );
 
-						mtl.environment.value.setHex( val );
+						// clamp0at1
+						mask = new THREE.Math1Node( mask, THREE.Math1Node.SAT );
 
-					}, true );
+						var timeOffset = new THREE.OperatorNode(
+							time,
+							timeScale,
+							THREE.OperatorNode.MUL
+						);
 
-					break;
+						var uvPos = new THREE.OperatorNode(
+							worldPosTop,
+							scale,
+							THREE.OperatorNode.MUL
+						);
 
-				case 'camera-depth':
+						var voronoi = new THREE.FunctionCallNode( voronoiLayers );
+						voronoi.inputs.p = uvPos;
+						voronoi.inputs.time = timeOffset;
 
-					// MATERIAL
+						var maskCaustic = new THREE.OperatorNode(
+							alpha,
+							mask,
+							THREE.OperatorNode.MUL
+						);
 
-					var colorA = new THREE.ColorNode( 0xFFFFFF );
-					var colorB = new THREE.ColorNode( 0x0054df );
+						var voronoiIntensity = new THREE.OperatorNode(
+							voronoi,
+							intensity,
+							THREE.OperatorNode.MUL
+						);
 
-					var depth = new THREE.CameraNode( THREE.CameraNode.DEPTH );
-					depth.near.value = 1;
-					depth.far.value = 200;
+						var voronoiColors = new THREE.Math3Node(
+							colorB,
+							colorA,
+							new THREE.Math1Node( voronoiIntensity, THREE.Math1Node.SAT ), // mix needs clamp
+							THREE.Math3Node.MIX
+						);
 
-					var colors = new THREE.Math3Node(
-						colorB,
-						colorA,
-						depth,
-						THREE.Math3Node.MIX
-					);
+						var caustic = new THREE.Math3Node(
+							color,
+							voronoiColors,
+							maskCaustic,
+							THREE.Math3Node.MIX
+						);
 
-					mtl = new THREE.PhongNodeMaterial();
-					mtl.color = colors;
+						var causticLights = new THREE.OperatorNode(
+							voronoiIntensity,
+							maskCaustic,
+							THREE.OperatorNode.MUL
+						);
 
-					// GUI
+						mtl.color = caustic;
+						mtl.ambient = causticLights;
 
-					addGui( 'near', depth.near.value, function ( val ) {
+						// GUI
 
-						depth.near.value = val;
+						addGui( 'timeScale', timeScale.value, function ( val ) {
 
-					}, false, 1, 1200 );
+							timeScale.value = val;
 
-					addGui( 'far', depth.far.value, function ( val ) {
+						}, false, 0, 5 );
 
-						depth.far.value = val;
+						addGui( 'intensity', intensity.value, function ( val ) {
 
-					}, false, 1, 1200 );
+							intensity.value = val;
 
-					addGui( 'nearColor', colorA.value.getHex(), function ( val ) {
+						}, false, 0, 3 );
 
-						colorA.value.setHex( val );
+						addGui( 'scale', scale.value, function ( val ) {
 
-					}, true );
+							scale.value = val;
 
-					addGui( 'farColor', colorB.value.getHex(), function ( val ) {
+						}, false, 0, 1 );
 
-						colorB.value.setHex( val );
+						addGui( 'alpha', alpha.value, function ( val ) {
 
-					}, true );
+							alpha.value = val;
 
-					break;
+						}, false, 0, 1 );
 
-				case 'caustic':
+						addGui( 'color', color.value.getHex(), function ( val ) {
 
-					// MATERIAL
+							color.value.setHex( val );
 
-					mtl = new THREE.StandardNodeMaterial();
+						}, true );
 
-					var hash2 = new THREE.FunctionNode( [
-						"vec2 hash2(vec2 p) {",
-						"	return fract(sin(vec2(dot(p, vec2(123.4, 748.6)), dot(p, vec2(547.3, 659.3))))*5232.85324);",
-						"}"
-					].join( "\n" ) );
+						addGui( 'colorA', colorA.value.getHex(), function ( val ) {
 
-					var voronoi = new THREE.FunctionNode( [
-						// Based off of iq's described here: http://www.iquilezles.org/www/articles/voronoili
-						"float voronoi(vec2 p, in float time) {",
-						"	vec2 n = floor(p);",
-						"	vec2 f = fract(p);",
-						"	float md = 5.0;",
-						"	vec2 m = vec2(0.0);",
-						"	for (int i = -1; i <= 1; i++) {",
-						"		for (int j = -1; j <= 1; j++) {",
-						"			vec2 g = vec2(i, j);",
-						"			vec2 o = hash2(n + g);",
-						"			o = 0.5 + 0.5 * sin(time + 5.038 * o);",
-						"			vec2 r = g + o - f;",
-						"			float d = dot(r, r);",
-						"			if (d < md) {",
-						"				md = d;",
-						"				m = n+g+o;",
-						"			}",
-						"		}",
-						"	}",
-						"	return md;",
-						"}"
-					].join( "\n" ), [ hash2 ] ); // define hash2 as dependencies
+							colorA.value.setHex( val );
 
-					var voronoiLayers = new THREE.FunctionNode( [
-						// based on https://www.shadertoy.com/view/4tXSDf
-						"float voronoiLayers(vec2 p, in float time) {",
-						"	float v = 0.0;",
-						"	float a = 0.4;",
-						"	for (int i = 0; i < 3; i++) {",
-						"		v += voronoi(p, time) * a;",
-						"		p *= 2.0;",
-						"		a *= 0.5;",
-						"	}",
-						"	return v;",
-						"}"
-					].join( "\n" ), [ voronoi ] ); // define voronoi as dependencies
+						}, true );
 
-					var time = new THREE.TimerNode();
-					var timeScale = new THREE.FloatNode( 2 );
+						addGui( 'colorB', colorB.value.getHex(), function ( val ) {
 
-					// used for serialization only
-					time.name = "time";
-					timeScale.name = "speed";
+							colorB.value.setHex( val );
 
-					var alpha = new THREE.FloatNode( 1 );
-					var scale = new THREE.FloatNode( .1 );
-					var intensity = new THREE.FloatNode( 1.5 );
+						}, true );
 
-					var color = new THREE.ColorNode( 0xFFFFFF );
-					var colorA = new THREE.ColorNode( 0xFFFFFF );
-					var colorB = new THREE.ColorNode( 0x0054df );
+						break;
 
-					var worldPos = new THREE.PositionNode( THREE.PositionNode.WORLD );
-					var worldPosTop = new THREE.SwitchNode( worldPos, 'xz' );
+					case 'soft-body':
 
-					var worldNormal = new THREE.NormalNode( THREE.NormalNode.WORLD );
+						// MATERIAL
 
-					var mask = new THREE.SwitchNode( worldNormal, 'y' );
+						move = true;
 
-					// clamp0at1
-					mask = new THREE.Math1Node( mask, THREE.Math1Node.SAT );
+						mtl = new THREE.StandardNodeMaterial();
 
-					var timeOffset = new THREE.OperatorNode(
-						time,
-						timeScale,
-						THREE.OperatorNode.MUL
-					);
+						var scale = new THREE.FloatNode( 2 );
+						var colorA = new THREE.ColorNode( 0xFF6633 );
+						var colorB = new THREE.ColorNode( 0x3366FF );
 
-					var uvPos = new THREE.OperatorNode(
-						worldPosTop,
-						scale,
-						THREE.OperatorNode.MUL
-					);
+						var pos = new THREE.PositionNode();
+						var posNorm = new THREE.Math1Node( pos, THREE.Math1Node.NORMALIZE );
 
-					var voronoi = new THREE.FunctionCallNode( voronoiLayers );
-					voronoi.inputs.p = uvPos;
-					voronoi.inputs.time = timeOffset;
+						var mask = new THREE.SwitchNode( posNorm, 'y' );
 
-					var maskCaustic = new THREE.OperatorNode(
-						alpha,
-						mask,
-						THREE.OperatorNode.MUL
-					);
+						var velocity = new THREE.VelocityNode( mesh, {
+							type: 'elastic',
+							spring: .95,
+							damping: .95
+						} );
 
-					var voronoiIntensity = new THREE.OperatorNode(
-						voronoi,
-						intensity,
-						THREE.OperatorNode.MUL
-					);
+						var velocityArea = new THREE.OperatorNode(
+							mask,
+							scale,
+							THREE.OperatorNode.MUL
+						);
 
-					var voronoiColors = new THREE.Math3Node(
-						colorB,
-						colorA,
-						new THREE.Math1Node( voronoiIntensity, THREE.Math1Node.SAT ), // mix needs clamp
-						THREE.Math3Node.MIX
-					);
+						var softVelocity = new THREE.OperatorNode(
+							velocity,
+							velocityArea,
+							THREE.OperatorNode.MUL
+						);
 
-					var caustic = new THREE.Math3Node(
-						color,
-						voronoiColors,
-						maskCaustic,
-						THREE.Math3Node.MIX
-					);
+						var softPosition = new THREE.OperatorNode(
+							new THREE.PositionNode(),
+							softVelocity,
+							THREE.OperatorNode.ADD
+						);
 
-					var causticLights = new THREE.OperatorNode(
-						voronoiIntensity,
-						maskCaustic,
-						THREE.OperatorNode.MUL
-					);
+						var colors = new THREE.Math3Node(
+							colorB,
+							colorA,
+							mask,
+							THREE.Math3Node.MIX
+						);
 
-					mtl.color = caustic;
-					mtl.ambient = causticLights;
+						mtl.color = colors;
+						mtl.position = softPosition;
 
-					// GUI
+						// GUI
 
-					addGui( 'timeScale', timeScale.value, function ( val ) {
+						addGui( 'spring', velocity.params.spring, function ( val ) {
 
-						timeScale.value = val;
+							velocity.params.spring = val;
 
-					}, false, 0, 5 );
+						}, false, 0, .95 );
 
-					addGui( 'intensity', intensity.value, function ( val ) {
+						addGui( 'damping', velocity.params.damping, function ( val ) {
 
-						intensity.value = val;
+							velocity.params.damping = val;
 
-					}, false, 0, 3 );
+						}, false, 0, .95 );
 
-					addGui( 'scale', scale.value, function ( val ) {
+						addGui( 'scale', scale.value, function ( val ) {
 
-						scale.value = val;
+							scale.value = val;
 
-					}, false, 0, 1 );
+						}, false, 0, 3 );
 
-					addGui( 'alpha', alpha.value, function ( val ) {
+						addGui( 'softBody', colorA.value.getHex(), function ( val ) {
 
-						alpha.value = val;
+							colorA.value.setHex( val );
 
-					}, false, 0, 1 );
+						}, true );
 
-					addGui( 'color', color.value.getHex(), function ( val ) {
+						addGui( 'rigidBody', colorB.value.getHex(), function ( val ) {
 
-						color.value.setHex( val );
+							colorB.value.setHex( val );
 
-					}, true );
+						}, true );
 
-					addGui( 'colorA', colorA.value.getHex(), function ( val ) {
+						break;
 
-						colorA.value.setHex( val );
+					case 'plush':
 
-					}, true );
+						// MATERIAL
 
-					addGui( 'colorB', colorB.value.getHex(), function ( val ) {
+						mtl = new THREE.PhongNodeMaterial();
 
-						colorB.value.setHex( val );
+						var color = new THREE.ColorNode( 0x8D8677 );
+						var mildness = new THREE.FloatNode( 1.6 );
+						var fur = new THREE.FloatNode( .5 );
 
-					}, true );
+						var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
+						var norDirection = new THREE.Math1Node( new THREE.NormalNode(), THREE.Math1Node.NORMALIZE );
 
-					break;
+						var viewZ = new THREE.Math2Node(
+							posDirection,
+							norDirection,
+							THREE.Math2Node.DOT
+						);
 
-				case 'soft-body':
+						// without luma correction for now
+						var mildnessColor = new THREE.OperatorNode(
+							color,
+							mildness,
+							THREE.OperatorNode.MUL
+						);
 
-					// MATERIAL
+						var furScale = new THREE.OperatorNode(
+							viewZ,
+							fur,
+							THREE.OperatorNode.MUL
+						);
 
-					move = true;
+						mtl.color = color;
+						mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
+						mtl.normal.scale = furScale;
+						mtl.environment = mildnessColor;
+						mtl.environmentAlpha = new THREE.Math1Node( viewZ, THREE.Math1Node.INVERT );
+						mtl.shininess = new THREE.FloatNode( 0 );
 
-					mtl = new THREE.StandardNodeMaterial();
+						// GUI
 
-					var scale = new THREE.FloatNode( 2 );
-					var colorA = new THREE.ColorNode( 0xFF6633 );
-					var colorB = new THREE.ColorNode( 0x3366FF );
+						addGui( 'color', color.value.getHex(), function ( val ) {
 
-					var pos = new THREE.PositionNode();
-					var posNorm = new THREE.Math1Node( pos, THREE.Math1Node.NORMALIZE );
+							color.value.setHex( val );
 
-					var mask = new THREE.SwitchNode( posNorm, 'y' );
+						}, true );
 
-					var velocity = new THREE.VelocityNode( mesh, {
-						type: 'elastic',
-						spring: .95,
-						damping: .95
-					} );
+						addGui( 'mildness', mildness.value, function ( val ) {
 
-					var velocityArea = new THREE.OperatorNode(
-						mask,
-						scale,
-						THREE.OperatorNode.MUL
-					);
+							mildness.value = val;
 
-					var softVelocity = new THREE.OperatorNode(
-						velocity,
-						velocityArea,
-						THREE.OperatorNode.MUL
-					);
+						}, false, 1, 2 );
 
-					var softPosition = new THREE.OperatorNode(
-						new THREE.PositionNode(),
-						softVelocity,
-						THREE.OperatorNode.ADD
-					);
+						addGui( 'fur', fur.value, function ( val ) {
 
-					var colors = new THREE.Math3Node(
-						colorB,
-						colorA,
-						mask,
-						THREE.Math3Node.MIX
-					);
+							fur.value = val;
 
-					mtl.color = colors;
-					mtl.transform = softPosition;
+						}, false, 0, 2 );
 
-					// GUI
+						break;
 
-					addGui( 'spring', velocity.params.spring, function ( val ) {
+					case 'skin':
+					case 'skin-phong':
 
-						velocity.params.spring = val;
+						// MATERIAL
 
-					}, false, 0, .95 );
+						mtl = name == 'skin' ? new THREE.StandardNodeMaterial() : new THREE.PhongNodeMaterial();
 
-					addGui( 'damping', velocity.params.damping, function ( val ) {
+						var skinColor = new THREE.ColorNode( 0xFFC495 );
+						var bloodColor = new THREE.ColorNode( 0x6b0602 );
+						var wrapLight = new THREE.FloatNode( 1.5 );
+						var wrapShadow = new THREE.FloatNode( 0 );
 
-						velocity.params.damping = val;
+						var directLight = new THREE.LightNode();
 
-					}, false, 0, .95 );
+						var lightLuminance = new THREE.LuminanceNode( directLight );
 
-					addGui( 'scale', scale.value, function ( val ) {
+						var lightWrap = new THREE.Math3Node(
+							wrapShadow,
+							wrapLight,
+							lightLuminance,
+							THREE.Math3Node.SMOOTHSTEP
+						);
 
-						scale.value = val;
+						var lightTransition = new THREE.OperatorNode(
+							lightWrap,
+							new THREE.ConstNode( THREE.ConstNode.PI2 ),
+							THREE.OperatorNode.MUL
+						);
 
-					}, false, 0, 3 );
+						var wrappedLight = new THREE.Math1Node( lightTransition, THREE.Math1Node.SIN );
 
-					addGui( 'softBody', colorA.value.getHex(), function ( val ) {
+						var wrappedLightColor = new THREE.OperatorNode(
+							wrappedLight,
+							bloodColor,
+							THREE.OperatorNode.MUL
+						);
 
-						colorA.value.setHex( val );
+						var bloodArea = new THREE.Math1Node( wrappedLightColor, THREE.Math1Node.SAT );
 
-					}, true );
+						var totalLight = new THREE.OperatorNode(
+							directLight,
+							bloodArea,
+							THREE.OperatorNode.ADD
+						);
 
-					addGui( 'rigidBody', colorB.value.getHex(), function ( val ) {
+						mtl.color = skinColor;
+						mtl.light = totalLight;
 
-						colorB.value.setHex( val );
+						if ( name == 'skin' ) {
 
-					}, true );
+							// StandardNodeMaterial
 
-					break;
+							mtl.metalness = new THREE.FloatNode( 0 );
+							mtl.roughness = new THREE.FloatNode( 1 );
+							mtl.reflectivity = new THREE.FloatNode( 0 );
+							mtl.clearCoat = new THREE.FloatNode( .2 );
+							mtl.clearCoatRoughness = new THREE.FloatNode( .3 );
+							mtl.environment = new THREE.CubeTextureNode( cubemap );
 
-				case 'plush':
+						} else {
 
-					// MATERIAL
+							// PhongNodeMaterial
 
-					mtl = new THREE.PhongNodeMaterial();
+							mtl.specular = new THREE.ColorNode( 0x2f2e2d );
+							mtl.shininess = new THREE.FloatNode( 15 );
 
-					var color = new THREE.ColorNode( 0x8D8677 );
-					var mildness = new THREE.FloatNode( 1.6 );
-					var fur = new THREE.FloatNode( .5 );
+						}
 
-					var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
-					var norDirection = new THREE.Math1Node( new THREE.NormalNode( THREE.NormalNode.VIEW ), THREE.Math1Node.NORMALIZE );
+						// GUI
 
-					var viewZ = new THREE.Math2Node(
-						posDirection,
-						norDirection,
-						THREE.Math2Node.DOT
-					);
+						addGui( 'skinColor', skinColor.value.getHex(), function ( val ) {
 
-					// without luma correction for now
-					var mildnessColor = new THREE.OperatorNode(
-						color,
-						mildness,
-						THREE.OperatorNode.MUL
-					);
+							skinColor.value.setHex( val );
 
-					var furScale = new THREE.OperatorNode(
-						viewZ,
-						fur,
-						THREE.OperatorNode.MUL
-					);
+						}, true );
 
-					mtl.color = color;
-					mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
-					mtl.normal.scale = furScale;
-					mtl.environment = mildnessColor;
-					mtl.environmentAlpha = new THREE.Math1Node( viewZ, THREE.Math1Node.INVERT );
-					mtl.shininess = new THREE.FloatNode( 0 );
+						addGui( 'bloodColor', bloodColor.value.getHex(), function ( val ) {
 
-					// GUI
+							bloodColor.value.setHex( val );
 
-					addGui( 'color', color.value.getHex(), function ( val ) {
+						}, true );
 
-						color.value.setHex( val );
+						addGui( 'wrapLight', wrapLight.value, function ( val ) {
 
-					}, true );
+							wrapLight.value = val;
 
-					addGui( 'mildness', mildness.value, function ( val ) {
+						}, false, 0, 3 );
 
-						mildness.value = val;
+						addGui( 'wrapShadow', wrapShadow.value, function ( val ) {
 
-					}, false, 1, 2 );
+							wrapShadow.value = val;
 
-					addGui( 'fur', fur.value, function ( val ) {
+						}, false, - 1, 0 );
 
-						fur.value = val;
+						break;
 
-					}, false, 0, 2 );
+					case 'toon':
 
-					break;
+						// MATERIAL
 
-				case 'skin':
-				case 'skin-phong':
+						mtl = new THREE.PhongNodeMaterial();
 
-					// MATERIAL
+						var count = new THREE.FloatNode( 3.43 );
+						var sceneDirectLight = new THREE.LightNode();
+						var color = new THREE.ColorNode( 0xAABBFF );
 
-					mtl = name == 'skin' ? new THREE.StandardNodeMaterial() : new THREE.PhongNodeMaterial();
+						var lineColor = new THREE.ColorNode( 0xFF0000 );
+						var lineSize = new THREE.FloatNode( 0.23 );
+						var lineInner = new THREE.FloatNode( 0 );
 
-					var skinColor = new THREE.ColorNode( 0xFFC495 );
-					var bloodColor = new THREE.ColorNode( 0x6b0602 );
-					var wrapLight = new THREE.FloatNode( 1.5 );
-					var wrapShadow = new THREE.FloatNode( 0 );
+						// CEL
 
-					var directLight = new THREE.LightNode();
+						var lightLuminance = new THREE.LuminanceNode( sceneDirectLight );
 
-					var lightLuminance = new THREE.LuminanceNode( directLight );
+						var preCelLight = new THREE.OperatorNode(
+							lightLuminance,
+							count,
+							THREE.OperatorNode.MUL
+						);
 
-					var lightWrap = new THREE.Math3Node(
-						wrapShadow,
-						wrapLight,
-						lightLuminance,
-						THREE.Math3Node.SMOOTHSTEP
-					);
+						var celLight = new THREE.Math1Node(
+							preCelLight,
+							THREE.Math1Node.CEIL
+						);
 
-					var lightTransition = new THREE.OperatorNode(
-						lightWrap,
-						new THREE.ConstNode( THREE.ConstNode.PI2 ),
-						THREE.OperatorNode.MUL
-					);
+						var posCelLight = new THREE.OperatorNode(
+							celLight,
+							count,
+							THREE.OperatorNode.DIV
+						);
 
-					var wrappedLight = new THREE.Math1Node( lightTransition, THREE.Math1Node.SIN );
+						// LINE
 
-					var wrappedLightColor = new THREE.OperatorNode(
-						wrappedLight,
-						bloodColor,
-						THREE.OperatorNode.MUL
-					);
+						var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
+						var norDirection = new THREE.Math1Node( new THREE.NormalNode(), THREE.Math1Node.NORMALIZE );
 
-					var bloodArea = new THREE.Math1Node( wrappedLightColor, THREE.Math1Node.SAT );
+						var viewZ = new THREE.Math2Node(
+							posDirection,
+							norDirection,
+							THREE.Math2Node.DOT
+						);
 
-					var totalLight = new THREE.OperatorNode(
-						directLight,
-						bloodArea,
-						THREE.OperatorNode.ADD
-					);
+						var lineOutside = new THREE.Math1Node(
+							viewZ,
+							THREE.Math1Node.ABS
+						);
 
-					mtl.color = skinColor;
-					mtl.light = totalLight;
+						var line = new THREE.OperatorNode(
+							lineOutside,
+							new THREE.FloatNode( 1 ),
+							THREE.OperatorNode.DIV
+						);
 
-					if ( name == 'skin' ) {
+						var lineScaled = new THREE.Math3Node(
+							line,
+							lineSize,
+							lineInner,
+							THREE.Math3Node.SMOOTHSTEP
+						);
 
-						// StandardNodeMaterial
+						var innerContour = new THREE.Math1Node( new THREE.Math1Node( lineScaled, THREE.Math1Node.SAT ), THREE.Math1Node.INVERT );
 
-						mtl.metalness = new THREE.FloatNode( 0 );
-						mtl.roughness = new THREE.FloatNode( 1 );
-						mtl.reflectivity = new THREE.FloatNode( 0 );
-						mtl.clearCoat = new THREE.FloatNode( .2 );
-						mtl.clearCoatRoughness = new THREE.FloatNode( .3 );
-						mtl.environment = new THREE.CubeTextureNode( cubemap );
+						// APPLY
 
-					} else {
+						mtl.color = color;
+						mtl.light = posCelLight;
+						mtl.shininess = new THREE.FloatNode( 0 );
 
-						// PhongNodeMaterial
+						mtl.environment = lineColor;
+						mtl.environmentAlpha = innerContour;
 
-						mtl.specular = new THREE.ColorNode( 0x2f2e2d );
-						mtl.shininess = new THREE.FloatNode( 15 );
+						// GUI
 
-					}
+						addGui( 'color', color.value.getHex(), function ( val ) {
 
-					// GUI
+							color.value.setHex( val );
 
-					addGui( 'skinColor', skinColor.value.getHex(), function ( val ) {
+						}, true );
 
-						skinColor.value.setHex( val );
+						addGui( 'lineColor', lineColor.value.getHex(), function ( val ) {
 
-					}, true );
+							lineColor.value.setHex( val );
 
-					addGui( 'bloodColor', bloodColor.value.getHex(), function ( val ) {
+						}, true );
 
-						bloodColor.value.setHex( val );
+						addGui( 'count', count.value, function ( val ) {
 
-					}, true );
+							count.value = val;
 
-					addGui( 'wrapLight', wrapLight.value, function ( val ) {
+						}, false, 1, 8 );
 
-						wrapLight.value = val;
+						addGui( 'lineSize', lineSize.value, function ( val ) {
 
-					}, false, 0, 3 );
+							lineSize.value = val;
 
-					addGui( 'wrapShadow', wrapShadow.value, function ( val ) {
+						}, false, 0, 1 );
 
-						wrapShadow.value = val;
+						addGui( 'lineInner', lineInner.value, function ( val ) {
 
-					}, false, - 1, 0 );
+							lineInner.value = val;
 
-					break;
+						}, false, 0, 1 );
 
-				case 'toon':
+						addGui( 'ignoreIndirectLight', false, function ( val ) {
 
-					// MATERIAL
+							mtl.ao = val ? new THREE.FloatNode() : undefined;
 
-					mtl = new THREE.PhongNodeMaterial();
+							mtl.needsUpdate = true;
 
-					var count = new THREE.FloatNode( 3.43 );
-					var sceneDirectLight = new THREE.LightNode();
-					var color = new THREE.ColorNode( 0xAABBFF );
+						} );
 
-					var lineColor = new THREE.ColorNode( 0xFF0000 );
-					var lineSize = new THREE.FloatNode( 0.23 );
-					var lineInner = new THREE.FloatNode( 0 );
+						break;
 
-					// CEL
+					case 'custom-attribute':
 
-					var lightLuminance = new THREE.LuminanceNode( sceneDirectLight );
+						// GEOMETRY
 
-					var preCelLight = new THREE.OperatorNode(
-						lightLuminance,
-						count,
-						THREE.OperatorNode.MUL
-					);
+						// add "position" buffer to "custom" attribute
+						teapot.attributes[ 'custom' ] = teapot.attributes[ 'position' ];
 
-					var celLight = new THREE.Math1Node(
-						preCelLight,
-						THREE.Math1Node.CEIL
-					);
+						// MATERIAL
 
-					var posCelLight = new THREE.OperatorNode(
-						celLight,
-						count,
-						THREE.OperatorNode.DIV
-					);
+						mtl = new THREE.PhongNodeMaterial();
 
-					// LINE
+						mtl.color = new THREE.AttributeNode( "custom", 3 );
 
-					var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
-					var norDirection = new THREE.Math1Node( new THREE.NormalNode( THREE.NormalNode.VIEW ), THREE.Math1Node.NORMALIZE );
+						// or
 
-					var viewZ = new THREE.Math2Node(
-						posDirection,
-						norDirection,
-						THREE.Math2Node.DOT
-					);
+						//mtl.color = new THREE.AttributeNode( "custom", "vec3" );
 
-					var lineOutside = new THREE.Math1Node(
-						viewZ,
-						THREE.Math1Node.ABS
-					);
+						break;
 
-					var line = new THREE.OperatorNode(
-						lineOutside,
-						new THREE.FloatNode( 1 ),
-						THREE.OperatorNode.DIV
-					);
+					case 'expression':
 
-					var lineScaled = new THREE.Math3Node(
-						line,
-						lineSize,
-						lineInner,
-						THREE.Math3Node.SMOOTHSTEP
-					);
+						// MATERIAL
 
-					var innerContour = new THREE.Math1Node( new THREE.Math1Node( lineScaled, THREE.Math1Node.SAT ), THREE.Math1Node.INVERT );
+						mtl = new THREE.PhongNodeMaterial();
 
-					// APPLY
+						var speed = new THREE.FloatNode( .5 );
 
-					mtl.color = color;
-					mtl.light = new THREE.LightNode();
-					mtl.shininess = new THREE.FloatNode( 0 );
+						mtl.color = new THREE.ExpressionNode( "myCustomUv + (sin(time*speed)*.5) + (position * .05)", "vec3" );
+						mtl.color.keywords[ "speed" ] = speed;
 
-					mtl.environment = lineColor;
-					mtl.environmentAlpha = innerContour;
+						mtl.position = new THREE.ExpressionNode( "mod(time*speed,1.0) < 0.5 ? position + (worldNormal*(1.0+sin(time*speed*1.0))*3.0) : position + sin( position.x * sin(time*speed*2.0))", "vec3" );
+						mtl.position.keywords[ "speed" ] = speed;
 
-					// GUI
+						// add global keyword ( variable or const )
+						THREE.NodeLib.addKeyword( 'myCustomUv', function ( builder ) {
 
-					addGui( 'color', color.value.getHex(), function ( val ) {
+							return new THREE.ReflectNode();
 
-						color.value.setHex( val );
+						} );
 
-					}, true );
+						// GUI
 
-					addGui( 'lineColor', lineColor.value.getHex(), function ( val ) {
+						addGui( 'speed', speed.value, function ( val ) {
 
-						lineColor.value.setHex( val );
+							speed.value = val;
 
-					}, true );
+						}, false, 0, 1 );
 
-					addGui( 'count', count.value, function ( val ) {
+						break;
 
-						count.value = val;
+					case 'reserved-keywords':
 
-					}, false, 1, 8 );
+						// MATERIAL
 
-					addGui( 'lineSize', lineSize.value, function ( val ) {
+						mtl = new THREE.PhongNodeMaterial();
 
-						lineSize.value = val;
+						var keywordsexample = new THREE.FunctionNode( [
+							// use "uv" reserved keyword
+							"vec4 keywordsexample( sampler2D texture ) {",
+							"	return texture2D( texture, myUV ) + vec4( position * myAlpha, 0.0 );",
+							"}"
+						].join( "\n" ) );
 
-					}, false, 0, 1 );
+						// add local keyword ( const only )
+						keywordsexample.keywords[ "myAlpha" ] = new THREE.ConstNode( "float myAlpha .05" );
 
-					addGui( 'lineInner', lineInner.value, function ( val ) {
+						// add global keyword ( const only )
+						THREE.NodeLib.addKeyword( 'myUV', function ( builder ) {
 
-						lineInner.value = val;
+							return new THREE.UVNode();
 
-					}, false, 0, 1 );
+						} );
 
-					addGui( 'ignoreIndirectLight', false, function ( val ) {
+						// add global const or function
+						//THREE.NodeLib.add( new THREE.ConstNode("float MY_CONST .05") )
 
-						mtl.ao = val ? new THREE.FloatNode() : undefined;
+						// reserved keywords
+						console.log( THREE.NodeLib.keywords );
 
-						mtl.needsUpdate = true;
+						// keywords conflit? use this to disable:
+						//blurtexture.useKeywords = false; // ( true is default )
 
-					} );
+						mtl.color = new THREE.FunctionCallNode( keywordsexample, [ new THREE.TextureNode( getTexture( "brick" ) ) ] );
 
-					break;
+						break;
 
-				case 'custom-attribute':
+					case 'node-position':
 
-					// GEOMETRY
+						// MATERIAL
 
-					// add "position" buffer to "custom" attribute
-					teapot.attributes[ 'custom' ] = teapot.attributes[ 'position' ];
+						var node = new THREE.PositionNode();
 
-					// MATERIAL
+						mtl = new THREE.PhongNodeMaterial();
+						mtl.color = node;
 
-					mtl = new THREE.PhongNodeMaterial();
+						// GUI
 
-					mtl.color = new THREE.AttributeNode( "custom", 3 );
+						addGui( 'scope', {
+							local: THREE.PositionNode.LOCAL,
+							world: THREE.PositionNode.WORLD,
+							view: THREE.PositionNode.VIEW
+						}, function ( val ) {
 
-					// or
+							node.scope = val;
 
-					//mtl.color = new THREE.AttributeNode( "custom", "vec3" );
+							mtl.needsUpdate = true;
 
-					break;
+						} );
 
-				case 'expression':
+						break;
 
-					// MATERIAL
+					case 'node-normal':
 
-					mtl = new THREE.PhongNodeMaterial();
+						// MATERIAL
 
-					var speed = new THREE.FloatNode( .5 );
+						var node = new THREE.NormalNode();
 
-					mtl.color = new THREE.FunctionNode( "myCustomUv + (sin(time*speed)*.5) + (position * .05)", "vec3" );
-					mtl.color.keywords[ "speed" ] = speed;
+						mtl = new THREE.PhongNodeMaterial();
+						mtl.color = node;
 
-					mtl.transform = new THREE.FunctionNode( "mod(time*speed,1.0) < 0.5 ? position + (worldNormal*(1.0+sin(time*speed*1.0))*3.0) : position + sin( position.x * sin(time*speed*2.0))", "vec3" );
-					mtl.transform.keywords[ "speed" ] = speed;
+						// GUI
 
-					// add global keyword ( variable or const )
-					THREE.NodeLib.addKeyword( 'myCustomUv', function ( builder ) {
+						addGui( 'scope', {
+							local: THREE.NormalNode.LOCAL,
+							world: THREE.NormalNode.WORLD,
+							view: THREE.NormalNode.VIEW
+						}, function ( val ) {
 
-						return new THREE.ReflectNode();
+							node.scope = val;
 
-					} );
+							mtl.needsUpdate = true;
 
-					// GUI
+						} );
 
-					addGui( 'speed', speed.value, function ( val ) {
+						break;
 
-						speed.value = val;
+					case 'varying':
 
-					}, false, 0, 1 );
+						// MATERIAL
 
-					break;
+						mtl = new THREE.PhongNodeMaterial();
 
-				case 'reserved-keywords':
+						var varying = new THREE.VarNode( "vec3" );
+						varying.value = new THREE.NormalNode( THREE.NormalNode.VIEW );
 
-					// MATERIAL
+						// using BypassNode the NormalNode not apply the value in .position slot
+						// but set the NormalNode value in VarNode
+						// it can be useful to send values between vertex to fragment shader
+						// without affect vertex shader
+						mtl.position = new THREE.BypassNode( varying );
+						mtl.color = varying;
 
-					mtl = new THREE.PhongNodeMaterial();
+						// you can also set a independent value in .position slot using BypassNode
+						// such this expression using ExpressionNode
+						mtl.position.value = new THREE.ExpressionNode( "position * ( .1 + abs( sin( time ) ) )", "vec3" );
 
-					var keywordsexample = new THREE.FunctionNode( [
-						// use "uv" reserved keyword
-						"vec4 keywordsexample( sampler2D texture ) {",
-						"	return texture2D( texture, myUV ) + vec4( position * myAlpha, 0.0 );",
-						"}"
-					].join( "\n" ) );
+						break;
 
-					// add local keyword ( const only )
-					keywordsexample.keywords[ "myAlpha" ] = new THREE.ConstNode( "float myAlpha .05" );
+					case 'void-function':
 
-					// add global keyword ( const only )
-					THREE.NodeLib.addKeyword( 'myUV', function ( builder ) {
+						// MATERIAL
 
-						return new THREE.UVNode();
+						mtl = new THREE.PhongNodeMaterial();
 
-					} );
+						var varying = new THREE.VarNode( "vec3" );
 
-					// add global const or function
-					//THREE.NodeLib.add( new THREE.ConstNode("float MY_CONST .05") )
-
-					// reserved keywords
-					console.log( THREE.NodeLib.keywords );
-
-					// keywords conflit? use this to disable:
-					//blurtexture.useKeywords = false; // ( true is default )
-
-					mtl.color = new THREE.FunctionCallNode( keywordsexample, [ new THREE.TextureNode( getTexture( "brick" ) ) ] );
-
-					break;
-					
-				case 'varying':
-
-					// MATERIAL
-
-					mtl = new THREE.PhongNodeMaterial();
-
-					var varying = new THREE.VarNode( "vec3" );
-					varying.value = new THREE.NormalNode( THREE.NormalNode.VIEW );
-					
-					// using BypassNode the NormalNode not apply the value in .transform slot
-					// but set the NormalNode value in VarNode
-					// it can be useful to send values between vertex to fragment shader
-					// without affect vertex shader
-					mtl.transform = new THREE.BypassNode( varying );
-					mtl.color = varying;
-					
-					// you can also set a independent value in .transform slot using BypassNode
-					// such this expression using FunctionNode
-					mtl.transform.value = new THREE.FunctionNode("position * ( .1 + abs( sin( time ) ) )", "vec3");
-
-					break;
-					
-				case 'void-function':
-
-					// MATERIAL
-
-					mtl = new THREE.PhongNodeMaterial();
-
-					var varying = new THREE.VarNode( "vec3" );
-
-					// VERTEX
-					
-					var setMyVar = new THREE.FunctionNode( [
-						"void setMyVar( vec3 pos ) {",
-						// set "myVar" in vertex shader in this example,
-						// can be used in fragment shader too or in rest of the current shader
-						"	myVar = pos;",
-						
-						"}"
-					].join( "\n" ) );
-
-					// add keyword
-					setMyVar.keywords[ "myVar" ] = varying;
-
-					var transform = new THREE.FunctionNode( "setMyVar( position * .1 )", "vec3" );
-					transform.includes = [ setMyVar ];
-					transform.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
-
-					// use BypassNode to "void" functions
-					mtl.transform = new THREE.BypassNode( transform );
-					
-					// FRAGMENT
-					
-					var clipFromPos = new THREE.FunctionNode( [
-						"void clipFromPos( vec3 pos ) {",
-						
-						"	if ( pos.y < .0 ) discard;",
-						
-						"}"
-					].join( "\n" ) );
-					
-					var clipFromPosCall = new THREE.FunctionCallNode( clipFromPos, {
-						pos: varying
-					} );
-					
-					mtl.color = new THREE.BypassNode( clipFromPosCall, varying );
-
-					break;	
-				
-				case 'readonly':
-
-					// MATERIAL
-
-					mtl = new THREE.PhongNodeMaterial();
-
-					mtl.color = new THREE.ColorNode( 0xFFFFFF );
-					mtl.specular = new THREE.FloatNode( .5 );
-					mtl.shininess = new THREE.FloatNode( 15 );
-
-					// not use "uniform" input ( for optimization ) 
-					// instead use explicit declaration, for example: 
-					// vec3( 1.0, 1.0, 1.0 ) instead "uniform vec3"
-					// if readonly is true not allow change the value after build the shader material
-					mtl.color.readonly = mtl.specular.readonly = mtl.shininess.readonly = true;
-
-					break;
-
-				case 'triangle-blur':
-
-					// MATERIAL
-
-					mtl = new THREE.PhongNodeMaterial();
-
-					var delta = new THREE.Vector2Node( .5, .25 );
-					var alpha = new THREE.FloatNode( 1 );
-
-					var blurtexture = new THREE.FunctionNode( [
-						// Reference: TriangleBlurShader.js
-						"vec4 blurtexture(sampler2D texture, vec2 uv, vec2 delta) {",
-						"	vec4 color = vec4( 0.0 );",
-						"	float total = 0.0;",
-						// randomize the lookup values to hide the fixed number of samples
-						"	float offset = rand( uv );",
-						"	for ( float t = -BLUR_ITERATIONS; t <= BLUR_ITERATIONS; t ++ ) {",
-						"		float percent = ( t + offset - 0.5 ) / BLUR_ITERATIONS;",
-						"		float weight = 1.0 - abs( percent );",
-						"		color += texture2D( texture, uv + delta * percent ) * weight;",
-						"		total += weight;",
-						"	}",
-						"	return color / total;",
-						"}"
-					].join( "\n" ), [ new THREE.ConstNode( "float BLUR_ITERATIONS 10.0" ) ] );
-
-					var blurredTexture = new THREE.FunctionCallNode( blurtexture, {
-						texture: new THREE.TextureNode( getTexture( "brick" ) ),
-						delta: delta,
-						uv: new THREE.UVNode()
-					} );
+						// VERTEX
 
-					var color = new THREE.Math3Node(
-						new THREE.TextureNode( getTexture( "brick" ) ),
-						blurredTexture,
-						alpha,
-						THREE.Math3Node.MIX
-					);
+						var setMyVar = new THREE.FunctionNode( [
+							"void setMyVar( vec3 pos ) {",
+							// set "myVar" in vertex shader in this example,
+							// can be used in fragment shader too or in rest of the current shader
+							"	myVar = pos;",
 
-					mtl.color = color;
+							"}"
+						].join( "\n" ) );
 
-					// GUI
+						// add keyword
+						setMyVar.keywords[ "myVar" ] = varying;
 
-					addGui( 'alpha', alpha.value, function ( val ) {
+						var position = new THREE.ExpressionNode( "setMyVar( position * .1 )", "vec3" );
+						position.includes = [ setMyVar ];
+						position.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
 
-						alpha.value = val;
+						// use BypassNode to "void" functions
+						mtl.position = new THREE.BypassNode( position );
 
-					}, false, 0, 1 );
+						// FRAGMENT
 
-					addGui( 'deltaX', delta.x, function ( val ) {
+						var clipFromPos = new THREE.FunctionNode( [
+							"void clipFromPos( vec3 pos ) {",
 
-						delta.x = val;
+							"	if ( pos.y < .0 ) discard;",
 
-					}, false, 0, 1 );
+							"}"
+						].join( "\n" ) );
 
-					addGui( 'deltaY', delta.x, function ( val ) {
+						var clipFromPosCall = new THREE.FunctionCallNode( clipFromPos, {
+							pos: varying
+						} );
 
-						delta.y = val;
+						mtl.color = new THREE.BypassNode( clipFromPosCall, varying );
 
-					}, false, 0, 1 );
+						break;
 
-					break;
+					case 'conditional':
 
-				case 'firefly':
+						// MATERIAL
 
-					// MATERIAL
+						mtl = new THREE.PhongNodeMaterial();
 
-					mtl = new THREE.PhongNodeMaterial();
+						var a = new THREE.FloatNode( 0 ),
+							b = new THREE.FloatNode( 0 ),
+							ifNode = new THREE.ColorNode( 0x0000FF ),
+							elseNode = new THREE.ColorNode( 0xFF0000 );
 
-					var time = new THREE.TimerNode();
-					var speed = new THREE.FloatNode( .5 );
+						var cond = new THREE.CondNode( a, b, ifNode, elseNode, THREE.CondNode.EQUAL );
 
-					var color = new THREE.ColorNode( 0x98ff00 );
+						mtl.color = cond;
 
-					var timeSpeed = new THREE.OperatorNode(
-						time,
-						speed,
-						THREE.OperatorNode.MUL
-					);
+						// GUI
 
-					var sinCycleInSecs = new THREE.OperatorNode(
-						timeSpeed,
-						new THREE.ConstNode( THREE.ConstNode.PI2 ),
-						THREE.OperatorNode.MUL
-					);
+						addGui( 'a', a.value, function ( val ) {
 
-					var cycle = new THREE.Math1Node( sinCycleInSecs, THREE.Math1Node.SIN );
+							a.value = val;
 
-					var cycleColor = new THREE.OperatorNode(
-						cycle,
-						color,
-						THREE.OperatorNode.MUL
-					);
+						}, false, 0, 1 );
 
-					var cos = new THREE.Math1Node( cycleColor, THREE.Math1Node.SIN );
+						addGui( 'b', b.value, function ( val ) {
 
-					mtl.color = new THREE.ColorNode( 0 );
-					mtl.emissive = cos;
+							b.value = val;
 
-					// GUI
+						}, false, 0, 1 );
 
-					addGui( 'speed', speed.value, function ( val ) {
+						addGui( 'a condition b', {
+							EQUAL: THREE.CondNode.EQUAL,
+							NOT_EQUAL: THREE.CondNode.NOT_EQUAL,
+							GREATER: THREE.CondNode.GREATER,
+							GREATER_EQUAL: THREE.CondNode.GREATER_EQUAL,
+							LESS: THREE.CondNode.LESS,
+							LESS_EQUAL: THREE.CondNode.LESS_EQUAL
+						}, function ( val ) {
 
-						speed.value = val;
+							cond.op = val;
 
-					}, false, 0, 3 );
+							mtl.needsUpdate = true;
 
-					break;
+						} );
 
-				case 'sss':
-				case 'translucent':
+						addGui( 'if color', ifNode.value.getHex(), function ( val ) {
 
-					// DISTANCE FORMULA
+							ifNode.value.setHex( val );
 
-					var modelPos = new THREE.Vector3Node();
+						}, true );
 
-					var viewPos = new THREE.PositionNode( THREE.PositionNode.VIEW );
-					var cameraPosition = new THREE.CameraNode( THREE.CameraNode.POSITION );
+						addGui( 'else color', elseNode.value.getHex(), function ( val ) {
 
-					var cameraDistance = new THREE.Math2Node(
-						modelPos,
-						cameraPosition,
-						THREE.Math2Node.DISTANCE
-					);
+							elseNode.value.setHex( val );
 
-					var viewPosZ = new THREE.SwitchNode( viewPos, 'z' );
+						}, true );
 
-					var distance = new THREE.OperatorNode(
-						cameraDistance,
-						viewPosZ,
-						THREE.OperatorNode.SUB
-					);
+						break;
 
-					var distanceRadius = new THREE.OperatorNode(
-						distance,
-						new THREE.FloatNode( 70 ),
-						THREE.OperatorNode.ADD
-					);
+					case 'rtt':
 
-					var objectDepth = new THREE.Math3Node(
-						distanceRadius,
-						new THREE.FloatNode( 0 ),
-						new THREE.FloatNode( 50 ),
-						THREE.Math3Node.SMOOTHSTEP
-					);
+						// MATERIAL
 
-					// RTT ( get back distance )
+						mtl = new THREE.PhongNodeMaterial();
 
-					rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+						var uvTransform = new THREE.UVTransformNode(),
+							checker = new THREE.CheckerNode( uvTransform );
 
-					library[ rtTexture.texture.uuid ] = rtTexture.texture;
+						uvTransform.setUvTransform( 0, 0, 2, 2, 0 );
 
-					var distanceMtl = new THREE.PhongNodeMaterial();
-					distanceMtl.environment = objectDepth;
-					distanceMtl.side = THREE.BackSide;
+						var rtt = new THREE.RTTNode( 512, 512, checker ),
+							bumpMap = new THREE.BumpMapNode( rtt );
 
-					rtMaterial = distanceMtl;
+						bumpMap.scale.value = .1;
 
-					// MATERIAL
+						mtl.color = checker;
+						mtl.normal = bumpMap;
 
-					mtl = new THREE.StandardNodeMaterial();
+						// GUI
 
-					var backSideDepth = new THREE.TextureNode( rtTexture.texture, new THREE.ScreenUVNode( new THREE.ResolutionNode( renderer ) ) );
+						addGui( 'bump', bumpMap.scale.value, function ( val ) {
 
-					var difference = new THREE.OperatorNode(
-						objectDepth,
-						backSideDepth,
-						THREE.OperatorNode.SUB
-					);
+							bumpMap.scale.value = val;
 
-					var sss = new THREE.Math3Node(
-						new THREE.FloatNode( - .1 ),
-						new THREE.FloatNode( .5 ),
-						difference,
-						THREE.Math3Node.SMOOTHSTEP
-					);
+						}, false, - .5, .5 );
 
-					var sssAlpha = new THREE.Math1Node( sss, THREE.Math1Node.SAT );
+						addGui( 'scale', 2, function ( val ) {
 
-					var frontColor, backColor;
+							uvTransform.setUvTransform( 0, 0, val, val, 0 );
 
-					if ( name == 'sss' ) {
+						}, false, 0, 8 );
 
-						var sssOut = new THREE.Math2Node(
-							objectDepth,
-							sssAlpha,
-							THREE.Math2Node.MIN
-						);
+						addGui( 'ignoreColor', false, function ( val ) {
+
+							mtl.color = val ? new THREE.ColorNode( 0xFFFFFF ) : checker;
+
+							mtl.needsUpdate = true;
+
+						} );
+
+						break;
+
+					case 'temporal-blur':
 
-						frontColor = new THREE.ColorNode( 0xd4cfbb );
-						backColor = new THREE.ColorNode( 0xd04327 );
+						// MATERIAL
+
+						mtl = new THREE.PhongNodeMaterial();
+
+						var texture = new THREE.TextureNode( getTexture( "brick" ) );
+
+						var rttStore = new THREE.RTTNode( 512, 512, texture );
+						var blur = new THREE.BlurNode( rttStore );
+
+						var timer = new THREE.TimerNode( .01, THREE.TimerNode.LOCAL );
 
 						var color = new THREE.Math3Node(
-							backColor,
-							frontColor,
-							sssOut,
+							rttStore,
+							blur,
+							new THREE.FloatNode( .6 ),
 							THREE.Math3Node.MIX
 						);
 
-						var light = new THREE.OperatorNode(
-							new THREE.LightNode(),
-							color,
-							THREE.OperatorNode.ADD
-						);
+						blur.horizontal = blur.vertical = timer;
 
-						mtl.color = frontColor;
-						mtl.roughness = new THREE.FloatNode( .1 );
-						mtl.metalness = new THREE.FloatNode( .5 );
+						var rttSave = new THREE.RTTNode( 512, 512, color );
+						rttSave.saveTo = rttStore;
 
-						mtl.light = light;
-						mtl.environment = color;
+						mtl.color = rttSave;
+
+						// GUI
+
+						addGui( 'click to reset', false, function ( val ) {
+
+							// render a single time
+
+							rttStore.render = true;
+
+							// reset time blur
+
+							timer.value = 0;
+
+						} );
 
-					} else {
+						break;
 
-						frontColor = new THREE.ColorNode( 0xd04327 );
-						backColor = new THREE.ColorNode( 0x1a0e14 );
+					case 'readonly':
+
+						// MATERIAL
+
+						mtl = new THREE.PhongNodeMaterial();
+
+						mtl.color = new THREE.ColorNode( 0xFFFFFF );
+						mtl.specular = new THREE.FloatNode( .5 );
+						mtl.shininess = new THREE.FloatNode( 15 );
+
+						// not use "uniform" input ( for optimization )
+						// instead use explicit declaration, for example:
+						// vec3( 1.0, 1.0, 1.0 ) instead "uniform vec3"
+						// if readonly is true not allow change the value after build the shader material
+						mtl.color.readonly = mtl.specular.readonly = mtl.shininess.readonly = true;
+
+						break;
+
+					case 'triangle-blur':
+
+						// MATERIAL
+
+						mtl = new THREE.PhongNodeMaterial();
+
+						var delta = new THREE.Vector2Node( .5, .25 );
+						var alpha = new THREE.FloatNode( 1 );
+
+						var blurtexture = new THREE.FunctionNode( [
+							// Reference: TriangleBlurShader.js
+							"vec4 blurtexture(sampler2D texture, vec2 uv, vec2 delta) {",
+							"	vec4 color = vec4( 0.0 );",
+							"	float total = 0.0;",
+							// randomize the lookup values to hide the fixed number of samples
+							"	float offset = rand( uv );",
+							"	for ( float t = -BLUR_ITERATIONS; t <= BLUR_ITERATIONS; t ++ ) {",
+							"		float percent = ( t + offset - 0.5 ) / BLUR_ITERATIONS;",
+							"		float weight = 1.0 - abs( percent );",
+							"		color += texture2D( texture, uv + delta * percent ) * weight;",
+							"		total += weight;",
+							"	}",
+							"	return color / total;",
+							"}"
+						].join( "\n" ), [ new THREE.ConstNode( "float BLUR_ITERATIONS 10.0" ) ] );
+
+						var blurredTexture = new THREE.FunctionCallNode( blurtexture, {
+							texture: new THREE.TextureNode( getTexture( "brick" ) ),
+							delta: delta,
+							uv: new THREE.UVNode()
+						} );
 
 						var color = new THREE.Math3Node(
-							frontColor,
-							backColor,
-							sssAlpha,
+							new THREE.TextureNode( getTexture( "brick" ) ),
+							blurredTexture,
+							alpha,
 							THREE.Math3Node.MIX
 						);
 
-						var light = new THREE.OperatorNode(
-							new THREE.LightNode(),
+						mtl.color = color;
+
+						// GUI
+
+						addGui( 'alpha', alpha.value, function ( val ) {
+
+							alpha.value = val;
+
+						}, false, 0, 1 );
+
+						addGui( 'deltaX', delta.x, function ( val ) {
+
+							delta.x = val;
+
+						}, false, 0, 1 );
+
+						addGui( 'deltaY', delta.x, function ( val ) {
+
+							delta.y = val;
+
+						}, false, 0, 1 );
+
+						break;
+
+					case 'firefly':
+
+						// MATERIAL
+
+						mtl = new THREE.PhongNodeMaterial();
+
+						var time = new THREE.TimerNode();
+						var speed = new THREE.FloatNode( .5 );
+
+						var color = new THREE.ColorNode( 0x98ff00 );
+
+						var timeSpeed = new THREE.OperatorNode(
+							time,
+							speed,
+							THREE.OperatorNode.MUL
+						);
+
+						var sinCycleInSecs = new THREE.OperatorNode(
+							timeSpeed,
+							new THREE.ConstNode( THREE.ConstNode.PI2 ),
+							THREE.OperatorNode.MUL
+						);
+
+						var cycle = new THREE.Math1Node( sinCycleInSecs, THREE.Math1Node.SIN );
+
+						var cycleColor = new THREE.OperatorNode(
+							cycle,
 							color,
+							THREE.OperatorNode.MUL
+						);
+
+						var cos = new THREE.Math1Node( cycleColor, THREE.Math1Node.SIN );
+
+						mtl.color = new THREE.ColorNode( 0 );
+						mtl.emissive = cos;
+
+						// GUI
+
+						addGui( 'speed', speed.value, function ( val ) {
+
+							speed.value = val;
+
+						}, false, 0, 3 );
+
+						break;
+
+					case 'sss':
+					case 'translucent':
+
+						// DISTANCE FORMULA
+
+						var modelPos = new THREE.Vector3Node();
+
+						var viewPos = new THREE.PositionNode( THREE.PositionNode.VIEW );
+						var cameraPosition = new THREE.CameraNode( THREE.CameraNode.POSITION );
+
+						var cameraDistance = new THREE.Math2Node(
+							modelPos,
+							cameraPosition,
+							THREE.Math2Node.DISTANCE
+						);
+
+						var viewPosZ = new THREE.SwitchNode( viewPos, 'z' );
+
+						var distance = new THREE.OperatorNode(
+							cameraDistance,
+							viewPosZ,
+							THREE.OperatorNode.SUB
+						);
+
+						var distanceRadius = new THREE.OperatorNode(
+							distance,
+							new THREE.FloatNode( 70 ),
 							THREE.OperatorNode.ADD
 						);
 
-						mtl.color = new THREE.ColorNode( 0xffffff );
-						mtl.roughness = new THREE.FloatNode( .1 );
-						mtl.metalness = new THREE.FloatNode( .5 );
+						var objectDepth = new THREE.Math3Node(
+							distanceRadius,
+							new THREE.FloatNode( 0 ),
+							new THREE.FloatNode( 50 ),
+							THREE.Math3Node.SMOOTHSTEP
+						);
 
-						mtl.light = light;
-						mtl.environment = color;
+						// RTT ( get back distance )
 
-					}
+						rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
 
-					// GUI
+						library[ rtTexture.texture.uuid ] = rtTexture.texture;
 
-					addGui( 'frontColor', frontColor.value.getHex(), function ( val ) {
+						var distanceMtl = new THREE.PhongNodeMaterial();
+						distanceMtl.environment = objectDepth;
+						distanceMtl.side = THREE.BackSide;
 
-						frontColor.value.setHex( val );
+						rtMaterial = distanceMtl;
 
-					}, true );
+						// MATERIAL
 
-					addGui( 'backColor', backColor.value.getHex(), function ( val ) {
+						mtl = new THREE.StandardNodeMaterial();
 
-						backColor.value.setHex( val );
+						var backSideDepth = new THREE.TextureNode( rtTexture.texture, new THREE.ScreenUVNode() );
 
-					}, true );
+						var difference = new THREE.OperatorNode(
+							objectDepth,
+							backSideDepth,
+							THREE.OperatorNode.SUB
+						);
 
-					addGui( 'area', sss.b.value, function ( val ) {
+						var sss = new THREE.Math3Node(
+							new THREE.FloatNode( - .1 ),
+							new THREE.FloatNode( .5 ),
+							difference,
+							THREE.Math3Node.SMOOTHSTEP
+						);
 
-						sss.b.value = val;
+						var sssAlpha = new THREE.Math1Node( sss, THREE.Math1Node.SAT );
 
-					}, false, 0, 1 );
+						var frontColor, backColor;
 
-					break;
+						if ( name == 'sss' ) {
 
-			}
+							var sssOut = new THREE.Math2Node(
+								objectDepth,
+								sssAlpha,
+								THREE.Math2Node.MIN
+							);
 
-			// set material
-			mesh.material = mtl;
+							frontColor = new THREE.ColorNode( 0xd4cfbb );
+							backColor = new THREE.ColorNode( 0xd04327 );
 
-		}
+							var color = new THREE.Math3Node(
+								backColor,
+								frontColor,
+								sssOut,
+								THREE.Math3Node.MIX
+							);
 
-		function onWindowResize() {
+							var light = new THREE.OperatorNode(
+								new THREE.LightNode(),
+								color,
+								THREE.OperatorNode.ADD
+							);
 
-			var width = window.innerWidth, height = window.innerHeight;
+							mtl.color = frontColor;
+							mtl.roughness = new THREE.FloatNode( .1 );
+							mtl.metalness = new THREE.FloatNode( .5 );
 
-			camera.aspect = width / height;
-			camera.updateProjectionMatrix();
+							mtl.light = light;
+							mtl.environment = color;
 
-			renderer.setSize( width, height );
+						} else {
 
-			if ( rtTexture ) rtTexture.setSize( width, height );
+							frontColor = new THREE.ColorNode( 0xd04327 );
+							backColor = new THREE.ColorNode( 0x1a0e14 );
+
+							var color = new THREE.Math3Node(
+								frontColor,
+								backColor,
+								sssAlpha,
+								THREE.Math3Node.MIX
+							);
 
-		}
+							var light = new THREE.OperatorNode(
+								new THREE.LightNode(),
+								color,
+								THREE.OperatorNode.ADD
+							);
 
-		document.getElementById( 'serialize' ).addEventListener('click', function () {
+							mtl.color = new THREE.ColorNode( 0xffffff );
+							mtl.roughness = new THREE.FloatNode( .1 );
+							mtl.metalness = new THREE.FloatNode( .5 );
 
-			if ( serialized ) reset();
-			else serialize();
+							mtl.light = light;
+							mtl.environment = color;
 
-			serialized = ! serialized;
+						}
 
-		});
+						// GUI
 
-		function reset() {
+						addGui( 'frontColor', frontColor.value.getHex(), function ( val ) {
 
-			updateMaterial();
+							frontColor.value.setHex( val );
 
-			// gui
+						}, true );
 
-			var div = document.getElementById( 'serialize' );
-			div.textContent = "Serialize and apply";
+						addGui( 'backColor', backColor.value.getHex(), function ( val ) {
 
-		}
+							backColor.value.setHex( val );
 
-		function serialize() {
+						}, true );
 
-			var json = mesh.material.toJSON();
-				
-			// replace uuid to url (facilitates the load of textures using url otherside uuid) e.g:
+						addGui( 'area', sss.b.value, function ( val ) {
 
-			var cloud = getTexture( "cloud" );
-			
-			THREE.NodeMaterialLoaderUtils.replaceUUID( json, cloud, "cloud" );
+							sss.b.value = val;
 
-			library[ "cloud" ] = cloud;
-			
-			// --
-			
-			var jsonStr = JSON.stringify( json );
-			
-			console.log( jsonStr );
-			
-			var loader = new THREE.NodeMaterialLoader( null, library ),
-				material = loader.parse( json );
-			
-			mesh.material.dispose();
-			
-			mesh.material = material;
-			
-			// gui
+						}, false, 0, 1 );
 
-			var div = document.getElementById( 'serialize' );
-			div.textContent = "Click to reset - JSON Generate: " + ( jsonStr.length / 1024 ).toFixed( 3 ) + "kB";
+						break;
 
-			if ( gui ) gui.destroy();
+				}
 
-			gui = null;
+				// set material
 
-		}
+				mtl.side = THREE.DoubleSide;
 
-		function animate() {
+				mesh.material = mtl;
 
-			var delta = clock.getDelta();
+			}
 
-			if ( move ) {
+			function onWindowResize() {
 
-				var time = Date.now() * 0.005;
+				var width = window.innerWidth, height = window.innerHeight;
 
-				mesh.position.z = Math.cos( time ) * 10;
-				mesh.position.y = Math.sin( time ) * 10;
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
 
-			} else {
+				renderer.setSize( width, height );
 
-				mesh.position.z = mesh.position.y = 0;
+				if ( rtTexture ) rtTexture.setSize( width, height );
 
 			}
 
-			//mesh.rotation.z += .01;
+			document.getElementById( 'serialize' ).addEventListener( 'click', function () {
+
+				if ( serialized ) reset();
+				else serialize();
+
+				serialized = ! serialized;
+
+			} );
+
+			function reset() {
+
+				updateMaterial();
+
+				// gui
+
+				var div = document.getElementById( 'serialize' );
+				div.textContent = "Serialize and apply";
 
-			// update material animation and/or gpu calcs (pre-renderer)
-			
-			frame.update( delta );
-			
-			if ( mesh.material instanceof THREE.NodeMaterial ) {
-			
-				frame.updateNode( mesh.material );
-				
 			}
 
-			// render to texture for sss/translucent material only
-			
-			if ( rtTexture ) {
+			function serialize() {
+
+				var json = mesh.material.toJSON();
+
+				// replace uuid to url (facilitates the load of textures using url otherside uuid) e.g:
+
+				var cloud = getTexture( "cloud" );
 
-				scene.overrideMaterial = rtMaterial;
+				THREE.NodeMaterialLoaderUtils.replaceUUID( json, cloud, "cloud" );
 
-				renderer.render( scene, camera, rtTexture, true );
+				library[ "cloud" ] = cloud;
 
-				scene.overrideMaterial = null;
+				// --
+
+				var jsonStr = JSON.stringify( json );
+
+				console.log( jsonStr );
+
+				var loader = new THREE.NodeMaterialLoader( null, library ),
+					material = loader.parse( json );
+
+				mesh.material.dispose();
+
+				mesh.material = material;
+
+				// gui
+
+				var div = document.getElementById( 'serialize' );
+				div.textContent = "Click to reset - JSON Generate: " + ( jsonStr.length / 1024 ).toFixed( 3 ) + "kB";
+
+				if ( gui ) gui.destroy();
+
+				gui = null;
 
 			}
 
-			renderer.render( scene, camera );
+			function animate() {
+
+				var delta = clock.getDelta();
 
-			requestAnimationFrame( animate );
+				if ( move ) {
 
-		}
+					var time = Date.now() * 0.005;
+
+					mesh.position.z = Math.cos( time ) * 10;
+					mesh.position.y = Math.sin( time ) * 10;
+
+				} else {
+
+					mesh.position.z = mesh.position.y = 0;
+
+				}
+
+				//mesh.rotation.z += .01;
+
+				// update material animation and/or gpu calcs (pre-renderer)
+
+				frame.update( delta ).setRenderer( renderer );
+
+				if ( mesh.material instanceof THREE.NodeMaterial ) {
+
+					frame.updateNode( mesh.material );
+
+				}
+
+				// render to texture for sss/translucent material only
+
+				if ( rtTexture ) {
+
+					scene.overrideMaterial = rtMaterial;
+
+					renderer.render( scene, camera, rtTexture, true );
+
+					scene.overrideMaterial = null;
+
+				}
+
+				renderer.render( scene, camera );
+
+				requestAnimationFrame( animate );
+
+			}
 
 		</script>
 

examples/webgl_mirror_nodes.html

@@ -42,243 +42,242 @@
 
 		<script type="module">
 
-		import './js/nodes/THREE.Nodes.js';
-		import './js/loaders/NodeMaterialLoader.js';
+			import './js/nodes/THREE.Nodes.js';
+			import './js/loaders/NodeMaterialLoader.js';
 
-		// scene size
-		var WIDTH = window.innerWidth;
-		var HEIGHT = window.innerHeight;
+			// scene size
+			var WIDTH = window.innerWidth;
+			var HEIGHT = window.innerHeight;
 
-		// camera
-		var VIEW_ANGLE = 45;
-		var ASPECT = WIDTH / HEIGHT;
-		var NEAR = 1;
-		var FAR = 500;
-
-		var decalNormal = new THREE.TextureLoader().load( 'textures/decal/decal-normal.jpg' );
-
-		var decalDiffuse = new THREE.TextureLoader().load( 'textures/decal/decal-diffuse.png' );
-		decalDiffuse.wrapS = decalDiffuse.wrapT = THREE.RepeatWrapping;
-
-		var camera, scene, renderer;
-		var clock = new THREE.Clock();
-
-		var cameraControls;
-
-		var gui = new dat.GUI();
-
-		var sphereGroup, smallSphere;
-		var groundMirrorMaterial;
-
-		var frame = new THREE.NodeFrame();
-
-		function init() {
-
-			// renderer
-			renderer = new THREE.WebGLRenderer();
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( WIDTH, HEIGHT );
+			// camera
+			var VIEW_ANGLE = 45;
+			var ASPECT = WIDTH / HEIGHT;
+			var NEAR = 1;
+			var FAR = 500;
 
-			// scene
-			scene = new THREE.Scene();
+			var decalNormal = new THREE.TextureLoader().load( 'textures/decal/decal-normal.jpg' );
 
-			// camera
-			camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
-			camera.position.set( 0, 75, 160 );
-
-			cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
-			cameraControls.target.set( 0, 40, 0 );
-			cameraControls.maxDistance = 400;
-			cameraControls.minDistance = 10;
-			cameraControls.update();
-
-			var container = document.getElementById( 'container' );
-			container.appendChild( renderer.domElement );
-
-		}
-
-		function fillScene() {
-
-			var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
-
-			// reflector/mirror plane
-			var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-			var groundMirror = new THREE.ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
-
-			var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
-			var maskFlip = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
-
-			var mirror = new THREE.ReflectorNode( groundMirror );
-
-			var normalMap = new THREE.TextureNode( decalNormal );
-			var normalXY = new THREE.SwitchNode( normalMap, 'xy' );
-			var normalXYFlip = new THREE.Math1Node(
-				normalXY,
-				THREE.Math1Node.INVERT
-			);
-
-			var offsetNormal = new THREE.OperatorNode(
-				normalXYFlip,
-				new THREE.FloatNode( .5 ),
-				THREE.OperatorNode.SUB
-			);
-
-			mirror.offset = new THREE.OperatorNode(
-				offsetNormal, // normal
-				new THREE.FloatNode( 6 ), // scale
-				THREE.OperatorNode.MUL
-			);
-
-			var clr = new THREE.Math3Node(
-				mirror,
-				new THREE.ColorNode( 0xFFFFFF ),
-				mask,
-				THREE.Math3Node.MIX
-			);
-
-			var blurMirror = new THREE.BlurNode( mirror );
-			blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
-			blurMirror.uv = new THREE.FunctionNode( "projCoord.xyz / projCoord.q", "vec3" );
-			blurMirror.uv.keywords[ "projCoord" ] = new THREE.OperatorNode( mirror.offset, mirror.uv, THREE.OperatorNode.ADD );
-			blurMirror.radius.x = blurMirror.radius.y = 0;
-
-			gui.add( { blur: blurMirror.radius.x }, "blur", 0, 25 ).onChange( function ( v ) {
-
-				blurMirror.radius.x = blurMirror.radius.y = v;
-
-			} );
-
-			groundMirrorMaterial = new THREE.PhongNodeMaterial();
-			groundMirrorMaterial.environment = blurMirror; // or add "mirror" variable to disable blur
-			groundMirrorMaterial.environmentAlpha = mask;
-			groundMirrorMaterial.normal = new THREE.NormalMapNode( normalMap );
-			//groundMirrorMaterial.normalScale = new THREE.FloatNode( 1 );
-
-			// test serialization
-/*
-			var library = {};
-			library[ groundMirror.uuid ] = groundMirror;
-			library[ decalDiffuse.uuid ] = decalDiffuse;
-			library[ decalNormal.uuid ] = decalNormal;
-			library[ mirror.textureMatrix.uuid ] = mirror.textureMatrix; // use textureMatrix to projection
+			var decalDiffuse = new THREE.TextureLoader().load( 'textures/decal/decal-diffuse.png' );
+			decalDiffuse.wrapS = decalDiffuse.wrapT = THREE.RepeatWrapping;
 
-			var json = groundMirrorMaterial.toJSON();
-
-			groundMirrorMaterial = new THREE.NodeMaterialLoader( null, library ).parse( json );
-*/
-			//--
-
-			var mirrorMesh = new THREE.Mesh( planeGeo, groundMirrorMaterial );
-			// add all alternative mirror materials inside the ReflectorRTT to prevent:
-			// glDrawElements: Source and destination textures of the draw are the same.
-			groundMirror.add( mirrorMesh );
-			groundMirror.rotateX( - Math.PI / 2 );
-			scene.add( groundMirror );
+			var camera, scene, renderer;
+			var clock = new THREE.Clock();
 
-			sphereGroup = new THREE.Object3D();
-			scene.add( sphereGroup );
+			var cameraControls;
 
-			var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
-			var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
-			var sphereCap = new THREE.Mesh( geometry, material );
-			sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
-			sphereCap.rotateX( - Math.PI );
+			var gui = new dat.GUI();
 
-			var geometry = new THREE.SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
-			var halfSphere = new THREE.Mesh( geometry, material );
-			halfSphere.add( sphereCap );
-			halfSphere.rotateX( - Math.PI / 180 * 135 );
-			halfSphere.rotateZ( - Math.PI / 180 * 20 );
-			halfSphere.position.y = 7.5 + 15 * Math.sin( Math.PI / 180 * 30 );
+			var sphereGroup, smallSphere;
+			var groundMirrorMaterial;
 
-			sphereGroup.add( halfSphere );
+			var frame = new THREE.NodeFrame();
 
-			var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
-			var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
-			smallSphere = new THREE.Mesh( geometry, material );
-			scene.add( smallSphere );
+			function init() {
 
-			// walls
-			var planeTop = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
-			planeTop.position.y = 100;
-			planeTop.rotateX( Math.PI / 2 );
-			scene.add( planeTop );
-
-			var planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
-			planeBack.position.z = - 50;
-			planeBack.position.y = 50;
-			scene.add( planeBack );
-
-			var planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
-			planeFront.position.z = 50;
-			planeFront.position.y = 50;
-			planeFront.rotateY( Math.PI );
-			scene.add( planeFront );
-
-			var planeRight = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x00ff00 } ) );
-			planeRight.position.x = 50;
-			planeRight.position.y = 50;
-			planeRight.rotateY( - Math.PI / 2 );
-			scene.add( planeRight );
+				// renderer
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( WIDTH, HEIGHT );
 
-			var planeLeft = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xff0000 } ) );
-			planeLeft.position.x = - 50;
-			planeLeft.position.y = 50;
-			planeLeft.rotateY( Math.PI / 2 );
-			scene.add( planeLeft );
+				// scene
+				scene = new THREE.Scene();
 
-			// lights
-			var mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
-			mainLight.position.y = 60;
-			scene.add( mainLight );
+				// camera
+				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
+				camera.position.set( 0, 75, 160 );
 
-			var greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
-			greenLight.position.set( 550, 50, 0 );
-			scene.add( greenLight );
+				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
+				cameraControls.target.set( 0, 40, 0 );
+				cameraControls.maxDistance = 400;
+				cameraControls.minDistance = 10;
+				cameraControls.update();
 
-			var redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
-			redLight.position.set( - 550, 50, 0 );
-			scene.add( redLight );
+				var container = document.getElementById( 'container' );
+				container.appendChild( renderer.domElement );
 
-			var blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
-			blueLight.position.set( 0, 50, 550 );
-			scene.add( blueLight );
+			}
 
-		}
+			function fillScene() {
+
+				var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
+
+				// reflector/mirror plane
+				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var groundMirror = new THREE.ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
+
+				var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
+				var maskFlip = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
+
+				var mirror = new THREE.ReflectorNode( groundMirror );
+
+				var normalMap = new THREE.TextureNode( decalNormal );
+				var normalXY = new THREE.SwitchNode( normalMap, 'xy' );
+				var normalXYFlip = new THREE.Math1Node(
+					normalXY,
+					THREE.Math1Node.INVERT
+				);
+
+				var offsetNormal = new THREE.OperatorNode(
+					normalXYFlip,
+					new THREE.FloatNode( .5 ),
+					THREE.OperatorNode.SUB
+				);
+
+				mirror.offset = new THREE.OperatorNode(
+					offsetNormal, // normal
+					new THREE.FloatNode( 6 ), // scale
+					THREE.OperatorNode.MUL
+				);
+
+				var clr = new THREE.Math3Node(
+					mirror,
+					new THREE.ColorNode( 0xFFFFFF ),
+					mask,
+					THREE.Math3Node.MIX
+				);
+
+				var blurMirror = new THREE.BlurNode( mirror );
+				blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
+				blurMirror.uv = new THREE.ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );
+				blurMirror.uv.keywords[ "projCoord" ] = new THREE.OperatorNode( mirror.offset, mirror.uv, THREE.OperatorNode.ADD );
+				blurMirror.radius.x = blurMirror.radius.y = 0;
+
+				gui.add( { blur: blurMirror.radius.x }, "blur", 0, 25 ).onChange( function ( v ) {
+
+					blurMirror.radius.x = blurMirror.radius.y = v;
+
+				} );
+
+				groundMirrorMaterial = new THREE.PhongNodeMaterial();
+				groundMirrorMaterial.environment = blurMirror; // or add "mirror" variable to disable blur
+				groundMirrorMaterial.environmentAlpha = mask;
+				groundMirrorMaterial.normal = new THREE.NormalMapNode( normalMap );
+				//groundMirrorMaterial.normalScale = new THREE.FloatNode( 1 );
+
+				// test serialization
+				/*
+						var library = {};
+						library[ groundMirror.uuid ] = groundMirror;
+						library[ decalDiffuse.uuid ] = decalDiffuse;
+						library[ decalNormal.uuid ] = decalNormal;
+						library[ mirror.textureMatrix.uuid ] = mirror.textureMatrix; // use textureMatrix to projection
+
+						var json = groundMirrorMaterial.toJSON();
+
+						groundMirrorMaterial = new THREE.NodeMaterialLoader( null, library ).parse( json );
+					*/
+				//--
+
+				var mirrorMesh = new THREE.Mesh( planeGeo, groundMirrorMaterial );
+				// add all alternative mirror materials inside the ReflectorRTT to prevent:
+				// glDrawElements: Source and destination textures of the draw are the same.
+				groundMirror.add( mirrorMesh );
+				groundMirror.rotateX( - Math.PI / 2 );
+				scene.add( groundMirror );
+
+				sphereGroup = new THREE.Object3D();
+				scene.add( sphereGroup );
+
+				var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
+				var sphereCap = new THREE.Mesh( geometry, material );
+				sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
+				sphereCap.rotateX( - Math.PI );
+
+				var geometry = new THREE.SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
+				var halfSphere = new THREE.Mesh( geometry, material );
+				halfSphere.add( sphereCap );
+				halfSphere.rotateX( - Math.PI / 180 * 135 );
+				halfSphere.rotateZ( - Math.PI / 180 * 20 );
+				halfSphere.position.y = 7.5 + 15 * Math.sin( Math.PI / 180 * 30 );
+
+				sphereGroup.add( halfSphere );
+
+				var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
+				smallSphere = new THREE.Mesh( geometry, material );
+				scene.add( smallSphere );
+
+				// walls
+				var planeTop = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
+				planeTop.position.y = 100;
+				planeTop.rotateX( Math.PI / 2 );
+				scene.add( planeTop );
+
+				var planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
+				planeBack.position.z = - 50;
+				planeBack.position.y = 50;
+				scene.add( planeBack );
+
+				var planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
+				planeFront.position.z = 50;
+				planeFront.position.y = 50;
+				planeFront.rotateY( Math.PI );
+				scene.add( planeFront );
+
+				var planeRight = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x00ff00 } ) );
+				planeRight.position.x = 50;
+				planeRight.position.y = 50;
+				planeRight.rotateY( - Math.PI / 2 );
+				scene.add( planeRight );
+
+				var planeLeft = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xff0000 } ) );
+				planeLeft.position.x = - 50;
+				planeLeft.position.y = 50;
+				planeLeft.rotateY( Math.PI / 2 );
+				scene.add( planeLeft );
+
+				// lights
+				var mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
+				mainLight.position.y = 60;
+				scene.add( mainLight );
+
+				var greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
+				greenLight.position.set( 550, 50, 0 );
+				scene.add( greenLight );
+
+				var redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
+				redLight.position.set( - 550, 50, 0 );
+				scene.add( redLight );
+
+				var blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
+				blueLight.position.set( 0, 50, 550 );
+				scene.add( blueLight );
 
-		function render() {
+			}
 
-			renderer.render( scene, camera );
+			function render() {
 
-		}
+				renderer.render( scene, camera );
 
-		function update() {
+			}
 
-			requestAnimationFrame( update );
+			function update() {
 
-			var delta = clock.getDelta();
-			var timer = Date.now() * 0.01;
+				requestAnimationFrame( update );
 
-			sphereGroup.rotation.y -= 0.002;
+				var delta = clock.getDelta();
+				var timer = Date.now() * 0.01;
 
-			smallSphere.position.set(
-				Math.cos( timer * 0.1 ) * 30,
-				Math.abs( Math.cos( timer * 0.2 ) ) * 20 + 5,
-				Math.sin( timer * 0.1 ) * 30
-			);
-			smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
-			smallSphere.rotation.z = timer * 0.8;
+				sphereGroup.rotation.y -= 0.002;
 
-			frame.update( delta ).updateNode( groundMirrorMaterial );
+				smallSphere.position.set(
+					Math.cos( timer * 0.1 ) * 30,
+					Math.abs( Math.cos( timer * 0.2 ) ) * 20 + 5,
+					Math.sin( timer * 0.1 ) * 30
+				);
+				smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
+				smallSphere.rotation.z = timer * 0.8;
 
-			render();
+				frame.update( delta ).updateNode( groundMirrorMaterial );
 
-		}
+				render();
 
-		init();
-		fillScene();
-		update();
+			}
 
+			init();
+			fillScene();
+			update();
 
 		</script>
 	</body>

examples/webgl_performance_nodes.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - performance [nodes]</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				color: #fff;
+				font-family:Monospace;
+				font-size:13px;
+				margin: 0px;
+				text-align:center;
+				overflow: hidden;
+			}
+
+			#info {
+				color: #999;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				display:block;
+			}
+			
+			.white {
+				color: white;
+			}
+
+			b { color: #ccc; }
+			a { color: white }
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/three.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<div id="info">
+			<a href="http://threejs.org" target="_blank">three.js</a><span class="white"> - NodeMaterial Performance</span></br>
+			<br>
+			<b>Node Material System</b>
+			<br>
+			<div>
+				Standard<b>Node</b>Material |
+				<span id="node" class="white">None</span>
+			</div>
+			<div>
+				MeshStandard<b>Node</b>Material |
+				<span id="nodeBased" class="white">None</span>
+			</div>
+			<br>
+			<b>Current Material System</b>
+			<br>
+			<div>
+				MeshStandardMaterial |
+				<span id="default" class="white">None</span>
+			</div>
+			<br>
+			<a id="bench" href="javascript:void(0);">Click to benchmark</a>
+		</div>
+		
+		<script type="module">
+
+			import './js/nodes/THREE.Nodes.js';
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var geometry;
+			var meshes = [];
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			animate();
+
+			function createScene( MaterialClass, count ) {
+
+				count = count !== undefined ? count : 70;
+
+				var i = 0;
+
+				for ( i = 0; i < meshes.length; i ++ ) {
+
+					meshes[ i ].material.dispose();
+
+					scene.remove( meshes[ i ] );
+
+				}
+
+				meshes = [];
+
+				for ( i = 0; i < 70; i ++ ) {
+
+					var material = new MaterialClass(),
+						color = 0xFFFFFF * Math.random();
+
+					if ( material.color.isNode ) material.color.value.setHex( color );
+					else material.color.setHex( color );
+
+					// prevent share code
+					material.defines.UUID = material.uuid;
+
+					var mesh = new THREE.Mesh( geometry, material );
+
+					mesh.position.x = Math.random() * 1000 - 500;
+					mesh.position.y = Math.random() * 1000 - 500;
+					mesh.position.z = Math.random() * 1000 - 500;
+					mesh.rotation.x = Math.random() * 2 * Math.PI;
+					mesh.rotation.y = Math.random() * 2 * Math.PI;
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50 + 100;
+					mesh.matrixAutoUpdate = false;
+					mesh.updateMatrix();
+
+					scene.add( mesh );
+
+					meshes.push( mesh );
+
+				}
+
+			}
+
+			function benchmark() {
+
+				var time, benchmarkTime;
+
+				// Stabilizes CPU
+
+				createScene( THREE.MeshStandardMaterial, 10 );
+
+				render();
+
+				// Standard *Node* Material
+
+				time = performance.now();
+
+				createScene( THREE.StandardNodeMaterial );
+
+				render();
+
+				benchmarkTime = ( performance.now() - time ) / 1000;
+
+				document.getElementById( 'node' ).textContent = benchmarkTime.toFixed( 3 ) + " seconds";
+
+				// Mesh Standard *Node* Material
+
+				time = performance.now();
+
+				createScene( THREE.MeshStandardNodeMaterial );
+
+				render();
+
+				benchmarkTime = ( performance.now() - time ) / 1000;
+
+				document.getElementById( 'nodeBased' ).textContent = benchmarkTime.toFixed( 3 ) + " seconds";
+
+				// Mesh Standard Material
+
+				time = performance.now();
+
+				createScene( THREE.MeshStandardMaterial );
+
+				render();
+
+				benchmarkTime = ( performance.now() - time ) / 1000;
+
+				document.getElementById( 'default' ).textContent = benchmarkTime.toFixed( 3 ) + " seconds";
+
+			}
+
+			document.getElementById( 'bench' ).addEventListener( 'click', function () {
+
+				if ( geometry ) {
+
+					benchmark();
+
+				}
+
+			} );
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 3200;
+
+				scene = new THREE.Scene();
+				scene.add( new THREE.PointLight( 0xFFFFFF ) );
+				//scene.background = new THREE.Color( 0xffffff );
+
+				var loader = new THREE.BufferGeometryLoader();
+				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geo ) {
+
+					geo.computeVertexNormals();
+
+					geometry = geo;
+
+				} );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				//renderer.sortObjects = false;
+
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				camera.lookAt( scene.position );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/webgl_postprocessing_nodes.html

@@ -34,27 +34,19 @@
 		<script src="../build/three.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-
 		<script type="module">
 
 			import './js/nodes/THREE.Nodes.js';
-			import { NodePass } from './js/nodes/postprocessing/NodePass.js';
 			import './js/loaders/NodeMaterialLoader.js';
 
-			var camera, scene, renderer, composer;
-			var object, light, nodepass;
-			var gui, guiElements = [];
+			var camera, scene, renderer;
+			var object, light, nodepost;
+			var gui;
 
 			var clock = new THREE.Clock();
 			var frame = new THREE.NodeFrame();
 
-			var param = { example: 'color-adjustment' };
+			var param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'color-adjustment' };
 
 			var textureLoader = new THREE.TextureLoader();
 
@@ -79,6 +71,7 @@
 					'basic / fade': 'fade',
 					'basic / invert': 'invert',
 					'basic / blur': 'blur',
+					'adv / motion-blur': 'motion-blur',
 					'adv / saturation': 'saturation',
 					'adv / refraction': 'refraction',
 					'adv / mosaic': 'mosaic'
@@ -108,7 +101,7 @@
 
 				} else if ( typeof value == 'object' ) {
 
-					param.blend = value[ Object.keys( value )[ 0 ] ];
+					param[ name ] = value[ Object.keys( value )[ 0 ] ];
 
 					node = gui.add( param, name, value ).onChange( function () {
 
@@ -140,6 +133,8 @@
 
 					case 'color-adjustment':
 
+						// POST
+
 						var screen = new THREE.ScreenNode();
 
 						var hue = new THREE.FloatNode();
@@ -154,7 +149,7 @@
 						var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
 						var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
 
-						nodepass.value = contrastNode;
+						nodepost.output = contrastNode;
 
 						// GUI
 
@@ -192,7 +187,7 @@
 
 					case 'fade':
 
-						// PASS
+						// POST
 
 						var color = new THREE.ColorNode( 0xFFFFFF );
 						var percent = new THREE.FloatNode( .5 );
@@ -204,7 +199,7 @@
 							THREE.Math3Node.MIX
 						);
 
-						nodepass.value = fade;
+						nodepost.output = fade;
 
 						// GUI
 
@@ -224,7 +219,7 @@
 
 					case 'invert':
 
-						// PASS
+						// POST
 
 						var alpha = new THREE.FloatNode( 1 );
 
@@ -238,7 +233,7 @@
 							THREE.Math3Node.MIX
 						);
 
-						nodepass.value = fade;
+						nodepost.output = fade;
 
 						// GUI
 
@@ -252,7 +247,7 @@
 
 					case 'blends':
 
-						// PASS
+						// POST
 
 						var multiply = new THREE.OperatorNode(
 							new THREE.ScreenNode(),
@@ -260,7 +255,7 @@
 							THREE.OperatorNode.ADD
 						);
 
-						nodepass.value = multiply;
+						nodepost.output = multiply;
 
 						// GUI
 
@@ -273,7 +268,7 @@
 
 							multiply.op = val;
 
-							nodepass.needsUpdate = true;
+							nodepost.needsUpdate = true;
 
 						} );
 
@@ -298,7 +293,7 @@
 						saturation.inputs.rgb = screen;
 						saturation.inputs.adjustment = sat;
 
-						nodepass.value = saturation;
+						nodepost.output = saturation;
 
 						// GUI
 
@@ -312,7 +307,7 @@
 
 					case 'refraction':
 
-						// PASS
+						// POST
 
 						var normal = new THREE.TextureNode( decalNormal );
 						var normalXY = new THREE.SwitchNode( normal, 'xy' );
@@ -351,7 +346,7 @@
 
 						var screen = new THREE.ScreenNode( offsetCoord );
 
-						nodepass.value = screen;
+						nodepost.output = screen;
 
 						// GUI
 
@@ -365,15 +360,39 @@
 
 							offsetNormal.a = val ? normalXYFlip : normalXY;
 
-							nodepass.needsUpdate = true;
+							nodepost.needsUpdate = true;
 
 						} );
 
 						break;
 
+					case 'motion-blur':
+
+						// POST
+
+						var size = renderer.getDrawingBufferSize();
+
+						var screen = new THREE.ScreenNode();
+
+						var previousFrame = new THREE.RTTNode( size.width, size.height, screen );
+
+						var motionBlur = new THREE.Math3Node(
+							previousFrame,
+							screen,
+							new THREE.FloatNode( .5 ),
+							THREE.Math3Node.MIX
+						);
+
+						var currentFrame = new THREE.RTTNode( size.width, size.height, motionBlur );
+						currentFrame.saveTo = previousFrame;
+
+						nodepost.output = currentFrame;
+
+						break;
+
 					case 'mosaic':
 
-						// PASS
+						// POST
 
 						var scale = new THREE.FloatNode( 128 );
 						var fade = new THREE.FloatNode( 1 );
@@ -403,7 +422,7 @@
 							THREE.Math3Node.MIX
 						);
 
-						nodepass.value = new THREE.ScreenNode( fadeScreen );
+						nodepost.output = new THREE.ScreenNode( fadeScreen );
 
 						// GUI
 
@@ -423,7 +442,7 @@
 
 							fadeScreen.c = val ? new THREE.TextureNode( lensflare2 ) : fade;
 
-							nodepass.needsUpdate = true;
+							nodepost.needsUpdate = true;
 
 						} );
 
@@ -431,14 +450,14 @@
 
 					case 'blur':
 
-						// PASS
+						// POST
 
 						var size = renderer.getDrawingBufferSize();
 
 						var blurScreen = new THREE.BlurNode( new THREE.ScreenNode() );
 						blurScreen.size = new THREE.Vector2( size.width, size.height );
 
-						nodepass.value = blurScreen;
+						nodepost.output = blurScreen;
 
 						// GUI
 
@@ -458,18 +477,19 @@
 
 				}
 
-				nodepass.needsUpdate = true;
+				nodepost.needsUpdate = true;
 
 				// test serialization
-/*
-				var library = {};
-				library[ lensflare2.uuid ] = lensflare2;
-				library[ decalNormal.uuid ] = decalNormal;
+				/*
+							var library = {};
+							library[ lensflare2.uuid ] = lensflare2;
+							library[ decalNormal.uuid ] = decalNormal;
 
-				var json = nodepass.toJSON();
+							var json = nodepost.toJSON();
+
+							nodepost.output = new THREE.NodeMaterialLoader( null, library ).parse( json ).value;
+						*/
 
-				nodepass.value = new THREE.NodeMaterialLoader( null, library ).parse( json ).value;
-*/
 			}
 
 			function init() {
@@ -479,6 +499,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				nodepost = new THREE.NodePostProcessing( renderer );
+
 				//
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -510,16 +532,6 @@
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				// postprocessing
-
-				composer = new THREE.EffectComposer( renderer );
-				composer.addPass( new THREE.RenderPass( scene, camera ) );
-
-				nodepass = new NodePass();
-				nodepass.renderToScreen = true;
-
-				composer.addPass( nodepass );
-
 				//
 
 				updateMaterial();
@@ -533,8 +545,7 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
+				nodepost.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -547,12 +558,13 @@
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;
 
-				frame.update( delta ).updateNode( nodepass.node );
+				frame.update( delta );
 
-				composer.render();
+				nodepost.render( scene, camera, frame );
 
 			}
 
+
 		</script>
 
 	</body>

examples/webgl_postprocessing_nodes_pass.html

@@ -0,0 +1,560 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - postprocessing with nodes</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				margin: 0px;
+				background-color: #000;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				margin: 0px;
+				text-align:center;
+				overflow: hidden;
+			}
+
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				display:block;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Post-Processing
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+
+		<script src="js/shaders/CopyShader.js"></script>
+
+		<script src="js/postprocessing/EffectComposer.js"></script>
+		<script src="js/postprocessing/RenderPass.js"></script>
+		<script src="js/postprocessing/MaskPass.js"></script>
+		<script src="js/postprocessing/ShaderPass.js"></script>
+
+		<script type="module">
+
+			import './js/nodes/THREE.Nodes.js';
+			import { NodePass } from './js/nodes/postprocessing/NodePass.js';
+			import './js/loaders/NodeMaterialLoader.js';
+
+			var camera, scene, renderer, composer;
+			var object, light, nodepass;
+			var gui;
+
+			var clock = new THREE.Clock();
+			var frame = new THREE.NodeFrame();
+
+			var param = { example: 'color-adjustment' };
+
+			var textureLoader = new THREE.TextureLoader();
+
+			var lensflare2 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
+			lensflare2.wrapS = lensflare2.wrapT = THREE.RepeatWrapping;
+
+			var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
+			decalNormal.wrapS = decalNormal.wrapT = THREE.RepeatWrapping;
+
+			init();
+			animate();
+
+			function clearGui() {
+
+				if ( gui ) gui.destroy();
+
+				gui = new dat.GUI();
+
+				var example = gui.add( param, 'example', {
+					'basic / color-adjustment': 'color-adjustment',
+					'basic / blends': 'blends',
+					'basic / fade': 'fade',
+					'basic / invert': 'invert',
+					'basic / blur': 'blur',
+					'adv / saturation': 'saturation',
+					'adv / refraction': 'refraction',
+					'adv / mosaic': 'mosaic'
+				} ).onFinishChange( function () {
+
+					updateMaterial();
+
+				} );
+
+				gui.open();
+
+			}
+
+			function addGui( name, value, callback, isColor, min, max ) {
+
+				var node;
+
+				param[ name ] = value;
+
+				if ( isColor ) {
+
+					node = gui.addColor( param, name ).onChange( function () {
+
+						callback( param[ name ] );
+
+					} );
+
+				} else if ( typeof value == 'object' ) {
+
+					param[ name ] = value[ Object.keys( value )[ 0 ] ];
+
+					node = gui.add( param, name, value ).onChange( function () {
+
+						callback( param[ name ] );
+
+					} );
+
+				} else {
+
+					node = gui.add( param, name, min, max ).onChange( function () {
+
+						callback( param[ name ] );
+
+					} );
+
+				}
+
+				return node;
+
+			}
+
+			function updateMaterial() {
+
+				var name = param.example;
+
+				clearGui();
+
+				switch ( name ) {
+
+					case 'color-adjustment':
+
+						var screen = new THREE.ScreenNode();
+
+						var hue = new THREE.FloatNode();
+						var sataturation = new THREE.FloatNode( 1 );
+						var vibrance = new THREE.FloatNode();
+						var brightness = new THREE.FloatNode( 0 );
+						var contrast = new THREE.FloatNode( 1 );
+
+						var hueNode = new THREE.ColorAdjustmentNode( screen, hue, THREE.ColorAdjustmentNode.HUE );
+						var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
+						var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
+						var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
+						var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
+
+						nodepass.input = contrastNode;
+
+						// GUI
+
+						addGui( 'hue', hue.value, function ( val ) {
+
+							hue.value = val;
+
+						}, false, 0, Math.PI * 2 );
+
+						addGui( 'saturation', sataturation.value, function ( val ) {
+
+							sataturation.value = val;
+
+						}, false, 0, 2 );
+
+						addGui( 'vibrance', vibrance.value, function ( val ) {
+
+							vibrance.value = val;
+
+						}, false, - 1, 1 );
+
+						addGui( 'brightness', brightness.value, function ( val ) {
+
+							brightness.value = val;
+
+						}, false, 0, .5 );
+
+						addGui( 'contrast', contrast.value, function ( val ) {
+
+							contrast.value = val;
+
+						}, false, 0, 2 );
+
+						break;
+
+					case 'fade':
+
+						// PASS
+
+						var color = new THREE.ColorNode( 0xFFFFFF );
+						var percent = new THREE.FloatNode( .5 );
+
+						var fade = new THREE.Math3Node(
+							new THREE.ScreenNode(),
+							color,
+							percent,
+							THREE.Math3Node.MIX
+						);
+
+						nodepass.input = fade;
+
+						// GUI
+
+						addGui( 'color', color.value.getHex(), function ( val ) {
+
+							color.value.setHex( val );
+
+						}, true );
+
+						addGui( 'fade', percent.value, function ( val ) {
+
+							percent.value = val;
+
+						}, false, 0, 1 );
+
+						break;
+
+					case 'invert':
+
+						// PASS
+
+						var alpha = new THREE.FloatNode( 1 );
+
+						var screen = new THREE.ScreenNode();
+						var inverted = new THREE.Math1Node( screen, THREE.Math1Node.INVERT );
+
+						var fade = new THREE.Math3Node(
+							screen,
+							inverted,
+							alpha,
+							THREE.Math3Node.MIX
+						);
+
+						nodepass.input = fade;
+
+						// GUI
+
+						addGui( 'alpha', alpha.value, function ( val ) {
+
+							alpha.value = val;
+
+						}, false, 0, 1 );
+
+						break;
+
+					case 'blends':
+
+						// PASS
+
+						var multiply = new THREE.OperatorNode(
+							new THREE.ScreenNode(),
+							new THREE.TextureNode( lensflare2 ),
+							THREE.OperatorNode.ADD
+						);
+
+						nodepass.input = multiply;
+
+						// GUI
+
+						addGui( 'blend', {
+							'addition': THREE.OperatorNode.ADD,
+							'subtract': THREE.OperatorNode.SUB,
+							'multiply': THREE.OperatorNode.MUL,
+							'division': THREE.OperatorNode.DIV
+						}, function ( val ) {
+
+							multiply.op = val;
+
+							nodepass.needsUpdate = true;
+
+						} );
+
+						break;
+
+					case 'saturation':
+
+						// PASS
+
+						var screen = new THREE.ScreenNode();
+						var sat = new THREE.FloatNode( 0 );
+
+						var satrgb = new THREE.FunctionNode( [
+							"vec3 satrgb( vec3 rgb, float adjustment ) {",
+							// include luminance function from LuminanceNode
+							"	vec3 intensity = vec3( luminance( rgb ) );",
+							"	return mix( intensity, rgb, adjustment );",
+							"}"
+						].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
+
+						var saturation = new THREE.FunctionCallNode( satrgb );
+						saturation.inputs.rgb = screen;
+						saturation.inputs.adjustment = sat;
+
+						nodepass.input = saturation;
+
+						// GUI
+
+						addGui( 'saturation', sat.value, function ( val ) {
+
+							sat.value = val;
+
+						}, false, 0, 2 );
+
+						break;
+
+					case 'refraction':
+
+						// PASS
+
+						var normal = new THREE.TextureNode( decalNormal );
+						var normalXY = new THREE.SwitchNode( normal, 'xy' );
+						var scale = new THREE.FloatNode( .5 );
+						var flip = new THREE.Vector2Node( - 1, 1 );
+
+						var normalXYFlip = new THREE.Math1Node(
+							normalXY,
+							THREE.Math1Node.INVERT
+						);
+
+						var offsetNormal = new THREE.OperatorNode(
+							normalXYFlip,
+							new THREE.FloatNode( .5 ),
+							THREE.OperatorNode.ADD
+						);
+
+						var scaleTexture = new THREE.OperatorNode(
+							new THREE.SwitchNode( normal, 'z' ),
+							offsetNormal,
+							THREE.OperatorNode.MUL
+						);
+
+						var scaleNormal = new THREE.Math3Node(
+							new THREE.FloatNode( 1 ),
+							scaleTexture,
+							scale,
+							THREE.Math3Node.MIX
+						);
+
+						var offsetCoord = new THREE.OperatorNode(
+							new THREE.UVNode(),
+							scaleNormal,
+							THREE.OperatorNode.MUL
+						);
+
+						var screen = new THREE.ScreenNode( offsetCoord );
+
+						nodepass.input = screen;
+
+						// GUI
+
+						addGui( 'scale', scale.value, function ( val ) {
+
+							scale.value = val;
+
+						}, false, 0, 1 );
+
+						addGui( 'invert', false, function ( val ) {
+
+							offsetNormal.a = val ? normalXYFlip : normalXY;
+
+							nodepass.needsUpdate = true;
+
+						} );
+
+						break;
+
+					case 'mosaic':
+
+						// PASS
+
+						var scale = new THREE.FloatNode( 128 );
+						var fade = new THREE.FloatNode( 1 );
+						var uv = new THREE.UVNode();
+
+						var blocks = new THREE.OperatorNode(
+							uv,
+							scale,
+							THREE.OperatorNode.MUL
+						);
+
+						var blocksSize = new THREE.Math1Node(
+							blocks,
+							THREE.Math1Node.FLOOR
+						);
+
+						var mosaicUV = new THREE.OperatorNode(
+							blocksSize,
+							scale,
+							THREE.OperatorNode.DIV
+						);
+
+						var fadeScreen = new THREE.Math3Node(
+							uv,
+							mosaicUV,
+							fade,
+							THREE.Math3Node.MIX
+						);
+
+						nodepass.input = new THREE.ScreenNode( fadeScreen );
+
+						// GUI
+
+						addGui( 'scale', scale.value, function ( val ) {
+
+							scale.value = val;
+
+						}, false, 16, 1024 );
+
+						addGui( 'fade', fade.value, function ( val ) {
+
+							fade.value = val;
+
+						}, false, 0, 1 );
+
+						addGui( 'mask', false, function ( val ) {
+
+							fadeScreen.c = val ? new THREE.TextureNode( lensflare2 ) : fade;
+
+							nodepass.needsUpdate = true;
+
+						} );
+
+						break;
+
+					case 'blur':
+
+						// PASS
+
+						var size = renderer.getDrawingBufferSize();
+
+						var blurScreen = new THREE.BlurNode( new THREE.ScreenNode() );
+						blurScreen.size = new THREE.Vector2( size.width, size.height );
+
+						nodepass.input = blurScreen;
+
+						// GUI
+
+						addGui( 'blurX', blurScreen.radius.x, function ( val ) {
+
+							blurScreen.radius.x = val;
+
+						}, false, 0, 15 );
+
+						addGui( 'blurY', blurScreen.radius.y, function ( val ) {
+
+							blurScreen.radius.y = val;
+
+						}, false, 0, 15 );
+
+						break;
+
+				}
+
+				nodepass.needsUpdate = true;
+
+				// test serialization
+				/*
+							var library = {};
+							library[ lensflare2.uuid ] = lensflare2;
+							library[ decalNormal.uuid ] = decalNormal;
+
+							var json = nodepass.toJSON();
+
+							nodepass.input = new THREE.NodeMaterialLoader( null, library ).parse( json ).value;
+						*/
+
+			}
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 400;
+
+				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0x0066FF, 1, 1000 );
+
+				object = new THREE.Object3D();
+				scene.add( object );
+
+				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
+
+				for ( var i = 0; i < 100; i ++ ) {
+
+					var material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), flatShading: true } );
+					var mesh = new THREE.Mesh( geometry, material );
+					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
+					mesh.position.multiplyScalar( Math.random() * 400 );
+					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = 10 + ( Math.random() * 40 );
+					object.add( mesh );
+
+				}
+
+				scene.add( new THREE.AmbientLight( 0x999999 ) );
+
+				light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 1, 1, 1 );
+				scene.add( light );
+
+				// postprocessing
+
+				composer = new THREE.EffectComposer( renderer );
+				composer.addPass( new THREE.RenderPass( scene, camera ) );
+
+				nodepass = new NodePass();
+				nodepass.renderToScreen = true;
+
+				composer.addPass( nodepass );
+
+				//
+
+				updateMaterial();
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				composer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				var delta = clock.getDelta();
+
+				object.rotation.x += 0.005;
+				object.rotation.y += 0.01;
+
+				frame.update( delta ).updateNode( nodepass.material );
+
+				composer.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/webgl_sprites_nodes.html

@@ -41,218 +41,215 @@
 
 		<script type="module">
 
-		import './js/nodes/THREE.Nodes.js';
-		import './js/loaders/NodeMaterialLoader.js';
+			import './js/nodes/THREE.Nodes.js';
+			import './js/loaders/NodeMaterialLoader.js';
 
-		var container = document.getElementById( 'container' );
+			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 = {};
-		var controls;
-
-		window.addEventListener( 'load', init );
-
-		function init() {
-
-			//
-			// Renderer / Controls
-			//
-
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			container.appendChild( renderer.domElement );
-
-			scene = new THREE.Scene();
-			scene.fog = new THREE.Fog( 0x0000FF, 70, 150 );
-
-			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
-			camera.position.z = 100;
-			camera.target = new THREE.Vector3();
-
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
-			controls.minDistance = 50;
-			controls.maxDistance = 200;
-
-			//
-			// SpriteNode
-			//
-
-			// use scale to adjuste the real sprite size
-			plane = new THREE.PlaneBufferGeometry( 1, 1 );
-
-			// https://openclipart.org/detail/239883/walking-man-sprite-sheet
-			walkingManTextureURL = "textures/WalkingManSpriteSheet.png";
-
-			walkingManTexture = new THREE.TextureLoader().load( walkingManTextureURL );
-			walkingManTexture.wrapS = walkingManTexture.wrapT = THREE.RepeatWrapping;
-
-			library[ walkingManTextureURL ] = walkingManTexture;
-
-			// horizontal sprite-sheet animator
-
-			function createHorizontalSpriteSheetNode( hCount, speed ) {
-
-				var speed = new THREE.Vector2Node( speed, 0 ); // frame per second
-				var scale = new THREE.Vector2Node( 1 / hCount, 1 ); // 8 horizontal images in sprite-sheet
-
-				var uvTimer = new THREE.OperatorNode(
-					new THREE.TimerNode(),
-					speed,
-					THREE.OperatorNode.MUL
-				);
-
-				var uvIntegerTimer = new THREE.Math1Node(
-					uvTimer,
-					THREE.Math1Node.FLOOR
-				);
-
-				var uvFrameOffset = new THREE.OperatorNode(
-					uvIntegerTimer,
-					scale,
-					THREE.OperatorNode.MUL
-				);
-
-				var uvScale = new THREE.OperatorNode(
-					new THREE.UVNode(),
-					scale,
-					THREE.OperatorNode.MUL
-				);
-
-				var uvFrame = new THREE.OperatorNode(
-					uvScale,
-					uvFrameOffset,
+			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+			var frame = new THREE.NodeFrame();
+			var sprite1, sprite2, sprite3;
+			var walkingManTexture, walkingManTextureURL;
+			var library = {};
+			var controls;
+
+			window.addEventListener( 'load', init );
+
+			function init() {
+
+				//
+				// Renderer / Controls
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0x0000FF, 70, 150 );
+
+				camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 100;
+				camera.target = new THREE.Vector3();
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 50;
+				controls.maxDistance = 200;
+
+				//
+				// SpriteNode
+				//
+
+				// https://openclipart.org/detail/239883/walking-man-sprite-sheet
+				walkingManTextureURL = "textures/WalkingManSpriteSheet.png";
+
+				walkingManTexture = new THREE.TextureLoader().load( walkingManTextureURL );
+				walkingManTexture.wrapS = walkingManTexture.wrapT = THREE.RepeatWrapping;
+
+				library[ walkingManTextureURL ] = walkingManTexture;
+
+				// horizontal sprite-sheet animator
+
+				function createHorizontalSpriteSheetNode( hCount, speed ) {
+
+					var speed = new THREE.Vector2Node( speed, 0 ); // frame per second
+					var scale = new THREE.Vector2Node( 1 / hCount, 1 ); // 8 horizontal images in sprite-sheet
+
+					var uvTimer = new THREE.OperatorNode(
+						new THREE.TimerNode(),
+						speed,
+						THREE.OperatorNode.MUL
+					);
+
+					var uvIntegerTimer = new THREE.Math1Node(
+						uvTimer,
+						THREE.Math1Node.FLOOR
+					);
+
+					var uvFrameOffset = new THREE.OperatorNode(
+						uvIntegerTimer,
+						scale,
+						THREE.OperatorNode.MUL
+					);
+
+					var uvScale = new THREE.OperatorNode(
+						new THREE.UVNode(),
+						scale,
+						THREE.OperatorNode.MUL
+					);
+
+					var uvFrame = new THREE.OperatorNode(
+						uvScale,
+						uvFrameOffset,
+						THREE.OperatorNode.ADD
+					);
+
+					return uvFrame;
+
+				}
+
+				// sprites
+
+				var spriteWidth = 20,
+					spriteHeight = 20;
+
+				scene.add( sprite1 = new THREE.Sprite( new THREE.SpriteNodeMaterial() ) );
+				sprite1.scale.x = spriteWidth;
+				sprite1.scale.y = spriteHeight;
+				sprite1.material.color = new THREE.TextureNode( walkingManTexture );
+				sprite1.material.color.uv = createHorizontalSpriteSheetNode( 8, 10 );
+
+				scene.add( sprite2 = new THREE.Sprite( new THREE.SpriteNodeMaterial() ) );
+				sprite2.position.x = 30;
+				sprite2.scale.x = spriteWidth;
+				sprite2.scale.y = spriteHeight;
+				sprite2.material.color = new THREE.TextureNode( walkingManTexture );
+				sprite2.material.color.uv = createHorizontalSpriteSheetNode( 8, 30 );
+				sprite2.material.color = new THREE.Math1Node( sprite2.material.color, THREE.Math1Node.INVERT );
+				sprite2.material.spherical = false; // look at camera horizontally only, very used in vegetation
+				// horizontal zigzag sprite
+				sprite2.material.position = new THREE.OperatorNode(
+					new THREE.OperatorNode(
+						new THREE.Math1Node( new THREE.TimerNode( 3 ), THREE.Math1Node.SIN ), // 3 is speed (time scale)
+						new THREE.Vector2Node( .3, 0 ), // horizontal scale (position)
+						THREE.OperatorNode.MUL
+					),
+					new THREE.PositionNode(),
 					THREE.OperatorNode.ADD
 				);
 
-				return uvFrame;
+				var sineWaveFunction = new THREE.FunctionNode( [
+					// https://stackoverflow.com/questions/36174431/how-to-make-a-wave-warp-effect-in-shader
+					"vec2 sineWave(vec2 uv, vec2 phase) {",
+					// wave distortion
+					"	float x = sin( 25.0*uv.y + 30.0*uv.x + 6.28*phase.x) * 0.01;",
+					"	float y = sin( 25.0*uv.y + 30.0*uv.x + 6.28*phase.y) * 0.03;",
+					"	return vec2(uv.x+x, uv.y+y);",
+					"}"
+				].join( "\n" ) );
+
+				scene.add( sprite3 = new THREE.Sprite( new THREE.SpriteNodeMaterial() ) );
+				sprite3.position.x = - 30;
+				sprite3.scale.x = spriteWidth;
+				sprite3.scale.y = spriteHeight;
+				sprite3.material.color = new THREE.TextureNode( walkingManTexture );
+				sprite3.material.color.uv = new THREE.FunctionCallNode( sineWaveFunction, {
+					"uv": createHorizontalSpriteSheetNode( 8, 10 ),
+					"phase": new THREE.TimerNode()
+				} );
+				sprite3.material.fog = true;
+
+				//
+				//	Test serialization
+				//
+
+				spriteToJSON( sprite1 );
+				spriteToJSON( sprite2 );
+				spriteToJSON( sprite3 );
+
+				//
+				// Events
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				onWindowResize();
+				animate();
 
 			}
 
-			// sprites
-
-			var spriteWidth = 20,
-				spriteHeight = 20;
-
-			scene.add( sprite1 = new THREE.Mesh( plane, new THREE.SpriteNodeMaterial() ) );
-			sprite1.scale.x = spriteWidth;
-			sprite1.scale.y = spriteHeight;
-			sprite1.material.color = new THREE.TextureNode( walkingManTexture );
-			sprite1.material.color.uv = createHorizontalSpriteSheetNode( 8, 10 );
-
-			scene.add( sprite2 = new THREE.Mesh( plane, new THREE.SpriteNodeMaterial() ) );
-			sprite2.position.x = 30;
-			sprite2.scale.x = spriteWidth;
-			sprite2.scale.y = spriteHeight;
-			sprite2.material.color = new THREE.TextureNode( walkingManTexture );
-			sprite2.material.color.uv = createHorizontalSpriteSheetNode( 8, 30 );
-			sprite2.material.color = new THREE.Math1Node( sprite2.material.color, THREE.Math1Node.INVERT );
-			sprite2.material.spherical = false; // look at camera horizontally only, very used to vegetation
-			// horizontal zigzag sprite
-			sprite2.material.transform = new THREE.OperatorNode(
-				new THREE.OperatorNode(
-					new THREE.Math1Node( new THREE.TimerNode( 3 ), THREE.Math1Node.SIN ), // 3 is speed (time scale)
-					new THREE.Vector2Node( .3, 0 ), // horizontal scale (position)
-					THREE.OperatorNode.MUL
-				),
-				new THREE.PositionNode(),
-				THREE.OperatorNode.ADD
-			);
-
-			var sineWaveFunction = new THREE.FunctionNode( [
-				// https://stackoverflow.com/questions/36174431/how-to-make-a-wave-warp-effect-in-shader
-				"vec2 sineWave(vec2 uv, vec2 phase) {",
-				// wave distortion
-				"	float x = sin( 25.0*uv.y + 30.0*uv.x + 6.28*phase.x) * 0.01;",
-				"	float y = sin( 25.0*uv.y + 30.0*uv.x + 6.28*phase.y) * 0.03;",
-				"	return vec2(uv.x+x, uv.y+y);",
-				"}"
-			].join( "\n" ) );
-
-			scene.add( sprite3 = new THREE.Mesh( plane, new THREE.SpriteNodeMaterial() ) );
-			sprite3.position.x = - 30;
-			sprite3.scale.x = spriteWidth;
-			sprite3.scale.y = spriteHeight;
-			sprite3.material.color = new THREE.TextureNode( walkingManTexture );
-			sprite3.material.color.uv = new THREE.FunctionCallNode( sineWaveFunction, {
-				"uv": createHorizontalSpriteSheetNode( 8, 0 ),
-				"phase": new THREE.TimerNode()
-			} );
-			sprite3.material.fog = true;
-
-			//
-			//	Test serialization
-			//
+			function spriteToJSON( sprite ) {
 
-			spriteToJSON( sprite1 );
-			spriteToJSON( sprite2 );
-			spriteToJSON( sprite3 );
+				// serialize
 
-			//
-			// Events
-			//
+				var json = sprite.material.toJSON();
 
-			window.addEventListener( 'resize', onWindowResize, false );
+				// replace uuid to url (facilitates the load of textures using url otherside uuid)
 
-			onWindowResize();
-			animate();
+				THREE.NodeMaterialLoaderUtils.replaceUUID( json, walkingManTexture, walkingManTextureURL );
 
-		}
+				// deserialize
 
-		function spriteToJSON( sprite ) {
+				var material = new THREE.NodeMaterialLoader( null, library ).parse( json );
 
-			// serialize
+				// replace material
 
-			var json = sprite.material.toJSON();
+				sprite.material.dispose();
 
-			// replace uuid to url (facilitates the load of textures using url otherside uuid)
+				sprite.material = material;
 
-			THREE.NodeMaterialLoaderUtils.replaceUUID( json, walkingManTexture, walkingManTextureURL );
-
-			// deserialize
-
-			var material = new THREE.NodeMaterialLoader( null, library ).parse( json );
-
-			// replace material
-
-			sprite.material.dispose();
-
-			sprite.material = material;
-
-		}
+			}
 
-		function onWindowResize() {
+			function onWindowResize() {
 
-			var width = window.innerWidth, height = window.innerHeight;
+				var width = window.innerWidth, height = window.innerHeight;
 
-			camera.aspect = width / height;
-			camera.updateProjectionMatrix();
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
 
-			renderer.setSize( width, height );
+				renderer.setSize( width, height );
 
-		}
+			}
 
-		function animate() {
+			function animate() {
 
-			var delta = clock.getDelta();
+				var delta = clock.getDelta();
 
-			// update material animation and/or gpu calcs (pre-renderer)
-			frame.update( delta )
-				.updateNode( sprite1.material )
-				.updateNode( sprite2.material )
-				.updateNode( sprite3.material );
+				// update material animation and/or gpu calcs (pre-renderer)
+				frame.update( delta )
+					.updateNode( sprite1.material )
+					.updateNode( sprite2.material )
+					.updateNode( sprite3.material );
 
-			// rotate sprite
-			sprite3.rotation.z -= Math.PI * .005;
+				// rotate sprite
+				sprite3.rotation.z -= Math.PI * .005;
 
-			renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-		}
+			}
 
 		</script>