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.


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.