Why it is worth attention

It delivers near-photorealistic open ocean visuals with a sophisticated combination of FFT and Gerstner waves, real-time HDRI environment integration, and a shader-based foam system—all without requiring a build step or external bundler.

Who it is for

Three.js developers building water scenes
Graphics programmers researching wave simulation and water shading
3D artists seeking high-quality ocean backdrops for demos or films
Ocean simulation enthusiasts exploring GPU-based spectral methods

Use cases

Cinematic ocean renders for short films or previsualization
Realistic water backgrounds for 3D applications or web demos
Educational demonstrations of Tessendorf wave theory and PBR water shading
Reference implementation for hybrid wave systems in WebGL2

Strengths

Hybrid wave system combining GPU FFT (Tessendorf) with multi-layer Gerstner swells for believable large- and small-scale motion
Full PBR shading with GGX specular, Fresnel, Beer-Lambert refraction, and sub-surface scattering
No build step required; load from CDN via import map with modular JS shaders
Switchable oceanographic spectra (Phillips, JONSWAP, Pierson–Moskowitz) with automatic energy normalization

Considerations

Requires a modern desktop GPU with WebGL2 and EXT_color_buffer_float support, which may exclude mobile or older devices
Does not include terrain, boats, weather, or interactive gameplay—focused solely on photoreal water
No bundler means all dependencies are loaded from CDN; offline or custom setups may need additional configuration

README quick start

Ultra-Realistic Ocean Renderer — Three.js r185 / WebGL2

A cinematic, physically based ocean renderer. Hybrid wave system (GPU FFT Tessendorf + multi-layer Gerstner swell), switchable oceanographic spectra, GGX water BRDF, Jacobian-driven procedural foam, HDR reflections and depth-based refraction. No terrain, boats, weather or gameplay — just the water, as close to photoreal as possible.

Running

No build step is required — the app loads Three.js r185 from a CDN via an import map. You only need to serve the folder over HTTP (ES modules don't load from file://).

# any static server works, e.g.
npm start                 # -> http://localhost:5173   (uses `serve`)
# or
npx serve .
# or
python -m http.server 5173

Then open the served URL. A modern desktop GPU + WebGL2 is required (the FFT needs float render targets, EXT_color_buffer_float).

Using your own HDRI

Open the Environment (HDRI) folder in the GUI → Load .hdr… and pick an equirectangular .hdr file. It drives both the water reflections and the sky dome, so the horizon and the reflected sky always match. Use Procedural Sky reverts to the built-in analytic sky.

Architecture

index.html              # import map (three@0.185) + canvas + loader
src/
  main.js               # renderer, camera rig, frame loop, GUI wiring
  config.js             # single source of truth for every parameter
  Ocean/
    OceanRenderer.js    # surface mesh, sun, sky, HDRI lifecycle
    OceanSimulation.js  # FFT + Gerstner orchestration, sea-state rebuilds
    OceanMaterial.js    # the water ShaderMaterial + uniform sync
    FFT.js              # GPU Tessendorf FFT (butterfly, spectrum, normalize)
    Spectra.js          # Phillips / JONSWAP / Pierson-Moskowitz variance
    Gerstner.js         # long directional swell authoring
    Foam.js             # Jacobian foam uniforms + GLSL chunk
  Shaders/
    water.vert.js       # hybrid displacement (FFT cascades + Gerstner)
    water.frag.js       # PBR shading: GGX, Fresnel, Beer-Lambert, SSS, foam
    fftKernels.js       # spectrum-update / butterfly / permutation kernels
    fullscreen.vert.js  # full-screen pass-through
  Utils/
    GPUCompute.js       # float render targets + full-screen pass helper
    GUI.js              # lil-gui panel (Ocean/Water/Foam/Lighting/Color/Perf)
    Sky.js              # background dome m

Related repositories

Similar projects matched by category, topics, and programming language.

react

Featured

react

React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.

Web DevelopmentFrontend Frameworks

246,741

tandpfun

Featured

wardrobe

A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.

JavaScript

1,570

mshumer

Featured

Claude-of-Duty

A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.

AI & Machine LearningAI Agents

1,234