With the standard material, I’m able to use the refraction texture with good results:https://playground.babylonjs.com/#22KZUW#166
However, when trying to use it on a PBR material, I’m having issues:
https://playground.babylonjs.com/#22KZUW#170
I tried to use the values of this topic (How to refract water bottle - #4 by Dong) but it does not seem to work for me.
Does someone know what’s the issue here?
I think you should not use the linkRefractionWithTransparency setting:
Hi @Evgeni_Popov thanks for your quick answer.
Works flawlessly now! However, there is another issue that I’m having when using two of these refraction based materials.
The refraction is made based on a screen texture without the related object. However when using two of these, the result is a black object when looking at the other through the refraction.
It makes complete sense, since the refraction texture is made before applying the refraction to the sphere.
However, is there a way to overcome this hassle?
I don’t really know how it works in your PG as you give an invalid refraction plane: (0,0,0,0) is not a valid plane…
When giving valid planes which correspond to the mirror position:
https://playground.babylonjs.com/#22KZUW#193
Hi @Evgeni_Popov Alright, this is already a big improvement.
However, there is another problem when looking at it from the opposite angle. What’s best to do here to make it work perfectly from all angles? Update the planes based on the camera position?
You could try to use two hemispheres and have a refraction texture for each but it would still fail for some angles (I have only replaced the green sphere by 2 hemispheres):
https://playground.babylonjs.com/#22KZUW#195
Updating the planes according to the camera position seems to work ok:
@Evgeni_Popov You have no idea how much you’re helping, thanks so much!
Making so many different refraction textures might become an performance issue sadly. So I hope I can make your second example work from any angle.
The plane update seems to work perfectly for the green sphere because it’s at the center of the orbit for the camera. But I can’t see the blue one through the green one. Probably because of the static d component values. (I’m new to the math.plane).
So I’m trying to find a way to make the d component position/distance based, Vector2.Distance or anything along those lines do not work for sure… do you have an idea?
EDIT: After fiddling a bit more with the settings, this seems to work, using a: 0, b: 0, c: -1, d: 0 for both planes:
https://playground.babylonjs.com/#22KZUW#200
I have no clue why though
It does not work, if you set the Z position of the green sphere far away (say 20), you will see that the small spheres are clipped too soon.
You need to recompute the d component of the plane, as you stated above. This is the distance of the plane to the origin, which can be easily computed with a dot product between a point on the plane (the center of the sphere for eg) and the normal:
@Evgeni_Popov I never knew you could measure distance using dot products. My mind is completely blown at the moment. I have yet to understand what’s going on here… A dot product on a position and a calculated normal.
That aside, I was able to make the top view work with a simple offset: https://playground.babylonjs.com/#22KZUW#205
Thank you so much! It works perfectly now.
Using the dot product to compute the distance is a side effect of how a plane is defined.
The equation of a plane is ax+by+cz+d=0, with (a,b,c) being the normal to the plane and d the distance of the plane to the origin.
So, d = -(ax+by+cz)=-dot(P,N) with P being any point on the plane (so, using the center of the sphere is ok) and N the normal.