Context
The experience places a 3D frame over a camera view so a customer can explore how the style looks on their face. A detailed 3D source file is not automatically a useful browser asset.
The challenge
Reduce the model weight while retaining the frame’s shape. Keep the lens tint separate from the metal. Position the frame against face landmarks and manage how the temples appear as the head moves.
The work
- Optimize the asset. The 86.9 MB source was reduced to an initial 2.1 MB version, then a 2.36 MB version with separated lens geometry.
- Separate materials. The final model contains 41,765 frame triangles and 8,234 lens triangles. This makes lens tint and transparency independently adjustable.
- Connect tracking and rendering. MediaPipe face landmarks feed a Three.js rendering workflow integrated into the Shopify product experience.
- Refine the interaction. Calibration, temple occlusion and photo capture are part of the documented implementation.
What changed
The final file is roughly 97% smaller than the raw source. That is an asset-size comparison, not a measured page-speed or conversion improvement. The product now has a purpose-built model and a documented camera-based interaction.
Where testing continues
Calibration was completed in September 2026. Android and Instagram/Facebook in-app browser checks were still pending at that point, and the product-gallery experience remained a separate improvement area.