The Holographic Plate — Real Fourier Optics in Your Browser
Encode an image as a wave-interference pattern. Shine a virtual reference beam on it. Watch the image reconstruct via the angular spectrum method. No AI tricks — actual Fraunhofer holography.
What this is
Three side-by-side panels. Left: an input image (procedural presets or uploaded). Middle: the Fourier hologram — the interference pattern between the image's wavefront and a tilted reference plane wave, rendered as grayscale fringes. Right: the reconstruction — what you see when you "shine" the reference beam back through the hologram and propagate the resulting wavefront to a virtual screen via the angular spectrum method. Sliders for reference angle, viewing distance, and wavelength. Toggle the palette. The fringes look like noise until you see them resolve back into the original image.
Why this is mind-blowing
Real holography is one of physics' more counterintuitive results — the entire image is encoded in every part of the plate, redundantly, via wave interference. This demo lets you watch that math happen. The Cooley-Tukey FFT is hand-written. The angular spectrum propagation is in a fragment shader. No machine learning, no clever rendering tricks — just real Fourier optics.
Build a single-file optical holography demo. Stage 1: load an image,
compute its Fourier hologram — the interference pattern between the
image's wavefront and a reference plane wave — and render the resulting
fringes. Stage 2: simulate shining a reconstruction beam through the
hologram and propagate the resulting wavefront via the angular spectrum
method to a virtual screen, recovering the original image. Stage 3:
rotate the viewing angle and show that the reconstructed image shifts
perspective like a real hologram. Pure WebGL2 fragment shaders for the
propagation. The math is real Fourier optics.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- Cooley-Tukey radix-2 FFT in pure JavaScript on a 128×128 image is fast enough for slider-driven interactivity. Pre-compute twiddle factors and bit-reversal indices once.
- The angular spectrum method — Fourier transform → multiply by propagation kernel exp(i·2π·z·√(1/λ²-fx²-fy²)) → inverse Fourier transform — is the right tool for near-field wave propagation.
- Showing all three stages (input / hologram / reconstruction) side by side is the educational move. The interference fringes look like noise until you see them resolve back into the original image.