How do I achieve refraction in Visual Shader?

0 votes

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.

Godot version 4.0
in Engine by (515 points)

1 Answer

0 votes

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.

by (2,017 points)

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: https://imgur.com/a/rqlj2yp

The result so far is (image url: https://imgur.com/kuPengD). 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?

by (515 points)
edited by

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

by (2,017 points)

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

by (2,017 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.