Refraction texture issues

Hey!

I’m currently experiencing a strange issue with the refraction texture in orthographic camera mode.

Steps to reproduce:

  • Open Babylon.js Playground
  • With your mouse wheel, scroll forward until your left edge of the canvas hits the fridge door

You will see some partial reflections of the floor in the fridge door:

@Evgeni_Popov might it be related to our latest refraction changes ?

It’s not related to our latest changes, there’s the same thing in 4.2

I think that’s because we are trying to lookup the texture outside its range because the refracted rays go outside the texture. It’s possible to mitigate a bit the artifact by clamping the transmission helper texture:

https://playground.babylonjs.com/#2JCKYB#1

You still have artifacts because there’s no way around it (except maybe by rendering a larger scene for the refracted texture, but that would not be artifact free in all cases anyway).

In any case, I think what you want is a reflection and not a refraction as you are simulating a mirror.

1 Like

Thanks for the answer!

I do actually want to actually have refraction, not reflection - that’s why I was a bit confused why it appears mirrored on the edges.

So besides texture clamping, there is no other way to fix it to actually look ok? If so, I’ll need to figure out something else!

I don’t see how to do it…

You could try light probes for it ?

Would that help with refraction? I thought that this was only for reflections?

A light probe creates a cube texture of an environment that you can use as a reflection or refraction texture.

2 Likes

https://playground.babylonjs.com/#2JCKYB#2

What am I doing wrong here? Would I need to do any other processing on it?
Can’t find many docs on light probes except Reflection Probes | Babylon.js Documentation, so I’m not fully sure if this is the correct way this should be done.

You must set the probe position as well as the refraction texture position and bounding box to try to fit the cube map as best as possible:

https://playground.babylonjs.com/#2JCKYB#4

I have set the position in front of the fridge, so if you look straight into it from that position or near that position, you can see the inside of the fridge without distortion:

1 Like

Ah, ok! In the end, it seems to be quite more hassle than I initially expected for such a small detail, so I may just omit the glass or turn the alpha down and see if that will work in the final scene!
Thank you for your help!

1 Like

Actually, there’s a way to make your first PG artifact free, it is to set the depth property of the refraction texture to a small value. By default it is 1, by setting it to 0.2 (and clamping the texture), artifacts are invisible:

https://playground.babylonjs.com/#2JCKYB#5

2 Likes

Oh brilliant, thank you very much! :slight_smile: