Hello All,
I have created diamond rendering in webGL/three.js.
Here are the videos::
14 Likes
Looks great! 
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 
. Other passes I use for post processing are Bloom and FXAA.
3 Likes
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
@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 
2 Likes
Got a link to live demo?
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.
Super nice!
Very cool! 
Is the diamond shader something you could share? It would be amazing if there was a codepen demo!
2 Likes