How do I achieve refraction in Visual Shader?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Macryc

Hi all–

I need help with the Refract node in visual shader. Does anyone have any examples of how to use the damn thing? There don’t seem to be any tutorials. I’m building a visual shader for water and I need refraction in it. Any tips appreciated.

:bust_in_silhouette: Reply From: magicalogic

Refraction is usually achieved by using a distorted screen texture. It’s quite simple actually, you just add a texture node and set the texture to screen in its drop down menu, then add a noise texture to the screen uv and subtract 0.5 from both the x and y component of the resulting vector to recenter the resulting uvs. Then multiply the results with a float that controls how much ‘refraction’ you want and finally hook that to the uv input of the screen texture node. Plug the screen texture to the base color and you have refraction.

You may want to blend the screen texture with another image or tint it with a color to look more like water.

I’m trying to do something along those lines but there must be a missing element - I can’t get the refracted parts of the immersed object to align with the parts that are sticking out above the surface - clearly the uv offset is off. Could you provide an example of what the shader graph should look like?

Mine looks like this. There are several problems with it, eg, the surface is semi transparent and I can see the undistorted parts of the immersed cylinder which I want clipped just like when using the Refraction property on a standard material.

image url: Imgur: The magic of the Internet

The result so far is (image url: Imgur: The magic of the Internet). You can see the problems. the bottom of the cube, which is under water, is still seen unrefracted from under the refracted projection. The other problem is the refracted projection extends beyond the cube into the distance - it basically stretches along the y coordinate of the screen uv… How do I fix these?

Macryc | 2023-01-18 16:46

I will as soon as I get back to my computer.

magicalogic | 2023-01-20 07:31

Here is a google drive link to the screenshots and a sample visual shader.
https://drive.google.com/drive/folders/1J2mb0eOkhyxVS4fFM-21O8yl-oiL_hHg?usp=sharing

magicalogic | 2023-01-20 08:56