Glass mark

The o/f monogram extruded into a slab of clear glass and floated in front of the studio backdrop. Drag it and it turns. Let go and it drifts home. Colour splits along the edges, where the refraction is strongest.

A mark that only ever exists as flat vector gets judged as flat vector. We wanted to see how the construction behaves as an object: whether the ring stays open under thickness, and whether the slash and the f still read as a pair once light bends through them.

It became our check on how much volume the geometry can take before it stops being the mark.

1. 1

   The SVG is parsed with three.js's SVGLoader and extruded with a shallow bevel. Depth and bevel are kept low on purpose. Push them further and the counter of the o closes up while the f's hook melts into its crossbar.

2. 2

   The material is a MeshPhysicalMaterial with full transmission, an index of refraction of 1.6, a thin clearcoat and chromatic dispersion, lit by a studio environment rendered into an environment map.

3. 3

   The backdrop is a textured plane behind the mark, which gives the glass a real image to refract. A flat colour would show almost nothing.

4. 4

   Orbit controls handle the drag, with a spring that returns the camera to its resting angle after a beat of stillness. Wheel zoom is off so the page still scrolls, and under reduced motion the idle float stops.