Gems rendering

Yesbird

Greetings !

This is my first post here, so I want to say thanks for supporting this forum and hope for community assistance.

I want to introduce my gems rendering application, containing 2265 different gems design and rendering parameters selection: https://gemview.yesbird.online/ . You can download designs in OBJ or POV-Ray formats and use it free for your projects.

All designs accrued from  this great resource, and using by professional gemcutters at author's permission: https://www.facetdiagrams.org/ .

Any kind of criticism is appreciated.

Eric Chadwick

Hey, this is nice, thanks for sharing! 

Can you talk a bit about your rendering process? How are you rendering the internal refractions in real-time?

I am in weekly calls with The Khronos Group, and a recent topic was gemstone rendering for e-commerce, using glTF models. It would be helpful to use some of these models to figure out a standard for webGL rendering of gemstones. One idea someone had was to include a custom IBL with the gemstone model which would be used for refractions, with high contrast patterns in the IBL. But I think real self-refraction is better, if possible. Another idea was to add bright specular reflections plus a bloom postprocess screen-space effect.

Yesbird

Thanks for kind words, I am glad to find like-minded people here as gemstones rendering is my passion.

I am using Three.js and a customized shader with an environment map, based on these sources:
https://github.com/N8python/diamonds.

You may also look at MeshRefractionMaterial in Drei:

https://codesandbox.io/p/sandbox/diamond-refraction-zqrreo

Although I believe that the IBL approach will work, I agree that real self-refraction is better, as in this case we will be closer to physically-based rendering, although more accurate results can be achieved only with ray-tracing and better with spectral splitting, as I did here: https://github.com/syanenko/povgems.

Reflections plus a bloom post process, I guess, will work less accurately and is insufficient for such demanding objects like gems. In any case it's not possible to predict results without a code - there is a lot of space for interesting experiments here.

If you will provide more information about your discussions with Khronos Group and project requirements I will be happy to be involved and possibly make some contribution.

Eric Chadwick

This is an example of the kind of rendering that was mentioned. A couple members talked about potential clients asking for similar rendering for their 3d assets.
https://showcase.webgi.xyz/?m=jewellery~collibri_ring 

Yesbird

Clear, these guys already have a similar service:  https://www.ijewel3d.com/products/ijewel-sdk
and it's possible to make something like one, having enought motivation.
It can look like my ceramic glazes viewer: https://glazeview.yesbird.online/botz.html 

In addition to real time rendering it's possible to do server-side ray tracing with much better quality, but it will take hardware resources:

https://povlab.yesbird.online/?scene=gem_2.pov

https://povlab.yesbird.online/?scene=gem_3.pov

What is your idea about this project ? Should it be the service, library, shader(s) or what ?

Eric Chadwick

Khronos Group maintains a bunch of open standards, one of which is glTF, for 3d assets. The idea is to standardize a way to render gemstones, and publish a specification so anyone can implement it. 

Yesbird

Thank you for info, right now I found this list of extensions and see that not all are supported by Three.js.
Maybe implementing some of them, most important for gems rendering, will be my next project.


 

Eric Chadwick

Awesome!!

One thing I noticed recently, Three.js doesn’t render alphaMode:Blend behind Transmission, which makes it more difficult to handle surfaces with multiple transparent parts.

For example:

Three.js (left) does not render alpha blend behind tranmission, but Babylon.js does.

Context, and more info: https://github.com/KhronosGroup/glTF-Sample-Assets/blob/1d0cf80c48b1c6ebc1c6b8fa8ed1d932942084d6/Models/CommercialRefrigerator/README.body.md#material-organization