Unique Jewelry: an ultra-realistic diamond configurator

· 1 min read · three.js, webgl, jewelry, configurator, launch

A diamond ring on a dark background with sparkling facets, the Unique Jewelry configurator

A diamond is a hard thing to render, and an easy thing to get wrong. It is almost all refraction: light goes in, bounces inside the stone and leaves split into colors. Unique Jewelry is a landing page that tries to do that in real time, in the browser, with the quality of a brand campaign.

A diamond ring from the Unique Jewelry page

What you see #

The page is an editorial scroll about the stone, and a configurator that you can open at any point:

  • Physically accurate refraction, dispersion and sparkle, rendered live.
  • Swappable stones and metals, and fancy colors, changed on the fly.
  • Remembered choices. Every configuration is kept as you explore, so when you go back to one, the ring picks up exactly where you left off. Comparing options feels effortless.

The aim is for high-end jewelry visualization to feel as refined as an advertisement and stay fully interactive.

More on diamonds #

I have kept working on the same problem. There is a newer video of diamond rendering in WebGPU and TSL, a short one of jewelry on Apple Vision Pro and the diamond renderer project.

Try it #

The page is live at webgi-jewelry.vercel.app, and the details are on the project page.

Related projects