Building GPU Particle Systems with Three.js
three.jswebgltutorial
When building particle systems for the web, the CPU becomes the bottleneck long before the GPU does. Here’s how I moved the simulation to the GPU.
The Problem
Traditional particle systems update positions on the CPU:
for (let i = 0; i < particles.length; i++) {
particles[i].position.add(particles[i].velocity);
}
This works fine for a few thousand particles, but falls apart at 50k+.
The Solution: GPU Compute
By encoding particle state in textures and using ping-pong framebuffers, we can update millions of particles per frame.
The key insight is that each pixel in a texture can store the position (RGB) and lifetime (A) of a single particle.
Results
- CPU approach: 5,000 particles @ 60fps
- GPU compute: 100,000 particles @ 60fps
- With instancing: 500,000 particles @ 30fps
More in the next post where I’ll cover the GLSL shader code in detail.