NodeMaterial: Playground - WebGL

[sunag]

Introduction

This is a minimal version of Visual Node Editor using new Node Material System. Here contains a base to added of more editable nodes, the serialization and deserialization process is practically automatic, is possible create various type of nodes changing only inputs/elements with new *Editor class.

Hierarchy:

• Canvas
  • Node
    • Element > Connections
      • Input

I create a playground version, with Save/Load, this way it will be easier to test the new Node Material System too.
Every week I will be adding new nodes and features until the system be more complete.
Soon we can add this in three.js editor too.

Preview

https://raw.githack.com/sunag/three.js/dev-flow-ui/examples/?q=playground#webgl_materials_nodes_playground

Dependencies

flow ui - https://github.com/sunag/flow
tabler icons - https://tablericons.com/
open-sans font - https://fonts.google.com/specimen/Open+Sans

This contribution is funded by Google via Igalia.

[gsimone]

This is awesome! May I suggest adding a dropdown with a few pre-made graphs? Easier to get familiar with the nodes with a few examples already built

[marcofugaro]

Lovely library! Just a curiosity, what's the reason behind your decision to make the flow go right-to-left instead of left-to-right like it is in any other software using nodes?

[mrdoob]

Lovely library! Just a curiosity, what's the reason behind your decision to make the flow go right-to-left instead of left-to-right like it is in any other software using nodes?

I think that's a fair point. Better to follow the patterns people are already used to.

[sunag]

This is awesome! May I suggest adding a dropdown with a few pre-made graphs? Easier to get familiar with the nodes with a few examples already built

@gsimone Thanks! It sounds like a good idea.

Lovely library! Just a curiosity, what's the reason behind your decision to make the flow go right-to-left instead of left-to-right like it is in any other software using nodes?

@marcofugaro Thanks! In theory, it seemed more appropriate, because we look for the most predominant data first and then go on to the details, as we started reading from left to right, this would be the logic. This is also true in programming language and in mathematics, for example:

material.colorNode = Operator = nodeA + nodeB

You might also notice that this way, we don't even need to drag the canvas to start creating.
But I can change too, until I have already prepared part of the system for that.

[mrdoob]

@sunag

In theory, it seemed more appropriate, because we look for the most predominant data first and then go on to the details, as we started reading from left to right, this would be the logic. This is also true in programming language and in mathematics, for example:

material.colorNode = Operator = nodeA + nodeB

You might also notice that this way, we don't even need to drag the canvas to start creating.

Actually, I think that's very valid. I think I prefer right-to-left now 😅

[sunag]

[sunag]

@mrdoob No problems for me!! I can change again. I made an API for this so it was easy :)

[marcofugaro]

Actually, I think that's very valid. I think I prefer right-to-left now 😅

Let's make it configurable then 😝

[mrdoob]

Right to left by default and configurable? 🤓

[mrdoob]

People really seem to like left-to-right...

https://twitter.com/threejs/status/1460337913703587850

Okay, let's do left-to-right then. No need to make it configurable 👍

[mrdoob]

Thanks!

[sdraper69]

Maybe just me but doesn't work in firefox (94.0.1). Works great in chrome.

[mrdoob]

Only works in browsers that support import maps.