Refraction issues with no background

Questions
,
1

Hello, BabylonJS community!

We have an issue when using a refractionTexture with PBRMaterial.
As you can see in this playground, we have a glass which matches what we are looking for:

But when we remove the background (clearColor), the glass becomes dark:

I guess as there is nothing behind it to show, only the refraction remains thus the dark :thinking:

We do manage to have a glass effect using alpha/metallic/roughness:

Unfortunately, in that case, the glass is not that good. We lose the “blur transparency” that we see on the handle in the first example. I also played with the subSurface.isRefractionEnabled parameters to see what we could achieve but I didn’t manage to have that blur effect.

Is there a way to have refractionTexture working even without a background?
Or can we have that “blur transparency” using PBR and subsurface options?

Thanks a lot for your help, Pichou

2

What you are asking does not sound possible as the canvas would need access to the rendering of the web page itself to blur what is rendered behind.

3

That’s what I thought. I understand that we absolutely need a background for refraction to work.
I wanted to make sure with you guys in case I missed something :wink: