Definitive glass material

Questions
,
1

Hi guys!
I’m trying to create a glass goblet but I cant reach an accurate nice glass effect.

This is the model

image
image511×514 20.7 KB

and this is the result with a MeshPhysicalMaterial

image
image773×482 197 KB

const calizStella_mat = new THREE.MeshPhysicalMaterial({
        metalness: 0,
        roughness: 1,
        envMapIntensity: 0.9,
        clearcoat: 1,
        transparent: true,
        transmission: .95,
        opacity: 1,
        reflectivity: 0.2,
    })

As you can see, those goblets dont look like glass. I’m using an equirectangular envMap for illumination. That’s all.

Any help?

2

Alone, the transmission property in THREE.MeshPhysicalMaterial can be thought of as representing an infinitely-thin glass surface, with no refraction. With that in mind, the effect you’re seeing above is correct, although I think perhaps you might also want roughness=0.

What you are probably hoping to see is refraction, such that light appears to bend while passing through the glass surface, as you see in some of these examples? glTF/README.md at f616d7b25e09bec474148afdb98d1aa671f9bff7 · KhronosGroup/glTF · GitHub

The short answer is, that is a fairly advanced effect and not generally well-supported in realtime renderers like three.js. But you might be able to improve things by changing the .ior property, and reviewing this refraction example: three.js examples

1 Like
3

Well those suggestions works pretty well. BUT…

image

in this case, talking about a thin glass setting de side on Backside and turning off the Transmission was the best choise, changing it for opacity and setting high the metalness. Give these results.

const calizStella_mat = new THREE.MeshPhysicalMaterial({
metalness: .9,
roughness: .05,
envMapIntensity: 0.9,
clearcoat: 1,
transparent: true,
// transmission: .95,
opacity: .5,
reflectivity: 0.2,
refractionRatio: 0.985,
ior: 0.9,
side: THREE.BackSide,
})

This just give me a question, something like this was not supposed to be gived by the transmission? The shine and volume of the shape are waaay better in this second method.

4

Perhaps eventually transmission will work more like you were expecting. With the right settings it might also have given this effect now, although I’m not sure. Some future goals for the transmission effect are described in GLTFLoader: Support KHR_materials_transmission physically-based transparency · Issue #21000 · mrdoob/three.js · GitHub.

1 Like