UE4 - Tutorial - Cartoon Water Shader!

hello guys and girls and welcome to a new tutorial in today's video we're going to be covering this cute little water shader here that has a neat effect in it will look a different color depending on the depth of the objects below so you might be able to see here on this sphere especially because it's white you can see that we're getting some different colour bandings based on how deep this sphere currently is and we can just take that step further and if we were to raise our water up you can see that it gets darker and darker until we're right at the dot yay so this is what we're going to be covering in this video now this is just a single shader but it's quite a long one and we're going to be mucking or with some transparency so there are gonna be some white times on your shaders compiling so expect a few cuts here in there when I do that just pause and wait for yours to catch up because as I say it might take a little bit of time or your shaders do compile and before we begin I am going to be providing you with two textures for this tutorial they are you asset so you don't need to import them just drag and drop them into your content folder obviously download them first and then head to the folder that you want to place them in and then just paste it would help if I to copied them first wouldn't it Dean come on copy and then we'll paste them in now you can see here they'll pop up inside of this folder and these are the lovely textures that we're going to be using so the first thing that we're going to do is we're going to make a new material and we'll call this M underscore Tunney water yay and we'll open this up opened on my other screen here I'll open him up now the first thing that we want to do is we want to make sure that we set this up so that we're getting the correct or render settings so we know it needs to be see-through so change our blend mode to translucent we're going to leave a default lit we do not want to sided in this case but we are going to head down to our lighting mode because we're going to want a roughness and a normal map now by default these are turned off with a translucent so we have to change our lighting mode and we're going to select surface a translucency volume which as you can see here is used for surfaces like glass and water so we'll choose that and there we go our material is now set up and ready to go we don't have to change anything else of material settings now we just have to set this thing up so the first thing that we're going to set up with our material is the coloring so we're gonna have our colors be brighter towards the top of our surface for just minimize this down you see towards the top we have a brighter color and towards the bottom we're getting murkier and darker and that's what we're going to set up now so to do this and to make sure that things are looking natural beneath the water as well we're first going to get us a seen color texture what this is going to do is it's going to return the color of our scene that's our and to make sure that we're getting our color on top we're going to use a little node that emulates Photoshop and it's going to be a blend overlay so we're going to take our base and we're going to add a color on top of it we color that we're going to add on top of it is our water color to get our color as a parameter so that we can use this in an instance we're going to hold V and left-click whoopsie-daisy vvvvv and then we are just going to call this water color like so and we're just going to drag a pin into the blend and then what we'll do is we'll just set add color to something like a light blue I'm gonna be too precious about it we're just gonna choose a light blue like so and we can tweak these colors later because this is a parameter we'll be able to change this in an instance and it will do that in an instant yay see what I did there right next thing that we're going to do is because if we just plug this in it's just going to return our base colors and we don't really want that to just give us our base color with a blue on top we want this to have a nice fade to it now because we're using a transparent material we have access to depth fade and what we're going to do with depth fade is we're going to use this as a mask to determine where our colors change so what we're going to need is a little scalar parameter here so we'll hold s and left kick left click sorry for a scalar parameter and we will call this our depth mask begin a little bit of slowdown there and real c'mon depth mask of area and we're just going to default this to one we can change this in our instance later and we'll plug this into the opacity we'll hold s and left click again and we will call this our depth they'd like so and we will plug this into a fade distance and we are going to default this at a two to five so now that we have this how we're going to determine or what colors to use well quite simply we are going to hold L and left-click for a lip and what Allah allows us to do is take two values and then blend between them based on an alpha or a mask we know this is going to be a mask so we can plug this into the Alpha and we know that we want our base color which is just going to be our seen color looped with our blend overlay like so so now based on this mask right at the very top of the water we're just going to get our regular color and then as it travels further down it's going to become more blue so we're going to get a nice fade now we could stick this straight into our base color and test that out but we're not going to we're going to add another color to this for the very very button of our water where it's going to get to its murkiest and darkest to do this what we're going to do because we already have our fade from one color to another color we don't need scarcity in color again we're going to make a new loop hold L and left-click and we know we want to start with the result of our first loop so we can plug this straight into AB B and then we need a new color so hold V and left-click for a new color and we'll call this color like so we'll plug this into the B value because that's what we need to be changing to and we will now pick a darker blue let's see don't go too far in we want it to be quite murky and we're just going to by you down a little or fine-tune that a little bit later there we can just take a darker blue for now now for the Alpha once again we want to aid so we're going to use a secondary depth fade this time however we're going to create a much larger fade and we're going to use a slightly differ SN left-click and this time we'll call this our Merc depth mask and we'll click this into our opacity we know already that we want this to be a different values we're just gonna stick this to 0.95 so it's a little bit less apparent than at first and hold s and left-click for another and Merc depth aide and this one we know we want to go a lot deeper so because we need to go a further distance we'll set it to a higher number say 900 and plug this into the fade distance next we'll plug this Drella into our alpha but the secondary lip and we can now plug this into our base color and we have the base color of our water ready to go now we're going to have a lot of parameters to mess with once we've got this material sorted so what we're going to do is we're going to select all of our current parameters and under our material expression group we're going to just call these water Cola and now in any instance we make these are going to be underneath the water color subheading which is going to make things much tidier for us inside of our instances you can see here it's taken a while to give us a little update we can press apply to get that going and it's going to take a little while to get that sorted okay so now let's finish loading we haven't updated a little preview yet oh it's frozen it's trying to do it for me there we go you can see we're getting add different colors here and you can see right at the top it's a little bit lighter than it is down at the bottom see that we're already getting this nice little transition which is pretty cool but right now it's just a blue blob it's still quite cartoony that's kind of cool actually we like that don't we we do the next thing that we'll do we'll do our roughness so we're just going to hold s and left-click or a scalar parameter area and we'll call this our roughness there we are and plug this in now with roughness zero is rough and no it isn't zero is smooth and one Israel so if you want it to be smooth and therefore shinier you want a lower number we want it to be shiny because it's water so we're going to set that to zero and we'll just have it plugged in you can mess with this value later on in the instance if you want to but obviously the lower the better for water the next thing that we'll do is we'll just make sure that we have an opacity parameter so s left-click Oh Cassity and we'll default this out at 0.5 so that we can see things working in a little while okay so we have our two really easy parameter set up that's our roughness in our opacity they're done yay give yourselves class the next thing we're going to do is we're going to set up our normal Maps now you'll have noticed that we have a texture called water norm it's the one that I tend to use quite a lot especially in these tutorials the a we're going to drag this into this little material window here so we have a texture sample of this and we're gonna actually need two of these so highlight it control C control V copy paste and now we have two of them the next thing that we're going to do because we want these to move like waves is we're going to move around the texture on the UVs so you can see we have these UV pins we're going to move our texture by influencing the UVs to do this we're going to have to reference our UV coordinates so we'll get a heat texture coordinate here and to make sure that we can change the scale of this because we don't know how big our plane is going to be last small it's going to be an obviously we want to be able to change our instance to have the same scaled water no matter what we're gonna say text coordinate and then hold em and left-click for a multiply and we're going to multiply this by a scalar parameter and this we're going to call our normal scale 1 so we'll default this to just a value of 1 so that we don't break our texture and that will just copy and paste these I got extra coordinate into the second multiply and change to these second one to what normal scale to rather area and the next thing that we're going to do is hold P and left-click for a panner there we are we'll do that twice now we'll plug the multiplied into the coordinates of the Panna and what a Panna does is it allows us to scroll our textures around and our material and make them animated so we could just hard set in a timer if we would take the same times that I've got in my preview we would have negative point 1 and negative point 1 and point 3 positive and in the second one we have a point 2 and a point 1 like so and then we can plug these into the UVs of our texture samples and now they will move around yeah however if we wanted to change these in our instances we are going to need some lovely parameters for ass beads because we want to be able to control our speeds so we're just going to make a little bit of room here what we will do here with our first one is we are going to hold s and left-click for a scalar parameter and this is going to be our normal one Exce like so and then we will copy and paste this and call this normal 1y like so and just to make sure that we get the same speed that we currently have in here we have negative point 1 and point 3 negative point 1 and then point 3 now you'll notice problem we have two pins but only one area that they can go to and they can't possibly both occupy the same space at once so what we need to do is we need to use an append and one other pend will do is it will take two values and then put them into a value of the combined amount of those two it's not adding them together it's putting them into a list so our new list is going to be negative point one and then negative three and we plug this vector two into our speed you can see it will take our two values and negative point one and negative three and it will put them in the order of x and y which is woven in them x and y highlight this copy paste flick this into the speed of a second Panna but we are going to change our from our names to normal 2x and normal to Y and then we'll just make sure that they're defaulted so point to point one point two and point one okay we're not quite done with the normal so because we want to make sure that we are using both of these so we're going to hold a and left-click different ad node and we'll click the RGB values of both into the ad now then by adding these together we're going to be pushing the normals into values that they normally wouldn't be at and one of the values that needs to stay the same in a normal so that it doesn't look broke as heck is the B so what we're going to do is we're going to comp mask just the R in the G we're not going to take B values we want the red and the green values because we want those to be higher so those are more defined but we need the B which is just the base of the normal to just stay the same what will then do is we will multiply so hold em and left-click for a multiply you'll multiply this by a new scaler S left-click and this is going to be a normal strength well this is going to allow us to do is control how powerful and normal is we'll give this a default value of 1 so it's just defaulted what we need to do because obviously we need RGB and we only have our G here is we need to do something we've already done which is a append we need to add something else to the list so do all at the pend and as I mentioned we don't want our blue value to go above the default so hot one and left click or a constant plug this into B and set this value to one like so now we have our normal map back to normal haha dad jokes what we can do with that is we can stick this directly into the normal pin and now we'll have some lovely normal Maps on our material so we can go ahead and press apply and then we can wait for that to compile ok so now we've got that compiled you can see we get this nice wobbly bobbly effect yay isn't that looking cool so what we can do now is we're just gonna hit the Save button so save that so we don't lose anything we're going to minimize this down and now what we will do is we will take a plane so let's get rid of this guy we will take a pulley and we will just scale him up big there you are we don't need to be quite that large we can scale this down as deficit sort of try and match the same skill that I had at the start make sure they're just there we go right so we'll place this into our level somewhere I'm going to place it a little bit higher up so that we can see the depth working on multiple levels now we're not going to apply the material directly remember we're making this four instances so what we will do is we'll right-click our material create material instance and what an instance allows us to do is it takes the parameters that we've set up and we can change those in real time for instant results we don't have to keep compiling what we'll do is we'll apply this to a plane and you can see here we're getting some nice results already we're sort of getting at the colors that we need you can see again a little bit darker in some areas a bit lighter in some areas and you can see that we've got our waves now it doesn't look anything like the one that we had at the start because we still have quite a lot to add to this and we're going to just quickly match up some of our instance values so if we were to drag out at instance here we've opened this up I just dock this inside the same area take this guy and dock you into this guy so we can see them together there we are so what we're going to do is anything that we want to use we can turn on by ticking the little value you can see here we've got all of these things in the nice little groups we haven't done the normal grouping but we'll do that next time we go into the material we don't want to compile for that right now and what we're going to make sure that we do is match up some of these values so let's see a murky color let me just grab the murky color that we had in the preview and here is that value so red is point zero two four to eight green of oh three nine zero five nine and blue of 0.2 seven four six double seven up and that is our murky color and then for our regular blue color it's going to be this guy nearly the same point Oh 109 six and 0.6 or 104 nine six and blue set to one no we've got those nice and colors exactly the same now I'm murky mask we're just going to lower that value down to 0.9 a little bit less murky depth mask is fine and depth fade is also fine so this is exactly what we want the rest is going to be down to the other things that we add in so one of the things that we currently don't really need up is our opacity now we only have this as translucent so we had access to the depth the depth fades our opacity the higher we take this the darker colors will become so if you set that to 1 you're gonna get this nice blue very very deep blue trim minimize it down you can see now we're getting this really nice blue color which is pretty cool so what we're gonna do next is we are going to change our normal strength and a normal scale so you can see right now they're really really wavy we don't really want them to be quite so wavy we're actually going to take our normal strengths down to 0.1 to really lower those down a little bit but now we can only see them because they're not really occurring very often that's what we're going to do is we're going to change our normal scale 1 and N all scale 2 now the reason we have two scales and two sets of movements is because we want two sets of different waves overlapping each other so that we get a little bit more motion so it breaks it down and it's less obvious that it's repeating so ask scales we're going to put one two five and two is going to be three that's confusing to say two is going to be three and one's gonna be fun life there and we're just gonna leave our speeds to what they currently are and that's going to match what we had at the very beginning as far as our little waves go so what we can do is we can save the instance now we need a couple more things to get this looking the same as we had at the beginning we are missing the little shines on top which we're going to be using at caustics four and we're also missing just a little bit of refraction that we had in there for extra detail so we're going to open our water material back up and we're going to first do the little shiny things or the caustics now for the most part it's going to be matching all of this guy so what we can do is we can just select most of this and we will take all of that copy and paste it but we're going to change the word normal in all these instances to caustic that caustics gal to edit cool speak scale one normal become course pick one or stick one way and the same here for dick 2x and here we have a or dick to white now the only thing that we need to change is actual touch just because they're still using the water norm see here we're just going to minimize this down ever so slightly but we can still see our textures with one of these selected you can see we have our texture here we can just drag it and drop a caustic texture into those boxes to change them so before we continue on we are just going to quickly change all of these guys did you do did you select all of the normal parameters and will set their group to normals like so now we'll select all of our caustic so far and change these to cool sticks or shine this train is probably more appropriate than caustic because they tend to be under the water but there we go now similarly to what we did previously we're going to add these together to hold a and left-click and plug in our values here nice now because these are black-and-white textures we only want one value to use as a mask so we're just going to comp Moscow tonight it doesn't really matter which one you use because as I say this is black and white but we're going to take red because it's just the first one in the array and now what we're going to do is we're going to compare these little of values okay so what we want to do is we want to use an if note normally I would say don't use an if node because they can be quite expensive but in this case we don't really have a way around it because we getting multiple values we want to switch them on and off based on another value so an if node is the only way we're going to be able to do that right now so we're gonna get if and we will plug our our value into the a so the a of the if and then in the B we want to or s and left-click and we're going to say Shyne the limit will call this shine limit and we will set this to a default of one I'll plug this in to be next what we will do is we will plug some values into the a greater than being a less than B to hold one and left click twice to get two constants in each one of them two one and leave the other one at zero and the one we're going to plug into the a greater than B and the other is the be greeted greater than a that's what this is going to do is it's going to say if the value from our texture samples is greater than the value of shine limit at this case one we're going to turn it on but it's not return off so we will now take this value or m and left-click for a multiply and we'll multiply this by a new value which is going to be ash drinks will say flash drink because this is default value of one just so that we can see it and we can plug this into our emissive color because we want this to emulate light bouncing off the surface we'll plug it into our emissive color so that it has a brightness okay so we have our little flashy Costa key things all plugged in and ready to go we can press apply and again wave for our lovely compile okay now we have that compiling done you can see here we're getting some flashes on our surface pretty cool and now these flashes are going to occur anywhere where the white lines on either one of these textures overlaps and the values that they are greater than one because obviously white is one but if we're adding one on one together we're gonna get two if it's two then obviously we're going to turn it on if it's not and we'll turn off so that's a way that these flashes are working and if we go over here you can see that they're flashing quite rapidly in here and you can see we're getting some that are just flying along there aren't flashing now the ones that you can see that are flying along that aren't flashing these are values of one so what we need to do is we need to increase that Flash value a shine limit if we increase this to 1.03 and anything of one isn't going to show it's only going to show anything that is greater than one now again some nasty little artifacts here and the reason we get some nasty artifacts is because we have to set up our values so turn on all of these little things here and yeah and I caustics you all turn these guys on we need to add some of this to our core Stix as you can see shine limit and our flash drinks it should be up with that caustics but it isn't so what we're going to do is we're going to set our caustic scale to three on both values because we want these to flash every now and then and then we can change around some of their motion to feel like they're they're perhaps moving just a little bit quick but caustic 1x we're going to put two point zero three caustic 1y we're going to put two 0.001 caustic 2 X we're going to set to negative 0.05 and the caustic 2y we're going to put negative point zero zero two so they're going to be moving very very slowly across a surface but you can see them ever so slightly just flashing on enough from time to time because they're overlapping a lot less than they were previously but right now they just look like little white splotches and that's because we're just setting the value to its current value which at any given point is not going to exceed two so what we need to do is change our flash strength and the flash strength is going to change the emissive value and make them glow or flash so we're going to set this to a lovely value of 200 which is nice and bright and they can see one already here on my little preview you can see them flashing all over the surface yay I call zap so now we can look at them in a little level and you can see they're flashing on our surface we have the flashes we have the color we have the normal we have the depth we just need a little bit of refraction and the refraction is just going to bend the light a little bit just to make things a little bit cool and wavy so obviously we have refraction available to us here it is look at that guy refraction so to use refraction we have to blend between two values much like we have with our labs up here so hold L and left-click for a loop and now we're going to control this using our camera angle and the best way to do this or rather a viewing angle not a camera angle is going to be a for an L node and now and we will plug this into the Alpha now what I prefer an L will do for us if we can quickly get this to preview is it will add a little glow to the outside of the circle here you can see and that will change based on whichever mesh we put in there but you can see when our viewing angle changes it changes the value of B this is that we can see so we're going to use that as the Alpha and in the a value we're going to set just a value of 1 so we can or 1 and left click for a constant set that to 1 plug that into the a and for our B we're going to set this to a scalar parameter hold s left-click we'll call this refraction and we're going to default this out 1.33 which is gonna be really really too high you'll see shortly 1.33 plug that into the beep and we'll put this into the refraction now then when we press apply to compile this we're not going to be able to see it in our world so go ahead and press apply and I'll show you okay there we are so you can see just on the preview we're getting no refraction at all and if we were to minimize this down once this has caught up we're going that'll be too quick for unreal today haha once this has caught up we'll see that there is absolutely no refraction to be seen okay there you go no refraction I never tell you a lie and the reason we can't see any refraction is because although we can see through this because we're using our depth fade it's technically 100% opaque due to our opacity now if we were to take our opacity value and just lower this down to something say 0.5 back to its default look you'll see now we have some really ugly refraction going on so we're going to use the opacity to help us control our refraction in our case we want to actually push it the other way she's taking the refracted lines downwards we want them to be just above what we can see so we're gonna take our fraction ad down and just put it ever so slightly above ever so slightly just teeny tiny little bit let's see what we had on we had 0.95 they were set to 0.95 and then we're getting like a little bit of a wave to it as you can see it's it's waving the refraction it's a little but it's kind of boring kind of boring amount of refraction so what we're going to do is we're going to use our waves to help influence that so back to our main material and to get our waves to influence it what we need to do is we need to plug at normal into F Rennell now we can't just take dis appended normal because we're using normal strength at which point we're only going to get 10% of the effect we want to use all of our normal what we will do is take from our R and G values and we will then append them again into a one before they're multiplied like so so we append them and we will then put that into the normal and now what that's going to do is it's going to allow our normals to influence the for Nell so it's going to change what we can see based on the normal instead as well as our viewing angle instead of just the viewing angle so as the normals move around it's going to change how the foreigner looks and it's going to wobble our refraction with the waves again it's going to take a little bit to compile to apply okay and you can see here already you can see that we're getting some nice wobbles just in the preview refraction that is matching our waves there is pretty nice it's not quite caught up with us back over in our level as you can see we're still just getting this gray but once it catches up you can see we're getting this nice waviness to our refraction here pretty pretty cool quite nice everyone and just raise this up although let's see but with the coloring that something tells me that one of our values and might not be correct because we're not quite getting I of course we're not we haven't put the opacity back haha do you see Li there we go we were personally back to one and I can see we getting this nice little bit of oh no not one we don't want one all right cuz that gets rid of the refraction again so we want the opacity to be ever so slightly down so maybe 0.99 we can't see a point nine eight point nine I don't see we can see it now point nine seven we can see it point nine five is really nice but what we got on our preview the preview was point nine so we can go down as far as point nine there yeah to get that nice little wavy refraction above our objects that are in the water as long as we can see them at the right angles cool and now if we were to raise this up you see that it will get darker and it will get darker yeh up into a limit of our nine hundred units but it will get darker and darker as we take it higher and the lower we get the lighter it will get until it's just really really shallow water so we can have automatic depth obviously you can set your colors to over you one play with the parameters you can set all of your different like your Flash sizes how often they're going to occur how bright they are you can really blow some of this stuff up there you go everybody some really cool to new water with automatic colored depending on the the depth of your your lake or ocean array pretty nifty as always thank you very much for watching and if you'd rather just download all of it pre-made if you're having trouble then you can go ahead and check out my patreon where I will be uploading the files to Rhett lead for download as always thank you very much everybody I'll see you next time

Channel: Dean Ashford

Views: 41,541

Keywords: Games, Video Games, Gaming, Gamer, Lets Play, PC, Console, play, playing, player, play through, play guide, guide, game guide, dean ashford, dean, ashford, UE4, Unreal Engine, Tutorial, Teaching, Teacher, student, indie, dev, developer, development

Id: yqZnWuLrDO4

Length: 35min 48sec (2148 seconds)

Published: Sun Jul 12 2020