Hi all!
I’m trying to achieve a similar effect to the CSS backdrop filter, something similar to ‘frosted glass’.
To do that I’m trying to use MeshPhysicalMaterial transmission and I ‘blur’ it applying a bit of roughness.
This is how the settings look like:
new THREE.MeshPhysicalMaterial({
color: 0xffffff,
transmission : 1,
roughness : 0.5,
});
The problem is when I move the camera, which by the way is an OrthographicCamera, the ‘content’ of the material is ‘flickering’. Here is a video of what is hapenning:
I’ve tried to play with all the settings of the MeshPhysicalMaterial to try to fix it with no luck. Intuition tells me the ‘ior’ has to do with it, but no value of it fixes it unless you turn it off, but then you loose the blurring.
I also checked the official transmission example and something similar happens there too, it’s like the blurred texture/buffer used to perform the transmission internally is going back and forth when you move the camera:
One interesting thing is this problem doesn’t happen in the Spline app which uses Three.js under the hood. I know they have their custom code for some things, but in their editor it says they are using a MeshPhysicalMaterial for the ‘glass’ effects too, maybe an improved custom version?
Here is an example of the same effect without the ‘flickering’ in Spline:
https://app.spline.design/library/9b45525e-d8ac-43a7-91d1-73d2cd12e5ff
Any idea how to prevent this ‘flickering’? Maybe it’s something to improve in the transmission implementation and I should raise an issue in the repo?
Thx!