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:
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.
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.
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:
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.