Flow Map Shader in Unity with Amplify

[Music] hello and welcome back to politics in today's lesson we are going to be making a flow map shader using the amplifi shader editor and I know that most of you probably want to see a shader graph version and that will be coming soon and I should probably note right off the bat that if you see these spheres kind of like skipping or you know doing wedge stuff it's probably just me putting in some cuts because you might not be aware of this but I actually have a speech impediment so I often have to just trim that out which is really annoying when I have something on-screen like this and I have to make all these little cuts and it just it makes my work look shonky but chunky is not a word so yeah let's just do the usual thing I will cover briefly kind of what it is we'll be learning and then I will put a time stamp on the screen for when the tutorial actually starts so if you don't want any of this introduction stuff and go ahead and skip but I'll try to get through it really quickly and I'll hopefully try to speed up tutorials from now on mostly because I think shorter tutorials are preferred but also my internet speed is absolutely ridiculous Oris so uploading large files takes forever so to kick things off let's just talk a little bit about what a flow map shader actually does and it's essentially just a texture that we're using to drive the UVs of our material essentially where certain colours of a texture denote which way our texture will walk but it has to provoke back on itself otherwise you end up with lots of clumping and there is a free program available I will put a link in the description for this thing called flow map painter and I think anybody who's ever done anything with flow maps has used this and has it installed it's very cool it just allows you to paint your own and then you can just throw those out into a texture and I'll just I'll do that now so the reason I'm doing this is because there's some stuff that you need to do to it and if I just so work better on a plane actually be right back so we can see here I have my plane and if I put on this new flow map that we just baked out you can see that it looks just weird you know like if we go back to the painter here this is what it's supposed to be doing kind of a vortex pulling everything down whereas the result here is clearly not the same it's just because we need to disable the sRGB on the correct texture there we go so GB and also if I just hit apply this will work fine but typically you want the compression to either be high or none especially if you're dealing with low resolution flow maps and it's worth noting that flow map textures can be low resolution either none or high quality you'll be fine you'll be fine so okay that's pretty much it that's how you get flow Maps working so now we can get rid of this and yeah I mean let's just crack on with the tutorial I guess there's no point in hanging around here anymore alright new scene new you let's go ahead and create a shader amplified surface shader flow map and to just kind of kick things off if any of you remember I guess for any of the actual subscribers I guess nearly two years ago now one of my earliest tutorials was this this burning shader type thing and we did this effect whereby we were manipulating the textures via a normal map and I've always kind of had that in mind when thinking about how to do a flow map shader and the theory is kind of the same for anyone who's actually seen it so I kind of always had that in mind and the start of this will actually be the same thing what I'm gonna do here is just it's just a quick little example this is not entirely the right way but it has some of the pieces that we need so we use a texture object which will be a flow map texture and we only want the red and the green Channel so we'll get a component mask node and we'll get this into here only use orangey this is kind of where it gets a bit weird like some of this stuff we're probably not gonna keep so if I just use this as a test I'm going to multiply this component mask by just a test property now and we'll stick that into there and then what we'll do is we will add some UV coordinates onto this and then we will feed that into another texture so what that means is I'm basically telling this texture to be the UVs of this texture and we are adding in your coordinates on top just to make sure that it actually works hopefully this will make a little bit of sense so we have our material and we don't need to create I will expand this out and a everybody complains about that I will do it honestly for now though we'll stick that on our plane and we will grab flow map let's just use this one and our diffuse texture so that's just with our lava rock tile lava you can see here that we have already something that's kind of working but sort of not like it has the same characteristics that this obviously is a bit broken it keeps going and also if you notice it is actually scrolling the entire texture as well that's not what we want we want the flow map only to move where we specified and then everything else stays still so there's a couple of things at play here mostly we need the flow map the UVs and like the time to control it and the time in this case is a little bit complicated it's not it's not super simple but we will cover that as we go go through some stuff so the first thing that I am gonna do just as an example is not creating a texture sample let's create a time node and I'm gonna multiply this by just a float and make that a property for now just leave it at that but I'll just close speed and then put these together and what's really cool is I think shadow graph has this but it's pretty new to amplify we have the sawtooth wave now which is pretty key this is I just open up previews if I keep previews open for all of this so we can see what's going on so what this is doing is it's basically going up to a value and then just immediately resetting which is exactly what we want and what we can do with this just as an example and it's again not gonna be right but just so we'll see what happens it will feed this time into this float which we had here which I guess ordinarily would have been like our strengths No property okay so let's just have a look and see what this does and so you can see here it's pretty much the same as it was before like it's not correct but we at least kind of have something positive happening here with the time and that it's resetting if we didn't have it resetting for example if we just disregard the sawtooth node then what you get is this which is it's basically just infinitely compressing all of this down which is which is not what you want because it has to it has to reset like for the flow map to work the texture has to move and then go back to where it was and the job here is to basically hide that transition otherwise you know just look pretty weird so let's come back here we definitely need these nodes and we need most of this it's just a bit of a rearrangement so let's just focus more now on the the time to make this a little bit more user-friendly actually let's slow this down a bit so want to point out something that doesn't work very well I go to the flow map so I have this s curve here which is just my own little test example and basically it will start here over listen this area in the top level I mean it starts everywhere but it will move from the right it'll come down left down right down left and if we have a look at our speed or just turn it down a bit what you see happening is it starts off like in the opposite way like it's it's I think it's starting from like minus 1 and then it goes up to 1 so 0 is the point where the texture looks normal this now is heading up to 1 and it'll reset so now the S is going the opposite way now it's beginning to get wait I don't know it's beginning to go the right way oh boy this is tricky so obviously that's a bit of a problem because we don't want our flow map to spend half of its life going in the opposite direction that we specify and I'm fortunately it's a pretty simple fix because we know that this is going from like minus 1 to 1 so all we need to do is remap it so let's just bring this back up and we'll feed this into here first and my mind will just plug this in and then we just need to change the values over here so we have the old which is not 0 to 1 the old I think go minus 1 and the minimum new is 0 and the maximum is 1 I think that's correct I often get this a bit confused so bear with me let's have a look at that make it a bit quicker yep so that's correct so you can see it's flowing in one direction and then it snaps back to the zero state so it's moving in one direction snap back to zero and that's I mean we're kind of mostly there we have two problems now one is the snap back is obviously very obvious and the other of course is that our entire texture is still scrolling which you don't want to do we only want to move the areas that we specify on the flow map it's very important for a flow map to have that feature I think it is actually going the opposite way it's really hard to tell I don't know why I chose this lava texture as an example I think rather than yeah it's going left this would be a lot easier if I just show you what this is supposed to be doing so if I get my S curve which is not an S loaded into here then you can see that it is you know to the right down to the left down to the right down so as I was saying before and if you look here it is quite hard to tell but it is actually pulling off the other way and to fix that we just need a negate here I wonder if it's possible to actually do this with the remap maybe not not sure but oh well negate will work fine so we'll just hook that in and yeah okay so now now I think it is actually going the correct way pretty cool so we have two problems to fix basically one is the trying to hide where our texture is snapping back and the other one is we want to stop like everything from scrolling so let's just do the snapping back stuff first I think nope no I think it's gonna be easier if we do the other way first so let's stop our texture from scrolling which means we're going to need to basically redo well not redo change which is another word for redo change some of the stuff that's happening here because things are about to get bigger yeah so what we want to do is introduce some movies which we will be blending with what we have and there's probably a better way to do this I'm certainly open to suggestions but this was this is the way that I found that work so we'll set this to an overlay UV will be our source this will be our destiny and the Alpha here we'll just leave that as one and what we're gonna do is we're going to get a loop and the UVs are kind of going to be a slot this is going to go into the B slot and already if you're looking at this and thinking is weird I agree entirely and the Alpha for this will actually be our time so let's just get rid of that for now and we'll grab all of our time nodes and let's just register a local variable so we'll just call this time a because we're gonna have a B and a C spoiler alert and we'll get that so the get local var so put that into the Alpha it's basically a longer way of doing what we had before so it might seem a bit redundant but at least now we can fix the scrolling issue but for now let's just register all of this and we'll call this flow a because there will be a flow be spoiler alert and probably don't want to keep any of this for now in fact let's just split this off just to make things neat and tidy we will get another register and we'll just call this diffuse albedo or whatever it is but before we were just using a regular texture object but eventually we're going to want to actually split this off into two so give this just a random name for now because I'm going to introduce a texture not a sample sorry that's this is not a texture object that's a texture sample I am a good teacher the texture object is what we want and this one I want to have the name of diffuse which is why I renamed this one to just death it does actually matter I just don't want a conflict of names which I think actually yeah amplify guys have fixed now but still you know old habits die hard so for now yeah we're just having a texture object feed into a sample but eventually we will have another sample with this same texture going into it so and now doesn't really make much sense but it will while we here let's just get and we will get our flow a so this is our UVs which is using time a and let's put that into the V's there and let's just get diffuse and looks like that back into albedo I'm only doing this now just to keep things nice and separated pretty cool let's have a look at the mess we've made pretty cool we have the texture not moving anymore so now we can just focus on our flow map and it is moving but obviously you can see it popping back which is another thing that we have to fix which is the hardest part of the flow map shader itself there is also another issue that I completely forgot about and that is at the moment we can't really do any tiling ideally you don't really want to be tiling your flow map unless you specifically have one that tiles but ordinarily like I was saying earlier like the flow map can just be like a low resolution texture that you can even use to cover like an entire area to define that the direction of like an entire river system or whatever you can still split it off which is probably recommended but either way what I'm saying is that there are more cases where you don't need to tile your flow maps and there are cases where you do so if you wanted to toilet that would be quite simple you just add a UV coordinate here and just put in a property of a float one vector one even or float I guess it's float vector you can tell that I'm not very good at this and you put that in the tiling maybe there's a property and then that will be the tiling of your flow map but are being butter boom the reason that we don't do it with this one is because then that will tile both at the same time and you know ideally you kind of want to control these separately but that's the problem that we're having at the moment in that if I do say have a property here let's call it tiling because we'll keep this node but to default of one and we'll stick this into tiling and give this a whirl so now we have a tiling but as you can see it is tiling everything also it's worth mentioning my flow map I believe is set to clamp yeah because I didn't I don't want it to repeat but if I did have it repeating then it does the same thing which is kind of weird actually not what I was expecting I thought that it would actually tile but it seems that there's something that I'm missing there but regardless that is clearly not what we want so let's go back to the drawing board a bit and so we'll we won't delete that because we're gonna keep it we'll have our tiling mode up here and we will just feed this into a different set of texture coordinates and we will register this just to see what it looks like so we'll just call this diffuse tiling put that in there and I think I mean that's pretty much it the only problem is of course is that we need to hook this into our UVs and this area here is our flow map you v's all right let me just press the C key here and let's just try to tidy this up a bit nice neat so let's just expand this a bit because what we want to do here is just get an add node and we will add in the diffuse tiling I'm just made and I believe that should be good so let's just see what this looks like so look at this our link talking tiling so talent too yeah so you can see now the flow map is staying where it where it is but we can we can tile our texture which is you know pretty cool and of course if you wanted to you could do world space UVs here I have some water tutorials on my channel that cover that pretty simple though and it's it's often best if you're dealing with kind of world creation things right oceans and whatnot where you want to use multiple components like multiple planes to create an ocean but you don't want any seams and gaps and whatnot but for now just as an example this will do nicely so yeah we just need to fix this blip that we have happening here and of course this is just because the texture through the Sawtooth time that we have happening here it reaches one goes back to zero so we need to mask out the point that it goes back to zero and the way that we do that is we basically we have two of these things happening but they'll be offset from each other and then right at the end when it actually flips back from one to another we'll just do like a little bit of a fade basically at the exact time that we need it and then it would just look like it's constantly kind of moving like a bit of a band flow for sure but definitely a good result so let's come down to our time because we're going to need another time basically we need one that is a little bit offset and basically what we can do is just create a scale an offset node and we'll copy all of these down here and we'll put time stuff here that we're multiplying by our value that we can control this will go into the scale and offset and we're just offset here by 0.5 and we'll just plug that in there and I believe that's kind of okay and this we will make sure to rename this to time B so that will essentially create you know like a mask that will be offset from the original one which fixes a bit of the problem but we're still going to have that snapping in place so since we have two of these times we are now going to do the the other texture input and we also need to have a flow B because this one at the moment the flow a which is our UVs is being controlled by time a and we need another set which is being controlled by time B and if that's confusing at all I do not blame you but essentially we don't need to remake everything here we'll just get another loop and same thing so the UVs into a so UV into a and then the the blend operation we have here in 2b but here we have the time a going into the alpha so we will just get time be going into this alpha and then we'll use an ad and we'll add in the diffuse tiling that we had up here and then we can register this as flow B so now we have time a time B and flow a and flow B and because we have a flow B we need to add it in where we're using flow a so if I can just come on now do this let's create another texture sample put this one into there and then since this first take a sample that we have here is using a the second one is going to be using flow be put up in butter boom and now what we can actually just do just for now is we'll look these two together and the problem will hopefully present itself do this we're going to just get a temporary slider here so let's just have a look at this for now it's gonna be hard to show the offset obviously so you might just have to take my word on it but at the moment our value is set to 1 which means we are only viewing one of these UVs and then if I go to 0 again we're only seeing one and if I go to 0.5 and we're seeing both at the same time with you know it kind of like opacity basically which is not what you want what you want is to go from 0 to 1 but to do it like right at the point where where it kind of snaps back so if you were the time it kind of right like if I just try to do something like this obviously if I do it manually it's not gonna work but something kind of like that so as one finishes and is about to be snapped back it will look to the other one which is just started this journey and then it just repeats that so it's just go boingy boingy boingy a technical term for it if you want so we've got a clue here basically it's really it's just the the Alpha point here that we need to to get and the answer lies it has to lies somewhere within our time because we know this is controlling the the flow of our a and this other one is controlling the flow of our B so somewhere at the end of these or at the end of one of these we need to be able to to plug an alpha into our diffuse loop that at the correct time we'll loop it to the other one and then back and forth and back and forth basically what I'm going to do is I'll grab a divide note and after our first remap we will plug that into divide and here you can just put in point five or if it makes it easier for screen shots and things what I kind of like to do is I'll actually put zero point five as a constant so this is not a value that's actually shown in in the material and then you can hook that into there so it just means that like whilst you're glancing over your shader you know that you're using 0.5 in here but you know if you don't care about that and no biggie because we've already specified the value so we've just divided our first Sawtooth time and now we're going to like invert that with the one minus and then we're gonna get an absolute node and throw in a saturate for good measure which I'm told is like clamp but like ten times better and we will register this as our it's a blend time and come back up here let's get rid of our temporary sorry but you were only temporary and will get blend time and now this is our alpha so if everything has been done correctly we should have a fully working flow map yeah seems pretty good to me it's not the greatest example of a flow map but if you put in an actual proper one it looks a bit nicer so it's a point two on there [Music] obviously depending on what flow map you use it will have different results so it's just you know it's up to you maybe you want to use let's have a look at the the temporary one that we did the beginning so we can see there that it is working nicely you can certainly tell the point where it fades back but that is definitely correct it's you know we're not getting that that quick kind of snap anymore it's this constant kind of fade into each other and so to put on the finishing touches suppose we also want to introduce just just grab all of this did not wanna grab that dude this creates some normals and emissive and then we'll call it a day basically for the normals it's very very simple Marty just going to copy paste the entire diffuse node that we have we'll just call this normals the only difference is our texture here will be called normals if you can type correctly and for here we want to make sure that we do unpack normal map and unpack normal map and then here will change the register because at the moment it's still diffuse to normals and that's it so now we come down here we get normals plug that in there and of course the thing that you need with any normals is a smoothness value and I'll also create a metallic the good measure [Music] all right so let's go and see what that looks like so rock tile lava something like that so it's looking a bit bit better no throw on this one again now it's pretty gloopy let's continue hello actually you know what I forgot to do strength we can control the speed of our flow map but we can't control the strength of it so what I want to do here is I'll create a multiply here and I'll create another one yeah and we get a float here make it a property we call this one's strength and do a default value of I guess one and let's put this into here so this is an odd time node it's essentially just going to act as the thing that stretches our texture even more or even less depending on what this gem is so let's have a look at this see if it worked so strength in fact if we bring this down to zero and yeah flow map isn't doing anything put it up to you know a little bit now we got a little bit you know up to you but let's just carry on with missus the emissive is the last thing I think that we need to do so again let's just kind of copy the diffuse and so yeah the fuse was called emissive and everything's pretty much the same here except one thing that we do want to introduce is maybe the ability to change the emissive color and with that we can also change the other power so our pretty simple stuff after the well after the texture inputs but before the look we will introduce multiply here and the multiply there let's give ourselves a little bit more space I think my mouse is dying does that thing where it clicks twice even though I only click once we've got a multiply feeding into a lobe but after our texture inputs and we will just drop down a color here this will be a property and we will just call this you can call it emissive power or color it doesn't really matter kind of gonna do the same thing so put that into there and also let's enable HDR ranges so we can make the bloom go absolutely crazy and oh yeah I forgot we need to register this as I miss it not as diffuse so there lastly we'll come here go to emissive and just plop that right on in there diffuse to PR okay I forgot to name the emissive texture so let's say a missive okay cool and let's go and grab this and it's not doing anything at the moment I guess because our emissive color is set to nothing so if we pump that up also we can increase the intensity of it and then if you keep that left for now if you enable post-processing turn that on maybe we need some intensity oh yeah I'll go that crank it up James Cameron movie okay so not like that in fact I think even like 20 is insane so either way we have this and it works now and yeah you can just increase or decrease your intensity to whatever you want use it wherever you want that's it it's done I think I realize this has been a bit of a rambling tutorial they usually are so sorry it is what it is I guess but yeah I mean it's good to be back I know I've been away for a while there's been some pretty pretty big changes and I'm assuming like right after this one people are probably gonna want to see the same thing in shadowgraph yeah Sheila Graff next probably remaking of the flow map if not I'll probably think of something else but yeah 2020 is gonna be an interesting year I'm not really sure where to take the channel yet it's a bit of a mix and match at the moment you know with like the modelling shader graph amplify texturing and all that good stuff but you know it is what it is I'm essentially just making videos that's reflect my day to day job anyway so I don't really see it as a mix and match because for me this is kind of what a 3d artist is is sort of supposed to be messing around with you know I don't know why I'm rambling on I supposed to keep this short see let's just close all this down and I mean before I think of just something else to ramble on about I will just end the video here so thank you very much for watching it's good to be back in 2020 and on YouTube and with all of my lovely subscribers I will I'll see you in the next one which will be the shadowgraph one most probably [Music]

Channel: PolyToots

Views: 17,425

Keywords: unity, game dev, texturing, uv, game art, shaders, amplify shader editor, tutorial, flow, map, flowmap, shader, water, lava, sand, wind, effect, materials

Id: FSq4OPtmczc

Length: 30min 44sec (1844 seconds)

Published: Mon Jan 13 2020