I’ve been thinking about directed graphs lately and wanted to see how they could look in BabylonJS. I looked up the concept of directed graphs and how they relate to physics, so I think this could be done as well using a physics engine and I may explore that next. I ended up using dagre - it is a directed graph layout that unfortunately relies on pixels. It does show where nodes go and how edges can be drawn. Put up a demo and source code: https://brianzinn.github.io/babylonjs-directed-graph/
Wondering if anybody has explored building directed graphs in BabylonJS? I would like to model connected graphs and wanted to see what I could come up with quickly. Useful for visualizing workflows, network models, connections, etc.
Thanks for sharing @JohnK - haven’t done shortest path stuff since uni, but cool to work through a working 3D example Dagre supports weighted edges as well - higher weighted edges will generally be made shorter and straighter than lower weight edges. I think it can be visualized in the physical world as a stronger force of attraction between nodes connected with higher weighted edges. There are lots of applications in games with path finding - really interesting field.
Was just looking at this amazing demo and thinking of doing something similar. Did this project ever go anywhere or is the original demo open source anywhere?
thanks @Vandy
The original demo is up and open source - it’s a bit rough on the edges as I did it hastily I think in 1 weekend. I did go a step further after and I wrote a 3d directed graph physics engine (to replace dagre) and a Babylon.js physics engine plugin, but I never brought it over the finish line. That would have been more next level: brianzinn/wammo: force directed physics engine (github.com)
It would be really cool as a 3d-directed graph in a real time engine, because you can step the solvers with each frame render and watch the solution unfold and reach equilibrium!
There’s a link in the wammo readme back to a forum post here with screen capture.
Wow that is awesome! Thanks for sharing the Git. I currently have an app that uses go.js for some fairly nuanced hierarchical directed graphs (representing equipment connected on different floors of buildings… so occasionally our graphs have edges flowing in the wrong direction though typically lower to higher floors…). We currently use go.js for layout and rendering, but I have been wanting to move it into Babylon. And I have been tinkering with writing my own layout algorithms that are a bit more specific for that type graph and less bloated than a generalized tool, but was debating just using Dagre or something similar before running too far down that rabbit hole.
I can see a ton of applications