# Node-RED flows rendered in BabylonJS 3D

**URL:** <https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971>\
**Category:** Share Your Projects\
**Created:** [17 November 2023 15:35 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971 "2023-11-17T15:35:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [17 November 2023 15:35 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/1 "2023-11-17T15:35:55Z")

</div>

Hi There!

For it is Friday, time for some amusement.

I was playing around with the [BabylonJS](https://flows.nodered.org/node/node-red-contrib-web-babylonjs) nodes and had the idea of rendering Node-RED flows in 3D - purely because its possible.

![3dflow-2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e338d5a0b4f13c164e3e4df76a1cefa094a96fd7.gif)

The flow show in the gif is the [analytics flow](https://flowhub.org/f/741c6acbed17d504) and the flow for doing this at home is [here](https://flowhub.org/f/5f0c36ed4bd03058). It comes with an http endpoint for rendering a complete page.

The [flow](https://flowhub.org/f/5f0c36ed4bd03058) 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](https://github.com/gorenje/node-red-flowviewer-js) for the colours and wire curves.

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [17 November 2023 16:06 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/2 "2023-11-17T16:06:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [17 November 2023 17:34 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/3 "2023-11-17T17:34:58Z")

</div>

what about a vr version ? 😜

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [17 November 2023 17:49 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/4 "2023-11-17T17:49:38Z")

</div>

> [@bakman2](#):
>
> what about a vr version ?

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

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

```

[source](https://doc.babylonjs.com/guidedLearning/workshop/vr_game)

for those with a VR glasses and a free weekend 😉

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [17 November 2023 21:04 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/5 "2023-11-17T21:04:59Z")

</div>

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

Here was the shot in the "Studio" 😂

 ![Screenshot 2023-11-17 at 21.04.08](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1e757377237c923ea61e6ca2bf8fae7a264d809.jpeg)

 ![untitled](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0b71fc6cb19b3d639ec0a50301db03c8fbf9bdb.jpeg)

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [17 November 2023 21:21 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/6 "2023-11-17T21:21:25Z")

</div>

Love it, absolutely superb ❤

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [17 November 2023 22:24 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/7 "2023-11-17T22:24:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [17 November 2023 23:33 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/8 "2023-11-17T23:33:42Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 November 2023 05:13 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/9 "2023-11-18T05:13:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\
**Post date:** [22 November 2023 08:12 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/10 "2023-11-22T08:12:26Z")

</div>

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

.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cff6c94de3af98766b78c93885b0ce15ce728517.jpeg)

---

<div class="post-metadata">

**Author:** ![jackcarey](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jackcarey/32/61101_2.png) [@jackcarey](https://discourse.nodered.org/u/jackcarey)\
**Post date:** [22 November 2023 20:00 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/11 "2023-11-22T20:00:25Z")

</div>

great work! perfect for the next Apple or Meta headset 😁

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [27 November 2023 15:58 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/12 "2023-11-27T15:58:28Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [4 December 2023 08:12 UTC](https://discourse.nodered.org/t/node-red-flows-rendered-in-babylonjs-3d/82971/13 "2023-12-04T08:12:48Z")

</div>

For those interested, I've update the [flow](https://flowhub.org/f/5f0c36ed4bd03058) so that node movement in either 2D or 3D is synchronised.

![3dmove2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc053204b8b3f611485f59690a03fa86de0d362e.gif)

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 😉 If anyone has any tips to get this done, would be greatly appreciated 👍

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!