Unity Shader Graph - How to make a Simple Water and Waves Shader

okay so hello and welcome back to another unity shaders tutorial and this one as requested I'm gonna be doing a water tutorial to make something that looks quite a bit like this with water normally you might also want vertex displacement where it actually looks like it's moving up and down because this is completely flat on a plane the only reason why it looks like has depth is because we're using a normal which is the method we're doing this with and I'll show you obviously when we go into making the shader how you do that one of the thing I'm gonna mention before we actually do this tutorial is I'm thinking of other ideas for unity tutorials rather than doing shaders every single day because I will keep doing shaders obviously but I feel like if I keep doing them every single day I'm gonna run out of ideas for what I can do with shader graph so I'll delay their multi like one every two days or one every three days or something but I want over ideas for unity tutorials in between so for example I could do a series on like how to you know do the basic things in a RPG because I'm making an RPG in my own time or I could do how to do a 2-d game or side scroller or whatever or a mobile game just I want people to ask and put their ideas in the comments for what kind of a game or what yeah to make a series on first obviously I can do more series series is afterwards but yeah I want ideas for the first one start off with and then obviously I'll move on while still making other videos at the same time I just want more ideas so anyway let's get into it so let's bring that out and obviously this is like animating it I'm not in play mode right now so what I want to do is we want to create a new material and I've already named that water mat sale to call this water and I'll to call this shader waves just so I don't have anything name the same we'll put that into the water and boom we're back to a normal plane with the shader on it the empty shader so the only thing you need for this is you need a normal now you can this is mine the one I'm using I won't put it in the description you can easily search it all I did find it was going to the Internet and you can just search water and normal map seamless that usually seamless anyway and obviously normals look like this and what they do is it basically tells unity how it want light to hit the image so that even though this isn't the color of our thing this is how a light hits it and obviously if I went and download to the different one and I set that as the normal in the shader then that's the bumpiness of it basically think of a normal as how the bumpiness of the material and it helps it look like it's got depth even though it technically hasn't so go find one that looks good for you whether you want your wave to look like this or like this or like this obviously the bumpier is the more like the more noticeable it'll be this is the one I'm using here if you want to find it just this one I don't know just found a random one whatever is right for you anyway make sure you've got a normal and that's all you really need for this in like preparation wait where do I put what's over here okay so on the output we actually don't have to change anything at all which is obviously nice now the first thing I'm going to do is we're going to sort out the wave moving so somewhere we want a sample texture 2d while she first of all let's make up from it so we want texture and we'll just call it normal now we want to put in this so we can see it all we're testing now here's our normal and we'll put it into here and this won't work originally because you see here it's taking it in as a default which as far as I know is just an albedo we have to change this to normal so it treats it as a normal map and now you can already see how the black bits are it's darker and the blue I don't know why blue is the color it just is that's the color of the that's where the light is now if we put that straight into the normal you can actually see now we've already got our material to have the bumpiness let me just go in here and in the shader just go and apply when it lets me just go and apply the normal and now you see our thing has the bumpiness but well there's a few problems which we're going to change where one is it looks a bit too stretched it's taken this one little image which is like is it free hundred by three hundred some in are very very small resolution and it's stretched down to this giant plane so it looks a bit nice bit one of the thing is we want it to be animated we want to have color on it and we also want cool effectors by layering two on top of each other moving at different speeds to look like actual how the sea would look or how water look so the way we did that part is by having another sample texture 2d and just feeding in the same thing yeah well we want to change some values so for example we want them to be nice changes to normal we want the two things to be slightly different what's this unhook this because we're not going to go straight in there we won't be able to okay so we need to obviously have some kind of way for offsetting them I've used that in my last two video so we're gonna get tiling and offset I move on for each so tiling an upset and then we output the UVs just like last time and now they look sorry and now this is how we or where we change everything so tiling is up to you for this we're gonna leave one what we actually what I'll do is I'll just make a vector ones that we can tweak the tiling so I'll put like a layer one tiling here and layer two tiling here and I will give those default values that's probably a good idea so we'll go for like two and three or something just so the bottom one is a bit more than the top one sorry I've already dragged them in so I need to just hook this up the tiling I'm hook this up to the tiling here there we go so the X&Y for the tiling is gonna be 2 on here - and - and then free and free down here so now we've got the same texture but there this one's got more of it in a smaller area which is there look we're going for and you'll see why that looks good in a second now we're going to have to change the offsets by using time just like we do normally to move stuff around but the problem is as we always know x and y so if we use time into this we could offset it but it would always move diagonally now obviously you might want your water to move diagonally and you can always rotate it anyway but it's a good idea actually in my opinion at least to always be able to tweak values like that just because if you can chill tweak it it's better than you know not being able to so we're gonna use a combine which is what we use quite often we're gonna we're gonna output the vector twos as the offsets so this is like how fast it moves and we can sort out how fast on the X and how fast on the Y it moves by changing the RNG values on here so that our value goes in first because our G so our will to change the X and G will change the Y hopefully this is all making sense if you've watched my last few tutorials it should and then as you might expect we need time and now let's say I just put time straight into here that's gonna move it but not not how we want it to also cuz it takes in an R and a G I mean yeah we could just also output time to G still doesn't give us the effect we want at all so because the problem is if x continuing increasing but let's just let's just do it let's just do it so we're going to add some more vector ones these are going to control the X&Y movement of the wave so wave speed X and we speed why now what values did I use for these I just want to make sure it's sensible I used point free by default that would that was quite fast I'll go from point it was actually really fast point oh five I think looked better 2005 and now what we're gonna do with these speed X and speed wise this is gonna be able to control the X in the way of the waves so time in with the way speed X and then kind of a multiply time in with this so hopefully there should be obvious to you these two multipliers are just so we can control how much of time the time effects in the X and the y and then the way we output it is we this is the X and this is the Y and now that is sorted for the wave movement as you see down here that's moving and that's moving at the same time at the same speed but there's more of this in the shorter a smaller area so when we layer it it looks better and also if you change this to something bigger so this is the Y so this is up-and-down if I change that to 2 as you see now it's still moving to the left a teeny bit because of this but it's moving up and it's moving down really fast because then I've set that to 2 but let's see that 0.5 whoops point okay now the last bit we need for this to be able to display it is we can't pass in two normals to our output node to the master node so one thing we can do is we can use the alert function and with the lerp basically if you remember from last video laughing has a minimum a maximum basically two values and T is how far between them we are so what we can do is we can pass in both our values as the a and B so these are the two different maps they're two different ones and we can now control how far between the two we are now let's let's link up to the normal and you'll see currently this is what it looks like okay let's get in there but it looks it looks okay looks okay but you know we can change that so what we're gonna do down here is we're gonna say we're gonna take in a vector one for the way to control how much whether we're using more of this texture or more of this one this is just a tweaking thing again so let's just say I don't know percentage of I really don't know what to call this percentage of Maine Tech mean normal I don't know call it what you want basically that's what it means that's what I'm calling it that and we'll set that to we can set that to a slider because a slider because that's always gonna be between zero and one this T here only takes in between zero and one if you go below zero it ignores it if it goes above one it ignores it it just treats it as so if it goes above one it treats as one if it goes below zero it treats at zero so let's take that and we want to learn that value why should you know we don't need to do that if I've capped I don't think that should know that'll be fine let me just test if it works re I think it is so as you see here if we change this slider we can change from the two different maps that we've got and one really cool effect is having both visible but one a bit more than the other so now you can see one of them is moving over the other one and it gives it a really cool it gives it more of like a cloud effect in my opinion but it does look really good for the water now if you have one or the other it's just a bit yeah I like oh I got the point for that looks cool okay and then all we need now really is the color because it looks a bit bland so first of all let's take in let's move up here we need room for this it's going to go into the albedo anyway so we want a color main color we'll set that to a nice blue obviously we can tweak these in the editor anyway the inspector now let's say we did that to the albedo see this is all about tweaking for you now that's thus moring but it works now we have a plain color but nothing a plain flat color for the water really doesn't look nice even if we tweaked it to be more suitable it really just doesn't doesn't have the same effect so we're gonna have a secondary color as well so add a new color secondary color and this is gonna be a darker blue or green e color because this is like kind of underwater the color you see when you look at water you see like underwater color you would know you know I mean that's got a bit darker it's better so now we have this but how the hell do we put these two in at once well we can't so we can use a loop again but this also isn't gonna solve our problem because all this is gonna do is go between the two values it's not gonna give us an actual mix like it's either gonna give us one the other or the color in between well we want tug we want to be able to see a kind of transition color it's like you'll see now if we well I can't show you a nod I'd have a look value to alter well let's say it was simply work like this if I set this to one one one one as you see now it's gone all the way to this color and then if it was zero zero zero zero it would be the other color now what we want to do is we want to use some kind of effect to smoothly transition between two so we need a gradient and one good way of getting a gradient is the frontal effect so let's get the frontal effect here and we're getting there we're getting there we'll just leave the frontal watch you know we'll add another vector one for this for the vanil yeah sorry frontal power and let's put that in that's that's not right we need to move it up yeah one point free LD obviously you can you can tweak that as well now you see a problem here is that it's R it's reverse it's a wrong way around because right now this doesn't look very good does it it's looking okay but it's not great first of all I want to get rid of the smoothness you can op see tweak that for yourself but I don't like it I'm water obviously you want some reflection will sort out at the end so it's um doesn't like rocks so now we can we need to invert these two because they're hooked up back to front there we go now we have more yeah this better we might also want to like you see the problem with this is the green is closest to the camera and the Blues furthest away and if I move my camera around here it gives the same effect the green is always the closest bit to me now really that's that's not what you want you want it to be you don't want it you don't want it to rely on your camera you want it to round the world so I'll just get a world output here and that can go straight into here let me just see if this works no sorry we need to have a frontal effects as well to make it up here in the middle for an or effect into being an idiot this frontal effect he shouldn't even be here I just accidentally added a friend I need to get the power of this and this now oopsy-daisy what I'd gone and done no I forgot to hold that back up I'm being silly I still not given the exact exact effect I want but it looks good from the camera I don't know you can tweak the values you want I'm not gonna say ed tweaking values for the whole time you know I might pull that back to point five as well it like because we want shininess on the water yeah it might be a bit too much there I could just put this into the parameter so he can tweet this go go I'll leave it like that but anyway I think that's everything so as I explained here's our texture we got two of them so that we can work between them then we've got the offset to move them at the same rate but over here I let them take in a x and a y speed so that you can choose whether it moves more in one direction or the other and then we combine them to be an a vector two for the offset and then at the end we obviously we can have the property here to lurk between them and then up here is where we sort out the color of the actual shader now if I put this onto a plane yeah depending on how you look at it you get different color effects and obviously like you will want to tweak that and I'm not gonna sit here doing that for the whole thing but I hope the person who asked for this got what they wanted this is pretty much as this is as much as you can really do in shader graph currently of water because you can't do vector offsets though you can actually in you can actually attach code to your water plane to move the vertices that is possible but it'll be a lot easier with the shader when that's actually a option to option in the shaders when they released the new version but you know that's just a matter of time before they do it but yeah I've got a few of a suggestions been given for shader videos so I'll cover those in the next few days someone asked for a kind of glass looking like a a glass shader where the objects behind the glass look blurred a bit and someone asked for a vector where like for example liquid inside a jar faces upwards when the jar tilts and I'll try and do that I'll try and make the best effect I can in shader graph which is limited to shader graph currently but you can still do some really cool effects if I find that you can't really make a certain effect in shader graph I will just postpone it until you can in the new updates I've got a list ready to keep adding new ideas that people give me but for now there this is it as I said I would help a lot of people left suggestions for what kind of unity tutorials they want for like game ideas or like mechanics in games that's the kind of thing that I'd like to make tutorials on as well as Python and whatever else I do also office subscribe this channel would be lovely I actually reached 200 yesterday and now I'm already at 220 so it's going up pretty damn fast so I think a lot of people alike in the shade of tutorials obviously if you do like the video then like it would show support and also commenting what you want to see more of but I think I've covered everything anomaly say so thanks for watching and good bye

Channel: Dapper Dino

Views: 14,291

Keywords: Shader, Unity, Shader graph, Tutorial, Water, Graph, New, Coding, Programming, Game, Design

Id: YIFGedupVt4

Length: 19min 36sec (1176 seconds)

Published: Mon Jun 04 2018