Hey guys, i’m using the Babylon Library on Text editor (Atom) and i’m using a local host to display my Babylon scene. I’m importing a uv’d mesh from 3DS max and i’m applying the refraction effect on a mesh from the model, but its not working. its only working on shapes created by the Babylon Library.
Any idea why this happening?
Hi Magali_Sawma,
Welcome to Babylon! @Drigax is our 3DS Max exporter wizard around here, so he might have already seen something like this before. If not, though, it’ll be a lot easier for us to look into this if we can see it in a Playground. Would it be possible for you to create a Playground reproducing the issue?
Hi @Magali_Sawma, welcome to the forum. Can you create a playground on https://playground.babylonjs.com that demonstrates the issue you’re seeing?
Personally I’ve never used the refraction effect myself, but I’m sure we can help if we can see what’s going on.
Hi @Magali_Sawma, just re-pinging if this is still an issue 
Hey @Drigax, My project is currently running on my text editor while using the Babylon library and I don’t think I can reproduce it in playground since playground can’t accept imported meshes from my PC. However, I can host my project on a temporary server and show you the effect I’m getting with the Babylon engine, in addition to the Babylon code responsible for the effect.
Maybe you can find this link helpful:
https://doc.babylonjs.com/resources/external_pg_assets#using-external-assets-in-the-playground
Hosting assets is definitely the most unintiutive part of using the Babylon.js playground. As long as you don’t mind sharing the asset that’s causing the issue, using a github repository/jsDelivr should help here.
You can also check: https://playground.babylonjs.com/#RZUDBM#2
as an example of how to load in this hosted asset into a playground
I want to say that this is not our fault 
(As we cannot host the assets for privacy/security/price reasons)
1 Like
As browsers have become more secure I have found they will not load images into BJS when you are just running your HTML file directly, ie opening your HTML page with a double click. You need to run through a local server.
As I already have npm installed I just use local-web-server - npm
If you are already running through a server then a playground is needed as suggested by Drigax
1 Like
Hey @Drigax, I did what you said and took my code into the playground.
https://playground.babylonjs.com/#UKNERM#179
The whole idea is about achieving a good refraction effect from the glass mesh in the center. I added extra meshes around the centered mesh to see the refraction effect taking place. If you angle it correctly you can see the other meshes refracting. My PROBLEM is that this effect is only giving a magnification effect, what I want is more like a deformation kind of effect similar to real glass.
Any help is appreciable, thanks all!
IOR of Acrylic is around 1.49
1 Like
Thanks @ycw, that’s a good catch!
@Magali_Sawma, for reference, here is a table of common material IORs, your original scene had the IOR set at 1.01, which is close to air, which kind of explains the lack of a proper refraction effect.:
https://pixelandpoly.com/ior.html
1 Like
Thank you guys @Drigax and @ycw for your comments on IOR. This solves the deformation problem.
Yes it is true that IOR will bring some kind of deformation to the glass, but the effect is still not very realistic:
-
The refraction effect is magnifying the other objects way too much, is there a Babylon property for controling this?
-
The refracted objects are not 100% collinear with your eye vision, you need to drag your camera way down to see the refraction effect.
I hope you guys can help! I really want to achieve a professional effect.
Thank you.
Pinging our resident shader expert @sebavan, can you help with this?
[sorry I’m not the resident expert ;)]
You should put the probe at the same location than the bounding sphere of the bottle:
https://playground.babylonjs.com/#UKNERM#181
It will help with your #2 problem.
As for #1, I think the math are ok, it’s the shape of your object that makes the refraction looks like this. Try with another shape and see if it helps.
2 Likes
I guess here one of the missing part as well is that we refract only on the first surface we hit, we are not taking into account the actual 3d shape which create also some artifacts. We basically go for air to medium using a cube map. We are not representing Internal reflections or even the rays exiting the medium again on the back.
Thank you so much @Evgeni_Popov for your contribution!
The solution for problem #2 is great! I didn’t know you can change the position of the probe.
Concerning problem #1, yes you are right about the shape of the object. I changed the shape to a sphere and the refraction effect is very realistic. However, I want to reach the same effect on my imported shape and not just on shapes from Babylon.
Thank you once again.
The sphere is not a specific object in Babylon and is not handled differently from other objects.
I think the refraction size you currently see would be the same in a real scene with the same objects at the same location. If you want the refraction to be smaller, you have to put more distance between both objects.