Weird pixelated effect for translucent/transparent materials (M1 Mac/Chrome)

I’m noticing a pixelated effect for any glassy/transmission-related materials…

https://codesandbox.io/p/sandbox/frosted-glass-imn42?file=%2Fsrc%2FApp.js%3A12%2C1-13%2C1


This is across projects/demos in Chrome/Safari on my M1 Macbook Pro.

It’s making me hesitant to use react-three-fiber since I need glassy effects for my design to work.

1 Like

I’m also seeing this issues on my windows machine with a 1080

cc @drcmda it looks like adjusting the “samples” field doesn’t have any effect? I expected raising that number to smooth things out.

i think its a platform or browser issue. i first thought it’s a code regression because it didn’t look like that but i went back to the oldest untouched examples which all used old versions including three, and they suddenly were broken. all sandboxes i tried. the shoe for instance is supposed to appear like this: https://twitter.com/0xca0a/status/1621547956661805059 it had a uniform, noise-based roughness.

i have no idea what cold have caused it, or how to fix it.

i will show @N8Three this topic, the author of meshtransmission. perhaps he knows what could have happened.

it looks like adjusting the “samples” field doesn’t have any effect? I expected raising that number to smooth things out.

yes that’s how it used to be, although even with low samples it looked grainy but beautiful. you could make this frosted glass look with it.

intentional or not i think it looks cool

i’ve made a sandbox fork with that material in a local file Frosted glass (forked) - CodeSandbox if somebody wants to have a deeper look at it.

n8 figured it out, it’s fixed! and looks beautiful again :smiley:

2 Likes