Real Time Diamond Rendering


#1

Hello All,

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

Many Diamonds

Diamond Demo


#2

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


#3

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.


#4

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


#5

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:


#6

@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:


#7

Got a link to live demo?


#8

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