FFT ocean surface

A displaced ocean surface driven by a real inverse FFT. A Phillips spectrum evolves in frequency space, two compute passes run a shared-memory radix-2 IFFT into a displacement field, and a procedural grid rides it with per-pixel normals, foam and a Fresnel sky reflection under a tunable sunset. Orbit with the mouse; tweak the sea from the panel.

Open fullscreen

index.tsx renderer.ts scene.ts params.wgsl complex.wgsl fft-core.wgsl fft-row.wgsl fft-col.wgsl bake.wgsl spectrum-init.wgsl spectrum-update.wgsl sky.wgsl skydome.wgsl ocean-surface.wgsl composite.wgsl

// Bakes the IFFT displacement storage buffer into an rgba16float texture, one
// texel per element. Storage buffers are not available in the vertex stage on
// conservative adapters, so the ocean mesh samples this texture instead.
 
const NU: u32 = 256u;
 
@group(0) @binding(0) var<storage, read> disp: array<vec4f>;
 
@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let x = min(u32(uv.x * f32(NU)), NU - 1u);
  let z = min(u32(uv.y * f32(NU)), NU - 1u);
  return disp[z * NU + x];
}