Real Time Diamond Rendering

#1

Hello All,

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

Many Diamonds

Diamond Demo

10 Likes

Adding New Project Page Link
#2

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

0 Likes

#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.

2 Likes

#4

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

0 Likes

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

0 Likes

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

2 Likes

#7

Got a link to live demo?

0 Likes

#8

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

1 Like

#9

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.

http://www.octonus.ru/oct/download/adviser_demo_down.phtml

0 Likes

#10

Live demo here::

http://pixotronics.com/

2 Likes

#11

http://pixotronics.com/

0 Likes

#12

Super nice!

0 Likes

#13

Very cool! :+1:

0 Likes