ThreeJS diamond reflection and refraction

Im experimenting with three js and trying to make diamond. I found a couple of examples with shaders and without but what cache my curiosity is this sample from sketchfab. Its seems that its not using shader but there is some trick how diamond look is achieved, like you using backside of diamond texture while moving camera and adding other effects, or maybe im wrong.

I tried to render first backside of diamond with cubemap environment and use rendertarget cubecamera, then i render second scene where im using previous scene as a texture with reflection and refraction but no results so far.

Does someone have any idea how this can be done, i would really like to hear your opinions how you would bulid this? Thanks.


so far with my approach as i mention above this is the result, but it so far from sketchfab, faces are like broken, diamond star is not in the centre, and if you pan object, texture will broke and object will become partly black.

Not sure whether this is what you are looking for, but have you tried to this THREE example?

Yeap i tried that a long time ago, but its not gonna work in this case

You can maybe check my implementation of multifaceted refraction (plus dispersion) here:


Of course, it refracts only through the back and front faces (while diamonds have inner cuts which make the light paths more complex), but with the right 3D model and a couple of more passes that accumulate the refracted normal over all the inner faces, you could get a pretty close result to what you look for :slight_smile:

1 Like

wow thank you, i will play with this and post the results

This is nice! Do you know how it might compare to Real Time Diamond Rendering ?