Unity 2020.3+ Water Shader With Foam!

with the release of unity 2020.3 and later a lot of my shadowgraph tutorials have become redundant and need an update so if you would like to create a wonderful watershed while simultaneously learning the intermediates of shadowgraph make sure to watch till the end i will also be providing this shader file in the description for anybody that wants it smash the like button and if you are just finding my channel subscribe we're only like 70 subs away from a thousand to help me reach more people by subscribing and sharing okay let's begin the tutorial let's start by either using an existing correctly setup 2020.3 plus urp project or opening up a brand new one i will do the ladder as i recommend you do the same too because urb has a little little settings that i don't have time to explain go to the settings folder that urp comes with and find the three render pipeline assets inside each of these there'll be an opaque and depth texture that you will need to activate you can also put all of the urp preset folders into one back-end folder like so now back in the main assets folder you'll need to create a new shadow graph file and material to accompany it follow that up by dragging the shader asset onto the material to allow us to add the shader to unity objects create a plane in the hierarchy and after naming it whatever you want you'll drag the material onto the plane we created don't worry if the plane is pink we will fix that right now to fix the pink color first double click on the shadow fog and maximize the shadow window by pressing shift space next go to your graph settings and add a universal target to your active targets list to save the shader you'll need to click the save asset in the top left of the window your shader is now not pink the two sections of the graph are called the vertex and the fragments i shadow graph goes through every vertex in the mesh and adjusts it to be able to move around the velocities we can use the positioner and a little bit of math you can see here that we can use the split load coming out of the position now to get the individual x y z values there's a drop down in the position node where we can define the coordinate space that we want to get the vertex position in object returns a local space while world returns the global space the world position is useful for making our water tile while the object selection the one we want is used for moving the vertices now in the shadow we have a split node from which we can get the xyz components so to pass it back to the shader we can use a vector3 node connect up the outputs like so and connect the vector3 output to the shader vertex position currently the setup is only getting and reassigning the vertex positions though so to change it we can use a variable let's navigate to the blackboard where all of our various will be and by clicking on the plus icon we can create a new variable this variable will be called height then instead of selling the vector3y input using the split node we can use the variable after saving the acid we can see the height of the water plane is changed by the variable to access the variable you will need to click on the material [Music] this is cool but boring so instead of the variable let's use some gradient noise to do this we need to create a gradient noise node and assign the output to the y position of the vector3 this will always return the same noise value though as we are not feeding the grading the vertex noise position to do this we create a new position world mode you'll need to split the position and convert the x and z into a vector 2. then take the vector2 output toy tiling and offset uv inputs connect the tiling and offset to the uv of the gradient noise what this node tree does is it gets the vertical position on a 2d plane and tells the gradient noise to return the value for that inward position the target and offset node is there so we can control more features of the noise such as tiling which we will not use today and offset for waves which we will use now to make waves we need to create a new variable called wave scroll speed then we create a time load and multiply the wave scroll speed by that time then we take the out product and connect it to the offset and tiling node's offsets this will make our noise move in a diagonal manner we can also create a noise scale variable that will simply plug into the scale input of the gradient noise to control the detail of the noise this will be useful in a couple minutes when we begin to work on the octave noise before that we need to sort out the low poly effects to do this create the notary that i'm creating here in it we take the object vertex position and take the ddy and x then we find the cross product and normalize its outputs we transform this into object tangent space using the transform node and plug it into the normal input of the fragment part of the shader i cannot explain the low poly effect as i'm trying to keep this tutorial as beginner friendly and short as possible we have flat shading and a simple water system working but noise is very smooth and odd to fix this we first need to convert the noise node tree into a sub graph for simplicity's purpose we do this by selecting all of the following nodes and right clicking on one of the selected nodes then go to convert sub graph save the sub graph somewhere and now we have a simple noise load you can double click the noise note to open it up in the shader view inside you'll need to add a variable called the octave factor this value will control the opacity and the noise heal of the noise if you don't know how octaves work they work by creating many noise values of increasing noise scale and decreasing opacity and then adding them together we can see here that without changing the opacity and adding all the final and final noises together the octave noise function looks very bad but if we make finer noise functions effect the end results less and less exponentially then we can create some very nice detailed noise just make the following simple errors to this noise stop graph and we can go back into the shadow so [Music] back in the shadow we'll create as many noise notes as octaves that you want here i have 6 because that's what i found works best then i assign the scroll speed and the noise scale to each of those to the octave factors we assign values of powers of 2 so 1 2 4 8 16 and 32 then we need to add together each element together in this manner if you use some other way the addition values may be added together multiple times then we need to take the output of the addition and remap it to return it to the zero and one range now we can use this in the vertical displacement to create the waves we can also simplify that vertex displacement we will do this by deleting the split and the vector3 node now let's add the noise value to the position node before you add the noise monitor you will need to multiply the noise by the height variable to control the height of the wallet like so this will make the vanities move around in the x and the c positions too this creates better waves and then just wire displacements the game scene now shows some nice water that looks pretty detailed now let's get the firm and the depth color working to create the foam and the depth fade we will use the depth texture let's start by getting the main watercolor working to use the depth texture we will need to create the following note 3 when a duck it gives the scene depth value and subtracts from that the screen position this gives us the depth texture from the scene then we divide the difference by a depth fade variable and saturate the questions the saturate note just makes sure that the scene depth is between 0 and 1. now we create a love node that either shallow or deep color are shown depending on the scene depth plug this into the base colour and the water colour now works so an overview of the depth colour we first subtract the scene depth from the screen position's alpha to get the depth texture of the scene then we divide this by our depth fade to adjust the intensity after making the depth texture come between 0 and 1 using the saturated node and laughing between the two deep and shallow colors we take the output to the base color and the color of our water now works to make the transparency of the colors work we go back to the shader and split the output of the lerp then we use the alpha output of the color and plug it into the transparency [Music] creating firm is quite similar to that instead of saturning and lurping the node we just get the output to divide and then we use a steps edge input you can also add the noise subgraph onto your step to add some variability to the phone now we create the foam color variable and assign it to the in of the step we also create a new float variable for the foam width and assign that to the b of the division instead of the depth fade this will allow us to control the amount of foam now add together the depth and the foam finally to add reflections you create a smoothness variable and assign it to the smoothest value of the fragments part of the shader and that is basically your shader done here are my settings if you want to copy them and here is the model of the little sheet shack that i used it's amazing the things that people provide on the internet for free speaking of that if you liked this video and you learned something from it make sure to drop a sub again i'm super close to 1k so if we could get there by the end of the year that will be fantastic maybe even this week with that i thank you for watching and i wish you the best of luck in your future project you

Channel: Flaroon

Views: 3,158

Keywords: Unity, game, development, game development, water, shader graph unity, unity shader graph tutorial, shadergraph unity, unity water shader, water shader, shadergraph water, low poly water, unity lowpoly water, unity3d, unity tutorial, unity game dev

Id: 78WCzTVmc28

Length: 11min 2sec (662 seconds)

Published: Sun Sep 26 2021