Real Time Diamond Rendering

Hello All,

I have created diamond rendering in webGL/three.js.
Here are the videos::

Many Diamonds

Diamond Demo


Looks great! :star_struck:
How many passes is it?

Single pass for the diamonds. its not a screen space effect. I am doing ray tracing inside each diamond, so its a new shader material. Fresenel reflection, refraction, TIR, dispersion are kind of taken care off. Interestingly it runs well on mobile also :slight_smile:. Other passes I use for post processing are Bloom and FXAA.


Well, for sparkles, I use another pass, which is sort of in screen space.

Do you have to have some implicit function for each of these shapes, or are you somehow using triangles? At a high level how does this work :slight_smile:

@pailhead, I don’t intersect with triangles. its too complicated to do that in webGL, and will be expensive. For all the diamond I use sphere as a proxy for intersection. However to reflect/refract the ray, I use a normal cube map of the diamond itself. There are many other hacks as well. But yeah, that was kind of an overview :wink:


Got a link to live demo?

@trusktr, Sorry, not yet. Will do it in near future.

1 Like

Looks great!

Ideal cut diamonds also have a distinctive arrows pattern on the top:

There is a piece of software that renders this for Windows, but not quite in real time: you have to pause after rotating the diamond around.

Live demo here::


Super nice!

Very cool! :+1:

Is the diamond shader something you could share? It would be amazing if there was a codepen demo!

1 Like