Castle, Wrapped in Type

What this is

Three.js plus a draco-compressed photogrammetry mesh of the Castle of Loarre, wrapped in a live editorial layout. Body text recalculates its flow sixty times a second against the silhouette of the model. Text never overlaps the geometry, columns re-form, captions track features of the building. The model is ~30MB; let it load.

The puzzle that started it

Editorial layout on the web is almost always rectangular. Magazines never were. The puzzle: could the silhouette of a 3D model drive a real long-form layout, sixty times a second, without the text breaking down into unreadable column shards?

How I built it

Three.js renders the model. A separate pass projects the model's silhouette into the editorial layout's 2D space, producing an exclusion polygon. The text layout engine recalculates against that polygon every frame, with caching to keep the cost down. The result: columns reflow live, captions track the parts of the building they describe, and the whole reading experience treats the 3D model as the page rather than as a decoration on the page.

What this is an example of

A demonstration that editorial typography on the web does not have to be flat. Once layout can react to arbitrary geometry every frame, magazine-quality long-form pieces can wrap, surround and respond to the 3D scenes they describe.

If you want long-form web work that reads as carefully as the magazine it replaces, that is the bar I aim at.