Refraction effect for diamond material?

[DuhDamn]

Description

I have been trying to achieve refraction effect on the material for my diamond model and would like your expertise to help me achieve the effect as shown in the following. I would like to stick to modelviewer itself rather than using other libraries.

[elalish]

For this you will need the brand-new glTF_materials_volume and glTF_materials_ior extensions, which are on the verge of ratification. Then we'll need to implement them in Three.js. We're working on it, but it'll take some time to get right. And even then, you will not get a render quite as fancy as you show, since for real time on mobile GPUs we need to make many simplifying approximations.

[elalish]

You can start here: https://www.khronos.org/blog/using-the-new-gltf-extensions-volume-index-of-refraction-and-specular

I believe Blender supports them. You might also want to check out the various presentations Khronos is doing on AWE 2023 in a couple weeks (I'll be speaking on some of these panels). I believe Khronos will be making them available online after the conference as well.

[jaabathebutt]

Hi @elalish Thank you for your support
I'm new to Model Viewer and not even a coder. If I want to master this, please share what skills and languages I need to learn.
Can you help me point in the right direction if I want to create something like a diamond ring customizer that loads GLB models on the go?
I exported a 3D model of a diamond with Glass material and it's not rendering the same in the Model Viewer editor.
Thank you for all the help.
Appreciate it.

[elalish]

Diamond rendering is really hard to do well and MV doesn't have anything special for it. I'd recommend you look at using something designed for the purpose e.g. https://www.pixotronics.com/ijewel.html

[jaabathebutt]

Thank you. I'll check that out.
In the meantime, I was doing some research and found Threekit's Ring Configurator here
Their viewer is also using Khronos assets.
I'm not sure what exactly but it looks and works very well.
Would appreciate if you could share your thoughts on this.
Thanks.

[elalish]

Threekit is great - @bhouston even contributes here from time to time. I didn't know they had a ring product, but I trust them to do a good job.

[ChrizTV]

Tips for ModelViewer Refraction Effect on Natural Diamond

Tweak material properties like refractive indices.
Use ModelViewer's tools, avoiding extra libraries.
Optimize lighting for better results.
Test and adjust settings iteratively.
Seek community feedback for insights.

[henrik-dons]

Hello all,

I'm also trying to get refraction effects into a diamond ring in ModelViewer

See attachments: one from Blender, where it looks allright.

Link to example diamond GLB file: https://www.cgtrader.com/items/4601352/download-page

The other one when I preview in ModelViewer. As you can see, the material remains white

Can such effect be achieved in ModelViewer? Or can I expect support for this in the near future?

Looking forward to your reply

[elalish]

Yes, you'll want to author your GLB with the KHR_materials_transmission and KHR_materials_volume extensions. maybe IoR too. However, realtime rendering is still not going to be as nice as path tracing.

[jaabathebutt]

I tried a lot and ended up using a different library & model viewer featuring path tracing (I believe I got the term right, please let me know if I'm wrong).
Here's the link
I added two model viewers to the page and they work fine across desktops, tabs, iPhones, etc.

[henrik-dons]

Yes, you'll want to author your GLB with the KHR_materials_transmission and KHR_materials_volume extensions. maybe IoR too. However, realtime rendering is still not going to be as nice as path tracing.

@elalish Thanks. Do you also plan to add support for KHR_materials_dispersion extension?
https://github.com/KhronosGroup/gltf/tree/main/extensions/2.0/Khronos/KHR_materials_dispersion

I coudn't find these functions in the docs, so I'm not sure if this is supported already?

[elalish]

Yes, I believe we already pulled upstream support for that from three.js. Drop one of the test assets in our editor and you should be able to see for yourself.