Glass bottles effect?

[MrMateo07]

Hi everyone!
I’m building a site, mi problem is the bottle glass looking and with transmission can’t reach a nice effect, realistic, looks more like plastic.

nothing can be seen through the bottles, there is the material

const botella_mat = new THREE.MeshPhysicalMaterial({
    color: 0x0a3100,
    normalMap: imagesLoader('Normal-Botella.png', 'Linear'),
    metalness: 0.65,
    roughness: 0.25,
    envMapIntensity: 1.5,
    opacity: 1,
    // transparent: true,
    transmission: 1,
    clearcoat: 0.25,
    // clearcoatRoughness: 0.2,
    // side: THREE.FrontSide,
    specularTint: new THREE.Color(0x051800)
})

Now, when I turn ‘transparent in true’, this is what happens

Any help here?
Live example: https://clubpremium-v2.netlify.app/
“three”: “^0.133.1”

[donmccurdy]

Transmissive materials:

• should never be metallic. There are physical reasons for this, but to summarize, keep metalness=0 for these materials.
• do not require transparent=true
• show only opaque materials behind them — not other transmissive materials

For a bit more detail on current limitations, see: three.js#22009

[MrMateo07]

After a little andjustments following you advices and postprocessing. This is the result.

And that little blur in the objects behind, is just the perfect touch.

Thanks sensei!

[drcmda]

one trick is to spike the thickness to extreme levels, that can really give you some glas like effects: Aesop bottles (forked) - CodeSandbox

[MrMateo07]

This is a nice trick, the perfect touch of distortion, thanks!

But I wasn’t using it because is not in documentation, I don’t know that modify the Thickness was possible!

[amvdxc]

is there any way to fix the issue of pixelation of other materials between or around the transparent one? also, wanted to say thanks, I’ve learned so much from you over the years.

[donmccurdy]

I think the only workaround for that pixelation at the moment is to reduce or increase roughness. Roughness values in the middle of the [0,1] range tend to have more pixelation. Or (more advanced) you could modify the three.js library locally to have higher resolution for the transmission render target, but this reduces performance and needs to be a power-of-two size.

[amvdxc]

the roughness seems to help! I am noticing though, that with a meshStandardMaterial with a color map or color applied, the pixelation occurs, but if you apply a canvasTexture to this material instead, there is no pixelation issue, which I find pretty interesting! It seems like having a high roughness ( maybe a value higher than 0.5 or so?) with a base color or color map kind of disperses the texels at the edges outward (i have no idea what I am talking about here but thats what it kinda looks like is happening – like a spray paint effect almost) anyhow many thanks for the pointer! – also, a value of 0.01 roughness seems to tame the pixelation to a near non noticeable level!

[donmccurdy]

I have no idea why a CanvasTexture would change the perceived transmission resolution, maybe something to do with the minFilter/magFilter mipmap settings? Could be worth filing a bug about if it’s simple to reproduce.

[makc3d]

@donmccurdy

Transmissive materials:

• should never be metallic

how do you control their reflectivity then

[donmccurdy]

.roughness is the property to use for that:

[amvdxc]

still haven’t made a repro but will once I get some free time. I noticed on your gltf viewer, the pixelation issue doesn’t exist (though the pixelation occurs when I use the same model locally). Is that due to the script you wrote about in your blog post on volumetric refraction?

[donmccurdy]

Hm, no I’m not aware that I’m doing anything that would reduce pixellation in transmission framebuffers. Perhaps related to some other viewer setting like antialias or pixel ratio? You can find the full code here: three-gltf-viewer/viewer.js at 890e4bc84d203058a6f2673e2b6f3ff19b6a3e5b · donmccurdy/three-gltf-viewer · GitHub

[amvdxc]

thanks, I’ll take a look at that for sure! much appreciated.

[amvdxc]

It seems like 138 had some big changes to the meshPhysicalMaterial, upgrading package versions made all the difference.