Three.js Particles: Points, Sprites & GPU Compute

THREE.Points takes a BufferGeometry with a position attribute (one vec3 per particle) and a PointsMaterial (or custom shader material), and renders every point as a small camera-facing square in a single draw call. This is what makes it fast even for tens of thousands of particles: the GPU doesn't care whether it's drawing 100 or 50,000 points in that one call.

PointsMaterial covers the basics: size, color, map (a sprite texture per particle), sizeAttenuation (particles shrink with distance, like real objects, vs staying a constant screen size). For anything beyond flat-colored dots (glow, per-particle color variation, custom fade), a custom ShaderMaterial or TSL node material gives full control over each particle's appearance.

The naive approach (updating each particle's position in a JavaScript loop every frame, then re-uploading the whole position buffer to the GPU) works fine up to a few thousand particles, but the CPU loop and buffer upload both become the bottleneck well before the GPU struggles to draw the points.

For larger counts, move the simulation onto the GPU itself: a WebGPU compute shader (written in TSL) can update tens of thousands to millions of particle positions in parallel, entirely on the GPU, with no CPU loop and no buffer re-upload. The position buffer simply stays on the GPU and gets updated in place. This is the single biggest lever for scaling particle count, well beyond what CPU-driven updates can reach.

• Snow/rain/dust: simple downward or drifting velocity per particle, wrapped around when it falls below a floor Y.
• Fire/smoke: additive blending (THREE.AdditiveBlending), particles spawned continuously with upward velocity and fading opacity/scale over their lifetime.
• Explosion/burst: particles spawned at once with random outward velocity, decaying over a fixed lifetime, often combined with a gravity term.
• Trail effects: particles spawned along a moving object's path, each with an independent fade-out lifetime.

Most of these differ only in the velocity/lifetime rules driving each particle. The rendering approach (THREE.Points, additive or normal blending) is largely shared across all of them.