Asa Pefferman■Product designer
← Latest
Tools & prototyping / 2 min read

Learning light by moving it.

I built Key and Fill, a portrait lighting studio that runs in the browser, so the cause and effect of studio lighting is something you can see and adjust directly.

Asa Pefferman /
A ten-second tour: presets, realistic materials, camera controls, light and color, and the 3D stage.

Lighting diagrams explain where a light goes, but not what it does to a face as it moves. Key and Fill starts from a single portrait and twelve classic setups, from Rembrandt and loop lighting to butterfly, split, clamshell, and a cool-and-warm color study. Each preset is a starting point rather than an answer: every light can be selected, moved, and tuned, and the portrait responds as you work.

Stepping through the presets, with the portrait relighting as each one loads.

The interface leans on progressive disclosure. At rest the screen is almost entirely portrait, with a preset switcher above it and four controls below: Lights, Camera, Room, and Model. Choosing a light opens a small panel with its modifier, intensity, size, and color. Positioning it splits the view, so the light can be dragged around a 3D stage while the portrait updates alongside. Less common settings stay behind More, and undo and redo sit quietly in the corner.

Dragging the key light across the 3D stage while the portrait responds alongside.

I wanted the numbers to mean something. One unit in the scene is a meter, intensity is measured in candela, light falls off with the square of the distance, and exposure follows photographic conventions, starting at f/4, 1/60 s, and ISO 400. Ten modifier profiles, from softboxes and octaboxes to strip lights, beauty dishes, and snoots, change the shape and spread of each source. Soft shadows come from treating every light as an area rather than a point and refining the image progressively after each change.

It is a planning tool, not a renderer for final images, and it tries to be honest about that. Bounced light and the way light travels beneath skin aren't simulated, and intensities stay in candela instead of pretending to convert from a particular product's watts. Those limits keep the studio quick to respond, which matters more when the point is to build an intuition by moving things.

Switching the model from a matte sculpture to a realistic skin material.

The portrait is based on the Infinite 3D head scan by Lee Perry-Smith (I-R Entertainment), used under CC BY 3.0 and smoothed for this project. The clips here also appear in the gallery.

See Key and Fill in the gallery ↗