Case Study

Animated Galaxy

GPU particle galaxy with spiral-arm distribution, per-star color/size, and smooth animation — vanilla JS + GLSL built with Vite.

View LiveGitHub Repo

The Problem

Render tens of thousands of stars in a convincing spiral galaxy while preserving 60 FPS on typical laptops and keeping shader code tidy and tweakable.

Solution

  • Parametric spiral-arm distribution on the CPU, with noise-based radial jitter to avoid banding.
  • Single draw call using `THREE.Points` + `BufferGeometry` with packed attributes (position, size, color, arm bias).
  • Custom GLSL shaders in separate files (`src/shaders/galaxy/vertex.glsl`, `fragment.glsl`) to control point size, color falloff, and bloom-friendly additive blending.
  • Time uniform animates subtle rotation and twinkle without re-uploading buffers.
  • Vite dev/build for instant reloads and simple static deploys to GitHub Pages.

Results

  • ≈50k–100k particles at ~60 FPS on desktop (when DPR is sensible).
  • Clean separation: shaders live in `src/shaders/galaxy/*`, engine logic in `src/script.js`.

Next

  • Add UI controls (arms, spin, randomness, color) with a small panel (e.g., Tweakpane).
  • HDR pass + selective bloom for star cores, with performance toggle.
  • Orbit camera inertia + auto-centering for better first impression.
← Back Home