URP Water Shader - Unity Shader Graph (Tutorial)

hello and welcome to my channel in this video I'll show you how to create this water Shader that I have right here all right to start I just going to duplicate what we have and I am going to move it to the side this way we can compare what we are working on to what we are trying to achieve and to get started I'll go into my shaders folder and I'm going to create Shader graph urp and lit Shader and I will call this Shader water Shader graph and I will right click on the Shader graph go to create and material and I will call the material water and I'm just going to go ahead and apply that to the plane that we are trying to get this effect to work on now I will open our water Shader graph and I will expand the area so we can see it and the first thing I'm going to do is go over here to graph settings and I will change our surface type to transparent the next thing I'll do is I will add our parameters for our Shader first one I will add is a color and I will call this waterc color the next thing I will add is another color and I'm going to call it foam color then I will add a texture and I will call it noise texture and I will add another texture and I am just going to call it noise texture 2 then I will add a float and I will call it wave speed I will add another float called transparency I will add another float called noise scale another float called refraction another float called smoothness and lastly a float called metallic by default I'm going to change our water color to be blue I will change our foam color to be white for our wave speed I will change this to a slider between Z and 01 and by default I'll just have it on 01 trans parency I will change to a slider as well between 0er and 1 with a default of 05 or noise scale I will also change it to a slider between 0o and one with a default of 0.5 oh and I am missing a float so I'll go ahead and add that and this float is going to be foam distance and for foam distance I'm going to also change it to a slider between 0.001 and two with a default value of 0.5 and for refraction I'm also going to change it to a slider between 0 and .1 with a default value of 05 for smoothness I'm going to change it to a slider between 0 and 1 with a default of 0.5 and metallic I am going to change it to a slider between 0 and one and I'll just leave the default at zero for now and for these noise textures you can just create your own uh noise texture otherwise you can import the package that I'll have Linked In the description and it will include the noise textures that I'm using in this video for my noise texture I am just going to choose my pre-made foro noise texture then for my second noise I'll just use this uh Simplex noise texture and the reason why I'm using the textures instead of the noise nodes in Shader graph is just that the textures will be more performant and efficient with uh the rendering but you could also just not use these and use a noise node instead uh it just depends on what you're making and how much performance you need so you could just add a foro noise node if you want but in this video I'm just going to be using textures all right so I'll go ahead and save our asset for now and then the next thing I want to do is go to right click create Shader graph and I'm going to make a subgraph and this subgraph I'm going to name it wave noise sub graph I'll go ahead and open that and expand it all right the parameters we're going to want here is a float for noise scale a float for wave speed texture for our noise texture and the same thing again but for our second noise texture so what I'm going to do first is I will create a position node and I'm going to be using World space I will feed that into a split node and then I will also create a combined node and I will feed the r from split to the r for combine and the B from split to the G for combine and the r and the B here are actually just the x and z coordinates so I'm just feeding them into this combine node to get just get the x and z the next thing I will do is I will create a Time node and I will also create a multiply node and I will feed our time node into our multiply node and I will take our wave speed and I will feed it into the multiply node as well and then I will create another multiply node and I will just do multiplied by -1 and feed our multiply into that next I will create a tiing and offset node and I will feed our first multiply from our time node into the offset of the tiling and offset node and I will feed the RG from our combined node into the UV of the tiling and offset node this way the water tiles will be able to actually tile if you have multiple planes and next I will drag our noise scale float in here and Link it up to tiling and then the next thing I'll do is I will duplicate this tiling and offset by just selecting it pressing contrl C and then contrl V and instead of it being linked to our first multiply I'll link it to our second one so it's going in the opposite direction next thing we will want is a sample texture 2D LOD node and we will feed our first noise texture into that node as well as the output of the first highlight an offset and then we will want to do the same for our second noise texture and the next thing we'll want to do is from the alpha channel of our first noise texture we will feed that into a one minus node and then we will feed that into a multiply node along with the other Alpha from our second texture and then for the output I will change this to be a float and I will actually add a second output which will also be a float and we will feed the output of multiply into both of those outputs for our output node and this is how it should look when you are finished I will go ahead and save this asset and I will go ahead and go to rightclick create Shader graph and another subgraph and I will call this foam subgraph and I will go ahead and open it and make it full screen for our foam subgraph we will want to add a float called foam distance a color called foam color and another color called watercolor and to start we will add a scene St node and we will want the sampling to be done with the ey selection next we will want a screen position node and we will want that to be set to the raw mode and from the screen position node we can feed that into a split node and then we can create a subtract node and we can feed the output of our scene depth into the ract node and subtract the alpha of the screen position from there we can feed the output into a divide node and the Divide node will take our foam distance float and from The Divide node we will feed it the output into a saturate node and then I will create a lurp node and I will feed in the foam color and the watercolor and the output from the saturate node will be our T variable for the lurp and then we can hook up the output node from our lurp to our output this is what it should look like when you are finished with this subgraph and what this is doing is it is taking the scene depth and the screen position and it's doing some math to figure out where the color should be the foam color and how it should transition back to the water color so I'll go ahead and save this subgraph and then we need just one more subgraph so I'm going to create Shader graph and subgraph and I'm going to name this refraction subgraph I'll go ahead and open it and make it full screen for this subgraph we will need two floats a refraction float and a distortion float we will take our refraction and Distortion floats and I will create a normal from height node our refraction will go into in and our Distortion will go into strength then we can create another screen position node I will leave it on default and then I will create an add node and I will add the output from the normal from height and Screen position nodes and I will feed that output into the scene color and then for the output I will change it to be two Vector 3s I will call the first one out normal and the second one out Vector 3 and I will feed the output from the normal from height to the out normal and I will feed the output from the scene color node to the out Vector 3 fre output and this is what your refraction subgraph should look like when you are finished I will go ahead and save the subgraph and if you end up getting some errors in the console while you're doing this process you can for the most part just ignore them um sometimes it doesn't like when you add certain nodes or connect certain things but it'll still work in the end all right so now that we have our three subgraphs I will go back to our water Shader graph we make it full screen in the first thing I will do is I will create a position node and I will change it to object space and feed it into a split node I will now create a combined node and I'm going to feed the r to the r the B to the B and again RGB uh will also just represent the XYZ coordinates so what I'm doing here is I'm combining the X to the X the Z to the Z and then we're going to figure out uh some displacement for the y variable and then from this combined node I will feed it into the position vertex and then from here I will right click and go to create node and then in my subgraphs I have a couple extra that you might not need um but I will choose our wave noise subgraph and I will use our noise scale float and hook it up to our noise scale input our wave speed float I will hook it up to the wave speed input and our textures and our noise textures I will hook up to the noise texture inputs and from here I will create an ad node I will feed the first output of our wave noise subgraph into the ad node as well as the G or Y value of the object and then I will feed that output into the combined node which is hooked up to our position vertex if I go ahead and hit save we might be able to see some Distortion already in order to see the Distortion I will go ahead and set our noise textures as you can see we have something going on here I believe I'm going to decrease our noise scale and as I do that you can see it becomes a lot smoother I think something like 03 maybe 02 seems to be okay and in order to get this displacement you have to have a mesh with several vertices so what I'm using is just a subdivided plane that I made in blender again if you don't have this model for a subdivided plane you can use the package that will be linked in the description along with the noise textures that I'm using now if we go back to our Shader graph for our water the next step is adding the color and the foam so I'm going to go to create and I'm going to use another one of our subgraphs I will use our refraction subgraph and the second output of our wave noise subgraph will feed into this Distortion input for our fraction subgraph and then I will use our refraction float and feed that into our refraction subgraph as well and I will link our outn normal Vector 3 to the normal tangent space three value of our fragment Shader and that's just going to uh change up how the normals are done and then I will go to create node again and this time I will choose our foam subgraph and for this node I will use our foam distance float our foam color and our waterc color as the inputs for this subgraph and then I will create a split node and I will feed our output into there I will also create a lurp node and I want to hook up the output Vector 3 from our refraction subgraph to the a input for the lurp node I will connect the output from our foam subgraph to the B node of the lurp node and the T value will be the Alpha from our split node here from there we can hook up our the output of our lurp node to the base color and that should go ahead and give us some color so the reason it is see-through right now is that our water and foam colors do not have an alpha value so I will go in here and increase the alpha and I will just increase that for both of them and as you can see we're already pretty much there just to round some things out I'm going to hook up our smoothness node here our metallic node here and our transparency node here and I will go ahead and save and now you have essentially the same exact thing that I do over here the only difference right now is just the colors and the transparency if I bring the transparency all the way down of course it'll go away I can bring it all the way up and it's back there wave speed I can bring it all the way down and it won't move further up it is the faster the waves will go noise scale the smaller the noise scale value the actual larger sure the textures are spread I'm going to bring the smoothness all the way up something is not quite right with our refraction so I'm going to take a look and see if I can figure that out uh I see what I did wrong I have these flipped actually so I'm going to feed the refraction into the strength and the Distortion into the in here and I will go ahead and save our refraction subgraph so this might just be cut in earlier in the video but this is how you want your refraction subgraph to look we go back now you can see our refraction is working a little too well so I'll go ahead and lower our refraction value and that'll just change how much Distortion and everything is actually happening to the colors underneath the water and last but not least I will go ahead and move our duck over now if I hit play both of our ducks are swimming neatly in their own ponds another feature of this water is that it is tilable yeah this water is tileable so right here I have four different tiles of it and you can see there are no visible seams or disconnects they all just kind of line up if you want the waves to be bigger you could change the Y scale of the [Music] mesh and that will allow it to be larger um but yeah just play around with this however you want in the end you do have a pretty nice water with some fraction going on as well as the foam around any objects that you place in there if this video helped you please leave a like and a comment for what you would like to see me do next thank you for watching goodbye

Channel: MichaelsGameLab

Views: 3,149

Keywords: unity, tutorial, how to, game dev, game development, unity 3d, 3d, urp, universal render pipeline, unity 2023, shader, graph, shadergraph, texture, material, uv mapping, uv, map, unwrap, scale and center texture, shader graph, universal, render, pipeline, scale texture, tiling, offset, tile, clamp, repeating, tiling and offset, node, unity 2024, water shader, how to make a water shader, unity water, water, vertex, water shader graph, water shadergraph, michaelsgamelab

Id: 8TO5Q-rwHLs

Length: 16min 11sec (971 seconds)

Published: Mon Jan 22 2024