Material alchemy guide

Overview

Material alchemy lights a picture as if it were made of a precious material: a pearly film, silk, chrome or jade.

A pearl-crowned figure before spires, washed with a pearly film of pink, green and violet
The Nacre preset partway through a run: a pearly film of colour over picture B as it fades in.

The tool reads the brightness of each pixel as a height. See luminance and height from luminance. From those heights it works out which way the surface faces at each point, its surface normal, and lights it.

There are four materials. Iridescence lays a thin film of shifting colour over the picture, as on a soap bubble or nacre; see thin-film interference. Sheen draws long, soft highlights that follow the lines of the picture, like silk. Chrome turns the picture into polished metal that mirrors a lit studio. Jade turns it into green stone that glows from inside; see subsurface scattering.

The material stays on the picture, even at rest. A tap makes it swell to full strength and settle again, while the light circles once round the picture.

With A → B crossfade on, as the page opens, the same run also carries picture A into picture B: the material swells, B fades in under it, and the run settles on B wearing the same material. The next run goes back. See material transition and picture A and picture B. With it off, the material stays on picture A.

Six presets set everything at once: Nacre, Anodized, Silk, Y3K chrome, Jade idol and Liquid mercury. Everything is worked out for each pixel in a fragment shader on the GPU. You can swap in your own pictures, and keep a PNG or a video.

Open Material alchemy Start here

In this guide

  1. StartWhat you need and your first material in five steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree presets caught mid-run, and how each was made.
  4. Keep your workThe PNG and the video.
  5. HelpWhat to do when something goes wrong.

It runs in your browser with WebGL. Your pictures stay on your device and nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.