Under water screen distortion using full screen shader in Unity

Hello everyone, welcome back.

Today we will create simple under water effect using a full screen shader. For this, I am using Unity version 2023.1 and I have a project setup in URP. Now with that out of the way, let's get shading.

Creating full screen shader

For achieving the effect, we will simply distort our screen using full screen shader.

We need setup a full screen shader graph and if you don’t know how don’t worry. I have created an introduction post dedicated to full screen shader graph.

Scene color

Okay, Once we have finished creating a shader graph and material and also applied the material in our renderer feature as a result our scene view will turn into full grey void.

In shader graph, we can see that the reason is we have the default color in Base color slot. Let’s fix it by creating a Scene color node.

Scene color node will give us color from our camera’s color buffer, in simple words it will give us color of each pixel our camera is rendering based on this UVs.

Simply take Scene color nodes output and feed it into Base color block and we can see that our scene view has become normal.

UV distortion

Now we can distort that using the UVs and for that let’s create a UV node. It will give us access to the default UVs. Take its output and feed it into the Lerp node.

Lerp stands for linear interpolation, it will interpolate between input A and B using the input T which has a valid range from 0 to 1. So If we feed 0, it will take output from input A. If we feed 1, it will take output from input B. If we feed 0.3, it will take 30% from Input A and 70% from input B and so on.

Now we want to distort the UVs and for that we will use Simple noise node. We will control the scale from the inspector so let’s create a float property. Call it NoiseScale, give default value of 10, drag it in and feed it into the Scale. Then take Simple noise node’s output and feed it into Input B of our Lerp node.

Now we want to control the Input T from the inspector so let’s create another float property. Call it Blend, Set the mode Slider which goes from 0 to 1, drag it in and feed it into the input T.

Then take Lerp node’s output and feed it into the Scene color node’s UV. Now we can use the Blend property to distort our screen, pretty cool.

Scrolling noise

Okay, now we want to scroll our noise over time so let’s create a Tiling and offset node. Take its output and feed it into the Simple noise node’s UVs.

Now we will change the offset over time so let’s create a Time node.

We also want to control the speed from the inspector so let’s create a Vector2 property. Call it PanSpeed, give default value of 1,1, and drag it in.

We will multiply our Time with PanSpeed.

Now we can just take our Multiply node’s output and feed it into the Offset but I don’t want to scroll our noise in single direction I want to make it go back and forth.

For that I will create a float property, Amplitude to control how far we want to scroll the noise.

Now take our Multiply node’s output and feed it into the Sine node. Sine node will give us sine waves with value -1 to 1 so basically it will just ping pong between -1 and 1. Then we will multiply our Sine node’s output with Amplitude.

Finally take out Multiply node’s output and feed it into the Offset of our Tiling and offset node. That’s it for our shader graph, It will look like this at the end.

Trouble following along? Check out this video

Thank you so much for reading!