An X-ray lens over a WebGL object

A thrown vase in live 3D, with a lens that shows how it was drawn.

03 / WebGL

Sampleton Ceramics · Studio pottery

Thrown by hand. Seen right through.

Every piece is wheel-thrown in Hertford. Rest the pointer on the vase: the x-ray develops through the glaze to show how it was built.

See this season's pieces

Remake it

Build one interactive web page: A thrown vase in three.js turns towards the cursor, while a lens reveals its construction drawing: two render passes composited in a shader.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A product whose making is the story: ceramics, furniture, engineering, anything with an inside worth seeing. Do not let it fail the way this kind of piece usually does: No image underneath: if WebGL fails, the subject vanishes. This one keeps an SVG silhouette of the same profile.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.

Notes: when it suits, when it does not, how it fails

When it suits: A product whose making is the story: ceramics, furniture, engineering, anything with an inside worth seeing.
When it does not: A client with no object to show, or visitors who need the facts in the first five seconds.
How it fails: No image underneath: if WebGL fails, the subject vanishes. This one keeps an SVG silhouette of the same profile.

Measured on: landonorris.com · T9. Built from scratch for an invented business; nothing here comes from the site studied.