Organic cell simulation with infinite zoom (100k cells, raw WebGL)

Made this little cell simulation with an infinite zoom mechanic in raw WebGL. Renders up to 100k cells on my laptop (M1 MBA).

It's a single HTML file, not minified, without dependencies, so you can just inspect the source code. It's just raw JS and WebGL shaders. No assets, everything is procedurally generated.

For each cell, I draw a single quad using instanced rendering. To create a nice organic wobble, I use SDF (Signed Distance Fields) to draw a circle (or another base shape), which is then distorted by adjusting the radius using multiple overlapping sine waves. I explain this visually here. [1]

To get the cells to stretch dynamically based on their velocity, I use a technique called Domain Warping. Basically in the fragment shader, the fragmentPosition is adjusted inwards/outwards depending on the current velocity, which squashes/stretches the entire coordinate system of the quad in either direction. Gives it a very organic look. I explain this in more detail here. [2]

Physics are also custom, on the CPU using position-based dynamics (PBD). This is currently the weak point of the engine, and with lots of cells, it's CPU constrained. I might move this to the GPU later or switch to a different approach. Not sure yet.

The infinite zoom mechanic works by dynamically rendering only the two currently visible layers. Physics are currently simulated all the time for all layers, although I could potentially also pause layers that are not currently visible.

All of this uses data-oriented design (DOD) techniques to keep most of the data structures in flat typed arrays for fast iteration and to minimize allocations in the main game loop.

I'm planning to build this engine out into a full incremental game with some light automation elements (think a microscopic Factorio, but much shorter). If you're interested in following the dev process, I post highly technical deep-dives on YouTube [3], or you can enter your email here [4] to get source code updates (super low volume).

Let me know what you think! Happy to answer any questions.

[1] https://youtu.be/VChlSt6gVSo?t=380 [2] https://youtu.be/VChlSt6gVSo?t=516 [3] https://youtube.com/@philomatics [4] https://philomatics.com/cell-game