Any ideas how to make a refractive glass more realistic?

Im building a webgl product viewer for a client in threejs. The products are mostly ceramic, chrome and … glass.
The goal is to match webgl as close as possible to given CGI renderings. Im quite happy about ceramic and chrome setup using meshPhyscialMaterials. With glass on the other hand I was not yet able to achieve the look I need. The MeshPhysicalMaterial settings I used:

To make it even harder the backgrounds needs to be this clean grey. Using textures the refraction is way more convincing;

The setup is quite simpel right now, no post processing, just default shaders
Any ideas how to fake this dark areas?

I know its quite impossible to achieve this without raytracing but maybe it could be faked with some shader magic? Or rendering different passes? If anyone can point me in the right direction I would be very grateful! All ideas are welcome.

Best regards,

MPM imo is not good for that. while it’s still not raytracing try meshtransmissionmaterial, at least it will include backsides which MPM won’t and without that it’s almost futile to try.

MTM is available for vanilla. search for it here or google.

Baking a thickness map could also get you further perhaps, with a slightly darker attenuation color. I am curious about those dark areas on the raytraced renderings though, I don’t think that’s just attenuation color… maybe this is a strong studio-like lighting setup, with dark areas of the room (offscreen) reflected and refracted? You could simulate that with something like THREE.RoomEnvironment maybe.

1 Like

I will look into this thanks for the hint!

Is THREE.RoomEnvironment differnt from setting a hdr map as env? I followed your advice and a strong studio lighting with dark areas will get better result. Although, when using transmision, it will only refract whats around / behind the object in screen space i guess? So i played a little bit with my background (which is a GroundProjectedSkybox btw) and its the direction im heading:

Would it be possible to render an extra pass like this and compose it to the original background (with only the mesh as alpha?)
I didnt try thickness maps yet, will do so.

Same effect. THREE.RoomEnvironment is just a way to generate an HDR map on the fly from a simple three.js scene, rather than loading a texture.

Although, when using transmision, it will only refract whats around / behind the object in screen space i guess…

I believe that’s correct. Might be possible to modify this somehow to use a cubemap instead, but I don’t know of an example for that.

I recently had to do a similar render, and pretty much used the same settings you did in your original post. I was able to get a bit closer to the intended result with a combination of thickness map, high reflectivity and higher envMapIntensity.

The problem with glass rendering is that glass is mostly perceivable because of two factors; refraction and reflection. Since a clean background gives you nothing to refract, you could double down on the reflection, which is what I did.

Adding any random geo around (or on) the glass will instantly make it look more convincing. This is an issue regardless of the renderengine I think.

I think I found a simple solution to replace the refraction in the background:

  • Create a sphere
  • Give it a MeshBasic material with front face culling
  • Set stencil buffer settings
 refractMat.stencilWrite = true;
 refractMat.stencilRef = 0;
 refractMat.stencilFunc = THREE.NeverStencilFunc; 

This will make the background only visible for the refraction