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.

https://sketchfab.com/3d-models/gems-92ff52fe0f2e44bc877c133191df7195

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.

wQOW3

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

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: GitHub - amsXYZ/three-multifaceted-refraction: Three.js project which explores multifaceted refraction using convex geometries, and the physical phenomena involved in it.

(Demo: AMS - Multifaceted Refraction)

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 ?

I have the same problem, check out this link: https://threejs.org/examples/?q=refle#webgl_materials_physical_reflectivity and if you find a solution please inform us.

Im late to reply, but this is my sum, i continued to play with this and i manage to produce some half result, i solved this by using this way same as i wrote in my first post, i added two cameras, one for texture, another for main scene, first i render scene with backface using diamond texture, then using camera texture i add same image in basic threejs shader for reflection. Its not true refraction but you can get some simulation at some level.

I abandon the project for now, because without writing a proper diamond shader this cant be done in a way my boss wants (he wanted to be close as actual render from maya, modo).
This way that i tried have many flaws, moving camera at some angles will totally break texture, and using proper texture if you have a lot of stones will also break texture if you want to change the different color of each stone, it will break, if you want to change size and shape also will break.

This is what i manage to do with shader simulation using basic threejs stuff, unfortunately i dont know how to write shader so i stoped working on this until i found easier solution or someone manage to write shader for threejs.

image

3 Likes