Case Study

Raging Sea Shader

Real-time ocean with layered wave displacement, on-GPU lighting, and tidy shader includes — built with Vite, Three.js, and GLSL.

View LiveGitHub Repo

The Problem

Create a convincing ocean that runs ~60 FPS on typical laptops, with shader code organized for easy look-dev and lighting tweaks.

Solution

  • Single plane mesh with **GPU vertex displacement** (stacked waves/noise) to avoid heavy geometry updates.
  • Modular **GLSL includes** for lighting and noise: `ambientLight`, `directionalLight`, `pointLight`, and `perlinClassic3D` keep shaders readable.
  • Lighting computed in the fragment shader; normals reconstructed on-GPU (via derivatives) for crisp specular highlights without normal maps.
  • Tunable uniforms (amplitude, frequency, speed, color/fog) for quick look-dev; all wired in `script.js`.
  • Vite for instant reloads and a simple static deploy to GitHub Pages.

Results

  • ≈60 FPS on desktop targets with sensible DPR.
  • Shader files remain small and focused: wave math in water shader, helpers in `/includes`.

Next

  • Screen-space reflections / subtle bloom pass with a quality toggle
  • Wind presets (Beaufort scale) and gust parameter
  • Mobile-friendly perf mode (lower tesselation + capped DPR)
← Back Home