SeedOcean

Status: v0.6.0-alpha. Twenty presets — realistic day/night/tropical/polar/bioluminescent, cel-shaded Cartoon and Ink Wash stylized modes, three bounded water types (tiled Pool, Mountain Lake, meandering River), and Coastal Surf (clipmap ocean meeting a sloping beach with depth-based white water). FFT ocean with persistent/advected foam, a 2562 quality mode, TypeScript types, a <water-canvas> web component, atmospheric spray + rain, a headless Design API (seedocean/api), and a WebGL2/Gerstner fallback that keeps the API identical when WebGPU is unavailable.

https://reed-soul.github.io/SeedOcean/

Orbit below the surface for underwater mode. A boat leaves a wake; the red buoy and wooden crates float on the live wave field. Try Bioluminescent for glowing night crests, or Tempest for wind-blown spray and rain.

Animated demo — coastal → storm sweep

pnpm add seedocean three

Requires WebGPU (Chrome/Edge 113+).

import * as THREE from 'three/webgpu';
import { SeedOcean } from 'seedocean';
const renderer = new THREE.WebGPURenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
await renderer.init();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, 0.5, 6000);
camera.position.set(0, 14, 48);
const ocean = await SeedOcean.create({
 renderer,
 scene,
 camera,
 preset: 'coastal', // any of the 20 presets
 quality: 'quality', // 'perf' (1282) | 'quality' (2562)
});
function animate() {
 ocean.tick();
 requestAnimationFrame(animate);
}
animate();

Or drop in the web component — no bootstrap code needed:

<script type="module">import 'seedocean/web-component.js';</script>
<water-canvas preset="coastal" quality="quality" demo></water-canvas>

Options: environment, seafloor, underwater, buoyancy, demoObjects, validateFFT.

Re-exports: PRESETS, buildFFTOcean, BuoyancySampler, validateFFT, ...

• FFT / JONSWAP ocean — GPU butterfly IFFT, 3 cascades (200 m / 20 m / 3.5 m), TMA shallow-water correction, dual wind-sea + swell bands
• Persistent / advected foam — ping-pong foam field, half-Lagrangian back-trace, live-tunable foamPersistence
• Quality mode — quality: 'perf' | 'quality' selects 1282 vs 2562 FFT grids
• Infinite clipmap — camera-snapped nested rings (~1.5 km)
• Subsurface scattering — sun-lit crest glow
• Screen refraction / reflection — viewport backdrop + planar reflector
• Wake field — boat stamps height + foam into a tiling CPU texture
• Multi-body buoyancy — spring-damper physics with pitch/roll
• Underwater rendering — depth tint, Snell's window, god rays
• Shared caustics — sea floor, buoy, boat hull, floating crates
• Atmosphere — wind-blown sea spray at breaking crests + a screen rain layer (zero-cost when intensity is 0)
• WebGL2 fallback — when WebGPU is unavailable, a Gerstner-wave renderer keeps the same API and visual identity
• 20 presets — Calm Bay · Dawn Glass · Sea Mist · Light Breeze · Coastal Chop · Coastal Surf · Long Swell · Tropical Reef · Golden Sunset · Moonlit · Arctic · Bioluminescent · Cartoon · Ink Wash · Pool · Mountain Lake · River · Gale · Open Storm · Tempest
• FlowMap — spatially-varying flow + wet-shore foam (seedocean-flowmap/1) for lake/river/coast
• Headless Design API — describe / design / toPreset / fromPreset (no GPU)
• TypeScript types + <water-canvas> web component + glTF export

git clone https://github.com/reed-soul/SeedOcean.git
cd SeedOcean
pnpm install
pnpm dev # http://localhost:5391

pnpm build # production bundle
pnpm build:pages # GitHub Pages (base /SeedOcean/)
pnpm test:fft # GPU FFT self-test (needs Chromium + WebGPU)
pnpm test:api # headless Design API + FlowMap self-test (Node, no GPU)
pnpm capture # regenerate docs/assets screenshots + GIF

src/
 index.js public API
 seedocean.js SeedOcean.create() — WebGPU + WebGL2 dispatch
 seedocean.d.ts TypeScript declarations
 web-component.js <water-canvas> custom element
 api/ headless Design API (describe / design / toPreset)
 core/fft/ spectrum · IFFT · cascades · advected foam · surface material
 core/fallback/ gerstner-ocean.js — WebGL2 path
 core/flow-map.js seedocean-flowmap/1 — shore foam + river tangents
 core/atmosphere.js spray + rain
 core/wake-field.js CPU wake texture
 core/caustics.js shared underwater caustic pattern
 presets/ 20 named sea states

• docs/adding-a-preset.md — contract for adding a sea state
• docs/sea-states.md — Signature / Basis / Carriers for every preset
• docs/ocean-fft-design.md — FFT / meshing / foam architecture
• src/api/README.md — headless Design API

• Product pattern: SkyeShark/SeedThree
• FFT ocean: poseidon (MIT)

MIT © lushiqiang