Procedural Shapes ShaderGraph tutorial for Unity

[Music] hello hello my name is pablo this is giro this is milo and today we're gonna do a tutorial on procedural shapes and shader so the reason you might want to get procedural shapes on a shader is because you can draw certain things that otherwise you'd have to make textures for each one and also it allows you to modify them on the fly so for example you can try draw a sine wave or draw a circle and then squish it and make it an oval and you can do all of that on the fly without having to generate new pngs we're going to start from an empty scene just we put in a little quarter and then we put a texture on it the texture goes to the shader which is absolutely empty right now in shadowgraph so just to start let's change the background to black just so that we have basically everything is black over here and let's start doing some shapes so or here we can do a little note we can grab uv and then we split it and basically when you're splitting you'll be basically you're getting uh values from zero to one in within your quad or depending on the shape you have but in this case uh zero is here one one is here so you can grab for example the x uh on this one and then let's do for example um distance from uh 0.5 to that as you can see that creates this little sort of bar right so if i were to render this out you'll see is this bar so what does that mean it means that the distance from this point the middle which is 0.5 which is the point that i'm putting here the distance from here is zero then it goes to point one point two point three point five it just kind of grows like that right so uh we can use that distance to basically draw and how we do that is for example we can grab a step node and a step note basically is something that you're gonna say okay well any value above this well i want it to be one a value below i want it to be zero so it just kind of turns a a gradual value that you have it turns into either zero or one so we're going to pass in the we're going to pass this as the edge and then in we can determine how big we want it so as you can see now i'm growing that so if i declare a little variable over here let's say a float let's call it width and then let's change this to like i don't know 0.2 by default and let's change it to a slider drop it in and when we drop it in here now if we look at the properties of our little thing here i can adjust it to basically change it how i want so obviously that's the first part of making a rectangle making the the width of it and then we can do exactly the same idea but this time we do it for um for the otherwise so that we can make how tall it is so we duplicate this notes down here and instead of hooking the x now we're going to hook the y and instead of hooking um a width here we can actually duplicate this node and rename it height let's put it down here hook it up delete it and now you can see we got the width this way the height this way and now we just got to combine it which is pretty simple we literally just grab this we multiply it and then we multiply this by this and save it and there you go we can actually now set up basically a rectangle any way we want it now since we're based everything on the uvs we can actually do a few things for example we can uh grab a rotation here and then we pass in our uvs into this we passed it into that and then we can basically just do this as you can see that rotates our square so uh let's put a little another float up here uh rotation uh and then this one we're gonna make it also a slider from zero in this case we can do to pi in shadow graph you can just write pi on a little entry and it will change it and then we can plug it into this rotation save it and that allows us to do basically the rotation like that and we still have the controls that we had earlier so as you can see we got plenty of control there and now if you want to make a square that is actually just like the outline like a little stroke you basically have to come to this ones duplicate those down here and then you know where we had the width and the height we need to add something a little bit to those so basically we grab this we make a float and we say um maybe like outline and then we make this outline also a slider uh from zero let's not make it super big from zero to point two and then we grab um with we add to it this outline and then we do this we pass it in here and then we basically do the same concept down here so we wrap this too we duplicate them put them on here hook up the height and then hook up those here and that gives us a second um a second square that then we can do and subtract this from this we put this as the one on top because this is the one that will have a bigger size because we're adding to it and then we pass that out now if you notice right now this is totally black and the reason for that is because our outline is non-existent so we're saying our outline is empty but as soon as i increase it you can quickly see it take form so there you go that's our outline if we compare it with this we can now adjust this now this is an outer eyeline outer outline sorry so you can make it into inner outline if you want by instead of adding subtracting or you can make it uh in the middle if you like uh add 0.5 to the top and point right to the bottom you can make it adjustments like that right now we've been dealing with uh only like white things and you know that's not as fun so let's um let's try and add a little bit of color to this so over here we can do a multiply and we're going to pass in the color here so we can just hook this up over here and there's many ways that you can do the color let's do a quick one and that is going to be by grabbing the uvs and then grabbing this and passing it into a hue node as the offset uh the hue node basically is you pass in a color and by adjusting the hue you can change the hue of the particular color so right now it's black so any hue adjustments to black are just going to be black so you got to start from a color so let's start from red um right now it's asking you if you want it in degrees i prefer normalized because that's just a value from 0 to 1. it's a little easier to use so if we do that and that save it you can see now we have this little sort of rainbow color that goes in the x um in the x offset now you can also do a little bit fancier things by here changing the uvs into polar coordinates polar coordinates are basically circular coordinates so if i do that and then i just pass that into the offset you can get this one if you're going that way i mean i can adjust this um with this scale i can adjust how close it gets so you know you can do like an outer ring or you can also do it circular so and by for doing that i would right now since i'm passing this and this takes a single value it'll take the first value which is x but if i split it over here i can pass y into it and there you go you got a rainbow that goes around looks pretty good so this is what we have so far as you can see there's several notes to manage to make this square but unity actually has a node called rectangle now you might be asking yourself why did we do all this if there was a rectangle i just want so you so you could see like the basis of how you do this sort of thing you generally what you're doing is based on some distances or some sort of gradient you're basically doing cutoffs and that's how you're sort of drawing shapes so i just wanted to show you like the basic understanding of how you make a rectangle and then you can just you know for practical use you can use unity's one which is pretty quick to just make like that uh but let's do a circle first and i'll show you there how this kind of quickly adapts so to make a circle it's literally just as easy i just grab from here and i just make distance and then over here i put 0.5 to 0.5 and as you can see now this is a circle if i were to pass this into a step node over here i can now draw a circle it really is that easy so that's kind of like the basic you functionality to make everything work but there's a little bit of a trick here uh that rectangle node that i was just showing you which basically clamps to make that rectangle you can actually use it in combination with this circle so if i pass this uh little circle into a rectangle node um this is zero right now and then it goes into white and if i adjust this thing over here you can see now i got a circle with a stroke which is basically what we were doing over here but with a circle so uh the the main reason it's all the way to the end is because that's where one is so we just if we wanna like adjust the size of it we just have to multiply it first so for example if i multiply it here and then you can see straight i know it sounds strange that multiplying it makes it smaller the reason for that is basically like if you look at this color here it's a gray when we multiply it by two we're making it a white so we're sort of like spreading things and that's why the bigger this number the smaller our circle becomes um we can then grab this one and hook it up to here save it and now we have a little color ring which looks pretty good now one of the very the most common uses that i get for this sort of procedural shape drawing is fails for uh ui you know when uh when you press and hold the button and the thing starts filling up so to do that circular fill we're gonna need circular coordinates which i was the ones i showed you earlier so basically you grab ubs then you want to turn them into circular coordinates which is polar coordinates is what they're called uh once you get your purl your polar coordinates uh you got x moves this way so basically moves outwards and y moves around so in this case if we want to do something around that's the one we care about so we're going to go here we split it and then we're going to grab the y and pass it into a step and then you can see if we adjust this this kind of turns around so if for example we create a little float here and we call it fill and then we grab this and change it into a slider we can then very easily just grab our little thing here uh multiply and then multiply it by this and then pass it here and then you gotta hook up this fill over here so if i adjust the fill you can see i have half the distance so from zero to one is all i have the reason why is like polar coordinates this value goes from one all the way to minus one not just to zero so we need to remap it if we want to use the full range so we can use this node which is called remap and we hook up this to the in not to the max and separate that and as we said this goes from minus one all the way to one and then we change it from zero to one plug it in here save and now when we go down to zero it actually unfills entirely there you go so that's pretty good so right now for our material we do a hard cut where we want to end you can also smooth it out and the way to do that is instead of using step you can use what's called smooth step so like i was saying earlier a step what it does is it says anything above this value is one anything below this value is one smooth step gives you a zone in between where you can say anything below this value is zero anything above goes from zero to one and then anything above the other edge goes to one so over here you can do create smooth step as you can see now instead of one edge which is what we have here we have two edges now so we can pass in the fill into our end just like we did before and then we gotta pass in um our note here we pass this edge here and then we add another one which we're gonna subtract from and this one will go here and we can just set it to a value which uh this this value should be a variable but we'll change it in a moment [Music] so we hook it instead of our step now we hook our smooth step save it and now you can see there's this little extra fade here for the movement and you can actually adjust how much it is right now it's point one which is quite a bit so basically we can add over here a little float and we were we're gonna call it feather which is just like a way to say smoothing and let's change it to a slider generally you want this value to be fairly small so let's go from like 0 to 0.1 and then put it here connect it save it and then here you can see if i add the feather it just adds like a little bit of extra there right so you can go as much or as little as you want just kind of gives you a little extra control what if we want several circles some uh let's add a little float here and then this is going to be radius which is not really radius but you'll see in a moment what this is so for now let's start with one and then if we go down here where we're multiplying we can graph this radius and we can as i was showing you earlier the the bigger the number the smaller it gets and for radius we want the bigger it gets the bigger it gets right so um to basically counter that we're going to grab the the radius and we're going to do one divided by the radius that's the way we're so i'm going to make it so that the bigger this is the the the bigger this value is the smaller the number and therefore the bigger this gets so if i cook this up here and i save it i can now grab the radius which i haven't changed to a slider but you can see now i can i can make it smaller or i can make it big i have some control there let's change it into a slider because i do love me some sliders uh let's go from one two maybe like three although i don't think we want that volume that's fine uh now the the real thing i wanted to show you and the reason i did this is i want to put something in between here which is uh called a fraction note so a fraction note will basically um any number above one it will reduce it so it will just get you whatever residual there is without the integer so 3.5 becomes 0.5 7.75 becomes 0.75 so it just kind of cuts it off like that and then that can go into this and then if we save and then we make our radius smaller you can see now we have several radiuses so that's because we did the fraction now we have that sort of repeating pattern and we can also animate this so we can uh graph for example here we can add to this and the addition we can route to a node and let's add it by time so we can just add time pass it into our fraction and as you can see now you can even see it in the preview now all the circles are going in you can adjust the the rhythm of that so for example we can do over here um a speed and let's change it to a slider because i love me some sliders and let's go from minus five to five maybe so we have a nice little range and in this one we can essentially multiply it by the time so we multiply the time by our speed and that will kind of determine the speed of our motion so as you can see it doesn't move anymore because our speed is zero but if i do this then it starts kind of growing if i go the other way it goes inwards so that kind of gives you quite a bit of control the next thing we're going to do is we're going to do uh how to draw a sine wave sine waves or any sort of mathematical uh formulas are very useful to kind of you know draw things on screen i find myself going into science a lot so for that first we're gonna split our uv so again our uvs go from zero zero to one one we wanna do our sine wave right now on an x axis so basically we wanna split it we wanna grab our x as we said it's zero to one so that's not a lot in the sine function the sine function for it to go up and down and then back up and it's two pi which is the circumference well it's like a circle so basically we need to multiply um the x which is zero to one we need to make it a bigger number and for that we basically can do uh multiply here and uh what number do we want well we want something multiplied by two pi right so let's actually do another multiply um and then we can hook this one here and then over here we can do two times pi you can just write it down there and it will work and then we can make a little uh variable here let's say um sign repetitions let's call it and then on this one we're gonna do it by default let's put four just to have something and then we pass that in here so basically we're multiplying uh zero to one we're multiplying that by um the sine repetitions times two pi so basically if we put two two repetitions it's gonna go from zero to four times pi uh now that we have this value we can toss that into a sine uh operation and you get these bars and that's because again what's happening is since we're passing it this way uh any uh like a value of zero will be zero a value of a quarter of pi will be one uh a value of pi will be back to zero uh three quarters of uh sorry uh anyway so it'll do the the wave up and down as it goes and that's why you see it go from white to black in this sort of fade pattern then we're going to use another step note as you can see step notes are extremely useful but this time as our n will pass the um the y value and there you go immediately we have those little patterns now um one of the problems we're having is uh the sine wave as i was saying goes from zero all the way to one and then it goes all the way to minus one and minus one is like around here so obviously that's not particularly useful so uh what we wanna do is sort of uh remap our values a little bit up so for that we graph here and we do a remap and we're gonna remap our values which goes uh from minus one to one into a zero to one and then when we pass it here now we can see the full waves now you probably also want to come compress them a little bit so for that we can add a little extra here so let me make a little bit of space and then in here we can multiply this uh we already had a little height uh variable so might as well hook it up to that and then that we can hook up here and as you can see it became immediately smaller and if we go to our height here and adjust the default value you can see i can make it small or big as much as i want so there you go we got a assigned value so let's hook it up just so that we can see it rendered save and there you go we got right now anything that's white becomes the rainbow anything's black remains black so but we want to make it into a little stroke so that it's like an actual line so that is not hard to do at all basically what you can do is um we grab this remap here and we can add we can add a little thing here so add and then we we already had this outline variable so we can use that and then that'll give us a different result and then we can do a duplicate of this note here and to this one we pass this other edge and as you can see you saw immediately it moved up a little bit right so we can then grab um the result of this one subtract from it and let's subtract this part and there you go immediately we got a little bit of an outline so we save it and uh this uh thing that we have here for outline now we can change it i'm moving it up but again you can adjust the math if you want it to move down or if you want it to move from the center all of that is pretty easy uh our repetitions as you can see the more they are the more they appear there and you can do quite a bit of things here uh so let's add a little bit of movement to our sine wave and for that we can just grab right here and we can add to it just like we did earlier we can grab this and pass it into time uh time uh actually we already had a speed variable so we can just multiply that multiply by our speed here and then we add that there and then um this result that gets passed into the sign we can just pass it here save it and there you go you have a little bit of movement in there and if we increase it this way or increase it this way you can get your little moving sine wave since the color is based on the uvs the color doesn't move so it actually looks almost like the color is moving through the sine wave but it really is the sine wave moving through the color and now let's try and get a little more interesting so earlier i showed you polar coordinates to kind of do that fill let's try and map our sine wave into those polar coordinates so we grab our uv coordinates right now let's make a little bit of space because i want to show you how to make it so that they can go around so we grab this we go in here and we switch it to polar coordinates and that gives us accordance like we were seeing earlier we can split them down here and if you see a spleen it actually it works it's just not great because uh x in polar coordinates goes this way so basically outwards and y is the one that goes around and in this case we want our sine wave to go around so that means anything that used to be x we now want to make it y and anything that was y we want to make it x because polar coordinates are sort of flipped so we can see for example here this r is going here we actually want the the b in here which is the y and as you can see it immediately that part sort of worked but the two things that were hooked up to our y we want to change into r so and we're gonna grab here and go all the way to u and then we're gonna grab here and go all the way to you and we save it and there you go we got a little bean it almost looks like a peanut uh as we start increasing the repetitions here if i increase it to let's say eight we get this little flower which looks pretty good uh the reason you see this little gap here is because um since we're not in an exact number right now we're in 8.7 if you imagine a sine wave going up and down 8.7 would end in a different place that the zero so when it kind of loops around it's not in a precise one so if you want to make it so that it's always connected you want to keep it in numbers like that and you can go for crazy numbers and get some crazy patterns like that as you can see he's targeting some uh interesting sort of moire looking things we can actually affect the pattern by combining sine waves as well so for example i can grab this whole bunch of notes here i can duplicate them put a copy down here uh and then i can modify them a little bit so for example i can adjust the speed so the speed is maybe multiply the speed let's just change it to um i don't know let's modify it so it goes like .66 and then that goes here so that basically the two speeds will be a little different and then here i can go to [Music] to this one and also increase this by two so there's more repetitions right so you can see over here how many repetitions are and how many repetitions are here and then i can just grab this one and i can multiply it by this thing so basically i'm combining them and then i'm passing them here and then when i save now as you can see i get a much more exotic shape uh than what i had before and you can also do a few other things for example let's try and do a little multiplication by some noise so here we go uh and it's just simple noise i'm gonna make this uh the pattern is a little bit smaller depending on how much intensity you put in the noise it will look different but you know so you can experiment around so if i save that you can see now i get this little uh it's kind of these little um edgings around around it so it kind of gives it a different flavor so that's about it as you can see you can do all sorts of shapes uh we designed with circles with squares but you can do all sorts of things all things online you can combine them in many ways as you can see as you saw at the end when we were combining uh two different signs with a noise uh you can do all sorts of combinations to achieve really interesting patterns and shapes that you can use for many things so give them a try see what you come up with if you enjoy the tutorial don't forget to like and subscribe and all that stuff leave me a comment if you have an idea for a different tutorial that you'd like to see me do in the future and if you ever want to see more of me i stream on twitter tv slash on mondays wednesdays and saturdays this tutorial was actually recorded during one of those stores i hope to see you there yes [Music] well thanks for stopping by don't forget to like subscribe and hit the bell to be notified when new videos come out thanks for watching

Channel: PabloMakes

Views: 18,932

Keywords: game, videogame, gamedev, tutorial, unity, shader, urp, shadergraph, graph, hdrp, refraction

Id: rj129Wc1vyo

Length: 27min 55sec (1675 seconds)

Published: Sun Jan 16 2022