# Real Time Diamond Rendering

**URL:** <https://discourse.threejs.org/t/real-time-diamond-rendering/4284>\
**Category:** Showcase\
**Created:** [September 29, 2018, 1:11pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284 "2018-09-29T13:11:08Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [September 29, 2018, 1:11pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/1 "2018-09-29T13:11:08Z")

</div>

Hello All,

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

[Many Diamonds](https://www.youtube.com/watch?v=UjUAZgCy3iU)

[Diamond Demo](https://www.youtube.com/watch?v=0UvrjQC-n2I)

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [September 29, 2018, 2:31pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/2 "2018-09-29T14:31:54Z")

</div>

Looks great! 🤩  
How many passes is it?

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [September 29, 2018, 3:27pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/3 "2018-09-29T15:27:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [September 29, 2018, 3:37pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/4 "2018-09-29T15:37:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [September 29, 2018, 8:37pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/5 "2018-09-29T20:37:03Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [October 1, 2018, 5:27am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/6 "2018-10-01T05:27:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [October 4, 2018, 7:07am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/7 "2018-10-04T07:07:55Z")

</div>

Got a link to live demo?

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [October 4, 2018, 1:00pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/8 "2018-10-04T13:00:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sparks](https://avatars.discourse-cdn.com/v4/letter/s/ee7513/32.png) [@Sparks](https://discourse.threejs.org/u/Sparks)\
**Post date:** [December 13, 2018, 10:04pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/9 "2018-12-13T22:04:26Z")

</div>

Looks great!

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

![](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b89a9208368579649f2eaf4a58805772f4ae4633.jpeg)

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](http://www.octonus.ru/oct/download/adviser_demo_down.phtml)

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [April 6, 2019, 11:54am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/10 "2019-04-06T11:54:48Z")

</div>

Live demo here::

[http://pixotronics.com/](http://pixotronics.com/)

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [April 6, 2019, 12:05pm UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/11 "2019-04-06T12:05:01Z")

</div>

[http://pixotronics.com/](http://pixotronics.com/)

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [April 7, 2019, 12:42am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/12 "2019-04-07T00:42:18Z")

</div>

Super nice!

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 8, 2019, 10:03am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/13 "2019-04-08T10:03:15Z")

</div>

Very cool! 👍

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [July 16, 2020, 4:19am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/14 "2020-07-16T04:19:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Abdullah\_zafar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abdullah_zafar/32/65201_2.png) [@Abdullah\_zafar](https://discourse.threejs.org/u/Abdullah_zafar)\
**Post date:** [January 14, 2026, 9:39am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/15 "2026-01-14T09:39:10Z")

</div>

Is there a CodePen link you can share? The link you provided is redirecting to ijewel3d. Thanks.

---

<div class="post-metadata">

**Author:** ![rubjo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rubjo/32/73688_2.png) [@rubjo](https://discourse.threejs.org/u/rubjo)\
**Post date:** [October 15, 2026, 9:35am UTC](https://discourse.threejs.org/t/real-time-diamond-rendering/4284/16 "2026-10-15T09:35:01Z")

</div>

[gemrenderer: real gemstone cuts, ray-traced in the browser](https://rubjo.github.io/gemrenderer) might be useful.

> **[GitHub - rubjo/gemrenderer: Render gems!](https://github.com/rubjo/gemrenderer)**
>
> Render gems!