Recreate transmissionhelper glass effect from glbs

Questions
1

Hi,

I’m trying to recreate the effect that the transmissionhelper class does when importing a glb with transmission. I’m trying to do this for a cube (not a plane).

The effect I’m going for can be seen in the sandbox: https://sandbox.babylonjs.com/

A GLB that demonstrates this is:
glassTest.zip (5.0 KB)

The current implementation I have is this: https://playground.babylonjs.com/#QL4J3X#1

However, when doing a plane for refractionplane I can only select one of the faces of the cube, which makes it look wrong in all faces but one.

Thanks,

2

Hi @riven04 - the GLB is rendering without any refraction, but in the sandbox you linked to, the indexOfRefraction was set to 1.5. If you set it to 1, I think you’ll get the effect you’re looking for if I understood your question correctly.

Here’s an updated sandbox with an indexOfRefraction of 1 https://playground.babylonjs.com/#QL4J3X#2

Does that answer your question?

2 Likes
3

Thanks @amoebachant . The IOR of 1 will just change how the objects past the mesh are viewed (kind of a zoom effect, pardon the ignorance on the terminology). I also attached a GLB with IOR of 1.

Here is another PG with IOR of 1: https://playground.babylonjs.com/#QL4J3X#3

However, objects that are not with the normals of the defined refractionPlane will not be shown. You can rotate the camera and see that the above sphere is not shown.

The problem is that when defining a refractionPlane for refraction it will only work when reflecting from the viewpoint of the viewer, docs:

Blockquote
You must also set each RefractionTexture’s .refractionPlane to the Plane of refraction, with the plane’s normal pointing out of the refractor (toward the viewer).

I wonder how is this defined in the transmissionhelper class that is called when importing the GLB?

4

Solution is to use RenderTargetTexture instead of RefractionTexture:

const refractionTexture = new BABYLON.RenderTargetTexture(“opaqueSceneTexture”, 1024, scene, true);

1 Like