NEW! Stylized Water Shader Graph (Refraction - Foam -Waves - Smoothness) - Unity 2022 Tutorial

hi everybody the majority has voted in the last poll for creating a new water shader graph the stylized water shadow graph that we created the last year has reached 50k likes thanks to everybody and i hope this video reached another milestone so in today's video we'll show you how to create crystal clear stylized water shader graph in unity 2021 the shader will cover all the aspects of beautiful water from depth fade to shallow and deep colors into the refraction and normal maps in addition to form controls and newly introduced wave controls and finally the smoothness which will reflect the light source on the surface of the water this is ramis atoba from binary lunar and let's get started [Music] i decided to go with a premium asset because i wanted to show off the water shedder so i ended up choosing the tropical environment pack which is premium asset currently on unity as store there is the lunar new year and there are a couple of bundles that will allow you to save up to 95 percent before we start make sure that the depth texture and the opaque has been checked on your render pipeline to get the transparency of the water also make sure that the surface of your shader has been set to transparent let's open our shader graph and i'll explain everything clearly i already arranged everything in clear way so it's it can be understandable and i will go step by step how i created this shader before we start with the main shader i created two sub shaders to help facilitating creating this shader and to avoid getting a lot of links that makes the shader looks complicated so the core shader or sub shader is the depth fade so you can open it by double clicking so the purpose of the devs fade sub shader graph is to calculate the water depth or to control how deep is our water and to do so we gain access to the screen position of each vertices from the row mode and to know the coordinates of the vertices we access the alpha channel of it so we get a split node to access that then we subtract it from the scene depth from the i perspective that means how far the scene behind our vertices of the game object the more far the more deep so after subtracting we divide this depth by a distance and we create a property which is a float to control that this will control how deep is our water so we have as an input the distance we saturate that to avoid getting values below zero or above one you can replace if you want the saturate by clamp node then we have inputs we have one so i'll tell you briefly how i structured this shader first the watercolor which contains the depth fade but colored with two colors then we have the refraction which create the water distortion it distorts anything beneath the water then we created the form so this is the form section i organized everything in groups and also we have the normals which controls the surface normals and finally up here we have the wave controls so we have in total five sections the water color the normals the foam controls the refraction and the wave controls let's go step by step and i'll show you in the scene how each one effect the plane we have in the scene so let's start by the depths fade we created the depth fade sub shader graph so i will link this to the color the base color on the master node to show you what it does in the scene i save but i will remove now the waves and i will remove the normals so as you can see the goal of the depth fade is to calculate how deep is each point behind the surface of the water the more near to the surface is colored with black the more far we reach to white so this is the visual results of the depth fade node after that we want to colorize the water based on the depths so we created alert node and two input color surface color and the deep color so we learn between the surface color which is the less or the shallow area in the water and the deep color which should be a darker grade of the first color we do lurping between surface color and the deep color based on our depth fade so now if i connect this to the color on the master node so click on water we have the distance which con which controls the depth of the water how deep you want your water to be to appear then we can control the color and the transparency of each deep and surface colored hole let's say the next step is the refraction we want the refraction to distort the game objects or the vertices behind the water surface since we will use a texture movement more than one time so to avoid repeating nodes we can create another sub shader graph so for that purpose i created a texture movement sub shader graph and we if we double click on it it contains two input properties which is the speed of the moving texture and the scale of it so the texture movement subshedder graph simply contains a time node we multiply the time with the speed we want the texture to move and we link it to the offset on the tiling and offset node then we put the speed of course is a float while the scale is vector 2 because you can scale on the x and on the y so we connect the scale to the tiling and the output will be an out of vector 2. so in the previous shader we created only one moving normal texture so i found that it looks even better to make two normal maps that move the opposite direction so i created two texture movement sub shader graph because we will move two textures so we need two sample texture 2d but they as an input we need we need the refraction normal texture so this texture we input it into two sample texture 2d and we have two movement texture movement sub shader graph and so we have one texture two sample texture 2d two texture movement because we want to move each one in the opposite direction we have the refraction speed and the refraction scale the refraction scale should be the same for both textures while the speed i just give a negate node to multiply the value with -1 which makes the texture move to the opposite direction then we blend we do normal blend to blend the normals of the two textures and here as you can see the result it feels like a moving wave on the surface of our shader or our game object that will act as a water then to control the refraction strength we create a float refraction strength and i multiplied it with 0.2 to miticate the value because if you move it a little bit it will show a great change on the surface so multiplying with 0.2 we will mitigate the changes of this value then we multiply it with the results of the normal blend and finally to the to distort what is behind the water surface we get the screen position of each vertice behind the water and we get their colors so we get a screen position node to get the position of the vertices then we add to that the color of vertices behind the water so for now let's assume we have only the watercolor section and the refraction section to show the results of both i'll create a lerp node just for showing you the results in the scene we learn between the refraction results and between our colored water based on the alpha of the watercolor so i create here split node i get the alpha channel of the color and link it to the layer then we link the layer to the base color on the master node if i save now we should see the refraction in the scene including the colors we're getting those nice refractions now let's go to the next step let's create the form controls to create the form controls again i used the depth fade node and i created a float named form amount to control the where we should show the form based on the distance from the game objects behind then we choose the phone cutoff it will uh so the the form cut off determine how smooth are the edges uh of the form so we get the depth fade sub shader graph we input the form amount then we multiply it with the form cut off to generate the form itself you can use any texture or you can manually generate that or procedurally generate that using a gradient noise i created the gradient noise node then used the texture movement sub-shader graph to control the speed and the scale of the foam to create a stylized foam we need a step node which shows the value between which shows the form between two values here if you can say in the see in the gradient noise we have black gray and white in stylized art there are two grades either white or black and that's the function of the step node it's split the values between two values only black and white here then to control the transparency of the form i created bone color property and linked the alpha of it to multiply node so we multiply the form with the alpha to to gain control over the transparency of the form then we do a lerp between the colored water and the form color to show the form only based on the desired depth of the foam so we do a lurp between the watercolor and the foam color based on the depths we want then we learn between the formed water under fraction so i will delete those because i created those to show you the results of the refracted colorized water only not deformed version so i'll delete this slurp and this split and we're now doing a larp between the refraction and the formed version of the water based on the alpha of the form then we link that to the base color on the master node we save go back to the scene and we can now see a refracted colorized water with the form so now we can check this by the way we you can change the refraction normal to any normal map you want or also you can procedurally generate those by creating a gradient noise then get the normals from it but there are plenty of normal textures of of water online so you can download any and experiment to change the the shape or or the surface of the water we have also the refraction strands i didn't show you how effect the scene how it affects the scene so see if you increase the refraction increases in the scene uh i will not talk about the waves yet so i just wanted to show you the form so here is the form amount so how far from the game object the form will appear and then you have the cut off which give further more control of the form we can control also as we saw the color of the phone but of course the best color is the white and you can control how speed the form is moving in addition to the form scale okay next we can control the waves because the water is not static surface so it have a wave so here's how i created the waves briefly but if you want a step-by-step and more explanation we have created a previous tutorial talking in details how to create waves and with that waves shader we created a moving fish and any other wavy surface or game object so to do so you need the position of each vertice on the game object not the the world of course we split that to gain access to the x-axis then we multiply that with we multiply the frequency uh with 6.28 which is the pi by value then we multiply the with the x value after that since we want to move the waves we need to move the vertices over time so we need the time node and we multiply that with the wave speed then we add both of the results together then we use the sine node to create those separations between the waves then to control the wave amplitude which controls how high is the wave we create a float and name it wave amplitude we multiply the results of the sine with the wave amplitude then we add all of those to the original position of each vertices so again we go back and call the position of each vertice on the game object we split it we gain access to the y-axis and we add it to the x then we combine everything together we combine the new y value we add the x value and the z of each vertice and finally we link all those to the position on the master node if i click save now we should see a wavy surface of the water and here we have all the controls of the waves the wave speed how fast is the wave and the wave amplitude how high is the wave check now and this gives the life to your water surface i will go back to my values which feels nice for this scene and finally what gives the surface an amazing stunning looking is reflecting the source of the light on the surface of the water so to do so we need two things we need the normals so after we blended the normal texture we learn between the value that we want which is the normal strength which is a float will are between the zero value and the normal strength that we want based on the depth fade then we use a normal strength node to control the normal strength we link the blended normals with the lerp result then we saturate the value to get only between 0 and 1 values to avoid getting unusual or abnormal results and finally we link the results to the normal on the master node save go back now we can see a better surface of the water we can see those normals on the surface of the water and here we can set the texture of course and we can control the normal strands see on zero we're not seeing the details on the surface of the water with one we can see those and finally to show the shiny surface of the water we just need one node which is a float that controls the smoothness on the master node it should be usually a slider between zero and one i didn't do that but it's better to do so so let's set it as a slider between zero and one save and let's me show you the magic now when we increase the smoothness from zero to world one here we go we got those shiny lines on the surface of the water which make it so realistic and pleasing to view and let me tell you one more thing how i reached all of these so let me explain how the scenes has been set up to show the nice reflective surface of the water we increase the smoothness but that will not show a good result without getting uh a good sky box so i found that there are a lot of sky boxes for free on the unity asset store i'll provide you the link to download those down in the description i chose one of those sky boxes this one which is good for stylized water art and they placed that in the scene let me show you without it the scene looks ugly let me bring it back see how great the scene looks the other thing to make the scene looks great i used two directional lights the first one is toward the world so to to put the light on the things that you see in the scene so for example the rock look look shiny or not shiny it's very visible and you can see the beauty of the colors and the details so check here i have two directional light first one to light the game objects in the scene and the other one is the in the opposite direction to show the shininess of the water so let me show you here is the first directional light here is the gizmos sorry here is the first directional light as you can see it's pointing toward the game objects in the scene if we flip it to the other side we will not be able to see the beauty of the scene so this is the first light the other one is to show the shininess on the water surface so is that you can control where is the shiny part of the water so i think that's all how to create an amazing scene and an amazing water shader in unity 2021 so that's it for today's video if you enjoyed watching don't forget to hit like subscribe and the notification bell so you keep updated with the last videos we republish on our channel and we of course deeply thankful to our supporters on patreon who generously keep supporting us and encouraging us to keep publishing high quality tutorials for unity till next video see you soon [Music] you

Channel: Binary Lunar

Views: 71,843

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 2022, unity water depth shader, easy unity tutorial 2022, unity water waves, unity water surface, unity water effects, water reflection, water smoothness, crystal clear water

Id: 1yevpCAA_rU

Length: 20min 54sec (1254 seconds)

Published: Wed Feb 02 2022