Zinn, brushed metal at the edge of Three.js

Zinn is German for tin. I wanted a surface in the browser that feels like the real thing: soft, satin, a little cold, with a brushed grain that catches the light in one direction and swallows it in the other. Not chrome, which is easy and looks cheap. Tin.

The material

There is only one material in all three clips. Everything else is the shape and the light. The grain comes from a brushed direction on the surface, so the highlight stretches into a line instead of a dot. The reflections come from a soft studio environment rather than a room, which is why the metal looks lit rather than mirrored. Roughness, the brush direction and the strength of the reflection were the three dials I kept turning until a screenshot could pass for a photograph of a cast object.

Touching it

The point of doing this in Three.js instead of a render is that you can pick it up. Move the pointer and the object turns towards it; as it turns, the highlight travels across the brushed surface the way it would in your hand. That travelling highlight is what sells the material. A still frame can lie, a surface that moves under your fingers cannot.

Three shapes

The Fertech mark, because it has flat faces and hard bevels: the simplest case for the grain, and the best test of whether the edges look machined.

A cross of rounded bars, because rounded metal is where most browser materials fall apart. The highlight has to slide smoothly around a curve, and the grain has to follow the curve with it.

And my own mark, up top, because its spikes are thin and its curves are tight. It is the hardest of the three and the one I care about most.

Where it stops

Three.js gets surprisingly far. What it does not do: the grain is a direction, not real scratches, so up close the surface is smoother than tin ever is. The reflections show a studio that is not there, so a bright object next to it does not appear in the metal. Very thin edges shimmer when they move. And all of this costs frames on a laptop without a proper graphics chip. None of these are bugs; they are the line where a real-time material ends and a rendered one begins. Knowing exactly where that line runs is what this was for.