# Rendering many diamonds at once with refraction

> A React Three Fiber demo that renders multiple diamonds with convincing sparkle and depth, with ambient occlusion, contact shadows and color swapping.

Canonical page: https://andersonmancini.dev/blog/diamond-renderer-multi-diamond

Published: 2026-08-13 · 1 min read · Tags: react-three-fiber, three.js, diamonds, refraction, launch

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](https://andersonmancini.dev/images/thumbs/mancini_renderer.webp)

## 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](https://andersonmancini.dev/videos/threejs-ultra-realistic-diamond-rendering-using-webgpu-and.md). The jewelry [configurator page](https://andersonmancini.dev/projects/unique-jewelry.md) shows it in a product.

## Try it

The renderer is live at [andersonmancini-diamond-renderer.vercel.app](https://andersonmancini-diamond-renderer.vercel.app/), and the details are on the [project page](https://andersonmancini.dev/projects/mancini-diamond-renderer.md).

## Related projects

- [Mancini Diamond Renderer](https://andersonmancini.dev/projects/mancini-diamond-renderer.md) — Multi-diamond refraction with React Three Fiber