Any ideas how to make a refractive glass more realistic?

Questions
1

Hi,
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:

image
image1418×1066 27.2 KB

To make it even harder the backgrounds needs to be this clean grey. Using textures the refraction is way more convincing;
image
image1006×1103 60.8 KB

The setup is quite simpel right now, no post processing, just default shaders
Any ideas how to fake this dark areas?
image
image1791×869 71.3 KB

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,
mario

2

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.

3

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
4

I will look into this thanks for the hint!

5

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:

image
image1098×1081 21.3 KB

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.

6

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.

7

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.

8

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

image
image1007×952 55.3 KB

  • 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