Node Graph System

3 min readAug 18, 2022

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:

Node Material displayed with 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:

Babylon.js/connectionPointPortData.ts at cc178bdb334405f0fab301f09fe5f5138a24504d · BabylonJS/Babylon.js · GitHub

and there:

Babylon.js/blockNodeData.ts at cc178bdb334405f0fab301f09fe5f5138a24504d · BabylonJS/Babylon.js · GitHub

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 ;))

Deltakosh (@deltakosh) / Twitter




Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best.