super-three 0.144.0 → 0.147.0

package/examples/jsm/math/Octree.js

@@ -49,7 +49,7 @@ class Octree {
 
 		this.box = this.bounds.clone();
 
-		// offset small ammount to account for regular grid
+		// offset small amount to account for regular grid
 		this.box.min.x -= 0.01;
 		this.box.min.y -= 0.01;
 		this.box.min.z -= 0.01;

package/examples/jsm/node-editor/NodeEditor.js

@@ -45,6 +45,7 @@ export const NodeList = [
 			{
 				name: 'Slider',
 				icon: 'adjustments-horizontal',
+				tags: 'number',
 				nodeClass: SliderEditor
 			},
 			{
@@ -117,6 +118,7 @@ export const NodeList = [
 			{
 				name: 'Blend',
 				icon: 'layers-subtract',
+				tags: 'mix',
 				nodeClass: BlendEditor
 			},
 			{
@@ -133,6 +135,7 @@ export const NodeList = [
 			{
 				name: 'Operator',
 				icon: 'math-symbols',
+				tags: 'addition, subtration, multiplication, division',
 				nodeClass: OperatorEditor
 			},
 			{
@@ -161,12 +164,14 @@ export const NodeList = [
 				name: 'Trigonometry',
 				icon: 'wave-sine',
 				tip: 'Sin / Cos / Tan / ...',
+				tags: 'sin, cos, tan, asin, acos, atan, sine, cosine, tangent, arcsine, arccosine, arctangent',
 				nodeClass: TrigonometryEditor
 			},
 			{
 				name: 'Angle',
 				icon: 'angle',
 				tip: 'Degress / Radians',
+				tags: 'degress, radians',
 				nodeClass: AngleEditor
 			},
 			{
@@ -303,6 +308,13 @@ export class NodeEditor extends EventDispatcher {
 		this.canvas = canvas;
 		this.domElement = domElement;
 
+		this._preview = false;
+
+		this.search = null;
+
+		this.menu = null;
+		this.previewMenu = null;
+
 		this.nodesContext = null;
 		this.examplesContext = null;
 
@@ -315,21 +327,26 @@ export class NodeEditor extends EventDispatcher {
 
 	}
 
+	setSize( width, height ) {
+
+		this.canvas.setSize( width, height );
+
+		return this;
+
+	}
+
 	centralizeNode( node ) {
 
 		const canvas = this.canvas;
-		const canvasRect = canvas.rect;
-
 		const nodeRect = node.dom.getBoundingClientRect();
 
-		const defaultOffsetX = nodeRect.width;
-		const defaultOffsetY = nodeRect.height;
-
 		node.setPosition(
-			( canvas.relativeX + ( canvasRect.width / 2 ) ) - defaultOffsetX,
-			( canvas.relativeY + ( canvasRect.height / 2 ) ) - defaultOffsetY
+			( ( canvas.width / 2 ) - canvas.scrollLeft ) - nodeRect.width,
+			( ( canvas.height / 2 ) - canvas.scrollTop ) - nodeRect.height
 		);
 
+		return this;
+
 	}
 
 	add( node ) {
@@ -359,9 +376,47 @@ export class NodeEditor extends EventDispatcher {
 
 	}
 
+	set preview( value ) {
+
+		if ( this._preview === value ) return;
+
+		if ( value ) {
+
+			this.menu.dom.remove();
+			this.canvas.dom.remove();
+			this.search.dom.remove();
+
+			this.domElement.append( this.previewMenu.dom );
+
+		} else {
+
+			this.canvas.focusSelected = false;
+
+			this.domElement.append( this.menu.dom );
+			this.domElement.append( this.canvas.dom );
+			this.domElement.append( this.search.dom );
+
+			this.previewMenu.dom.remove();
+
+		}
+
+		this._preview = value;
+
+	}
+
+	get preview() {
+
+		return this._preview;
+
+	}
+
 	newProject() {
 
-		this.canvas.clear();
+		const canvas = this.canvas;
+		canvas.clear();
+		canvas.scrollLeft = 0;
+		canvas.scrollTop = 0;
+		canvas.zoom = 1;
 
 		this.dispatchEvent( { type: 'new' } );
 
@@ -426,13 +481,23 @@ export class NodeEditor extends EventDispatcher {
 	_initMenu() {
 
 		const menu = new CircleMenu();
+		const previewMenu = new CircleMenu();
+
+		menu.setAlign( 'top left' );
+		previewMenu.setAlign( 'top left' );
 
+		const previewButton = new ButtonInput().setIcon( 'ti ti-3d-cube-sphere' ).setToolTip( 'Preview' );
 		const menuButton = new ButtonInput().setIcon( 'ti ti-apps' ).setToolTip( 'Add' );
 		const examplesButton = new ButtonInput().setIcon( 'ti ti-file-symlink' ).setToolTip( 'Examples' );
 		const newButton = new ButtonInput().setIcon( 'ti ti-file' ).setToolTip( 'New' );
 		const openButton = new ButtonInput().setIcon( 'ti ti-upload' ).setToolTip( 'Open' );
 		const saveButton = new ButtonInput().setIcon( 'ti ti-download' ).setToolTip( 'Save' );
 
+		const editorButton = new ButtonInput().setIcon( 'ti ti-subtask' ).setToolTip( 'Editor' );
+
+		previewButton.onClick( () => this.preview = true );
+		editorButton.onClick( () => this.preview = false );
+
 		menuButton.onClick( () => this.nodesContext.open() );
 		examplesButton.onClick( () => this.examplesContext.open() );
 
@@ -486,15 +551,19 @@ export class NodeEditor extends EventDispatcher {
 
 		} );
 
-		menu.add( examplesButton )
-			.add( menuButton )
+		menu.add( previewButton )
 			.add( newButton )
+			.add( examplesButton )
 			.add( openButton )
-			.add( saveButton );
+			.add( saveButton )
+			.add( menuButton );
+
+		previewMenu.add( editorButton );
 
 		this.domElement.append( menu.dom );
 
 		this.menu = menu;
+		this.previewMenu = previewMenu;
 
 	}
 
@@ -541,7 +610,6 @@ export class NodeEditor extends EventDispatcher {
 		addExample( basicContext, 'Animate UV' );
 		addExample( basicContext, 'Fake top light' );
 		addExample( basicContext, 'Oscillator color' );
-		addExample( basicContext, 'Matcap' );
 
 		addExample( advancedContext, 'Rim' );
 
@@ -571,11 +639,18 @@ export class NodeEditor extends EventDispatcher {
 					this.add( node );
 
 					this.centralizeNode( node );
+					this.canvas.select( node );
 
 				} );
 
 				search.add( button );
 
+				if ( item.tags !== undefined ) {
+
+					search.setTag( button, item.tags );
+
+				}
+
 			}
 
 			if ( item.children ) {
@@ -652,6 +727,7 @@ export class NodeEditor extends EventDispatcher {
 							this.add( node );
 
 							this.centralizeNode( node );
+							this.canvas.select( node );
 
 						} );
 
@@ -675,6 +751,8 @@ export class NodeEditor extends EventDispatcher {
 
 		} );
 
+		this.search = search;
+
 		this.domElement.append( search.dom );
 
 	}
@@ -698,6 +776,7 @@ export class NodeEditor extends EventDispatcher {
 			} else {
 
 				this.centralizeNode( node );
+				this.canvas.select( node );
 
 			}
 

package/examples/jsm/node-editor/core/BaseNode.js

@@ -34,6 +34,12 @@ export class BaseNode extends ObjectNode {
 
 	}
 
+	getColor() {
+
+		return ( this.getColorValueFromValue( this.value ) || '#777777' ) + 'BB';
+
+	}
+
 	serialize( data ) {
 
 		super.serialize( data );
@@ -64,15 +70,16 @@ export class BaseNode extends ObjectNode {
 
 		if ( value.isMaterial === true ) {
 
-			return 'forestgreen';
+			//return 'forestgreen';
+			return '#228b22';
 
 		} else if ( value.isObject3D === true ) {
 
-			return 'orange';
+			return '#ffa500';
 
 		} else if ( value.isDataFile === true ) {
 
-			return 'aqua';
+			return '#00ffff';
 
 		}
 

package/examples/jsm/node-editor/materials/BasicMaterialEditor.js

@@ -1,7 +1,6 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { MeshBasicNodeMaterial } from 'three/nodes';
-import { MathUtils } from 'three';
 
 export class BasicMaterialEditor extends BaseNode {
 
@@ -65,23 +64,21 @@ export class BasicMaterialEditor extends BaseNode {
 
 		this.updateTransparent();
 
-		// TODO: Fix on NodeMaterial System
-		material.customProgramCacheKey = () => {
-
-			return MathUtils.generateUUID();
-
-		};
-
 	}
 
 	updateTransparent() {
 
 		const { material, opacity } = this;
 
-		material.transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
+		const transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
+		const needsUpdate = transparent !== material.transparent;
+
+		material.transparent = transparent;
 
 		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
 
+		if ( needsUpdate === true ) material.dispose();
+
 	}
 
 }

package/examples/jsm/node-editor/materials/StandardMaterialEditor.js

@@ -1,7 +1,6 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { MeshStandardNodeMaterial } from 'three/nodes';
-import * as THREE from 'three';
 
 export class StandardMaterialEditor extends BaseNode {
 
@@ -99,23 +98,21 @@ export class StandardMaterialEditor extends BaseNode {
 
 		this.updateTransparent();
 
-		// TODO: Fix on NodeMaterial System
-		material.customProgramCacheKey = () => {
-
-			return THREE.MathUtils.generateUUID();
-
-		};
-
 	}
 
 	updateTransparent() {
 
 		const { material, opacity } = this;
 
-		material.transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
+		const transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
+		const needsUpdate = transparent !== material.transparent;
+
+		material.transparent = transparent;
 
 		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
 
+		if ( needsUpdate === true ) material.dispose();
+
 	}
 
 }

package/examples/jsm/node-editor/math/AngleEditor.js

@@ -14,9 +14,9 @@ export class AngleEditor extends BaseNode {
 		super( 'Angle', 1, node, 175 );
 
 		const optionsField = new SelectInput( [
-			{ name: 'Degrees to Radians', value: MathNode.RAD },
-			{ name: 'Radians to Degrees', value: MathNode.DEG }
-		], MathNode.RAD ).onChange( () => {
+			{ name: 'Degrees to Radians', value: MathNode.RADIANS },
+			{ name: 'Radians to Degrees', value: MathNode.DEGREES }
+		], MathNode.RADIANS ).onChange( () => {
 
 			node.method = optionsField.getValue();
 

package/examples/jsm/node-editor/math/InvertEditor.js

@@ -1,4 +1,4 @@
-import { SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { MathNode, UniformNode } from 'three/nodes';
 
@@ -31,7 +31,7 @@ export class InvertEditor extends BaseNode {
 
 		} );
 
-		this.add( new LabelElement( 'Method' ).add( optionsField ) )
+		this.add( new Element().add( optionsField ) )
 			.add( input );
 
 	}

package/examples/jsm/node-editor/scene/MeshEditor.js

@@ -16,7 +16,8 @@ export class MeshEditor extends Object3DEditor {
 
 		this.material = null;
 
-		this.defaultMaterial = null;
+		this.meshMaterial = null;
+		this.defaultMeshMaterial = null;
 
 		this._initMaterial();
 
@@ -34,9 +35,9 @@ export class MeshEditor extends Object3DEditor {
 
 	_initMaterial() {
 
-		const materialElement = new LabelElement( 'Material' ).setInputColor( 'forestgreen' ).setInput( 1 );
+		const material = new LabelElement( 'Material' ).setInputColor( 'forestgreen' ).setInput( 1 );
 
-		materialElement.onValid( ( source, target, stage ) => {
+		material.onValid( ( source, target, stage ) => {
 
 			const object = target.getObject();
 
@@ -56,13 +57,15 @@ export class MeshEditor extends Object3DEditor {
 
 		} ).onConnect( () => {
 
-			this.material = materialElement.getLinkedObject() || this.defaultMaterial;
+			this.meshMaterial = material.getLinkedObject() || this.defaultMeshMaterial;
 
 			this.update();
 
 		} );
 
-		this.add( materialElement );
+		this.add( material );
+
+		this.material = material;
 
 	}
 
@@ -74,7 +77,7 @@ export class MeshEditor extends Object3DEditor {
 
 		if ( mesh ) {
 
-			mesh.material = this.material || this.defaultMaterial;
+			mesh.material = this.meshMaterial || this.defaultMeshMaterial;
 
 		}
 
@@ -84,7 +87,7 @@ export class MeshEditor extends Object3DEditor {
 
 		super.updateDefault();
 
-		this.defaultMaterial = this.mesh.material;
+		this.defaultMeshMaterial = this.mesh.material;
 
 	}
 
@@ -92,7 +95,7 @@ export class MeshEditor extends Object3DEditor {
 
 		super.restoreDefault();
 
-		this.mesh.material = this.defaultMaterial;
+		this.mesh.material = this.defaultMeshMaterial;
 
 	}
 

package/examples/jsm/node-editor/utils/PreviewEditor.js

@@ -65,6 +65,8 @@ export class PreviewEditor extends BaseNode {
 		const previewElement = new Element();
 		previewElement.dom.style[ 'padding-top' ] = 0;
 		previewElement.dom.style[ 'padding-bottom' ] = 0;
+		previewElement.dom.style[ 'padding-left' ] = 0;
+		previewElement.dom.style[ 'padding-right' ] = '14px';
 
 		const sceneInput = new SelectInput( [
 			{ name: 'Box', value: 'box' },
@@ -86,6 +88,8 @@ export class PreviewEditor extends BaseNode {
 		previewElement.dom.append( canvas );
 		previewElement.setHeight( height );
 
+		previewElement.dom.addEventListener( 'wheel', e => e.stopPropagation() );
+
 		const renderer = new WebGLRenderer( {
 			canvas,
 			alpha: true

package/examples/jsm/nodes/Nodes.js

@@ -26,6 +26,7 @@ import VarNode from './core/VarNode.js';
 import VaryingNode from './core/VaryingNode.js';
 
 // accessors
+import BitangentNode from './accessors/BitangentNode.js';
 import BufferNode from './accessors/BufferNode.js';
 import CameraNode from './accessors/CameraNode.js';
 import CubeTextureNode from './accessors/CubeTextureNode.js';
@@ -41,6 +42,7 @@ import PositionNode from './accessors/PositionNode.js';
 import ReferenceNode from './accessors/ReferenceNode.js';
 import ReflectVectorNode from './accessors/ReflectVectorNode.js';
 import SkinningNode from './accessors/SkinningNode.js';
+import TangentNode from './accessors/TangentNode.js';
 import TextureNode from './accessors/TextureNode.js';
 import UVNode from './accessors/UVNode.js';
 import UserDataNode from './accessors/UserDataNode.js';
@@ -52,11 +54,14 @@ import RangeNode from './geometry/RangeNode.js';
 import ComputeNode from './gpgpu/ComputeNode.js';
 
 // display
+import BlendModeNode from './display/BlendModeNode.js';
 import ColorAdjustmentNode from './display/ColorAdjustmentNode.js';
 import ColorSpaceNode from './display/ColorSpaceNode.js';
 import FrontFacingNode from './display/FrontFacingNode.js';
 import NormalMapNode from './display/NormalMapNode.js';
+import PosterizeNode from './display/PosterizeNode.js';
 import ToneMappingNode from './display/ToneMappingNode.js';
+import ViewportNode from './display/ViewportNode.js';
 
 // math
 import MathNode from './math/MathNode.js';
@@ -76,14 +81,17 @@ import AnalyticLightNode from './lighting/AnalyticLightNode.js';
 // utils
 import ArrayElementNode from './utils/ArrayElementNode.js';
 import ConvertNode from './utils/ConvertNode.js';
+import EquirectUVNode from './utils/EquirectUVNode.js';
 import JoinNode from './utils/JoinNode.js';
 import MatcapUVNode from './utils/MatcapUVNode.js';
 import MaxMipLevelNode from './utils/MaxMipLevelNode.js';
 import OscNode from './utils/OscNode.js';
+import RemapNode from './utils/RemapNode.js';
 import RotateUVNode from './utils/RotateUVNode.js';
 import SplitNode from './utils/SplitNode.js';
 import SpriteSheetUVNode from './utils/SpriteSheetUVNode.js';
 import TimerNode from './utils/TimerNode.js';
+import TriplanarTexturesNode from './utils/TriplanarTexturesNode.js';
 
 // loaders
 import NodeLoader from './loaders/NodeLoader.js';
@@ -110,8 +118,11 @@ export * from './materials/Materials.js';
 // shader node
 export * from './shadernode/ShaderNodeElements.js';
 
+// extensions
+export * from './materialx/MaterialXNodes.js';
+
 // shader stages
-export { defaultShaderStages }  from './core/NodeBuilder.js';
+export { defaultShaderStages } from './core/NodeBuilder.js';
 
 const nodeLib = {
 	// core
@@ -148,6 +159,7 @@ const nodeLib = {
 	ComputeNode,
 
 	// accessors
+	BitangentNode,
 	BufferNode,
 	CameraNode,
 	CubeTextureNode,
@@ -163,16 +175,20 @@ const nodeLib = {
 	ReferenceNode,
 	ReflectVectorNode,
 	SkinningNode,
+	TangentNode,
 	TextureNode,
 	UVNode,
 	UserDataNode,
 
 	// display
+	BlendModeNode,
 	ColorAdjustmentNode,
 	ColorSpaceNode,
 	FrontFacingNode,
 	NormalMapNode,
+	PosterizeNode,
 	ToneMappingNode,
+	ViewportNode,
 
 	// math
 	MathNode,
@@ -192,14 +208,17 @@ const nodeLib = {
 	// utils
 	ArrayElementNode,
 	ConvertNode,
+	EquirectUVNode,
 	JoinNode,
 	MatcapUVNode,
 	MaxMipLevelNode,
 	OscNode,
+	RemapNode,
 	RotateUVNode,
 	SplitNode,
 	SpriteSheetUVNode,
 	TimerNode,
+	TriplanarTexturesNode,
 
 	// procedural
 	CheckerNode,
@@ -215,7 +234,7 @@ const nodeLib = {
 
 	// parsers
 	WGSLNodeParser,
-	GLSLNodeParser,
+	GLSLNodeParser
 
 };
 
@@ -260,6 +279,7 @@ export {
 	ComputeNode,
 
 	// accessors
+	BitangentNode,
 	BufferNode,
 	CameraNode,
 	CubeTextureNode,
@@ -275,16 +295,20 @@ export {
 	ReferenceNode,
 	ReflectVectorNode,
 	SkinningNode,
+	TangentNode,
 	TextureNode,
 	UVNode,
 	UserDataNode,
 
 	// display
+	BlendModeNode,
 	ColorAdjustmentNode,
 	ColorSpaceNode,
 	FrontFacingNode,
 	NormalMapNode,
+	PosterizeNode,
 	ToneMappingNode,
+	ViewportNode,
 
 	// math
 	MathNode,
@@ -304,14 +328,17 @@ export {
 	// utils
 	ArrayElementNode,
 	ConvertNode,
+	EquirectUVNode,
 	JoinNode,
 	MatcapUVNode,
 	MaxMipLevelNode,
 	OscNode,
+	RemapNode,
 	RotateUVNode,
 	SplitNode,
 	SpriteSheetUVNode,
 	TimerNode,
+	TriplanarTexturesNode,
 
 	// procedural
 	CheckerNode,
@@ -327,5 +354,5 @@ export {
 
 	// parsers
 	WGSLNodeParser,
-	GLSLNodeParser,
+	GLSLNodeParser
 };

package/examples/jsm/nodes/accessors/BitangentNode.js

@@ -0,0 +1,62 @@
+import Node from '../core/Node.js';
+import VaryingNode from '../core/VaryingNode.js';
+import OperatorNode from '../math/OperatorNode.js';
+import MathNode from '../math/MathNode.js';
+import SplitNode from '../utils/SplitNode.js';
+import NormalNode from './NormalNode.js';
+import TangentNode from './TangentNode.js';
+
+class BitangentNode extends Node {
+
+	static GEOMETRY = 'geometry';
+	static LOCAL = 'local';
+	static VIEW = 'view';
+	static WORLD = 'world';
+
+	constructor( scope = BitangentNode.LOCAL ) {
+
+		super( 'vec3' );
+
+		this.scope = scope;
+
+	}
+
+	getHash( /*builder*/ ) {
+
+		return `bitangent-${this.scope}`;
+
+	}
+
+	generate( builder ) {
+
+		const scope = this.scope;
+
+		const crossNormalTangent = new MathNode( MathNode.CROSS, new NormalNode( scope ), new TangentNode( scope ) );
+		const tangentW = new SplitNode( new TangentNode( TangentNode.GEOMETRY ), 'w' );
+		const vertexNode = new SplitNode( new OperatorNode( '*', crossNormalTangent, tangentW ), 'xyz' );
+
+		const outputNode = new MathNode( MathNode.NORMALIZE, new VaryingNode( vertexNode ) );
+
+		return outputNode.build( builder, this.getNodeType( builder ) );
+
+	}
+
+	serialize( data ) {
+
+		super.serialize( data );
+
+		data.scope = this.scope;
+
+	}
+
+	deserialize( data ) {
+
+		super.deserialize( data );
+
+		this.scope = data.scope;
+
+	}
+
+}
+
+export default BitangentNode;