Work HTC VIVE
Eagle virtual try-on
Nobody buys glasses they cannot try on. Eagle had to be tried on in a browser tab, on a phone, with no app to install.
- Client
- HTC VIVE
- Role
- Sole designer and builder — concept, 3D, interface, build
- Year
- 2025
- Markets
- 14
- Stack
- Three.js, MediaPipe, WebGL2
- Install required
- None
Needs a webcam · nothing leaves your device
The problem
Smart glasses are a considered purchase with a fit problem. A customer will not spend several hundred pounds on a frame without knowing whether it suits their face, and the photography that sells every other product category cannot answer that question. The commercial cost is a return rate, and a hesitation before checkout that no amount of copywriting removes.
The ask was to let someone see Eagle on their own face, in the moment they are considering it, without leaving the page they are already on.
The constraints
- Browser only. No app install, no store review, no download before a customer can see anything.
- Phone first. Most of this traffic arrives on mobile, on a mid-range device, over a mobile network.
- Privacy as a hard requirement. Face data could not leave the device, and that had to be provable rather than promised.
- Asset budget. Every megabyte is a customer who leaves before the camera starts.
- Sole builder. Design, 3D, interface and code, on a four-to-six week cycle.
The hard part
Putting a frame on a face is easy. Putting the right size of frame on the right face is not.
A generic overlay slides a fixed model onto detected eye positions, and it looks wrong on anyone whose face is not the average the model was built around. So the app measures the wearer instead. It reads the face landmarks each frame and derives real anthropometry from them — the pupillary distance, the overall face span in centimetres, the depth of the nose and the relief at the bridge where the frame will actually sit. Those numbers drive the frame’s position, scale and the splay of the temples, so a narrow face and a broad one each get a frame that sits where a real one would.
The second half of the problem is occlusion. Without it the temples float over the cheeks and the illusion collapses instantly. A head-shaped mesh is tracked to the face and rendered invisible but depth-writing, so the arms of the frame disappear behind the head exactly as they should. If that mesh fails to load, a procedural approximation takes over rather than the effect failing outright.
Tracking is smoothed in two stages. Raw landmarks jitter, and jitter reads as cheapness.
What was rejected
The first build let customers adjust the fit themselves, through a chip in the corner of the interface that opened a panel of sliders. It worked, and it was wrong: it put a shopper one click away from a panel of engineering controls and quietly made the fit their problem rather than the product’s.
The panel still exists, but it is now reachable only by pressing a key on a physical keyboard, which is unreachable on the touch devices customers actually use. Auto-fit had to be good enough to stand on its own, so the fallback was removed to force it.
What shipped
A try-on running in fourteen markets, in the browser, with no install. Geometry is Draco and Meshopt compressed and textures are KTX2, because the load time is the conversion funnel. The region and language are resolved at runtime before the first status line is written, so nobody sees a flash of the wrong language.
The privacy claim is enforced by the browser rather than by good intentions. A content security policy blocks every off-origin request the page could make — fetch, beacon, websocket, all of it — so face data has nowhere to go even if some future change tried to send it. That turns a promise in a privacy policy into a property of the platform.
What I would change
The auto-fit is tuned against a set of faces that was narrower than the world it shipped to. I would widen that set before the next release, and I would instrument the fit itself, so the model improves from real wearers rather than from my judgement of what looks right.