Rendering many diamonds at once with refraction

· 1 min read · react-three-fiber, three.js, diamonds, refraction, launch

Several diamonds with sparkling facets and a metal setting rendered in 3D with refraction

One diamond is a refraction problem. Many diamonds at once is a performance problem on top of it, because each facet means more light bouncing inside the stone. This demo was built to show that Three.js and React Three Fiber can render several diamonds together, with convincing sparkle and depth in real time.

Diamonds in the renderer

What it uses #

  • a refraction material that gives the stones their depth and sparkle,
  • ambient occlusion and contact shadows, to seat the stones in the scene,
  • 3D mesh optimization, so the geometry stays cheap,
  • a custom component to swap diamond and metal colors on the fly.

What came after #

I moved this line of work to WebGPU and TSL, and there is a video of it: ultra-realistic diamond rendering in WebGPU and TSL. The jewelry configurator page shows it in a product.

Try it #

The renderer is live at andersonmancini-diamond-renderer.vercel.app, and the details are on the project page.

Related projects