Large force-directed graphs
Force-directed graphs are a common way to automatically layout graphs in a visually appealing way. They simulate physical forces between nodes and edges, resulting in a layout that minimizes edge crossings and distributes nodes evenly. Previously, I have been using d3-force, but I have not found the performance satisfactory for large graphs.
This project utilizes WebGPU to both render and simulate the graph. If you’re a bit smart about how you implement your pipelines, modern machines can handle graphs with hundreds of thousands of nodes and edges (see for example the image above). Additionally, I’m experimenting with a two-step rendering strategy that gives a smooth user experience even if the simulation and rendering takes longer than the acceptable frame time.
Development was helped along with the use of three of my own libraries, Rhizome for WebGPU resource management, Hot Reload for hot reloading shaders, and Bikbok for the build system and dev server. It’s been nice seeing my own little ecosystem come together.
