Unity – Shader Graph | Simple Water tutorial

In this tutorial, you will be able to obtain a simple water effect in Unity with the Shader graph.

Speedy square is now available on Google Play

I will assume that you have knowledges with Shader Graph in Unity. I will explain in small lines what are the default settings and show you directly the graph with the result.

In result, this tutorial will be super easy to read and to understand. I hope 🙂 .

And yeah… Sorry but the english is not my mothertongue

You will be able to create a simple Shader water effect with :

Wave
Distortion
Ripples
Foam

Installation and settings

Before going through the Shade Graph, you need to install packages and configure files.

Packages installation

First, in the Package Manager (Windows -> Package Manager), you need to install :

Shader Graph
Lightweight RP

Universal Render Pipeline and Project Settings

In the Project Windows, you need to create a new Universal Render Pipeline by right click and Create -> Rendering -> Universal Render Pipe -> Pipeline Asset (Forward Rendered)

Click on this fresh new file UniversalRenderPipelineAsset and activate the parameter Opaque Texture

This image will show you my current settings for this project

After that, go to Edit -> Projects Settings. Click on Graphics and add your UniversalRenderPipelineAsset file.

Shader Graph File, material and plane

In the Project Windows, create a new Shader Graph :

Right click then Create -> Shader -> PBR Graph. Name it like WaterShader
Create the material by clicking on the file WaterShader and name it mat_WaterShader.
Add a plane on your scene with the material mat_WaterShader.

Open your WaterShader file. Set the Surface parameter with Transparent

Waves

Here is the first graph for the waves. Play with the settings and get the result you want.

Distortion

And here is the graph for the distortion. Don’t forget to set your own values for the settings

Ripple

In this step, you will need to adapt some nodes. First, here are the nodes for the ripple:

Be careful with this step. You need to set new nodes and change the placement of the “Water Color” node :

In the first blue square (1) : The ‘add’ node in the middle will get the foam in the next part.
In the second blue square (2) : Set the color to black AND place the “Water Color” node at the output of the ripple (square 1)

And the animated result (click on the image)

Foam

For this part, you will need to check where is the shallow and deep water to check how to diffuse your foam :

And finally, you need to connect the lerp to the “Add” node

Result

And you’re done! If you test and add your own settings, you will obtain a nice result. It is a simple shader to have a simple water effect.

Here is the final graph :

Download

You can download the shader just here . It will ony contain the shader and not other stuff like a scene.

13 comments on “Unity – Shader Graph | Simple Water tutorial”

Neto On 06/03/2020 at 01:38

Thanks a lot to share this content. Great Work!

- admin On 06/03/2020 at 07:23
  
  Hope it was helpful 🙂
  
RabaDabaDoba On 11/26/2020 at 16:25

Hey,

I just tried this out, but none of the colors match. I’m using HDRP, could this be an issue?
Seems like the colors are inverted, and I can’t get colors like white, and brighter colors.

- admin On 11/27/2020 at 11:36
  
  Hey!
  I haven’t tested with HDRP but it could be the issue. The tutorial used the URP.
  If you have a solution, please tell me 🙂
  
Pietro On 05/25/2021 at 10:24

idk why plane moves up when I put the shader on it. Can u help me please ?
screenshot : https://prnt.sc/13e2wa3

- admin On 05/25/2021 at 10:41
  
  Set the Wave Speed and Wave Scale to 0. That’s why your plane is moving up, thoses 2 variables are used to add some movements to the ocean plane. It’s better if you use a subdivied plane (you can make one with Blender 3D). Hope it help you 🙂
  
  - Pietro On 05/25/2021 at 10:50
    
    thank u 😉
    
Kadax On 07/16/2021 at 08:38

Hi, I downloaded your shader but it’s different with your tutorial and final result. And when I put a cube in the water there is no foam. Is the link old?

- admin On 07/16/2021 at 09:08
  
  Hey! Thanks for your question. Did you change/adapt the value of the shader water? By default the value are huge. Try that 😉
  Hope it will help you.
  
  - Kadax On 07/16/2021 at 09:21
    
    Thanks, I have one more question how can I scale the plane only 1 axis? Currently shader stretchs.
    
    - admin On 07/16/2021 at 09:27
      
      This shader actually can’t do that. But that’s a good feedback. I will do that as soon as possible. It would be nice for a river 😉
      
Christian On 08/29/2022 at 12:54

OMFG! I have been looking for hours trying to find a way to subtract front objects from being refracted in the water! No other Shader Graph Tutorials delve into this, except this one! Thanks a lot, mate! 😀

- PROTOKOLL Studio On 08/30/2022 at 15:15
  
  Hey! Glad I helped you 😀