State of Node-based Shaders in three.js? Any good tutorials?

Hi
I’m starting a node UI component, it’s really at early stage, but I planned this goals:

  • Blender like UI and interactions:
    • drag/zoom
    • groups
    • multi document viewer
    • lateral panels
  • Generic enough to be used as UI for any engine connected
    • API to query the graph
    • API to add engine specific nodes
    • API to “compile” nodes to the engine specific language
    • THREE.js is my 1st target
  • SVG format
    • It can be added to html DOM directly without parsing
    • The lib will add interaction and new node specs
    • The lib will offer a complete theming of UI via css (that can be attached to the SVG)
    • The graph can be viewed as a static image (like a frozen UI)
    • :new: SVG is XML so easy to import/export to MaterialX

I need to work a bit more on the project to be shareable, then it will be a Libre licence…

Right now I have:

  • drag / zoom on SVG
  • basic draggable boxes with title and named inputs/outputs
  • content of boxes defined in html (to gain easy UI inputs, or custom elements)

Need to finish at least

  • Draw dynamic link (line or bezier) recalculated when connected boxes are dragged
  • Load/update/save a file from file system (aka open my saved graph)
  • Cook the 1st attempt of API to gather graph information and compile something
2 Likes