Node-RED flows rendered in BabylonJS 3D

Hi There!

For it is Friday, time for some amusement.

I was playing around with the BabylonJS nodes and had the idea of rendering Node-RED flows in 3D - purely because its possible.


The flow show in the gif is the analytics flow and the flow for doing this at home is here. It comes with an http endpoint for rendering a complete page.

The flow can render a single flow tab or all your flow tabs and will layer them along the z-axis. It does not use the BabylonJS nodes, it generates client-side code and generates the 3D view in the browser, it only uses the JSON data of the flow and the flowviewer for the colours and wire curves.

Why do this? To impress all those developers still using a text editor :slight_smile: Its not often that I can render my code in 3D!


Now you can really go down into a sub-flow...


what about a vr version ? :stuck_out_tongue_winking_eye:

ironically this is quite simple with babylonjs, I think it's just a matter of using a different camera:

var camera = new BABYLON.WebVRFreeCamera("Camera", new BABYLON.Vector3(0, 1, 0), scene);
camera.attachControl(canvas, true);


for those with a VR glasses and a free weekend :wink:

1 Like

I done something similar for fun with an attempt at bringing a subflow into the physical world via Blender! :nerd_face:

Here was the shot in the "Studio" :joy:


Love it, absolutely superb :heart:

Next step with a 3d printer and it's the SaaS product: we print your code to hang on the mantelpiece!


You guy's have way too much free time to play with :smile:


We have time to experiment, what if programming was done in 3d? Why do we all code in 1 dimension (I.e. textually), what happens when you program in 2d (ie node red)... What does 3d look like...

That's what I'm thinking of when I do these things and I would like to think that perhaps this work will inspire the next generation. After all, none of us are using punchcards...

At one time @knolleary did 3d print a load of nodes…

1 Like

The only thing missing is Tron's motorcycle, which travels through 3d flows in animation :space_invader:


1 Like

great work! perfect for the next Apple or Meta headset :grin:

1 Like

well .... that is exactly what I want to do but not with just any old flow. My plan is visualise my mind-map that I created in Node-RED - it has somewhere around 5000+ nodes spread across 20+ flow tabs! It would be some sort of art installation called enter my mind or something :slight_smile:


For those interested, I've update the flow so that node movement in either 2D or 3D is synchronised.


The node colours now also match those used in Node-RED.

The next step is to have a super-mario-like character running through the 3D scene delivering messages to the nodes :wink: If anyone has any tips to get this done, would be greatly appreciated :+1:

A more serious note, the 3D representation is also able to render multiple view flow tabs in one scene - IMHO its quite useful to see all flows in a single view, so this actually might have a usefulness beyond the humourous!

1 Like