3D Stylized Water with Refraction and Foam Shader Graph - Unity Tutorial

hello everyone in today's video we'll show you how to create a stylized water shader graph this shader graph will have a lot of features to be controlled for example you can control the color of the water depths so there are shallow water color and there is deep watercolor also in the shader graph you will be able to control the water refraction so how refracted is the scene behind the water so you can control the refraction speed refraction strength and the scale of the texture additionally this shader graph have a controls for the foam so as you can see everything touches the water creates a form around it so welcome again to another shader graph tutorial brought to you by binary lunar this is ramis attabar and let's get started create a new unity project using the universal render pipeline and let's name it stylized water shader graph for this scene i used a free assets from unity asset store called stylized environment i'll provide the link down in the description if you want to download it import that asset to your scene let's go to the scene provided by that free asset you'll see some materials have been colored because they are not upgraded yet to be used in the universal rendering pipeline so let's go to file render pipeline and upgrade those materials for universal render pipeline the terrain also still ping so simply we need to go to the terrain settings and change its default material to something else you prefer let's remove some game objects which we will not use and adjust the camera for a better view before we start building the shader graph we need to adjust the project settings because we are using the depth texture and object texture to go to file project settings then to graphics click on the rendering pipeline that currently active then check on the opaque and depth textures now let's create a new game object a cube game object name it water and adjust its size to cover a good portion of our scene in this video i'll show you a new technique in shadow graph nodes since this shader graph will have many nodes it's better to create sub shader graph to reuse some repeated nodes and avoid getting spakety nodes inside our shadow graph so let's create sub shader graph let's name it debs fade we will use that twice in the shader graph so it's better to keep things organized and clean the depth fade will fade the game object between two colors based on its depths so to calculate the water depths we need the screen position and the scene depth the screen position represents where the game object is located and we can access its space coordination by getting the alpha channel from the row screen position then we deduct it from the scene depth to get the water depth then let's divide the water depths by a distance we choose so let's create a new parameter vector one name it distance set the default value to zero so we'll be able to change it in the main shader this is the sub shader then we saturate the value to be between 0 and 1. and we link that to the output you can name rename the output to output and set it to vector one now our subshader graph is ready let's create our main shader graph so right click in the project create shader and this time we'll create unlit graph let's name it stylized water open that shader graph and the first thing we need to do is to change the surface from opaque to transparent so we get transparent water of course then simply add the depth fade sub graph we created then create a new parameter vector 1 water depth set the default value to 10 link it to the depth fade then link the dev speed to color go back to the scene and now you still can't see anything change because we didn't create a material nor applied it to our water game object so let's create a new material name it stylized water then drag the shader graph to it to apply the shader on the material then drag the material on the water game object now we can see we got this depth spade between black and white so you can say it's something like fog currently and we need to apply colors to it to be like water so let's create two new color properties let's name first one shallow water and the other one deep water first one can be a light blue with alpha set to maximum currently and the second one the deep water should be dark blue and set off both of them to maximum alpha currently then create a larp node to lurk between this shallow watercolor to deep watercolor based on the depth fade and link the results to the color now we got this nice gradient between the shallow water color and the deep water color you can of course change those from the material property since now they are part of the shader so feel free to play with the watercolors before we proceed with building the shadow graph let's create another shader graph which will save us space and organize our nodes it's called movement sub shader graph we will use that to control the movement of any texture and its scale over time so create a new sub shader graph let's name it movement and inside it let's create the following we need to move the texture a long time so we need a time node and we also need a vector one parameter called speed to control the speed over time we multiply both the time and speed then we add tiling and offset node when we link those to the offset we can also control the scale of the texture by creating a new parameter scale and link it to the tiling in the tiling and offset node then link the results to output rename the output to out and set its value to vector 2 since the output is vector 2 value save the subgraph go back to our main shader the stylized water and let's organize things by grouping the current node related to the color and rename the group to color watercolor now we will create all the nodes related to the transparency of water and the distortion of the scene behind it so let's start by the subgraph we just created the movement sub graph so add that to the shader graph then we need two nodes one speed one for scale so first one would be the refraction speed and link it to speed on the movement let's set the default value to 0.5 then we need another parameter to control the scale of the refraction texture so it's a vector one let's name it refraction scale and link it to the scale on the movement then we will use this movement node to move the gradient noise node over time so create and the gradient noise node sets a scale to 20 currently handling the movement to the uv on it then we need a normal from height node that will create the refraction for us because it will control the normal of each point based on the height the height here represents by white and black values black zero height and white represents the maximum height for each point that would create a reflection for our water and we can control the refraction strands by creating a new vector 1 parameter name it refraction strands and multiply that with the normal from height then we need a screen position node to get the coordinates of each point on the water then we add to it the normal from height to increase or decrease the position of each point based on the gradient noise height and to get the colors from behind the water we need a scene color node and simply we link the last node to it of course to keep things organized we can group all the nodes related to the water refraction and name them water refraction and now we need to create a lerp node to lure between the water refraction and watercolor based on the water alpha when i got back to the scene i didn't find any transparency no refraction in my scene and that's because we set the alpha of the colors to maximum if you remember so you can go to both colors and adjust each one alpha maybe to 50 or 25 for the shallow water and 50 for the deep water and now you can see the transparency of water and the refraction effect of it the water refraction is too fast so let's reduce it from 1 to 0.05 now let's go back to the shader graph and add the final feature which is the form so we can start by adding the devs fade node which is a sub graph we already created and we can control the form amount by adding a vector 1 parameter and link it to the depth spade we can also control the foam cutoff to decide where it should be visible on the surface of water by creating a vector one parameter called form cutoff set the default value for now to 1 and multiply it with the depth fade results we will create the form using gradient noise node set the scale to 1 and then add the movement sub graph we already created and link into the uv of the gradient noise create two new parameters one form speed and another one the form scaled to control the speed of the form and the scale of the texture of it set the form speed to 1 on the form scale to 100 and you can see now the gradient noise started to move then we will use a step node to control where the form should be shown on the surface of the water based on the form cut off and to control the foam color we can simply add a color parameter let's name it foam color and for now we will use currently the alpha of it because to control the transparency of the form so split the form color and get the alpha channel from it and multiply it with the step node now we need to create a lerp from the water color to the foam color based on the foam color transparency and finally we need to replace the lerp from the watercolor with the larp from the new foam color by linking the layer from the foam color to the split then linking the lerp from the form color to the larp related to the transparency of the scene and that's it for today's shader graph video you can now control the form amount the form cutoff where should you see the form on the surface of the water you can also control the foam speed and the foam scale which means the texture of the foam and of course you can control the form color and transparency and of course you can control all the other parameters we created throughout this video so you can control the water depths the shallow water color and transparency the deep water color and transparency the refraction speed the refraction scale the refraction strands and all the parameters related to foam if you enjoyed this video don't forget to hit like subscribe and the notification bell so you don't miss the next video thanks for watching and special thanks to our supporters on patreon andrew stemfield alex g pix ryan renner dimitry vasilev breadman joshua kratosville little fox parker nelson jacomo mariani and falcon jazz chase lee fever pedro transsongs james valentine kojo aponi rick jack crystal and muhammad iden till next video see you soon you

Channel: Binary Lunar

Views: 48,795

Keywords: shader graph, water shader, unity shader graph tutorial, Binary Lunar, stylized water shader unity, stylized water shader graph, unity shader graph water refraction, unity water refraction, water foam unity shader graph, water foam unity, unity water foam shader, unity shader graph tutorial 2020, unity water depth shader

Id: MHdDUqJHJxM

Length: 14min 49sec (889 seconds)

Published: Sat Sep 19 2020