Background not visible through MeshPhysicalMaterial

Hi there,

does anybody know how to make the canvas background color visible through MeshPhysicalMaterial?

I’m setting the background with:

<color attach="background" args={["#EDEDED"]} />

And thats my Physicalmaterial:


Here is how it looks like throgh the glass its completely white, but it should be greyish:

The background outside the glass also looks white here, perhaps you have fog enabled? The subset of code you’ve shared looks fine, but isn’t enough to reproduce the issue.

Here is a codesandbox of what i mean:

to make it more clear i gave the background and fog another color:)

Setting <Canvas gl={{alpha: false}} /> will fix the issue, but I’m not sure why that’s necessary – this could be a bug.

For me it does not fix the issue:

Do you see the same thing for this fork? I’ve chosen a different fog vs. background color intentionally.

Yes i see the same as in your image. The main thing that bothers me is that im using the fog and the background for a seemless background. With the glass the seemless background does not work… is there another way to achieve this?

If mpm doesn’t support fog have you tried meshTransmissionMaterial? Though … it’s probably the same because it’s based on the same shader but maybe worth testing.

mtm works. :see_no_evil: this seems to be a bug in threejs/mpm, probably a recent one as i’ve never seen that before, and it would explain why drei works as it bases on physical from a few months ago and hasn’t been touched since then.

in any case, i would prefer mtm anyway, i like the transmissive shader more, it looks more realistic and has more options. (try the comparison)

ps, you don’t need any of the canvas settings, it is filmic and srgb by default, it’s just this

<Canvas shadows camera={{ position: [3, 1.7, -2], fov: 50, near: 0.1, far: 20 }} >
1 Like

Ahh you are right, with mtm it works as expected for me:) Thanks alot.

PS: I know, but sometimes i declare it anyways to keep it in mind :slight_smile: