Unity Shadergraph: Rain Drop Ripples!

[Music] hello and welcome back to politics if you wanted my subscribers you're probably a bit confused right now because you know you've probably seen something that looks a lot like this and that's because I've done this tutorial for using amplify shader editor but I've had a few requests to convert it over to unities shader graph and to be fair I think even in that tutorial I did say that it was possible so it's kind of my fault but a few people have had some problems so I thought I would just make make one we're gonna make this one actually so yeah we're gonna go ahead and just kind of get started so I'm just gonna delete that plane and let's just get a new plane in here I do have some lights in here that's why you see this crazy stuff so let's just go ahead and create a new shader PBR grass and then we'll just click on that to open it and I am going to just get some stuff set up here first just to save a little bit of time just basically the other base albedo and normal and smoothness so yeah you don't need to see then okay I'm back so yeah I mean if I guess if you like a super new to this then basically I've just created some properties up here some vector ones texture to DS and some colors which you your text duties that we plugged through a sample texture 2d because that's the way shader graph works I'm multiplying my albedo just with a color property and I have like the tiling set here for both of them so it's the same but yeah so that's just the initial setup it has nothing to do with the rain ripples so that's why I kind of skipped over it but anyway let's create ourselves and material and that'll do so we'll put this on there yeah so let's just feed in some some textures and I'm going to use the trusty floor tile and shoot up some normals for that okay cool and yeah I do have a tiling amount so I'll just put that up and a smoothness value which I've forgot to plug in so great just do that now so let's move this okay that's all good crazy crazy smooth so yeah now let's get on with the actual tutorial the reason everybody's here so let's just jump straight to the flip book note because this is the thing that was causing a lot of problems for people and just get ourselves even more space actually I'm going to be using the same texture sheet that I was using before and I will be providing this so let's just get actually up here so we'll get another texture 2d just call it like riffle sheet or something get that here and then again with the texture sample sample texture even feed that into there and this is a normal map so then we'll feed that into the UVs and the texture that I'll use in fact let me just you just ignore some of this for now so I'm just going to actually no no no no I want so I'll go straight with a normal blend so we'll actually blend the normals of these two and so that will actually go under there so yeah the one I'm gonna be using think I've named it correctly yeah this one the ripple sheet yeah so I will be providing this in the description of the video so you know you have to worry about that but if we take a look at this I mean it's no of course sorry I keep doing things the wrong way around you want this to be the other way so the flip book will come into the u-visa view of your sheet and then we'll plug that into normals or rather the normal blend and then into normals so yeah I'm sorry just a the wrong order there okay so that's looking a little bit better we'll do some stuff later too to control like the strength of this but so essentially this is my ripple sheet which at the moment is just kind of across this whole thing as a 1x1 but these are all frames of animation as 16 frames in total so in the flip book note here I would set mine to 4x4 if you're using like a different thing then you want to make sure you know your X&Y matches up you know your width and height rather so now if I were to save that after doing just the the 4x4 you can see it is now just displaying one of these frames if I just displaying the first frame of my of my sheet and so we want it to cycle through and this is where a lot of the problems come from this I think there's two major problems with this workflow and this is the first one so you might try to use something like a time x and we'll just get a vector no vector factor one might as well convert this to the property it's called this speed and I'll plug that into there and so if we were to just put this into the tile which you thought would be you know like the like the cycle amount I'll show you what happens although if you're watching this you probably already know what happens and that's why you're watching this yeah there we go so it just kind of scrolls through it which is uh it's weird but I'm an amazing commenter by the name of one cloud I think he has a profile picture of a cat which is always good well she I don't know I have no idea they gave me a little bit of a tip which was just basically to introduce a round node and so that is what I will do so got around and just feed that after you're multiplied into tile then save that out and there you go so now I mean the speed is low essentially this can be referred to as a frames per second rather than speed so much like long cloud suggested actually I will run it rename this to FPS so I'll just quickly save that and if I just go and grab my material now over here so because I have 16 frames of animation if I were to put my FPS up to 16 then it will cycle through like all frames that will do one cycle in one second you know which is pretty cool so you know obviously if I was to do eight frames per second then it's going to do half of half of my sheet in a second so it would take two seconds to complete so you know I'm I'm sure I don't need to explain that so I keep on 16 from now it should be okay and so this is where we kind of we encroach on the second part of the problem also before I forget a lot of people were commenting saying that the they couldn't preview the sort of animated textures unless they were playing the game and that is it's just this thing here so if you just enable that then you'll have this working so yeah that's all good yeah okay so moving on to the to the actual the you know the the thing that is taking me forever to just get to the tiling of the flipbook node I've been looking around a bit and I've seen some people come up with their own kind of solutions and it's all a bit weird but so let's just see get a new vector one and we'll just call this ripple tile and then pretty standard stuff will just introduce tiling an offset so we put that into tiling and oh make sure I have the default of one always gets me go see if I stick this into the UVs you'll see what happens when we when we increase the tiling of these ripples okay there we go so ripple tile I'll put that up to two you can see that as they tile it kind of like the the sequence goes a bit crazy I don't know I mean it's not playing it in Reverse I just I don't quite know what's happening but if you have seen my tutorial on this for the amplifi shader editor you know that we basically feed this tile node into two fracks and then we kind of just append them together and so obviously you know this one you probably tried to use two fractions and then use a combine but for those of you that have tried it it doesn't actually work with the solution which I stumbled upon last night after just half an hour of tinkering of this thing it's a lot simpler than I thought it would be it's if you just get a fraction note and just add it to like after the tiling and offset and then just feed that straight into the UVs it fixes everything there we go and I would imagine this is probably the part of the tutorial where everybody just leaves because those are basically the the two main things that I think people would have had an issue with but I'll continue on anyway just so it looks a bit more like it did before so you'll get the tiling up a bit not that much I don't know four or something let's give ourselves a little bit more space because we're going to continue with some stuff so the first thing we're going to do is we're going to duplicate these ripples change the scale of them and then offset you know just so it's not so the tiling isn't as noticeable and I think I'm basically just going to copy all of these plus the sample texture 2d and just move this up and yes give ourselves more space and we're gonna use the same ripple texture for this so just beat that one straight into let me feed that one strain today and see so over here we do still want them to be the the same speed but it's so the tiling will change a little bit and actually what I'm actually going to do is I'm just going to introduce a divide so rather than having like two separate properties I'll just divide we'll try it just by two for now and we'll stick that into tiling so we're going to get basically some other ones that are going to be twice the size once I actually hook it up so I was to normal blend and the other thing we want to do is obviously offset them a bit but I will do that in a second so yeah normal blend on the blend and then we'll get that into there so now we're going to have these normal maps blended and then blending with the actual model map of our the base so to save that okay yeah pretty cool might not even need to offset it but I think I will maybe 0.3 0.6 or something I think in the amplified tutorial I exposed this as a property and then first I was physically tweaking with the values and then remembering what they were and coming back in or something like that I don't know but for this one shadow graph actually takes ages to save it it takes me so long to actually edit these these things because I have to constantly cut out all the bits where it's just loading so I'll just put 3.6 I'm in Busan 3.3 okay maybe maybe that's okay maybe not I recommend kind of playing around with it yes so the other thing that's kind of missing what the main things kind of missing is for the amplify one we we were kind of controlling the strength of this normal map with this like noise mask that was sort of animating which kind of just it helped break up the tiling a bit so we're gonna essentially do the exact same thing here so I'll leave this as it is and we'll just kind of come down and we'll introduce a simple noise are you know not a noise I think there's something about it yeah okay a Veroni so this this this will work nicely I'll leave that open actually as the preview and basically what we want to do is kind of just animate this value so it's just this stuff kind of moving around and this will act as the strength for our normal map and then you can mess with like the the cell size as well like essentially how many there are I'll probably leave it at about six you could expose this property for the sake of the tutorial I won't but I will just introduce again was a time and we'll multiply this by a vector back to one to be precise convert that to a property and should be over here and we'll call this come on now call this I don't know like maybe just mask mask speed mask variant mask mask whatever yeah that'll do I'll put the default at least one so yeah multiply time by our speed and put that into the angle offset and so now this will continuously kind of move and obviously if you use a higher value it will move quicker pretty neat yes so this is what we're going to be using to control the scale of our to ripples so we have here the normal blend so ideally we want to introduce these scales happening before we plug into this blend so let's just get normal normal scale normal strength sorry I think amplify could cause it scale yeah so we'll feed that one into there and then we'll just copy paste this guy and we'll feed him into there and now we have two empty strengths inputs which is just going to be this and let's uh essentially just tidy this up a bit so we can try and squeeze this actually in the middle okay that should be fine so yeah out into wake boop wait it might okay there they are okay go back a little bit more out into the strengths and same for this one and then yeah so we feed this now into the normal blend and then the same for this other normal strength and if I just it saved now the it should be quite obvious yeah okay so you can see it kind of just you know picks points that are stronger and then weaker and it kind of just keeps animating through obviously if you were to just look at like one area in particular you'd still notice it's tiling still you know it's the same ripples that are appearing in the exact same place but the idea of course is just to help kind of minimize that so if you were using this on the floor in a game and your character was just running past then you know chances are you might not notice that said you could probably do something like maybe with some kind of offset so you set it so that every time it would have to be kind of based on your FFPs so for example mine is at 16 so you could specify something somewhere to say basically after it completes a full cycle in this case it would be you know after 16 frames perform an offset by like 1 or something you know and then then nobody would ever be able to tell that you were using tiles so it's pretty cool one way to get you could do it and actually know if it works that's just a theory so I mean you know try it let me know yeah ok so the other thing is we just want to actually create a slider that controls the strength of all of these so you know you might not want the rain appearing all the time and again this is conic this has to happen I think even before the normal strengths so we'll just kind of put that there and essentially if something comes straight out what am i well it's a bit weird if I put cells that should have done that that should go into they're not interesting yeah so what the differences actually all right now's not the time so yeah we're going to multiply this Baroni that we're doing just by another vector one and this one will just call while we convert it to a property and we'll call it just ripples drinks it should be all good and just plug that into the multiplier that we just made and now this will feed into our normal strengths so number one and number two and if we set the default is one just hit save on that okay there we go you probably do want to actually turn this into a slider yeah max zero to one just it save on that again so now it's a slider at least so you can come down and you can reduce the rain to nothing you know you can also do something with the smoothness here so that could be you know the floors that is you could start introducing the rain and then as you're introducing the rain you're increasing the smoothness and then also you kind of just bring down like the color of you maybe texture you know that would be the sort of animated process from being dry to to becoming wet yeah so unless I'm forgetting something that's pretty much it you may have seen in the start of this tutorial though there was like so make sure Patil stuff happening and that I will show you right now okay yeah so with this one if you look a bit closer there is actually a normal map that's kind of moving in fact if I were to just get rid of my ripples strengths up there so now there's no ripple so it's just basically just a normal map that's panning through I was a bit lazy so it's only going one way if you look at my previous tutorial on this using amplify we do have it going two ways which you know it looks looks a lot better yes so that's basically all I've done here if I just expand this out this is pretty much all of this is the tutorial that we've just done and then all I did was just kind of feed through this is my other normal map the other puddles which is just like some random almost like a cloud based image that I got off the net which I then turned into a normal map yeah time multiplied by a property which is the speed you know like how fast this puddle will move and again you know like your tiles telling an offset sampled stuff you know this is all pretty pretty normal and then again no normal strengths just to just control the actual puddle because at the moment I think it's quite low down so that's with like no puddle and then you can kind of increase this even to like crazy amounts it doesn't look as good if it's just one texture but you know you should look into sort of mmm panning it the other way similar to kind of how we did the you know the duplication of the ripples over here you know it has its own controls we just happen to be using the same properties but that's you know that's kind of how you would use the same texture twice but you'd have one basically offsetting in a different direction yeah I think that's kind of it and not sure there's anything else left to cover I hope this is proved useful I know there have been some people that have been struggling with this but yeah okay there we are it's been a long time coming but finally managed to find some time to to convert this over to shitty graph so thank you very much for watching I hope I hope you enjoyed it and yeah I will see you in the next one [Music] you [Music]

Channel: PolyToots

Views: 50,364

Keywords: unity, game dev, texturing, uv, game art, shaders, tutorial, shader, graph, shadergraph, guide, rain, drops, raindrops, ripple, effect, wet, game, water

Id: R6EX6dN1BOs

Length: 21min 57sec (1317 seconds)

Published: Tue Mar 12 2019