Business context
The client is a jewellery retailer selling rings online. Buyers want to see how a design looks before they commit, and gems are hard to judge in photos.
The challenge
The client wanted a 3D configurator for jewellery where customers can try on different design choices. Gems had to look convincing in a browser, which means light that reflects and refracts like real stone.
Our solution
We built a web-based application with three.js to configure a ring and try it on in augmented reality mode, using custom WebGL shaders for the gems.
- WebGL shaders for gems including diamond, emerald and ruby
- Simulation of reflection and refraction
- Customization of the ring geometry and dimensions
- Augmented reality try-on
Business impact
A realistic look and feel of the product.
- Customers compare gems and settings themselves instead of relying on a fixed set of photos
- The AR try-on shows the ring on the customer's own hand before purchase
