Jump to content

Bent on Solving Refraction


JohnK
 Share

Recommended Posts

OK so happy with mirrors now stuck on refraction.

Doing refraction I expected something like this.

p5GYyb0.jpg  but got this ynx613Y.jpg

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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.

p023hqnk.jpg

 

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...