NodeMaterial: Playground r2 (#22868)

* update lib -> many improvements

* add examples

* Add OscNode: Sine, Square, Triangle, Sawtooth

* fix SplitNode if input is a float

* Add, PI2, PI_HALF, RECIPROCAL_PI2, abs, fract, round, sin, cos nodes

* Add OscNode to lib

* node-editor r2

* fix circular reference and mobile context menu

* update lib

* update lib

* update lib (2)

Author: sunag

examples/jsm/libs/flow.module.js

@@ -1,5 +1,4 @@
-import { ObjectNode } from '../core/ObjectNode.js';
-import { SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
 import { NormalNode } from '../../renderers/nodes/Nodes.js';
 
 export class NormalEditor extends ObjectNode {
@@ -8,7 +7,7 @@ export class NormalEditor extends ObjectNode {
 
 		const node = new NormalNode();
 
-		super( 'Normal', 3, node );
+		super( 'Normal', 3, node, 250 );
 
 		this.title.setStyle( 'red' );
 

examples/jsm/node-editor/NodeEditor.js

@@ -1,5 +1,4 @@
-import { ObjectNode } from '../core/ObjectNode.js';
-import { SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
 import { PositionNode } from '../../renderers/nodes/Nodes.js';
 
 export class PositionEditor extends ObjectNode {
@@ -8,7 +7,7 @@ export class PositionEditor extends ObjectNode {
 
 		const node = new PositionNode();
 
-		super( 'Position', 3, node );
+		super( 'Position', 3, node, 250 );
 
 		this.title.setStyle( 'red' );
 

examples/jsm/node-editor/accessors/NormalEditor.js

@@ -1,5 +1,4 @@
-import { ObjectNode } from '../core/ObjectNode.js';
-import { SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
 import { UVNode } from '../../renderers/nodes/Nodes.js';
 
 export class UVEditor extends ObjectNode {
@@ -8,7 +7,7 @@ export class UVEditor extends ObjectNode {
 
 		const node = new UVNode();
 
-		super( 'UV', 2, node );
+		super( 'UV', 2, node, 250 );
 
 		this.title.setStyle( 'red' );
 

examples/jsm/node-editor/accessors/PositionEditor.js

@@ -0,0 +1,43 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+const ONE_VALUE = new FloatNode( 1 );
+
+export class BlendEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.MIX, NULL_VALUE, NULL_VALUE, ONE_VALUE );
+
+		super( 'Blend', 3, node );
+
+		const aElement = new LabelElement( 'Base' ).setInput( 3 );
+		const bElement = new LabelElement( 'Blend' ).setInput( 3 );
+		const cElement = new LabelElement( 'Opacity' ).setInput( 1 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		cElement.onConnect( () => {
+
+			node.cNode = cElement.linkedExtra || ONE_VALUE;
+
+		} );
+
+		this.add( aElement )
+			.add( bElement )
+			.add( cElement );
+
+	}
+
+}

examples/jsm/node-editor/accessors/UVEditor.js

@@ -0,0 +1 @@
+{"objects":{"325":{"x":1718,"y":136,"width":"300px","elements":[326,328,329,330,331],"id":325,"type":"StandardMaterialEditor"},"326":{"style":"blue","title":"Standard Material","id":326,"type":"TitleElement"},"328":{"inputLength":3,"links":[394],"label":"Color","id":328,"type":"LabelElement"},"329":{"inputLength":1,"label":"Opacity","id":329,"type":"LabelElement"},"330":{"inputLength":1,"label":"Metalness","id":330,"type":"LabelElement"},"331":{"inputLength":1,"label":"Roughness","id":331,"type":"LabelElement"},"337":{"x":155,"y":230,"width":"250px","elements":[338,344,345,342],"id":337,"type":"TimerEditor"},"338":{"outputLength":1,"title":"Timer","icon":"ti ti-clock","id":338,"type":"TitleElement"},"340":{"value":16.881,"id":340,"type":"NumberInput"},"341":{"value":0.04,"id":341,"type":"NumberInput"},"342":{"inputs":[343],"id":342,"type":"Element"},"343":{"value":"Reset","id":343,"type":"ButtonInput"},"344":{"inputs":[340],"label":"Value","id":344,"type":"LabelElement"},"345":{"inputs":[341],"label":"Scale","id":345,"type":"LabelElement"},"353":{"x":202,"y":79,"width":"250px","elements":[354,357],"id":353,"type":"UVEditor"},"354":{"outputLength":2,"style":"red","title":"UV","id":354,"type":"TitleElement"},"356":{"options":["1","2"],"value":"0","id":356,"type":"SelectInput"},"357":{"inputs":[356],"label":"Channel","id":357,"type":"LabelElement"},"361":{"x":612,"y":102,"width":"250px","elements":[362,367,365,366],"id":361,"type":"OperatorEditor"},"362":{"outputLength":1,"title":"Operator","id":362,"type":"TitleElement"},"364":{"options":[{"name":"+ Addition","value":"+"},{"name":"- Subtraction","value":"-"},{"name":"* Multiplication","value":"*"},{"name":"/ Division","value":"/"}],"value":"+","id":364,"type":"SelectInput"},"365":{"inputLength":3,"links":[354],"label":"A","id":365,"type":"LabelElement"},"366":{"inputLength":3,"links":[338],"label":"B","id":366,"type":"LabelElement"},"367":{"inputs":[364],"label":"Operator","id":367,"type":"LabelElement"},"373":{"x":1047,"y":158,"width":"250px","elements":[374,379,377,378],"id":373,"type":"OperatorEditor"},"374":{"outputLength":1,"title":"Operator","id":374,"type":"TitleElement"},"376":{"options":[{"name":"+ Addition","value":"+"},{"name":"- Subtraction","value":"-"},{"name":"* Multiplication","value":"*"},{"name":"/ Division","value":"/"}],"value":"*","id":376,"type":"SelectInput"},"377":{"inputLength":3,"links":[362],"label":"A","id":377,"type":"LabelElement"},"378":{"inputLength":3,"links":[386],"label":"B","id":378,"type":"LabelElement"},"379":{"inputs":[376],"label":"Operator","id":379,"type":"LabelElement"},"385":{"x":601,"y":345,"width":"250px","elements":[386,389],"id":385,"type":"FloatEditor"},"386":{"outputLength":1,"title":"Float","icon":"ti ti-box-multiple-1","id":386,"type":"TitleElement"},"388":{"value":24.12,"id":388,"type":"NumberInput"},"389":{"inputs":[388],"label":"Value","id":389,"type":"LabelElement"},"393":{"x":1402,"y":14,"width":"200px","elements":[394,396],"id":393,"type":"CheckerEditor"},"394":{"outputLength":1,"title":"Checker","id":394,"type":"TitleElement"},"396":{"inputLength":2,"links":[374],"label":"UV","id":396,"type":"LabelElement"}},"nodes":[325,337,353,361,373,385,393],"id":0,"type":"Canvas"}

examples/jsm/node-editor/core/ObjectNode.js

@@ -0,0 +1 @@
+{"objects":{"575":{"x":885,"y":119,"width":"300px","elements":[576,578,579,580,581],"id":575,"type":"StandardMaterialEditor"},"576":{"style":"blue","title":"Standard Material","id":576,"type":"TitleElement"},"578":{"inputLength":3,"links":[595],"label":"Color","id":578,"type":"LabelElement"},"579":{"inputLength":1,"label":"Opacity","id":579,"type":"LabelElement"},"580":{"inputLength":1,"label":"Metalness","id":580,"type":"LabelElement"},"581":{"inputLength":1,"label":"Roughness","id":581,"type":"LabelElement"},"587":{"x":73,"y":296,"width":"","elements":[588,593],"id":587,"type":"Vector3Editor"},"588":{"outputLength":3,"title":"Vector 3","icon":"ti ti-box-multiple-3","id":588,"type":"TitleElement"},"590":{"value":0,"id":590,"type":"NumberInput"},"591":{"value":1,"id":591,"type":"NumberInput"},"592":{"value":0,"id":592,"type":"NumberInput"},"593":{"inputs":[590,591,592],"label":"Values","id":593,"type":"LabelElement"},"594":{"x":541,"y":199,"width":"200px","elements":[595,597,598],"id":594,"type":"DotEditor"},"595":{"outputLength":1,"title":"Dot Product","id":595,"type":"TitleElement"},"597":{"inputLength":3,"links":[600],"label":"A","id":597,"type":"LabelElement"},"598":{"inputLength":3,"links":[588],"label":"B","id":598,"type":"LabelElement"},"599":{"x":106,"y":158,"width":"250px","elements":[600,603],"id":599,"type":"NormalEditor"},"600":{"outputLength":3,"style":"red","title":"Normal","id":600,"type":"TitleElement"},"602":{"options":[{"name":"Local","value":"local"},{"name":"World","value":"world"},{"name":"View","value":"view"}],"value":"world","id":602,"type":"SelectInput"},"603":{"inputs":[602],"label":"Scope","id":603,"type":"LabelElement"}},"nodes":[575,587,594,599],"id":0,"type":"Canvas"}

examples/jsm/node-editor/display/BlendEditor.js

@@ -0,0 +1 @@
+{"objects":{"131":{"x":1602,"y":-3,"width":"300px","elements":[132,134,135,136,137],"id":131,"type":"StandardMaterialEditor"},"132":{"style":"blue","title":"Standard Material","id":132,"type":"TitleElement"},"134":{"inputLength":3,"links":[170],"label":"Color","id":134,"type":"LabelElement"},"135":{"inputLength":1,"label":"Opacity","id":135,"type":"LabelElement"},"136":{"inputLength":1,"label":"Metalness","id":136,"type":"LabelElement"},"137":{"inputLength":1,"label":"Roughness","id":137,"type":"LabelElement"},"143":{"x":123,"y":207,"width":"250px","elements":[144,150,151,148],"id":143,"type":"TimerEditor"},"144":{"outputLength":1,"title":"Timer","icon":"ti ti-clock","id":144,"type":"TitleElement"},"146":{"value":7.286,"id":146,"type":"NumberInput"},"147":{"value":0.37,"id":147,"type":"NumberInput"},"148":{"inputs":[149],"id":148,"type":"Element"},"149":{"value":"Reset","id":149,"type":"ButtonInput"},"150":{"inputs":[146],"label":"Value","id":150,"type":"LabelElement"},"151":{"inputs":[147],"label":"Scale","id":151,"type":"LabelElement"},"159":{"x":485,"y":94,"width":"250px","elements":[160,164,163],"id":159,"type":"OscillatorEditor"},"160":{"outputLength":1,"title":"Oscillator","id":160,"type":"TitleElement"},"162":{"options":[{"name":"Sine","value":"sine"},{"name":"Square","value":"square"},{"name":"Triangle","value":"triangle"},{"name":"Sawtooth","value":"sawtooth"}],"value":"sine","id":162,"type":"SelectInput"},"163":{"inputLength":1,"links":[144],"label":"Time","id":163,"type":"LabelElement"},"164":{"inputs":[162],"label":"Method","id":164,"type":"LabelElement"},"169":{"x":1208,"y":66,"width":"","elements":[170,172,173,174],"id":169,"type":"BlendEditor"},"170":{"outputLength":3,"title":"Blend","id":170,"type":"TitleElement"},"172":{"inputLength":3,"links":[180],"label":"Base","id":172,"type":"LabelElement"},"173":{"inputLength":3,"links":[200],"label":"Blend","id":173,"type":"LabelElement"},"174":{"inputLength":1,"links":[160],"label":"Opacity","id":174,"type":"LabelElement"},"179":{"x":797,"y":-55,"width":"","elements":[180,187,188,189],"id":179,"type":"ColorEditor"},"180":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":180,"type":"TitleElement"},"182":{"value":16580865,"id":182,"type":"ColorInput"},"183":{"value":"#FD0101","id":183,"type":"StringInput"},"184":{"min":0,"max":1,"step":0.01,"value":0.996,"id":184,"type":"NumberInput"},"185":{"min":0,"max":1,"step":0.01,"value":0.004,"id":185,"type":"NumberInput"},"186":{"min":0,"max":1,"step":0.01,"value":0.004,"id":186,"type":"NumberInput"},"187":{"inputs":[182],"label":"Value","id":187,"type":"LabelElement"},"188":{"inputs":[183],"label":"Hex","id":188,"type":"LabelElement"},"189":{"inputs":[184,185,186],"label":"RGB","id":189,"type":"LabelElement"},"199":{"x":810,"y":220,"width":"","elements":[200,207,208,209],"id":199,"type":"ColorEditor"},"200":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":200,"type":"TitleElement"},"202":{"value":19455,"id":202,"type":"ColorInput"},"203":{"value":"#4BFF00","id":203,"type":"StringInput"},"204":{"min":0,"max":1,"step":0.01,"value":0,"id":204,"type":"NumberInput"},"205":{"min":0,"max":1,"step":0.01,"value":0.298,"id":205,"type":"NumberInput"},"206":{"min":0,"max":1,"step":0.01,"value":1,"id":206,"type":"NumberInput"},"207":{"inputs":[202],"label":"Value","id":207,"type":"LabelElement"},"208":{"inputs":[203],"label":"Hex","id":208,"type":"LabelElement"},"209":{"inputs":[204,205,206],"label":"RGB","id":209,"type":"LabelElement"}},"nodes":[131,143,159,169,179,199],"id":0,"type":"Canvas"}