为什么值得关注

它通过结合 FFT 和 Gerstner 波浪、实时 HDRI 环境集成以及基于着色器的泡沫系统，实现了近乎逼真的开阔海洋视觉效果，而且无需构建步骤或外部打包工具。

适合谁使用

构建水面场景的 Three.js 开发者
研究波浪模拟和水体着色器的图形程序员
为演示或电影寻找高质量海洋背景的 3D 艺术家
探索基于 GPU 的频谱方法的海洋模拟爱好者

典型使用场景

短片或预演中的影院级海洋渲染
3D 应用或网页演示中的逼真水面背景
Tessendorf 波浪理论与 PBR 水体着色器的教学演示
WebGL2 中混合波浪系统的参考实现

项目优势

混合波浪系统：结合 GPU FFT（Tessendorf）与多层 Gerstner 涌浪，实现可信的大尺度与小尺度运动
完整的 PBR 着色：GGX 高光、菲涅尔效应、比尔-朗伯折射以及次表面散射
无需构建步骤：通过 import map 从 CDN 加载，使用模块化 JS 着色器
可切换的海洋学谱（Phillips、JONSWAP、Pierson–Moskowitz）并自动进行能量归一化

使用前须知

需要支持 WebGL2 和 EXT_color_buffer_float 的现代桌面 GPU，可能无法在移动设备或老旧硬件上运行
不包括地形、船只、天气或互动玩法——仅专注于逼真的水体
无打包工具意味着所有依赖项从 CDN 加载；离线或自定义设置可能需要额外配置

README 快速开始

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

OceanThreejs