🫢 lazydev
ThreeGN, procedural 3D graphics editor
I was going recently through tutorial on creating a procedural chain mail pattern in Houidi while recreating it in Blender, and it got me curious if Blender's geomentry nodes can be ported to run in browser context.
My initial thought was that it is most definitely possible, since every node is backed by a pure computation and when put together they form a graph that resembles a computer progam, so there's nothing special to it really.
In two evenings I've managed to create geo nodes exporting script for Blender and a basic computational graph implementation in JavaScript. In a couple more evenings I've put together a web editor to visualize nodes graph and render the output using Three.js. The core of the editor UI is handled by React Flow library. It works well, the prototype proved that it's possible.
There are two parallel tracks in this project: graph evaluator and editor UI. While the editor enables to play with geo nodes in a browser, the most important part is the evaluator. The idea is to keep it separate from the editor, so that it can be used in independent contexts. Imagine you could load a file into Three.js project just like any other 3D model asset, have access to the graph and animate its properties.
The evaluation graph is roughly described by the figure below. In the first phase the evaluator builds a graph of geo nodes from exported structure and enriches it with metadata. The second phase hydrates every node in the graph with corresponding evaluators and establishes data propagation from outputs to inputs of every connected node.
When hydrated, the graph is not evaluated, instead a lazy computation is returned, where every node is partially applied with references to its inputs. Thus, nodes that are not connected to the graph will be never evaluated, that's basically a dead code.
Once the output value is requested from the output node, the graph is evaluated starting from the input node and computed geometry is returned. At this point the process is done and retrieved geometry can be fed into Three.js scene.
Current implementation of the graph doesn't include memoization which makes it less suitable for real-time animation.
Some of the short and mid term goals of ThreeGN project:
- Port all Blender's geo nodes to ThreeGN
- Improve evaluator performance to make it suitable for real-time animation
- Create frictionless editor experience
You can try ThreeGN at threegn.app