The Iridescent

Artificial Noodles ·

The story behind The Iridescent

Inspired by Thin-film interference on Wikipedia

Built with Pure WebGL2 · Multi-pass FBO Pipeline

Techniques Ray-Sphere Intersection · Spectral Thin-Film Interference · Snell’s Law Refraction · Chromatic Aberration · Schlick Fresnel · FBM Marangoni Swirls · Bloom Post-Processing

Direction A sphere whose color comes not from pigment but from the precise thickness of nothing

Result Orbit a soap bubble and discover that its color exists only in the geometry of observation

The Story

A soap bubble’s color comes from interference between light reflected off the outer and inner surfaces of the film. The path length difference depends on film thickness, viewing angle, and wavelength. Each color interferes differently at each thickness — constructive interference for some wavelengths, destructive for others. The result isn’t a rainbow. It’s something stranger: magentas, teals, golds, electric blues, deep purples. Colors that don’t exist in any single wavelength of light.

The film is never still. Gravity pulls it downward — thin at the top, thick at the bottom. Surface tension gradients drive lateral currents (Marangoni flows) that create swirling patterns. The top thins until it can’t sustain color at all. Below ~25nm, destructive interference kills every wavelength. The bubble goes dark — “black film” — and then it pops.

The human truth: the most beautiful thing in the world lasts fifteen seconds. A soap bubble is structurally perfect — minimum surface area for enclosed volume. Its color comes from structure, not substance. And gravity is constantly pulling that structure apart.

The Take

A single bubble floats in a dark gradient void. You orbit it with your cursor. As your viewing angle changes, the entire surface transforms — what was gold becomes blue, what was magenta becomes teal. This isn’t a crossfade or a palette swap. It’s the same physical interference equation computing different results for every new angle. The color was never in the film. It exists only in the relationship between your eye, the surface, and the light.

The bubble also drains slowly over time, shifting its color palette as the thickness distribution evolves. Marangoni currents create organic swirling patterns that drift across the surface. Eventually the crown of the bubble thins toward black film — the countdown that real bubbles live through in fifteen seconds, stretched out for you to observe.

The Tech

Ray-Sphere Intersection

The bubble is a unit sphere at the origin. Instead of raymarching (which would work but is overkill for a perfect sphere), the shader solves the quadratic ray-sphere intersection analytically: b² - c > 0 means a hit, with entry at -b - √disc and exit at -b + √disc. Both intersection points are needed — the front hit for the surface normal and Fresnel computation, the back hit for computing the refracted ray’s exit direction.

Thin-Film Interference (16-Wavelength Spectral Sampling)

The core physics. For each pixel on the bubble surface, the shader computes film thickness d at that point (gravity drainage gradient + animated FBM noise for Marangoni swirls), then samples 16 wavelengths from 380nm to 720nm. For each wavelength:

  1. Snell’s law computes the refraction angle inside the film
  2. The optical path difference is 2 × n_film × d × cos(θ_t)
  3. A half-wave phase shift accounts for reflection at the higher-index interface
  4. Sinusoidal interference gives R(λ) = sin²(phase/2)

Each wavelength’s reflectance is converted to RGB using CIE 1931 color matching function approximations (piecewise Gaussian fit to the x̄ȳz̄ observer curves), then XYZ→sRGB matrix transform. The sum across all wavelengths produces the final structural color.

Film Thickness Field

The thickness varies across the surface through three mechanisms:

Refraction & Chromatic Aberration

The bubble refracts the background through it — Snell’s law at entry and exit, with the thin shell acting as a diverging lens. The refracted background appears inverted and compressed. Chromatic aberration is computed by offsetting the refractive index slightly for red and blue channels (±0.015), producing color fringing at the edges of refracted features.

Fresnel Blending

Schlick approximation with artistic boost — real soap film has ~2% reflectance head-on, which would make the bubble nearly invisible. The shader boosts minimum reflectance to ~35% so thin-film colors are always visible, rising to ~100% at glancing angles. At the rim, the bubble becomes a mirror; at the center, you see through to the refracted world behind it.

Multi-Pass FBO Pipeline

Five render passes, all using RGBA8 textures (no float textures, no extensions required):

  1. Scene: Raytraced sphere + thin-film + refraction + Fresnel → full-resolution FBO
  2. Bloom extract: Bright pixels (luma > 0.72) extracted → half-resolution FBO
  3. Horizontal blur: 9-tap Gaussian (σ≈3) → half-resolution FBO
  4. Vertical blur: Same kernel, orthogonal direction → half-resolution FBO
  5. Composite: Scene + bloom (×0.35) + vignette + film grain → screen

Interaction

Cursor X maps to camera azimuth (full 360° orbit), cursor Y to elevation (15°–65°). Both smoothed with critically-damped second-order springs (ω=6, ζ=1). After 4 seconds of idle, slow auto-orbit resumes. Touch support through pointer events.

Experience: The Iridescent

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.