@Evgeni_Popov Thank you for your reply. Needless to say, it would be so awesome, if HDR was an option in Babylon.js.
As HDR was a requirement for my web app use case, I did start writing the specific shaders directly in WGSL this year. I can only express enthusiasm about the technology.
Well, I have some experience in this area, so let me share a few insights.
Regarding the Metal:
Environment: I recommend picking an HDRI in any 3D app and converting it to an .env file first. It’s much more convenient than handling it directly in Babylon. While you can use HDR files directly, there’s usually a loading delay, and overall performance isn’t as smooth.
Geometry: Ensure your mesh has enough polygons to look smooth with Smooth Normals (in Blender, just right-click and select “Shade Smooth”). Keep in mind it’s for the web, though—10k to 15k polys should be plenty for a relatively simple piece of jewelry.
Materials: Finally, just tweak your PBR material settings to achieve the look you want!
Regarding Diamonds (this is where it gets tricky): There are three ways to go about it:
Multi-layered Mesh: Create a “fake” multi-layered mesh. This only works from a distance to create a basic impression of glints and refraction.
Render Target Texture: You can try using a RenderTargetTexture as a refraction map to get a few fake refractions. It’s not perfect, but it’s better than nothing. I discovered this trick when exporting from Keyshot to GLB, where it automatically generated an OpaqueTexture.
Custom Shader (The Best Way): This is the only truly effective method, and it’s what we used. Keep in mind that a typical Raymarching shader from ShaderToy probably won’t fit your needs, as you need to work within the limits of existing diamond meshes and calculate based on real geometry.