✨ VFX & Particles

A particle system emits many small elements (sprites, points, or meshes) to simulate effects like fire, smoke, sparks, rain, explosions, and magic. Each particle typically has a lifetime, velocity, color, and size that evolve over time.

Key Concepts

• Emitter — the source that spawns particles. It defines the spawn rate, initial position, direction, and spread.
• Lifetime — how long each particle lives before being removed or recycled. Short lifetimes give snappy effects (sparks); long lifetimes give lingering ones (smoke).
• Forces — gravity, wind, turbulence, and attraction/repulsion that affect particle movement over time.
• Billboarding — rotating flat sprites to always face the camera, so they appear as volumetric elements rather than flat planes.
• GPU particles — for large particle counts, storing particle data in textures or buffer attributes and updating them in shaders is far more efficient than CPU-side updates.

For GPU-driven particles in Three.js, the underlying primitives are BufferGeometry with Float32Array-backed BufferAttribute and Points / PointsMaterial.

Libraries

• Stars
  NPM
  TS
  Maintained
• Effekseer

  1k

  /w

  
  1kN/A
  
• r3f-effekseer

  50

  /w

  
  50N/A
  
• three.quarks

  700

  2k/w

  
  7002k/w
  
• Nebula

  1k

  600/w

  
  1k600/w
  
  4 years
• three.proton

  480

  10/w

  
  48010/w
  
  6 years

Resources

• The art of screenshake
• League of Legends VFX styleguide