Bent on Solving Refraction

[JohnK]

OK so happy with mirrors now stuck on refraction.

Doing refraction I expected something like this.

  but got this

here's the playground http://www.babylonjs-playground.com/#1YAIO7#12

played around with

waterMaterial.refractionTexture.depth = 10;
waterMaterial.indexOfRefraction = 5

but am getting nowhere. Any suggestions?

[Sebavan]

Your playground still use reflection... it should use refractionTexture and to work the refracted objects as to be placed behind (it is not a mirror but a glass).

I ll try to create pgs for you.

[JohnK]

@Sebavan sorry posted wrong link have edited in correct one.

[Sebavan]

As you can see here: http://www.babylonjs-playground.com/#1YAIO7#10

refraction (blue plane) and reflection (red plane) can be achieved through respectively one render target texture and one mirror texture. On the previous pg both are not mixed to prevent confusion and planes are semi transparent to also see the original through them.

On the following PG: http://www.babylonjs-playground.com/#1YAIO7#11

Both refraction and reflection are actives making it weird. This is due to the fact that Fresnel laws prevents this to happen in real life (https://en.wikipedia.org/wiki/Fresnel_equations).

Adding the fesnel parameter on both gives the following result (the more you are at grazing angle, the more reflection only):

http://www.babylonjs-playground.com/#1YAIO7#14

And to avoid all the manual fresnel setup and so on, and ensure your energy conservation, you can also use the PBR material.

http://www.babylonjs-playground.com/#1YAIO7#15

For far away reflect/refract, it is recommened to use cube map or probes:

http://babylonjs-playground.com/#QJS2W#16

Hope that helps

[JohnK]

@Sebavan thank you for the PGs and I have learnt some new techniques such as you can create refraction with RenderTargetTexture, Frsenel I will have to spend more time on. However playing around with your PGs I still cannot get the effect I am looking for. My posting the wrong link in the first place probably caused confusion. My earlier post

hopefully showed that I was OK with reflections and this post was just to deal with refraction and what I expected. Something along the lines of what is happening to the pencil in the image below.

 

Trying to do this in the (correct) PG http://www.babylonjs-playground.com/#1YAIO7#12

and I could not get this effect. Is it possible? How do you do it?

[Sebavan]

Sorry for the confusion,

Here is the issue: http://www.babylonjs-playground.com/#1YAIO7#17

Unfortunately the fact that each point bends differently would normally require one dedicated texture for each (this could only work well with ray tracers). 

You can only approximate here and this is annoying cause this creates artifacts for really close objects.

Another method will consist to compute it from a second camera but not through the rafract channel for your use case.