Thin-film interference

Why soap bubbles and oil slicks have colour when neither the soap nor the oil is coloured — and how to get the same effect from three cosines and a viewing angle.

Hold a soap bubble up to the light and it is not soap-coloured. It is magenta at one angle, gold at another, and the bands slide as you tilt it. Nothing in the film is pigmented. The colour is made by the geometry of the film itself.

Light hitting a thin transparent layer partly reflects off the front surface and partly off the back. The second reflection has travelled further — twice the film thickness, adjusted for the angle it entered at. When the two recombine they interfere: if the extra distance happens to be a whole number of wavelengths they reinforce each other, and if it is half a wavelength they cancel.

Here is the part that makes it colourful. That extra distance is a fixed length, but a wavelength is not — red light is roughly twice the wavelength of violet. So a thickness that perfectly reinforces red will do something else entirely to blue. Every thickness produces a different mix of surviving wavelengths, and that mix is the colour you see.

In a shader this collapses to something remarkably small. Work out the extra path length from thickness and viewing angle, then evaluate a cosine at three different rates — one per channel, standing in for three wavelengths. The per-channel offset is not a stylistic choice; it is the physics.

It is worth separating this from the cosine palette it resembles. A cosine palette maps some arbitrary scalar to a pretty gradient, and about 62% of the shaders in this corpus use one. Thin film is the same machinery pointed at something specific: the phase has to come from a thickness and a view angle. That is why the colour tracks the geometry and sweeps around the rim as the surface curves away from you, instead of just being a nice gradient.

in the wild

angle in, spectrum out — #1vw9jiim

// thin-film iridescence keyed to the viewing angle and the slope
float film = pow(1.0 - max(dot(N, V), 0.0), 2.2) + N.x * 0.5 + N.z * 0.5;
vec3 irid = 0.5 + 0.5 * cos(TAU * (vec3(0.0, 0.33, 0.67) + film * 2.6 + t * 0.06 + hu));

The whole effect is two ideas on one line. pow(1.0 - dot(N, V), 2.2) is a Fresnel-ish grazing term: near zero where the surface faces you, near one at the silhouette. Feed that into a cosine and offset each channel by a third of a cycle — vec3(0.0, 0.33, 0.67) — and red, green and blue peak at different angles. That is what a soap film physically does as the light path through it lengthens.

the same three lines, elsewhere — #l8ofptgk

float fres = pow(1.0 - max(dot(n, -rd), 0.0), 3.4);
vec3 sheenHue = 0.5 + 0.5*cos(TAU*(vec3(0.00, 0.33, 0.67) + fres*1.35 + arc*0.9));
vec3 sheen = mix(mix(base, vec3(0.55, 0.72, 1.00), fres*0.45), sheenHue, 0.33*gloss);

Worth seeing twice. Same structure, different animal: fres here uses -rd rather than a separate view vector, because in a raymarcher the ray direction IS the view direction. Once you recognise 0.5 + 0.5*cos(TAU*(vec3(0.0, 0.33, 0.67) + x)) you will start finding it in most of the iridescent shaders here — a cosine palette with its phase driven by viewing angle instead of by position.

try it — this is running

no poster yet — rendering live…

thickness 1.60

A bubble. Push the thickness slider and the bands sweep through the spectrum, because each channel peaks at a different path length.

the whole thing, 35 lines

/*{
  "DESCRIPTION": "Thin-film interference on a sphere: one phase, three wavelengths.",
  "CREDIT": "glslop",
  "CATEGORIES": ["education"],
  "INPUTS": [
    { "NAME": "thickness", "TYPE": "float", "DEFAULT": 1.6, "MIN": 0.3, "MAX": 4.0 }
  ]
}*/

void main() {
  vec2 uv = (gl_FragCoord.xy - 0.5 * RENDERSIZE) / RENDERSIZE.y;
  float r = length(uv) / 0.72;
  if (r > 1.0) { gl_FragColor = vec4(0.01, 0.01, 0.02, 1.0); return; }

  // fake a sphere so there is a surface normal to work with
  vec3 n = vec3(uv / 0.72, sqrt(max(0.0, 1.0 - r * r)));
  float cosTheta = n.z;                      // angle between normal and viewer

  // Optical path difference: light entering at a glancing angle travels further
  // through the film, so the phase grows toward the rim. That is why the bands
  // bunch up at the edge of a real bubble. Bounded below -- unclamped, the bands
  // near the silhouette get finer than a pixel and alias into rainbow confetti.
  float opd = thickness * (1.6 + 0.4 * sin(TIME * 0.4)) / max(cosTheta, 0.30);

  // THE TRICK: one phase, three wavelengths. Red is the longest, so it cycles
  // slowest; blue the shortest, so it cycles fastest. Their disagreement is colour.
  vec3 phase = opd * 6.2831 * vec3(1.0, 0.85, 0.72);
  vec3 film = 0.5 + 0.5 * cos(phase);

  // more of the film reflection survives at glancing angles (Fresnel)
  float fresnel = pow(1.0 - cosTheta, 3.0);
  float edge = smoothstep(1.0, 0.96, r);     // soft silhouette, no jaggy circle
  gl_FragColor = vec4(film * (0.45 + 0.55 * fresnel) * edge, 1.0);
}

28 shaders using this