GPU Particle Reconstruction System
- TypeScript
- WebGL2
- GLSL
- Canvas 2D
Live on sevencontext.com
What it is
A GPU-accelerated particle system that reconstructs shapes: SVG images, typography, and 3D objects in motion. I built it for the SevenContext website, where it's live.
The problem
The site needed eye-catching visual effects without the page paying for it in performance. With thousands of particles moving at once, the CPU can't keep up, so the computation had to move to the GPU.
The hard parts
- Shaders. None of them worked right at first, and debugging GLSL is slow: there's no console, just what you see on screen.
- Distribution. Rendering particles is easy; placing them so they reconstruct a shape without clumping or leaving gaps isn't.
- Scale. It depends on what's being rendered: three or four thousand particles are enough for an SVG image, while a moving 3D object needs around thirty thousand.
- Mobile. At that load, a phone chokes unless you control how many particles move at once, and a good part of the work went into tuning that.
Result
It runs in production on the SevenContext website, mobile included.