[Part 1] Amplify Shader Tutorial - Teleportation!

hello and welcome back to politics it's it's been a while maybe two weeks or so since my last upload I do try to aim for weekly uploads but work is often a little too busy plus I squeezed in a little holiday so that's nice I want to thank I'm not sure how to say his name wary Libra worried Libra I don't know I'm sorry if I'm pronouncing that wrong he he requested a sort of teleportation shader and it looked cool so I thought I would give it a whirl I do apologize to this dude specifically I haven't yet been able to work out the like the square thing you'll know what I'm talking about nobody else knows won't talk about is carry on so we're gonna be building one shader that will do a bunch of stuff really for this one on the end we're just going to be changing a certain set of notes but essentially what this allows you to do is create this teleportation effect where it kind of comes from either the top down and then kind of fades away or we can actually just reverse this effect so it comes from the the bottom up it's pretty cool it has offsets it gets a little crazy like that I haven't looked too much into doing this specifically on the Y because for what I was after a low offset seem to work the best and you can also control the speed I find a high speed tends to work quite nice you might like it on a smaller speed something like this I prefer the high speed because it just makes it feel like it's you know holographic and jittery so a slightly different version of this one is where we have it coming from both the top and the bottom something like that and then it's gone it comes back and again we can reverse this effect because it's it's the exact same shader we've just added a parameter and then lastly this one which is just using a different kind of noise but it's essentially the same thing this also has the reverse but the way that this is handled now is through an actual slider so down to the up you can create lots of different effects just from just from these kind of things you kind of go and adjust the thickness of these lines you can have them like really thin which creates like a really nice holographic look then we can also increase the tiling of these which I've called the noise scale so we can increase that or decrease that depending what you want to do and again with the sort of offset strength you can do some pretty crazy stuff so if I take that speed up to something crazy it's print a bit more tiling maybe that's a little too crazy with the offset but you uh you get the idea so we're gonna be doing this we're gonna start it right now okay so the first thing we're gonna do is create a new amplify shader I don't know if I mentioned that we were gonna be using amplify shader editor but it's in the title of the video probably unless I forgot and the only thing we need to do here is change the blend mode to transparent and I believe that's it do this try and give ourselves a bit more space and from this we'll just create a new material as well oh and of course if you want so you can stick the shade of wearable I'll just do Polly toots slash tell you to all sign missed some solitude thumped it and might as well select these two and I will put my material on this guy so we're actually using it it's the first thing that we're gonna do is set up the type of noise that we want so on the other ones maybe I should keep them here as an example the noise is in this one it's essentially all of this red stuff that's colored red and for the one it was this so you know this isn't necessarily noise per se but it's essentially the sort of emissive mask type of effect that we will be using so that's what we're gonna start with and the idea is you kind of just cover the entire character with it and then you sort out the rest later so we'll begin with this and we'll start with texture coordinates completely forgot on how to do this oh it's with the U key or space and just try and find it texture coordinates somewhere yep the U key if you didn't know if you're searching for something and you see this little letter next to it it means that that's the hotkey for bringing it in so if you just hold you click done soon right yeah sorry we're gonna be doing the noise generator I believe shadow fort doesn't have this but most people they will just run like a natural sort of moist texture through this kind of thing and it's you know it's pretty much the same thing so I wouldn't worry if you don't have a noise generator you can just use a random noise texture so long as it tiles you'll be alright and speaking of tiling we do want to put something into that and you can if you wanted to just use a single float sorry just by holding the wonky impressing in wonky wonky the one key the number one key and put that into tiling and then any number in here well it will output you're turning amount but we're gonna be using a vector two to this and I'll show you why later so we're just going to hook the XY into that and for now we'll just leave it on let's say five and five and of course we need a pen a note that's the magical note that almost every shader uses it's just to scroll out texture so we're going to get a time note so that this actually animates over time then we'll have a value which will be our speed and this will be a public property because we will access it so we're going to adjust the time here let's put a default of 1 and let's hook this into time and then stick that into the offset and at the moment it's not doing anything because we haven't set a direction and you can if you want plug in some floats or vector tools to control this on the material itself but I will just do this because I only want it to go this way now we might reverse it but for now this is fun so there's our initial kind of effect and if we stick that into say a mission apply we get something like this and rotation so we can increase our speed I didn't set my tiling unfortunately to a property so sorry public property let's try that again ok so now we have a vector - I mean it displays as suppose a vector for but it's only using these two and so we can do 55 by 55 it doesn't want to do 55 there we go yeah so you kind of get the idea it's already kind of similar to sampling here put that one back on I'll say though I don't want this particular thing I mean for you this could be fine you could move straight on to the next step but I don't want the black to be black basically I kind of want the whites to be super white and the blacks to be gray and the easiest way to do that is basically just to add this by itself so we will add in an ad and we'll just give this a value this won't be a public property I mean you can make it public if you want but I don't see the need it's called a booster or something because essentially all we're gonna do is just add this by itself and now it's uh you know it's a lot more boosted and before I start going all crazy with the nodes and stuff if anyone watched my previous tutorials on the other burning shader I was having some troubles with the gettin set from shadow Forge and amplify did reach out to me and they told me how to do it which is just with the register local variable and a get local variable so it's ah to put down the register and then G to put down the get and then we'll set this one as just noise and over here we can just grab it and boom which is really nice like that kind of stuff let's apply this and see what it looks like okay yeah it's got some put some oomph to it put the speed everything is fine and dandy and I'm just going to highlight everything and press the C key so at a comment and I'm just gonna call this Moyes is the title comment could be nothing unless you're handing it off to someone and it kind of needs explanation but for me this will do I'll just put this a little bit out of the way so the next thing that we're gonna look at is the controlling the sort of the slice gradient so if we look at one of my other ones again it's like the material so the the edge will let's just bring this down let me get a little bit easier to see the actual gradient that will travel either up or down our character's body so we'll be making that next and we're gonna start with a vertex position you could use world position which might work for you it won't work for me because I kind of I want everything to be constrained locally for you you might not want that you might want it to always be sort of on the world why I want the local Y so vertex position and we're just not afloat sorry oh we will want a flow eventually but for now we'll just use an ad and now we'll use a float and for this one will actually call this slice or teleport or they think this this will be the thing that kind of controls the slice amount so we'll put that on the Y and also we'll turn this into a slider for now we're good say like minus 20 to 20 because for you it might be different but kind of we want the later on work out our range and then we can change the slider based on that but for now just kind of do this and you can already see kind of what's happening in the in the preview and so if we make this into a property in fact let me just pop down another register let me call this one why gradient and just hook that into there so if we do great for now I'm gonna stick it into debug this one won't go into the emission sorry the the noise won't go into the mission the noise will eventually connect to other bits but for now we'll just plug this one in to debug so it is the only thing that shows up and we'll hit apply so now on my teleportation hopefully yeah you can kind of see something's a bit strange you may have noticed and I was talking before about how I always wanted to go from like the head to the toe with the toe to the head and right now it's not doing that it's actually coming from the back to the front and that's because this character which is from the unity standard assets it has a rotation of 90 by default on other areas of X Y or Z whatever so if I were to bring in let's say sphere there is put this teleportation shader right it behaves correctly for this object because it doesn't have that rotation which is which is good this is the result that I want from top to bottom and one way you can fix that and amplify shader editor at least is to use an object to world node and then we will put that in between these two so before we were using the Y to go into add because we wanted it on the the y axis but of course this is the local Y axis which for this character is the back to the front so what we're gonna do is actually feed the XYZ of everything so the characters is local everything and object to world output will be the Y and then we'll hit apply and hopefully this works okay already I can see that it is working so pretty cool except we don't have the ability to reverse it yet so it's only going from top to bottom so if we want to reverse it what we can do is basically just divide this value and we're gonna be doing two sliders for this now sorry just one sign after sign two values like 1 on the B negative 1 on the positive again it's the same with the teleport where we have these sort of large ranges we want the same for this one for now so put in this float and we'll call it range for now this will change later so it's okay and say again you know - 10 - 10 something like that and should if we can see it in the preview it's not working in the preview but in theory should be working I might need to use a saturate now it will be I think you can also use an ad but saturate will do the job okay looks like it's working one of my values too small and then for you depending on the scale of your character I think at least it might be different or maybe because we're using vertex position you'll be the exact same I'm not too sure don't quote me on that so let's just see if this works any way down if we can reverse it yep so now it goes from the feet up and then if this because this is an a-minus value so if we put it into a positive value it will come from the top down so pretty cool so far everything is working which is a little treat let's give this one and we'll just call this one the Y gradient yeah from here you basically have two options maybe three you can either do the sort of the mixing of the emissions so we kind of combine that gradient with this noise we just made it so where the teleport range sort of comes down instead of this being sort of black and white it's showing our sort of animated noise mask or you can go and work on the opacity sort of clip off and I think I'm going to choose option B we're going to be doing the opacity mask so for now we can take this out of debug you don't need it but we do need it to make our a piece of thing so let's just put this over here and we're going to be using a one - for this because we we basically want the cutoff to be the reverse of this if you can imagine where the sort of teleportation effect it's kind of coming down in well in this case it would be kind of kept coming up so we want the one - to be where it's black now it would be white and that would be the bit that gets cut off not sure this makes any sense it'll make sense in a minute yeah maybe possibly if it doesn't let me know and we're gonna multiply this by our noise which we can do rather than having to drag all this down we can just get another one of these so I've just press the G key to use the get local variable and we're gonna be using noise so we're gonna multiply these two together and we just took like check this straight into debug in fact let me just do the same thing again and register a local variable call it a city mask and then we will get okay so your mask for that and debug you don't have to use the registers and gets you can just hook these things straight in there but they are one of my favorite things to use in know best editors so now that I know how to do it thanks to the guys over at amplify I will be using them a lot so let's supply this and see what our current mask would do if it was hooked into opacity okay interesting so from here but white bits would be removed in the black bits would stay where they are so this is kind of the opposite of what we want to happen and a way that we can sort of easily demonstrate that actually is instead of putting that now we'll actually put this into the base of your mask and for the emission will change this so it's not using the noise we'll get Y gradient so we can sort of get a better look at what's happening okay everything's disappeared that's good okay so here we go now you can see what happens and you can see that we have some problems that when the character is fully visible we're still getting the opacity mask clipping through which makes sense because that's exactly what we've just told this shaded to do but uh still progress for sure so what we definitely want to be doing here and it might need some more space so just give myself some space if you have a bunch of nodes already commented if you hold the Alt key and just left-click and hold anyway I sort of in here you can move the whole thing around which is pretty handy you know it saves you having to try and click and drag this top bar you can just do it anywhere so neato so okay we have this and we know that we want to subtract something because again when the character is fully visible we can still see our mask which is not what we want so we're gonna be doing another get and if I don't need make a new one I can just copy paste because we want our Y ingredient and we're going to multiply this and from here let's give it a value one for now might change this in a bit and we will subtract stuff and let's try and tidy this up a little bit so that's gonna go over there I'm going to subtract these two results and increase one should be fine I mentioned and let's listen to that and see what happens it's still not going to be right but if you're new to sort of creating shaders it makes sense to kind of preview what you're doing in sort of little steps so you can kind of see what's happening what it's doing to the model so from what this is doing it's kind of it looks like it's the same I guess pretty cool though see if we decrease the range to something tiny it will kind of do this really close clip which you might like or just increase the range so that the sort of teleport effect comes over the entire body before it starts to actually get away and but anyway let's let's let's actually finish this and get it right so let's do another one - here and we're going to add these two together from this point so a little bit stronger and hopefully it's strong enough so that when the character is fully visible we're not gonna get any of these clips but let's see we might need to just chuck in like saturate or increase sort of the add value or something essentially we're just trying to increase the value of our white but no it seems to have done it so he's visible and then pretty cool but uh yeah so the only thing we kind of need to do now is with the the gradient that's coming down we want it to have the the noise animating sort of coming down it so we're this is white we should be seeing sort of this sort of noise kind of thing happening over the top of your model and so that is what we will move on to next but that is gonna have to be in another part I'm afraid because I'm no good with time management apparently but uh before we go let me just tell you this up a teeny-weeny bit so do this basically mask and if I've gone through this sort of too quickly or I haven't explained sort of why we were doing things like why I was trying to increase the power of this white and let me know in the comments and I'll try to sort of explain it a bit better I suppose you know I was we were kind of subtracting things and whatnot I can understand how it would be a bit confusing but my advice to anyone who's sort of learning how to do this is just keep playing around with things it's essentially just a numbers game really you've got ads multiplies subtracts divides and then these nodes like one - or a negate if showed up or transmitted it does have a negate yeah which is essentially you know reverses the order of things and just kind of you know keep playing keep playing so yeah that's it for this part in the next part we will cover the actual emission mask so that we're not just seeing this boring flat gradient come down and we will also cover the the vertex offsets yeah so that's it for now I will see you in part two I hope this was some use I hope it's helped a lot of the methods that we're using here can be used in just just a multitude of things it's not this isn't you know strict's of a teleportation shader this these types of nodes like this kind of setup you'll find yourself using the very similar things a lot so yeah just try to focus on what things are doing rather than you know that specific end result this might be a teleportation shader but ultimately it's teaching you what's what and the best way to do that is just you know keep playing with things yourself as I was saying I'm rambling on oh my god Jesus okay goodbye you

Channel: PolyToots

Views: 19,984

Keywords: unity, game dev, texturing, uv, game art, shaders, amplify shader editor, teleportation, teleport, tutorial

Id: tL66KUb6qYg

Length: 27min 30sec (1650 seconds)

Published: Tue Jul 31 2018