fix node examples

examples/js/nodes/THREE.Nodes.js

@@ -92,7 +92,7 @@ import {
 	StandardNode,
 	MeshStandardNode,
 	
-	// utils
+	// materials
 	
 	NodeMaterial,
 	SpriteNodeMaterial,
@@ -200,4 +200,4 @@ THREE.NodeMaterial = NodeMaterial;
 THREE.SpriteNodeMaterial = SpriteNodeMaterial;
 THREE.PhongNodeMaterial = PhongNodeMaterial;
 THREE.StandardNodeMaterial = StandardNodeMaterial;
-THREE.MeshStandardNodeMaterial = MeshStandardNodeMaterial;
+THREE.MeshStandardNodeMaterial = MeshStandardNodeMaterial;

examples/js/nodes/accessors/ColorsNode.js

@@ -21,7 +21,7 @@ ColorsNode.prototype.constructor = ColorsNode;
 
 ColorsNode.prototype.generate = function ( builder, output ) {
 
-	builder.material.requires.color[ this.index ] = true;
+	builder.requires.color[ this.index ] = true;
 
 	var result = builder.isShader( 'vertex' ) ? vertexDict[ this.index ] : fragmentDict[ this.index ];
 

examples/js/nodes/materials/NodeMaterial.js

@@ -3,11 +3,6 @@
  */
 
 import { NodeBuilder } from '../core/NodeBuilder.js';
-import { NodeUniform } from '../core/NodeUniform.js';
-import { NodeLib } from '../core/NodeLib.js';
-import { FunctionNode } from '../core/FunctionNode.js';
-import { ConstNode } from '../core/ConstNode.js';
-import { StructNode } from '../core/StructNode.js';
 import { ColorNode } from '../inputs/ColorNode.js';
 import { PositionNode } from '../accessors/PositionNode.js';
 import { RawNode } from './nodes/RawNode.js';

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

@@ -20,23 +20,22 @@ SpriteNode.prototype.nodeType = "Sprite";
 
 SpriteNode.prototype.build = function ( builder ) {
 
-	var material = builder.material;
 	var output, code;
 
-	material.define( 'SPRITE' );
+	builder.define( 'SPRITE' );
 
-	material.requires.lights = false;
-	material.requires.transparent = this.alpha != undefined;
+	builder.requires.lights = false;
+	builder.requires.transparent = this.alpha != undefined;
 
 	if ( builder.isShader( 'vertex' ) ) {
 
 		var transform = this.transform ? this.transform.parseAndBuildCode( builder, 'v3', { cache: 'transform' } ) : undefined;
 
-		material.mergeUniform( THREE.UniformsUtils.merge( [
+		builder.mergeUniform( THREE.UniformsUtils.merge( [
 			THREE.UniformsLib[ "fog" ]
 		] ) );
 
-		material.addVertexPars( [
+		builder.addParsCode( [
 			"#include <fog_pars_vertex>"
 		].join( "\n" ) );
 
@@ -105,13 +104,14 @@ SpriteNode.prototype.build = function ( builder ) {
 
 	} else {
 
-		material.addFragmentPars( [
+		builder.addParsCode( [
 			"#include <fog_pars_fragment>",
 		].join( "\n" ) );
 
 		// parse all nodes to reuse generate codes
 
 		this.color.parse( builder, { slot: 'color' } );
+
 		if ( this.alpha ) this.alpha.parse( builder );
 
 		// build code

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

@@ -43,7 +43,7 @@ StandardNode.prototype.build = function ( builder ) {
 
 		] ) );
 
-		builder.addVertexParsCode( [
+		builder.addParsCode( [
 			"varying vec3 vViewPosition;",
 
 			"#ifndef FLAT_SHADED",
@@ -170,9 +170,9 @@ StandardNode.prototype.build = function ( builder ) {
 
 		var clearCoatEnv = useClearCoat && environment ? this.environment.buildCode( builder, 'c', { cache: 'clearCoat', context: contextEnvironment, slot: 'environment' } ) : undefined;
 
-		builder.requires.transparent = alpha != undefined;
+		builder.requires.transparent = alpha !== undefined;
 
-		builder.addFragmentParsCode( [
+		builder.addParsCode( [
 
 			"varying vec3 vViewPosition;",
 

examples/js/nodes/postprocessing/NodePass.js

@@ -2,6 +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';
@@ -29,7 +30,7 @@ function NodePass() {
 NodePass.prototype = Object.create( THREE.ShaderPass.prototype );
 NodePass.prototype.constructor = NodePass;
 
-NodeMaterial.addShortcuts( NodePass.prototype, 'fragment', [ 'value' ] );
+NodeUtils.addShortcuts( NodePass.prototype, 'fragment', [ 'value' ] );
 
 NodePass.prototype.render = function () {
 

examples/webgl_loader_nodes.html

@@ -40,75 +40,10 @@
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
-		<!-- NodeLibrary -->
-		<script src="js/nodes/GLNode.js"></script>
-		<script src="js/nodes/RawNode.js"></script>
-		<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>
-		<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>
-		<script src="js/nodes/NodeMaterial.js"></script>
-
-		<!-- Accessors -->
-		<script src="js/nodes/accessors/PositionNode.js"></script>
-		<script src="js/nodes/accessors/NormalNode.js"></script>
-		<script src="js/nodes/accessors/UVNode.js"></script>
-		<script src="js/nodes/accessors/ScreenUVNode.js"></script>
-		<script src="js/nodes/accessors/ColorsNode.js"></script>
-		<script src="js/nodes/accessors/CameraNode.js"></script>
-		<script src="js/nodes/accessors/ReflectNode.js"></script>
-		<script src="js/nodes/accessors/LightNode.js"></script>
-
-		<!-- Inputs -->
-		<script src="js/nodes/inputs/IntNode.js"></script>
-		<script src="js/nodes/inputs/FloatNode.js"></script>
-		<script src="js/nodes/inputs/ColorNode.js"></script>
-		<script src="js/nodes/inputs/Vector2Node.js"></script>
-		<script src="js/nodes/inputs/Vector3Node.js"></script>
-		<script src="js/nodes/inputs/Vector4Node.js"></script>
-		<script src="js/nodes/inputs/TextureNode.js"></script>
-		<script src="js/nodes/inputs/Matrix4Node.js"></script>
-		<script src="js/nodes/inputs/CubeTextureNode.js"></script>
-
-		<!-- Math -->
-		<script src="js/nodes/math/Math1Node.js"></script>
-		<script src="js/nodes/math/Math2Node.js"></script>
-		<script src="js/nodes/math/Math3Node.js"></script>
-		<script src="js/nodes/math/OperatorNode.js"></script>
-
-		<!-- Utils -->
-		<script src="js/nodes/utils/SwitchNode.js"></script>
-		<script src="js/nodes/utils/JoinNode.js"></script>
-		<script src="js/nodes/utils/TimerNode.js"></script>
-		<script src="js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
-		<script src="js/nodes/utils/VelocityNode.js"></script>
-		<script src="js/nodes/utils/LuminanceNode.js"></script>
-		<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
-		<script src="js/nodes/utils/NoiseNode.js"></script>
-		<script src="js/nodes/utils/ResolutionNode.js"></script>
-		<script src="js/nodes/utils/BumpNode.js"></script>
-		<script src="js/nodes/utils/BlurNode.js"></script>
-		<script src="js/nodes/utils/UVTransformNode.js"></script>
-
-		<!-- Phong Material -->
-		<script src="js/nodes/materials/PhongNode.js"></script>
-		<script src="js/nodes/materials/PhongNodeMaterial.js"></script>
-
-		<!-- Standard Material -->
-		<script src="js/nodes/materials/StandardNode.js"></script>
-		<script src="js/nodes/materials/StandardNodeMaterial.js"></script>
-
-		<!-- NodeMaterial Loader -->
-		<script src="js/loaders/NodeMaterialLoader.js"></script>
-
-		<script>
+		<script type="module">
+
+		import './js/nodes/THREE.Nodes.js';
+		import './js/loaders/NodeMaterialLoader.js';
 
 		var container = document.getElementById( 'container' );
 

examples/webgl_materials_nodes.html

@@ -43,7 +43,8 @@
 		<script type="module">
 
 		import './js/nodes/THREE.Nodes.js';
-		
+		import './js/loaders/NodeMaterialLoader.js';
+
 		var container = document.getElementById( 'container' );
 
 		var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;

examples/webgl_mirror_nodes.html

@@ -40,68 +40,10 @@
 		<script src="js/objects/ReflectorRTT.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 
-		<!-- NodeLibrary -->
-		<script src="js/nodes/GLNode.js"></script>
-		<script src="js/nodes/RawNode.js"></script>
-		<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/FunctionNode.js"></script>
-		<script src="js/nodes/FunctionCallNode.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>
-		<script src="js/nodes/NodeMaterial.js"></script>
-
-		<!-- Accessors -->
-		<script src="js/nodes/accessors/PositionNode.js"></script>
-		<script src="js/nodes/accessors/NormalNode.js"></script>
-		<script src="js/nodes/accessors/UVNode.js"></script>
-		<script src="js/nodes/accessors/ScreenUVNode.js"></script>
-		<script src="js/nodes/accessors/ColorsNode.js"></script>
-		<script src="js/nodes/accessors/CameraNode.js"></script>
-		<script src="js/nodes/accessors/ReflectNode.js"></script>
-		<script src="js/nodes/accessors/LightNode.js"></script>
-
-		<!-- Inputs -->
-		<script src="js/nodes/inputs/IntNode.js"></script>
-		<script src="js/nodes/inputs/FloatNode.js"></script>
-		<script src="js/nodes/inputs/ColorNode.js"></script>
-		<script src="js/nodes/inputs/Vector2Node.js"></script>
-		<script src="js/nodes/inputs/Vector3Node.js"></script>
-		<script src="js/nodes/inputs/Vector4Node.js"></script>
-		<script src="js/nodes/inputs/TextureNode.js"></script>
-		<script src="js/nodes/inputs/CubeTextureNode.js"></script>
-		<script src="js/nodes/inputs/Matrix4Node.js"></script>
-		<script src="js/nodes/inputs/ReflectorNode.js"></script>
-
-		<!-- Math -->
-		<script src="js/nodes/math/Math1Node.js"></script>
-		<script src="js/nodes/math/Math2Node.js"></script>
-		<script src="js/nodes/math/Math3Node.js"></script>
-		<script src="js/nodes/math/OperatorNode.js"></script>
-
-		<!-- Utils -->
-		<script src="js/nodes/utils/SwitchNode.js"></script>
-		<script src="js/nodes/utils/JoinNode.js"></script>
-		<script src="js/nodes/utils/TimerNode.js"></script>
-		<script src="js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
-		<script src="js/nodes/utils/VelocityNode.js"></script>
-		<script src="js/nodes/utils/LuminanceNode.js"></script>
-		<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
-		<script src="js/nodes/utils/NoiseNode.js"></script>
-		<script src="js/nodes/utils/ResolutionNode.js"></script>
-		<script src="js/nodes/utils/BlurNode.js"></script>
-
-		<!-- Phong Material -->
-		<script src="js/nodes/materials/PhongNode.js"></script>
-		<script src="js/nodes/materials/PhongNodeMaterial.js"></script>
-
-		<!-- NodeMaterial Loader -->
-		<script src="js/loaders/NodeMaterialLoader.js"></script>
-
-		<script>
+		<script type="module">
+
+		import './js/nodes/THREE.Nodes.js';
+		import './js/loaders/NodeMaterialLoader.js';
 
 		// scene size
 		var WIDTH = window.innerWidth;
@@ -168,8 +110,8 @@
 
 			var mirror = new THREE.ReflectorNode( groundMirror );
 
-			var normal = new THREE.TextureNode( decalNormal );
-			var normalXY = new THREE.SwitchNode( normal, 'xy' );
+			var normalMap = new THREE.TextureNode( decalNormal );
+			var normalXY = new THREE.SwitchNode( normalMap, 'xy' );
 			var normalXYFlip = new THREE.Math1Node(
 				normalXY,
 				THREE.Math1Node.INVERT
@@ -209,7 +151,7 @@
 			groundMirrorMaterial = new THREE.PhongNodeMaterial();
 			groundMirrorMaterial.environment = blurMirror; // or add "mirror" variable to disable blur
 			groundMirrorMaterial.environmentAlpha = mask;
-			groundMirrorMaterial.normal = normal;
+			groundMirrorMaterial.normal = new THREE.NormalMapNode( normalMap );
 			//groundMirrorMaterial.normalScale = new THREE.FloatNode( 1 );
 
 			// test serialization

examples/webgl_postprocessing_nodes.html

@@ -41,57 +41,11 @@
 		<script src="js/postprocessing/MaskPass.js"></script>
 		<script src="js/postprocessing/ShaderPass.js"></script>
 
-		<!-- NodeLibrary -->
-		<script src="js/nodes/GLNode.js"></script>
-		<script src="js/nodes/RawNode.js"></script>
-		<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/FunctionNode.js"></script>
-		<script src="js/nodes/FunctionCallNode.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>
-		<script src="js/nodes/NodeMaterial.js"></script>
-
-		<!-- Accessors -->
-		<script src="js/nodes/accessors/PositionNode.js"></script>
-		<script src="js/nodes/accessors/NormalNode.js"></script>
-		<script src="js/nodes/accessors/UVNode.js"></script>
-		<script src="js/nodes/accessors/ColorsNode.js"></script>
-
-		<!-- Inputs -->
-		<script src="js/nodes/inputs/IntNode.js"></script>
-		<script src="js/nodes/inputs/FloatNode.js"></script>
-		<script src="js/nodes/inputs/ColorNode.js"></script>
-		<script src="js/nodes/inputs/Vector2Node.js"></script>
-		<script src="js/nodes/inputs/Vector3Node.js"></script>
-		<script src="js/nodes/inputs/Vector4Node.js"></script>
-		<script src="js/nodes/inputs/TextureNode.js"></script>
-		<script src="js/nodes/inputs/CubeTextureNode.js"></script>
-		<script src="js/nodes/inputs/ScreenNode.js"></script>
-
-		<!-- Math -->
-		<script src="js/nodes/math/Math1Node.js"></script>
-		<script src="js/nodes/math/Math2Node.js"></script>
-		<script src="js/nodes/math/Math3Node.js"></script>
-		<script src="js/nodes/math/OperatorNode.js"></script>
-
-		<!-- Utils -->
-		<script src="js/nodes/utils/SwitchNode.js"></script>
-		<script src="js/nodes/utils/JoinNode.js"></script>
-		<script src="js/nodes/utils/TimerNode.js"></script>
-		<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
-		<script src="js/nodes/utils/BlurNode.js"></script>
-
-		<!-- Post-Processing -->
-		<script src="js/nodes/postprocessing/NodePass.js"></script>
-
-		<!-- NodeMaterial Loader -->
-		<script src="js/loaders/NodeMaterialLoader.js"></script>
-
-		<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;
@@ -333,12 +287,12 @@
 						var sat = new THREE.FloatNode( 0 );
 
 						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);",
+							"vec3 satrgb( vec3 rgb, float adjustment ) {",
+							// include luminance function from LuminanceNode
+							"	vec3 intensity = vec3( luminance( rgb ) );",
+							"	return mix( intensity, rgb, adjustment );",
 							"}"
-						].join( "\n" ) );
+						].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
 
 						var saturation = new THREE.FunctionCallNode( satrgb );
 						saturation.inputs.rgb = screen;
@@ -561,7 +515,7 @@
 				composer = new THREE.EffectComposer( renderer );
 				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
-				nodepass = new THREE.NodePass();
+				nodepass = new NodePass();
 				nodepass.renderToScreen = true;
 
 				composer.addPass( nodepass );

examples/webgl_sprites_nodes.html

@@ -39,71 +39,10 @@
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
-		<!-- NodeLibrary -->
-		<script src="js/nodes/GLNode.js"></script>
-		<script src="js/nodes/RawNode.js"></script>
-		<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>
-		<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>
-		<script src="js/nodes/NodeMaterial.js"></script>
-
-		<!-- Accessors -->
-		<script src="js/nodes/accessors/PositionNode.js"></script>
-		<script src="js/nodes/accessors/NormalNode.js"></script>
-		<script src="js/nodes/accessors/UVNode.js"></script>
-		<script src="js/nodes/accessors/ScreenUVNode.js"></script>
-		<script src="js/nodes/accessors/ColorsNode.js"></script>
-		<script src="js/nodes/accessors/CameraNode.js"></script>
-		<script src="js/nodes/accessors/ReflectNode.js"></script>
-		<script src="js/nodes/accessors/LightNode.js"></script>
-
-		<!-- Inputs -->
-		<script src="js/nodes/inputs/IntNode.js"></script>
-		<script src="js/nodes/inputs/FloatNode.js"></script>
-		<script src="js/nodes/inputs/ColorNode.js"></script>
-		<script src="js/nodes/inputs/Vector2Node.js"></script>
-		<script src="js/nodes/inputs/Vector3Node.js"></script>
-		<script src="js/nodes/inputs/Vector4Node.js"></script>
-		<script src="js/nodes/inputs/TextureNode.js"></script>
-		<script src="js/nodes/inputs/Matrix4Node.js"></script>
-		<script src="js/nodes/inputs/CubeTextureNode.js"></script>
-
-		<!-- Math -->
-		<script src="js/nodes/math/Math1Node.js"></script>
-		<script src="js/nodes/math/Math2Node.js"></script>
-		<script src="js/nodes/math/Math3Node.js"></script>
-		<script src="js/nodes/math/OperatorNode.js"></script>
-
-		<!-- Utils -->
-		<script src="js/nodes/utils/SwitchNode.js"></script>
-		<script src="js/nodes/utils/JoinNode.js"></script>
-		<script src="js/nodes/utils/TimerNode.js"></script>
-		<script src="js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
-		<script src="js/nodes/utils/VelocityNode.js"></script>
-		<script src="js/nodes/utils/LuminanceNode.js"></script>
-		<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
-		<script src="js/nodes/utils/NoiseNode.js"></script>
-		<script src="js/nodes/utils/ResolutionNode.js"></script>
-		<script src="js/nodes/utils/BumpNode.js"></script>
-		<script src="js/nodes/utils/BlurNode.js"></script>
-		<script src="js/nodes/utils/UVTransformNode.js"></script>
-
-		<!-- Sprite Material -->
-		<script src="js/nodes/materials/SpriteNode.js"></script>
-		<script src="js/nodes/materials/SpriteNodeMaterial.js"></script>
-
-		<!-- NodeMaterial Loader -->
-		<script src="js/loaders/NodeMaterialLoader.js"></script>
-
-		<script>
+		<script type="module">
+
+		import './js/nodes/THREE.Nodes.js';
+		import './js/loaders/NodeMaterialLoader.js';
 
 		var container = document.getElementById( 'container' );
 
@@ -248,9 +187,9 @@
 			//	Test serialization
 			//
 
-			spriteToJSON( sprite1 );
-			spriteToJSON( sprite2 );
-			spriteToJSON( sprite3 );
+			//spriteToJSON( sprite1 );
+			//spriteToJSON( sprite2 );
+			//spriteToJSON( sprite3 );
 
 			//
 			// Events