Flow Map tutorial with Unity Shader Graph

[Music] hello and welcome back Polly toots this video should come as no surprise if you watch my last one which is making this plumb up shader with amplify so with this one we're gonna be using unity share graph and I figured rather than just do a straight conversion of the amplify one that I built instead I found a different one built with amplify and I found this in the discord channel so whoever I got this off I can't find you to credit you so let me know who you are so I can just give you a little mention but either way we're going to be converting this into a unity shader graph so it should be be pretty cool and for those of you who are completely new to this and you have no idea what a flow map is and you know how you're able to do such a such a cool effect it's essentially a texture that we use as UVs which define the direction of the texture that you're using on your material so in this case it's you know moving our water based on this and if I can open this up kind of hard to see it's very faint normal map this has been made using a free program called flow map painter and a link for that will be in the description so all pretty cool let's just go ahead and start making this alrighty so we're here in a new scene and before we kick off I should just mention that these rocks have come from the rock and boulders to pack which is free on the asset store and some pretty cool stuff so it's mostly just rocks as you can imagine and boulders too but yeah pretty cool definitely worth a grab if you're playing about with any rocks but for us let's just go ahead and we'll create a shader and this will be a PBR graph and call it whatever you want but I recommend using the word flow map in there somewhere I'll do PT 10 points if you can guess why just open this up and okay the way that we're going to go about this is just expand this up but we're going to just create a bunch of stuff first but then we're going to convert it into a what does the Unity shader graph call it the sub graph I think though we're going to make some stuff and eventually at the end convert into a sub graph because you'll see why it'll it'll make a lot more sense there this we are converting over that node for amplified that I found and you may have noticed that it had a node called constant bias scale obviously if you do a search and try to find that on shader graph you're not going to find it you'll have a constant but that's not what you want it's actually just a quite a simple set up it's a vector one with a value of minus 0.5 and then it is an ADD node and we'll just add this into here and eventually we'll have some other notes that will hook into this but now that'll be just fine and then we'll get a multiply if you can spell correctly and we'll multiply the ad by another vector one and we'll x value of two we could just put two in here like there's already two in there by default but just to be absolutely sure not not to be sure I mean it would work fine but just so we know that we are hooking in our own value we'll do that otherwise you can just leave it it will automatically multiply by two and then this we can grab and we'll just group this and this is essentially the the exact same so this is a constant bias scale which we're going to need because shader graph doesn't have that as a sub graph I suppose we could convert this into one now but no point might as well just use it we only have to use it twice so that's fine and so to kick things off we will grab ourselves a texture sample 2d and this will be the flow map let me get that out the blackboard and we'll create a texture 2d and we'll call this flow map so that will be obviously the flow map and much like in our example we're going to get a UV node here eventually we're going to change this up a bit but for now we'll kind of just copy what was there and then we'll look at why we should change it so yeah we'll keep this here for now and much like with an amplifier where we do the component mask the way that you do that in shader graph is by splitting and then combining so split burst and then we'll put in a combine we only want the red and the green channels because they're the only channels that actually have any information in them from our flow map and now this is what goes into our constant bias scale so we can hook that into there and all is dandy and then we'll come over here and we'll stick down another multiply beat that through and we just grab ourselves another vector one as we come to multiply by a value of about minus one it was minus one point one in the example unamplified but I found that to be pretty much no difference and minus one is just easy to remember and then we'll not apply this again but we'll leave the the B slot blank for now I'll explain later when we get there and then we'll get an add node and this is also going to be left blank but now and then we will grab ourselves a another texture sample 2d and we'll come up here and make ourselves a new texture 2d this one will be like the actual the texture that you're going to be manipulating so you know call whatever you want but I recommend a texture and now that will make sense later on so put that in there and this is the UVs which might seem a little bit strange and we've also left you know the multiply and the add blank and the reason that we've done this and why it's not quite the same as what it is on the amplified version is well the multiply will be our time stuff and I've chucked in an ad here just for the the extra tiling for the texture 2d that we have here and I mean this is probably not making too much sense because we're going about this in a bit of a weird way but basically what we've done is we've just created some juvies for our texture and the UVs will be a texture itself it'll be this flow map but of course as you might suspect if we were to just go ahead and stick this into the albedo now and then I'd save this out and give it a quick look I'll just come here and create a material put that on our plane and let's just make this a little bit smaller here so now at once a flow map and it wants a texture so we do have a couple of example flow maps let's stir let's stick with this one for now the outward one and we'll hide our rocks for the time being and then obviously it wants the texture so let's try to find something that hopefully looks a bit you know easy to just tell what's going on okay this is one of the plastic ridges so yeah you can see that it's not not right at all but we are definitely affecting the UVs in some shape way or form based on the flow map so if we were to put in a different one here which is this s-curve you can see that it is taking that shape it's just obviously completely wrong let's just go back to the out with one for now and come back in here so we know that we're doing something correct because we are affecting the UVs of our texture but obviously there's no movement so for now what will I should do is we'll work on the time stolen and we can at least see something move and it will be easier to identify you know what's what's actually happening and so the way that we will do that is we'll start with the vector one which we will convert to a property and this will be our bead and is it just me or does everything take forever in shadowgraph these days just trying to rename something things like a good 12 seconds anyway anyway anyway we're going to multiply our speed by time I'll also probably give the speed a default value 0.5 or something just so it's actually moving from from the first time that we launched it and so here we can get a fraction node and we'll hook this time into it and we'll just for now plug that straight into the multiply I think for now that is pretty much the whole thing at least for the first one so that's if you remember from the amplifi one or if you dean the amplifier or even if you haven't seen the amplifier one basically we are going to move our texture using these UVs over an amount of time and then we have to do that again with the same texture but slightly offset so that there's essentially one that's always kind of going over the other which we need to create you know a mask whether that be the transition between the two is not so obvious but either way if we were to just hit save on this now now that we've actually hooked in some time we should start to see something yeah pretty cool eh obviously it's still not correct though let's just keep chipping away at this the sense that we now have some time we might as well alter it a bit and create our second set of UVs which as I said is basically just an offset of 0.5 so what we can do is we get an add node and we'll hook the time Internet and then we'll just get a vector one and give it a value of 0.5 again I mean if you wanted to you could just put that in here but I don't know I guess I always just tend to work with actual properties anyway so that's our offset and we're also going to need a fraction again but it's basically the same as this but we have our offset and now this is going in to multiply but if you remember so from here for the first one we go from fraction then straight over here into this multiply which is feeding off of our cost of bias scale and the multiplication of minus one which ends up being our UVs and so it's essentially the same thing and so because since this is going into this multiply this multiply the clone of this one so what we actually want to do is grab the multiply that comes after the constant bias scale and just hook this in down there and then that can go the other fraction can go into that new multiply and then we'll go ahead and do another ad I definitely did that right ad there we go come on and this will be the exact same as this so we'll just copy paste these and there's our UVs for that and so now we need to loop these two together and we can have another preview to see what's happening because you saw what was happening when we had the the first one just hooked in so now we're going to see the same thing but we have an additional one now with an offset and also the loop which again and now I'm just going to test I did the same with the amplify thing so vector one will convert this into a property again this is just the test we'll turn it into a slider default zero min Max of one no need to give it a name because we are going to get rid of it and it's give that a save pretty much gonna look exactly the same though there we have the first one and then the second one but you can see as I scrub through a little hard to tell but it's obviously not playing this animation is the wrong word but it's not messing with the UVs at the same rate you can see as I fade from one to the other we see the other one at a different point in time so that's good it's very good let's just get rid of that temporary vector one for now and also delete it from here because we don't need it yeah okay while we're here we might as well actually use these add nodes that I've put in here the reason that I had them blank is we will use a tiling and offset this was the main thing that was kind of different from the amplify one the amplify example had one UV controlling all of it so it was this one which we don't actually need though that was a bit pointless yeah so it had that controlling the whole thing so you could alter the tiling but you couldn't alter the tiling separately so that was why I decided to change this and we'll create while I'll do it this way rid of back the one and we'll call it tiling and I give a default value of one and stick that into the tiling and then just probably paste this come on hand you and then that is going to go into this second ad essentially what all of this means is that now we can actually control the tiling of our diffuse texture but the tiling of the flow map stays the same and so we can actually just replace this you don't as I was mentioning in the amplified tutorial you don't really need to tile your flow maps but I guess you know it's good to have the ability should you want to and so for this we just create a new vector one because this will be your flow map tile and again I'll give it a default value of one okay so I didn't really change much we just now have the ability to tile our textures separately so what we will do now is make a little bit more space we need to essentially plug something into this loop the t-slot or alpha the mask basically will be the point at which the textures overlap we need to make them kind of merge to basically hide that transition where it snaps back and becomes you know really obvious that it's just resetting the UVs so we'll come over here again and this is gonna be pretty simple we'll just copy our group and we could grab this fraction and stick it straight into the add here but it's just it's kind of messy how everything goes over each other it's one of the nice things that I like about amplify that you can use the the get type of thing where you can basically turn a node into like a mobile node so it you know you don't have these wires going all over the place so anyway we'll create another fraction or you can use this one as I said if you want and that one will go into the console bio scale and then it's just an absolute node and that is basically it it will hook that into there and we will give this a test looking pretty good we can control the the speed we can't yet control the strength so we still need to add that in and we have the the tiling which will just pile a texture and then we have the flow map tiling which you know you may or may not want you know it can come in handy let's go back into our graph here we need to wait add in the strength as well something that defines like how much of the texture gets distorted and where we will put those is basically after the multiplies that we have here so let's make ourselves a little bit of space and we'll just create another multiply I'll copy paste that to make it a little bit easier so before it goes into the add we will multiply and then same with this guy multiplied to multiply and then we'll get it back to one and convert to a property because this will be our bead no it'll be our strength that goes into there and we might as well just use the same one right into there and we'll give this a default value of again like 0.5 and so that goes into the add now of both of them and then we'll see what that looks like okay so if I set this to zero butter butter boom we get nothing but at the one we get that and obviously we can control just how much so yeah you kind of don't want to go too crazy also you can invert it here which is a handy so yeah pretty cool I'll just leave that a value one for now and now comes the point where we pretty much have no choice but to convert this into a sub graph because this is only going into the albedo at the moment whereas you know ideally you also wanted to go into your normals near emission we need to convert this into a sub graph and we don't need no wait now I mean let's just convert the whole thing for now so we'll just select everything right click convert to sub graph and I guess if you're the type of person that makes your own sub graph that kind of makes sense to have your own unique folder for that somewhere for me I'm just going to stick it in with the actual tutorial which is oftentimes not the best place to put it but just for me it's fine okay so once it's done obviously what it leaves you with can be quite confusing and scary so we don't need these anymore don't need that this is the actual sub graph that it's made so now if we were to search for the flow map we would have a USG flow map which we can use but we need to do a little bit tinkering here because obviously we don't want all of these inputs because there's just too many so let's go ahead and find our sub graph and let's expand this so everything kind of should look a bit familiar but I'll put everything over there so we have a texture and the texture which we're going to get rid of because it will be using the same one let's just tidy this up a little bit we need to get rid of this property here because it's really two of them and then same for the tiling it's created two of them so let's just go ahead and move that there and that there and we'll get rid of either one of them doesn't matter we only need one and then that tiling can go into there get rid of this vector one and I think that's it I'll quickly just have a look around here so we only have one of these they only have one speed and one strength so yep I believe that is fine and dandy so let's just save this close this now actually I'll keep it open just to show you the next thing let's go back to our shader graph and everything's updated itself here which is nice so this is obviously very easy because if we wanted to you know example now we just grab our things we say this with the texture this is the flow map and then I'll just hook in the rest as well man I took forever okay so yeah we have all of this and that's going into the albedo which is fine and if you wanted to do the same for your emission then you basically just copy/paste the whole thing and then put that into emission the only difference being that you would have to create a new texture like a new texture sample like this you know and then you call it a mission and then just make sure that that overwrote the texture that was there and that would be that just so it was a different texture I'm not going to be doing emission for this although you know it is as easy as that what I will be doing though is a normal map and the problem here is of course if we go back to the sub graph typically like here on the sample texture 2d this is where you define the type of texture that it is whether or not it's a normal map which is a bit of a problem because there's no point in us creating too subgraphs where we just have one where it's on default and then another where the sample textures here are on normal map and then you know you'd search for let's say your flow map we can't see it because we're in the so let me go back here you'd search be your flow map and you'd see you know USG flow map and then another one like flow map normal and that's super lame obviously you wouldn't want that so what you can just do let me just copy paste this you just first actually let's create the the texture 2d all the way do we have this one we're not using oh because that was okay well yeah we'll use this we just call this one normals and we'll plug this down here and now obviously if I were to just try to put this into my normal slot and hit save and take a look at it and then come down here and basically just find you know some normal map will try to use the same one plastic something that'll do you see it's not it's not right you know it's not how it should be looking you've got this weird normal issue basically because this is not treated as a normal map it's basically the same as I was plugging a normal texture into the normal map slot which it doesn't want it does not like that so instead what I found that works is if you just ditch but normal and it's either I forget now it's either the normal from texture or the normal um back we'll try normal unpack that sounds like something I would have tried first though we'll see what that does let's just save this and let's take a look yeah it looks pretty correct and one way to kind of test that this stuff I found is quite good if you just duplicate the plane and let's just give this the strength of zero for now and then what we'll do quickly we'll just create a default material and we'll put this on our new object and then we'll just make sure it has the same textures as the one that we're using on our shader and it might look a bit weird because this one actually has baked information on it from the the level that I was doing but you can see that the normals are behaving the exact same way and if I just come up here and just clear my big data oh it's still a bit okay yeah all right so the by default is a gray so if I bump that up to white so that's an exact representation basically and it's the same there is a little bit of strangest there that's probably just the light in my scene yeah so yeah I know that that's the same so happy days that definitely was the right note took us a while to get there so let's put this back up to strength one and I mean that's pretty much it basically you don't need to do too much what I will just do here is grab ourselves a multiply and we'll multiply this by a color which we're gonna just use to tint basically our diffuse so we'll convert that to a property and I'll just call it tint and the reason that we don't put this in the actual subgraph is because again we're using this to also do normal map and emission so you you might not want you know like three types of color that you can change especially not on your normal map on your emission yes probably but I'm maybe not the same as what you have on the albedo or diffuse the default black is fine I guess and we'll put that into the albedo instead and let's just reorder these a bit so it makes a bit more sense and it's come back and yeah so because our color tint was black instead of white it comes out like that by default but now at least we can change the color but I guess probably one thing I will just do quickly is change or just close the window I guess Commission to be fair we're probably done with the thing anyway but let me just go and get that back okay yeah so the color I'm going to actually just change default to be white but that does make more sense and that's about it so now I'm just going to reconstruct that scene that I had so I have my blow map the water obviously looks pretty weird here the texture I'll show you that in a second let me just go do none for now and the normals I just have some generic watery type thing pretty good we can again you know change the tiling of this so it's all good and it's unhide my rocks that's fine so obviously now you know it looks like sort of milky thing and what I was doing actually just for the diffuse is I was using something kind of similar to the rocks themselves it's a neat little trick if you have something like this now see that's kind of muddy just realize that we forgot to do smoothness so let's just go and crack those in real quick just going to get to back to ones move Ness and metallic and just hook those in and make them both sliders okay so now we can actually give it like the proper shininess that we need that yeah we're gonna increase that speed a bit the bit bit lame put us essentially just bit like a quick kind of cheap watery effect from you know this specific kind of angle you can just use some sort of texture that's close to the environment that you are using and it's a pretty I think a pretty okay way of getting some sort of illusion we see you can tint the color of the water just like a bit obviously I wouldn't go too crazy with it you're aiming for anything close to realism and since I cleared my big data my scene is so much darker now let me just go and get that back okay that's way better yeah so as I was saying about the the little kind of trick where you just basically grab a texture that's you know it's definitely not a water texture like this one yeah this is just like one of the rock textures just one of these I do recommend grabbing that pack the rocks and boulders - yeah so that does about wrap it up I think this is probably ended up being like the same amount of crazy long as the amplified video but um I did try to speak this one up tried to get through things a little bit quicker so I may have skipped over some bits I would say for anyone who's a little bit confused with the the nodes like why I'm using certain things I do explain quite a lot in the amplifi one which is the video that I uploaded before this one I'm not saying to go and you know waste your life and watch that just for an explanation because I'm sure we know once you have the nodes that's it who cares about like how it works I don't know it's kind of late here so I'm just gonna go to bed now good night and I'll see you in the next one [Music]

Channel: PolyToots

Views: 29,686

Keywords: 3d coat, unity, sculpting, game dev, texturing, baking, unwrap, uv, game art, shaders, amplify shader editor, tutorial

Id: SA6Y3L-X0Po

Length: 28min 52sec (1732 seconds)

Published: Mon Jan 20 2020