Merge pull request #14214 from sunag/dev-nodeupdate1

Auto NodeMaterial build

examples/js/loaders/NodeMaterialLoader.js

@@ -565,8 +565,6 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 			}
 
-			object.build();
-
 			if ( node.fog !== undefined ) object.fog = node.fog;
 			if ( node.lights !== undefined ) object.lights = node.lights;
 
@@ -581,8 +579,6 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 			object.value = this.getNode( node.value );
 
-			object.build();
-
 		}
 
 		return this.material || this.pass || this;

examples/js/nodes/NodeBuilder.js

@@ -2,9 +2,10 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-THREE.NodeBuilder = function ( material ) {
+THREE.NodeBuilder = function ( material, renderer ) {
 
 	this.material = material;
+	this.renderer = renderer;
 
 	this.caches = [];
 	this.slots = [];

examples/js/nodes/NodeMaterial.js

@@ -6,6 +6,8 @@ THREE.NodeMaterial = function ( vertex, fragment ) {
 
 	THREE.ShaderMaterial.call( this );
 
+	this.defines.UUID = this.uuid;
+
 	this.vertex = vertex || new THREE.RawNode( new THREE.PositionNode( THREE.PositionNode.PROJECTION ) );
 	this.fragment = fragment || new THREE.RawNode( new THREE.ColorNode( 0xFF0000 ) );
 
@@ -78,13 +80,30 @@ THREE.NodeMaterial.prototype.updateFrame = function ( frame ) {
 
 };
 
-THREE.NodeMaterial.prototype.build = function () {
+THREE.NodeMaterial.prototype.onBeforeCompile = function ( shader, renderer ) {
+
+	if ( this.needsUpdate ) {
+
+		this.build( { dispose: false, renderer: renderer } );
+
+		shader.uniforms = this.uniforms;
+		shader.vertexShader = this.vertexShader;
+		shader.fragmentShader = this.fragmentShader;
+
+	}
+
+};
+
+THREE.NodeMaterial.prototype.build = function ( params ) {
+
+	params = params || {};
+	params.dispose = params.dispose !== undefined ? params.dispose : true;
 
 	var vertex, fragment;
 
 	this.nodes = [];
 
-	this.defines = {};
+	this.defines = { UUID: this.uuid };
 	this.uniforms = {};
 	this.attributes = {};
 
@@ -145,7 +164,7 @@ THREE.NodeMaterial.prototype.build = function () {
 
 	].join( "\n" );
 
-	var builder = new THREE.NodeBuilder( this );
+	var builder = new THREE.NodeBuilder( this, params.renderer );
 
 	vertex = this.vertex.build( builder.setShader( 'vertex' ), 'v4' );
 	fragment = this.fragment.build( builder.setShader( 'fragment' ), 'v4' );
@@ -253,8 +272,13 @@ THREE.NodeMaterial.prototype.build = function () {
 		'}'
 	].join( "\n" );
 
-	this.needsUpdate = true;
-	this.dispose(); // force update
+	if ( params.dispose ) {
+
+		// force update
+
+		this.dispose();
+
+	}
 
 	return this;
 
@@ -288,7 +312,7 @@ THREE.NodeMaterial.prototype.createUniform = function ( type, node, ns, needsUpd
 
 	var uniform = new THREE.NodeUniform( {
 		type: type,
-		name: ns ? ns : 'nVu' + index,
+		name: ns ? ns : 'nVu' + index + '_' + THREE.Math.generateUUID().substr(0, 8),
 		node: node,
 		needsUpdate: needsUpdate
 	} );

examples/js/nodes/postprocessing/NodePass.js

@@ -18,7 +18,7 @@ THREE.NodePass = function () {
 	this.node = new THREE.NodeMaterial();
 	this.node.fragment = this.fragment;
 
-	this.build();
+	this.needsUpdate = true;
 
 };
 
@@ -27,13 +27,21 @@ THREE.NodePass.prototype.constructor = THREE.NodePass;
 
 THREE.NodeMaterial.addShortcuts( THREE.NodePass.prototype, 'fragment', [ 'value' ] );
 
-THREE.NodePass.prototype.build = function () {
+THREE.NodePass.prototype.render = function () {
 
-	this.node.build();
+	if ( this.needsUpdate ) {
+
+		this.node.dispose();
+
+		this.needsUpdate = false;
+
+	}
 
 	this.uniforms = this.node.uniforms;
 	this.material = this.node;
 
+	THREE.ShaderPass.prototype.render.apply( this, arguments );
+
 };
 
 THREE.NodePass.prototype.toJSON = function ( meta ) {

examples/webgl_loader_nodes.html

@@ -248,8 +248,6 @@
 
 					time.timeScale = true;
 
-					loader.material.build();
-
 					// gui
 
 					addGui( 'timeScale', time.scale, function ( val ) {

examples/webgl_materials_compile.html

@@ -69,6 +69,7 @@
 		<script src="js/nodes/FunctionNode.js"></script>
 		<script src="js/nodes/FunctionCallNode.js"></script>
 		<script src="js/nodes/AttributeNode.js"></script>
+		<script src="js/nodes/NodeUniform.js"></script>
 		<script src="js/nodes/NodeBuilder.js"></script>
 		<script src="js/nodes/NodeLib.js"></script>
 		<script src="js/nodes/NodeFrame.js"></script>
@@ -267,6 +268,7 @@
 			
 			var transformer = new THREE.FunctionNode( "position + 0.0 * " + Math.random(), "vec3", [ ]);
 			mtl.transform = transformer;
+
 			// build shader
 			mtl.build();
 

examples/webgl_materials_nodes.html

@@ -285,6 +285,8 @@
 
 			} else if ( typeof value == 'object' ) {
 
+				param.blend = value[ Object.keys( value )[ 0 ] ];
+
 				node = gui.add( param, name, value ).onChange( function () {
 
 					callback( param[ name ] );
@@ -698,7 +700,7 @@
 
 						blend.b = val ? displace : displaceY;
 
-						mtl.build();
+						mtl.needsUpdate = true;
 
 					} );
 
@@ -783,7 +785,7 @@
 
 						}
 
-						mtl.build();
+						mtl.needsUpdate = true;
 
 					} );
 
@@ -943,7 +945,7 @@
 
 						mtl.color = val ? diffuse : new THREE.ColorNode( 0xEEEEEE );
 
-						mtl.build();
+						mtl.needsUpdate = true;
 
 					} );
 
@@ -1900,7 +1902,7 @@
 
 						mtl.ao = val ? new THREE.FloatNode() : undefined;
 
-						mtl.build();
+						mtl.needsUpdate = true;
 
 					} );
 
@@ -2194,7 +2196,6 @@
 					var distanceMtl = new THREE.PhongNodeMaterial();
 					distanceMtl.environment = objectDepth;
 					distanceMtl.side = THREE.BackSide;
-					distanceMtl.build();
 
 					rtMaterial = distanceMtl;
 
@@ -2303,9 +2304,6 @@
 
 			}
 
-			// build shader
-			mtl.build();
-
 			// set material
 			mesh.material = mtl;
 

examples/webgl_mirror_nodes.html

@@ -211,7 +211,6 @@
 			groundMirrorMaterial.environmentAlpha = mask;
 			groundMirrorMaterial.normal = normal;
 			//groundMirrorMaterial.normalScale = new THREE.FloatNode( 1 );
-			groundMirrorMaterial.build();
 
 			// test serialization
 /*

examples/webgl_postprocessing_nodes.html

@@ -154,6 +154,8 @@
 
 				} else if ( typeof value == 'object' ) {
 
+					param.blend = value[ Object.keys( value )[ 0 ] ];
+
 					node = gui.add( param, name, value ).onChange( function () {
 
 						callback( param[ name ] );
@@ -317,7 +319,7 @@
 
 							multiply.op = val;
 
-							nodepass.build();
+							nodepass.needsUpdate = true;
 
 						} );
 
@@ -409,7 +411,7 @@
 
 							offsetNormal.a = val ? normalXYFlip : normalXY;
 
-							nodepass.build();
+							nodepass.needsUpdate = true;
 
 						} );
 
@@ -463,11 +465,11 @@
 
 						}, false, 0, 1 );
 
-						addGui( 'mask', true, function ( val ) {
+						addGui( 'mask', false, function ( val ) {
 
-							fadeCoord.c = val ? maskAlpha : fade;
+							fadeScreen.c = val ? new THREE.TextureNode( lensflare2 ) : fade;
 
-							nodepass.build();
+							nodepass.needsUpdate = true;
 
 						} );
 
@@ -502,7 +504,7 @@
 
 				}
 
-				nodepass.build();
+				nodepass.needsUpdate = true;
 
 				// test serialization
 /*
@@ -513,7 +515,6 @@
 				var json = nodepass.toJSON();
 
 				nodepass.value = new THREE.NodeMaterialLoader( null, library ).parse( json ).value;
-				nodepass.build();
 */
 			}
 

examples/webgl_sprites_nodes.html

@@ -203,7 +203,6 @@
 			sprite1.scale.y = spriteHeight;
 			sprite1.material.color = new THREE.TextureNode( walkingManTexture );
 			sprite1.material.color.coord = createHorizontalSpriteSheetNode( 8, 10 );
-			sprite1.material.build();
 
 			scene.add( sprite2 = new THREE.Mesh( plane, new THREE.SpriteNodeMaterial() ) );
 			sprite2.position.x = 30;
@@ -223,7 +222,6 @@
 				new THREE.PositionNode(),
 				THREE.OperatorNode.ADD
 			);
-			sprite2.material.build();
 
 			var sineWaveFunction = new THREE.FunctionNode( [
 				// https://stackoverflow.com/questions/36174431/how-to-make-a-wave-warp-effect-in-shader
@@ -245,7 +243,6 @@
 				"phase": new THREE.TimerNode()
 			} );
 			sprite3.material.fog = true;
-			sprite3.material.build();
 
 			//
 			//	Test serialization
@@ -276,12 +273,14 @@
 
 			THREE.NodeMaterialLoaderUtils.replaceUUID( json, walkingManTexture, walkingManTextureURL );
 
-			// unserialize
+			// deserialize
 
 			var material = new THREE.NodeMaterialLoader( null, library ).parse( json );
 
 			// replace material
 
+			sprite.material.dispose();
+
 			sprite.material = material;
 
 		}