Node Graph System
Today I wanted to talk about something a little different than usual. For once, I will not focus on the engine but on the underlying platform behind our Node Material Editor.
Up until recently, the Node Material Editor was developed using a homemade node rendering system (built on top of React) which was only meant for NME:
One thing to notice is that NME and the Node Material are really successful in our community and a lot of people have fun using it to create crazy shaders.
One recent example is the good folks at FrameVR who added support to custom shaders with NME in their metaverse.
At some point, it struck me pretty clearly that we could leverage this graph system in other tools and even share it with the community so they can leverage it and create crazy things with it.
Node Graph System
Hence why I decided to “extract” the graph system from NME. So please let me introduce you with our Node Graph System: Babylon.js/packages/dev/sharedUiComponents/src/nodeGraphSystem at master · BabylonJS/Babylon.js · GitHub
This new system is now the foundation of NME: Babylon.js/graphEditor.tsx at master · BabylonJS/Babylon.js · GitHub
How to use it
To use the NGS, you need to instantiate a new GraphCanvasComponent:
NGS is data-agnostic so it is up to you to provide the list of nodes and communicate with the graph canvas when you want to add a new node:
You can see in this piece of code that there is a reference to the TypeLedger which is in charge of creating NGS node to wrap your data (NodeMaterialBlock in this case):
The ConnectionPointPortData and BlockNodeData are the wrappers:
You can see their implementation here:
and there:
Technically, they have to implement IPortData and INodeData which are the two main actors (a node and its ports).
Going further
The goal of this blog post is not to provide comprehensive documentation.
I believe the best way to learn about NGS is to see how we reimplemented NME with it. We do not plan to “productize” NGS as it is mostly meant to support our tool but, in an open source mindset, I wanted to let our community know about it. (And maybe someone will be motivated enough to write real documentation for it ;))
