nodematerial r6 - up and fixes (#9681)

* unnecessary shared=false ( false is default )

* fix using in vertex shader

* cleanup

* cleanup

* cleanup

* fix title

* cleanup

* fix use of includes and extension in expression

* debut VarNode and varying example

examples/js/nodes/AttributeNode.js

@@ -4,13 +4,13 @@
 
 THREE.AttributeNode = function( name, type ) {
 
-	THREE.InputNode.call( this, type, { shared: false } );
+	THREE.GLNode.call( this, type );
 
 	this.name = name;
 
 };
 
-THREE.AttributeNode.prototype = Object.create( THREE.InputNode.prototype );
+THREE.AttributeNode.prototype = Object.create( THREE.GLNode.prototype );
 THREE.AttributeNode.prototype.constructor = THREE.AttributeNode;
 
 THREE.AttributeNode.prototype.getAttributeType = function( builder ) {
@@ -33,6 +33,6 @@ THREE.AttributeNode.prototype.generate = function( builder, output ) {
 
 	var attribute = builder.material.getAttribute( this.name, type );
 
-	return builder.format( attribute.varName, this.getType( builder ), output );
+	return builder.format( builder.isShader( 'vertex' ) ? this.name : attribute.varying.name, this.getType( builder ), output );
 
 };

examples/js/nodes/FunctionNode.js

@@ -65,6 +65,18 @@ THREE.FunctionNode.prototype.generate = function( builder, output ) {
 
 	var match, offset = 0, src = this.value;
 
+	for ( var i = 0; i < this.includes.length; i ++ ) {
+
+		builder.include( this.includes[ i ], this );
+
+	}
+
+	for ( var ext in this.extensions ) {
+
+		builder.material.extensions[ ext ] = true;
+
+	}
+
 	while ( match = THREE.FunctionNode.rProperties.exec( this.value ) ) {
 
 		var prop = match[ 0 ], isGlobal = this.isMethod ? ! this.getInputByName( prop ) : true;
@@ -108,18 +120,6 @@ THREE.FunctionNode.prototype.generate = function( builder, output ) {
 
 	if ( output === 'source' ) {
 
-		for ( var i = 0; i < this.includes.length; i ++ ) {
-
-			builder.include( this.includes[ i ], this );
-
-		}
-
-		for ( var ext in this.extensions ) {
-
-			builder.material.extensions[ ext ] = true;
-
-		}
-
 		return src;
 
 	} else if ( this.isMethod ) {

examples/js/nodes/InputNode.js

@@ -33,8 +33,7 @@ THREE.InputNode.prototype.generate = function( builder, output, uuid, type, ns,
 
 		return builder.format( data.vertex.name, type, output );
 
-	}
-	else {
+	} else {
 
 		if ( ! data.fragment ) {
 

examples/js/nodes/NodeMaterial.js

@@ -87,6 +87,7 @@ THREE.NodeMaterial.prototype.build = function() {
 	this.vertexUniform = [];
 	this.fragmentUniform = [];
 
+	this.vars = [];
 	this.vertexTemps = [];
 	this.fragmentTemps = [];
 
@@ -287,35 +288,64 @@ THREE.NodeMaterial.prototype.createUniform = function( type, value, ns, needsUpd
 
 THREE.NodeMaterial.prototype.getVertexTemp = function( uuid, type, ns ) {
 
-	if ( ! this.vertexTemps[ uuid ] ) {
+	var data = this.vertexTemps[ uuid ];
+
+	if ( ! data ) {
 
 		var index = this.vertexTemps.length,
-			name = ns ? ns : 'nVt' + index,
-			data = { name : name, type : type };
+			name = ns ? ns : 'nVt' + index;
+
+		data = { name : name, type : type };
 
 		this.vertexTemps.push( data );
 		this.vertexTemps[ uuid ] = data;
 
 	}
 
-	return this.vertexTemps[ uuid ];
+	return data;
 
 };
 
 THREE.NodeMaterial.prototype.getFragmentTemp = function( uuid, type, ns ) {
 
-	if ( ! this.fragmentTemps[ uuid ] ) {
+	var data = this.fragmentTemps[ uuid ];
+
+	if ( ! data ) {
 
 		var index = this.fragmentTemps.length,
-			name = ns ? ns : 'nVt' + index,
-			data = { name : name, type : type };
+			name = ns ? ns : 'nVt' + index;
+
+		data = { name : name, type : type };
 
 		this.fragmentTemps.push( data );
 		this.fragmentTemps[ uuid ] = data;
 
 	}
 
-	return this.fragmentTemps[ uuid ];
+	return data;
+
+};
+
+THREE.NodeMaterial.prototype.getVar = function( uuid, type, ns ) {
+
+	var data = this.vars[ uuid ];
+
+	if ( ! data ) {
+
+		var index = this.vars.length,
+			name = ns ? ns : 'nVv' + index;
+
+		data = { name : name, type : type }
+
+		this.vars.push( data );
+		this.vars[ uuid ] = data;
+
+		this.addVertexPars( 'varying ' + type + ' ' + name + ';' );
+		this.addFragmentPars( 'varying ' + type + ' ' + name + ';' );
+
+	}
+
+	return data;
 
 };
 
@@ -323,16 +353,12 @@ THREE.NodeMaterial.prototype.getAttribute = function( name, type ) {
 
 	if ( ! this.attributes[ name ] ) {
 
-		var varName = 'nV' + name;
-
-		this.addVertexPars( 'varying ' + type + ' ' + varName + ';' );
-		this.addFragmentPars( 'varying ' + type + ' ' + varName + ';' );
+		var varying = this.getVar( name, type );
 
 		this.addVertexPars( 'attribute ' + type + ' ' + name + ';' );
+		this.addVertexCode( varying.name + ' = ' + name + ';' );
 
-		this.addVertexCode( varName + ' = ' + name + ';' );
-
-		this.attributes[ name ] = { varName : varName, name : name, type : type };
+		this.attributes[ name ] = { varying : varying, name : name, type : type };
 
 	}
 
@@ -511,7 +537,7 @@ THREE.NodeMaterial.prototype.include = function( builder, node, parent, source )
 
 	}
 
-	if ( node instanceof THREE.FunctionNode && parent && includes[ parent.name ].deps.indexOf( node ) == - 1 ) {
+	if ( node instanceof THREE.FunctionNode && parent && includes[ parent.name ] && includes[ parent.name ].deps.indexOf( node ) == - 1 ) {
 
 		includes[ parent.name ].deps.push( node );
 

examples/js/nodes/VarNode.js

+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+THREE.VarNode = function( type ) {
+
+	THREE.GLNode.call( this, type );
+
+};
+
+THREE.VarNode.prototype = Object.create( THREE.GLNode.prototype );
+THREE.VarNode.prototype.constructor = THREE.VarNode;
+
+THREE.VarNode.prototype.getType = function( builder ) {
+
+	return builder.getTypeByFormat( this.type );
+
+};
+
+THREE.VarNode.prototype.generate = function( builder, output ) {
+
+	var varying = builder.material.getVar( this.uuid, this.type );
+
+	return builder.format( varying.name, this.getType( builder ), output );
+
+};

examples/js/nodes/inputs/ColorNode.js

@@ -4,7 +4,7 @@
 
 THREE.ColorNode = function( color ) {
 
-	THREE.InputNode.call( this, 'c', { shared: false } );
+	THREE.InputNode.call( this, 'c' );
 
 	this.value = new THREE.Color( color || 0 );
 

examples/js/nodes/inputs/FloatNode.js

@@ -4,7 +4,7 @@
 
 THREE.FloatNode = function( value ) {
 
-	THREE.InputNode.call( this, 'fv1', { shared: false } );
+	THREE.InputNode.call( this, 'fv1' );
 
 	this.value = [ value || 0 ];
 

examples/js/nodes/inputs/IntNode.js

@@ -4,7 +4,7 @@
 
 THREE.IntNode = function( value ) {
 
-	THREE.InputNode.call( this, 'iv1', { shared: false } );
+	THREE.InputNode.call( this, 'iv1' );
 
 	this.value = [ Math.floor( value || 0 ) ];
 

examples/js/nodes/inputs/Matrix4Node.js

@@ -4,7 +4,7 @@
 
 THREE.Matrix4Node = function( matrix ) {
 
-	THREE.InputNode.call( this, 'm4', { shared: false } );
+	THREE.InputNode.call( this, 'm4' );
 
 	this.value = matrix || new THREE.Matrix4();
 

examples/js/nodes/inputs/Vector2Node.js

@@ -4,7 +4,7 @@
 
 THREE.Vector2Node = function( x, y ) {
 
-	THREE.InputNode.call( this, 'v2', { shared: false } );
+	THREE.InputNode.call( this, 'v2' );
 
 	this.value = new THREE.Vector2( x, y );
 

examples/js/nodes/inputs/Vector3Node.js

@@ -4,7 +4,7 @@
 
 THREE.Vector3Node = function( x, y, z ) {
 
-	THREE.InputNode.call( this, 'v3', { shared: false } );
+	THREE.InputNode.call( this, 'v3' );
 
 	this.type = 'v3';
 	this.value = new THREE.Vector3( x, y, z );

examples/js/nodes/inputs/Vector4Node.js

@@ -4,7 +4,7 @@
 
 THREE.Vector4Node = function( x, y, z, w ) {
 
-	THREE.InputNode.call( this, 'v4', { shared: false } );
+	THREE.InputNode.call( this, 'v4' );
 
 	this.value = new THREE.Vector4( x, y, z, w );
 

examples/webgl_materials_nodes.html

@@ -45,6 +45,7 @@
 		<script src="js/nodes/TempNode.js"></script>
 		<script src="js/nodes/InputNode.js"></script>
 		<script src="js/nodes/ConstNode.js"></script>
+		<script src="js/nodes/VarNode.js"></script>
 		<script src="js/nodes/FunctionNode.js"></script>
 		<script src="js/nodes/FunctionCallNode.js"></script>
 		<script src="js/nodes/AttributeNode.js"></script>
@@ -231,6 +232,7 @@
 				'misc / smoke' : 'smoke',
 				'misc / firefly' : 'firefly',
 				'misc / reserved-keywords' : 'reserved-keywords',
+				'misc / varying' : 'varying',
 				'misc / custom-attribute' : 'custom-attribute'
 			} ).onFinishChange( function() {
 
@@ -256,8 +258,7 @@
 
 				} );
 
-			}
-			else if ( typeof value == 'object' ) {
+			} else if ( typeof value == 'object' ) {
 
 				node = gui.add( param, name, value ).onChange( function() {
 
@@ -265,8 +266,7 @@
 
 				} );
 
-			}
-			else {
+			} else {
 
 				node = gui.add( param, name, min, max ).onChange( function() {
 
@@ -1763,6 +1763,35 @@
 
 					break;
 
+				case 'varying':
+
+					// MATERIAL
+
+					mtl = new THREE.PhongNodeMaterial();
+
+					var varying = new THREE.VarNode( "vec3" );
+
+					var setMyVar = new THREE.FunctionNode( [
+					"float 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;",
+					// it is not accept "void" functions for now!
+					"	return 0.;",
+					"}"
+					].join( "\n" ) );
+
+					// add keyword
+					setMyVar.keywords[ "myVar" ] = varying;
+
+					var transform = new THREE.FunctionNode( "setMyVar( position * .1 ) + position", "vec3", [ setMyVar ] );
+					transform.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
+
+					mtl.transform = transform;
+					mtl.color = varying;
+
+					break;
+
 				case 'triangle-blur':
 
 					// MATERIAL

examples/webgl_mirror_nodes.html

@@ -18,8 +18,8 @@
 			#info {
 				position: absolute;
 				top: 0px;
-				width: 200px;
-				left: calc(50% - 100px);
+				width: 400px;
+				left: calc(50% - 200px);
 				text-align: center;
 			}
 
@@ -31,7 +31,7 @@
 	<body>
 
 		<div id="container"></div>
-		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - mirror
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - mirror node-based
 		</div>
 
 		<script src="../build/three.js"></script>
@@ -188,7 +188,7 @@
 
 				var blurMirror = new THREE.BlurNode( mirror );
 				blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
-				blurMirror.coord = new THREE.FunctionNode( "(projCoord.xyz / projCoord.q)", "vec3" );
+				blurMirror.coord = new THREE.FunctionNode( "projCoord.xyz / projCoord.q", "vec3" );
 				blurMirror.coord.keywords[ "projCoord" ] = new THREE.OperatorNode( mirror.offset, mirror.coord, THREE.OperatorNode.ADD );
 				blurMirror.radius.x = blurMirror.radius.y = 0;
 

examples/webgl_postprocessing_nodes.html

@@ -117,10 +117,10 @@
 					'basic / blends': 'blends',
 					'basic / fade': 'fade',
 					'basic / invert': 'invert',
+					'basic / blur': 'blur',
 					'adv / saturation': 'saturation',
 					'adv / refraction': 'refraction',
-					'adv / mosaic': 'mosaic',
-					'adv / blur': 'blur'
+					'adv / mosaic': 'mosaic'
 				} ).onFinishChange( function() {
 
 					updateMaterial();
@@ -145,8 +145,7 @@
 
 					} );
 
-				}
-				else if ( typeof value == 'object' ) {
+				} else if ( typeof value == 'object' ) {
 
 					node = gui.add( param, name, value ).onChange( function() {
 
@@ -154,8 +153,7 @@
 
 					} );
 
-				}
-				else {
+				} else {
 
 					node = gui.add( param, name, min, max ).onChange( function() {
 
@@ -327,9 +325,9 @@
 
 						var satrgb = new THREE.FunctionNode( [
 						"vec3 satrgb(vec3 rgb, float adjustment) {",
-							//"const vec3 W = vec3(0.2125, 0.7154, 0.0721);", // LUMA
-							"vec3 intensity = vec3(dot(rgb, LUMA));",
-							"return mix(intensity, rgb, adjustment);",
+						//"	const vec3 W = vec3(0.2125, 0.7154, 0.0721);", // LUMA
+						"	vec3 intensity = vec3(dot(rgb, LUMA));",
+						"	return mix(intensity, rgb, adjustment);",
 						"}"
 						].join( "\n" ) );