Vibary.ai
Go Pro
← All WebGL effects

Thin Film Wash

Colour computed from film thickness at three wavelengths, so the sequence is interference and not a hue ramp.

ambientpremiumenergeticfuturistic1 draw call · full-screen shader · light · 1 context · automatic · looping
queued1 draw call · 1 context
Variant

The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.

306 lines · react + three
"use client";

import * as React from "react";
import * as THREE from "three";

/**
 * Thin Film Wash — the colour is a thickness, not a palette.
 *

About this effect

For something meant to be looked at once and remembered — a launch banner, a new version, a first-run screen — rather than behind a surface someone works in all day. Iridescence is interference: light bouncing off the top of a very thin film and light bouncing off the bottom travel different distances, and where that difference is a whole number of wavelengths the two add, where it is half a wavelength they cancel. The difference is fixed but the wavelength is not, so each colour cancels at a different thickness and the film shows whatever survived. This is why rotating a hue through a rainbow never passes for oil on water: a hue ramp gives every colour in order, evenly, forever, and interference gives a particular sequence with particular gaps that repeats faster as the film thickens. That sequence is the thing the eye recognises. So the file carries a thickness field, computes the optical path difference from it — including the half-wavelength the phase flip adds, which is what makes a very thin film dark rather than white, and the commonest thing to leave out — then asks three times, at the wavelength of red, green and blue, how much came back. There is no palette in the file. Every colour is a consequence.

Release bannerFirst-run screenFeature announcementLanding hero

Related effects