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

// Tone-map the HDR scene target to the canvas: ACES filmic approximation
// followed by gamma. Runs as a fullscreen effect (uv comes in at @location(0)).
 
@group(0) @binding(0) var src: texture_2d<f32>;
@group(0) @binding(1) var samp: sampler;
 
fn aces(x: vec3f) -> vec3f {
  let a = 2.51;
  let b = 0.03;
  let c = 2.43;
  let d = 0.59;
  let e = 0.14;
  return clamp((x * (a * x + b)) / (x * (c * x + d) + e), vec3f(0.0), vec3f(1.0));
}
 
const EXPOSURE = 0.62;
 
@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let hdr = textureSampleLevel(src, samp, uv, 0.0).rgb * EXPOSURE;
  var col = pow(aces(hdr), vec3f(1.0 / 2.2));
 
  // Gentle cinematic grade: a little contrast + warm tint, subtle vignette.
  col = (col - 0.5) * 1.07 + 0.5;
  col *= vec3f(1.05, 1.0, 0.95);
  let d = uv - vec2f(0.5);
  col *= 1.0 - 0.28 * dot(d, d);
 
  return vec4f(clamp(col, vec3f(0.0), vec3f(1.0)), 1.0);
}