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

'use client';
 
import { useEffect, useRef } from 'react';
import { useExampleErrorReporter } from '../../lib/example-error-reporter';
import { createRenderer } from './renderer';
 
export function Example() {
  const reportError = useExampleErrorReporter();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const renderer = createRenderer({ canvas, onError: reportError });
    void renderer.ready.catch(() => {
      // onError reports initialization failures to the preview host.
    });
    return () => renderer.dispose();
  }, [reportError]);
  return <div className="relative h-full w-full overflow-hidden bg-black"><canvas ref={canvasRef} className="block h-full w-full touch-none" /></div>;
}