How the glass is computed

A known technique

“Magic window” caustics are a known optical technique: a pane that looks almost flat is shaped so that the light passing through it forms a picture on a wall, but only at the right distance. We did not invent it. What this site adds is solving it live, in a browser tab, for any name a visitor types.

The model

Sunlight arrives as parallel rays along a sun vector that is not assumed to be straight on. It refracts into the glass at the flat back face, then leaves through a front surface whose height varies very slightly from point to point. The wall is parallel to the pane at a distance d.

Each point on the pane sends its light to a point on the wall, offset by d times the exit slope of its ray. Brightness on the wall follows how much pane area lands on each patch of wall: where the mapping squeezes area together, the wall is bright; where it spreads it out, the wall is dim. That is exactly what the renderer draws.

The smooth solver

• Target: the name is laid out from a table of glyph outlines (Anybody at weight 820, three width masters) and rasterised by a small scan converter written in TypeScript, so the browser and our build scripts produce identical targets. A faint ambient floor is added, because no real pane sends zero light anywhere.
• Morph: a mesh over the pane is bent, step by step, until every cell sends the right share of light to its part of the name. Each step is a Newton step on the cells’ areas, solved iteratively, and it is capped so no cell folds over.
• Normals and height: from where each point must send its light, Snell’s law gives the surface slope, and integrating the slopes gives the heights. The glass lives on the bent mesh itself, so the thin strips of glass that light the gaps between letters keep their detail.
• Refinement: when the sun comes in at an angle, the light a real surface throws cannot match the plan exactly, so the heights are adjusted a few more times against the light the surface actually throws.
• Honest check: the light is then recomputed from the actual height map, not the target, and compared with the target. The site shows that forward render and nothing else.

The faceted solver

The fallback divides the pane into a grid of flat facets and points each one at a sample of the name. At the focal distance each facet lands a square of light on its point, so the name appears as a mosaic of sunlit squares. It is always legible and solves in a fraction of the time.

Why it runs where it does

• The solve runs on the CPU in a Web Worker, in 64-bit floats, so the page stays responsive and precision does not depend on the graphics card.
• The GPU only draws the resulting mesh of light, adding it up in a half-float colour target where the browser can blend into one, and in a 10-bit target where it can’t.
• When WebGL2 is missing, the same solve is drawn with a 2D canvas: slower, but complete.

Measurements

Not measured yet. Frame times and solve times will be published here once the study runs on our reference machine, an Intel Mac, and on real phones.