ONE FOR ALL: The only wind shader you will EVER need! - Unity URP shader graph tutorial

welcome today I'll be teaching you how to make this wind Shader with actual proper bending rather than just displacement this results in very satisfying grass fields with very sexy propagation now this Shader works with stylized grass or more realistic grass additionally this is a universal Shader that works with grass trees bushes Vines you name it now this is a urp Shader so you want to either create your project in the urp pipeline or if you already have a project just not on urp you can download it through the packet manager make sure you migrate all your broken materials and set up the pipeline correctly now the focus is on the Wind Shader but if you don't have any models I will show you how to make a simple grass model so you can follow along skip to the next chapter if you already have your own models now to make the simpness of graph models shift a at a plane rotated by 90° on the x axis bring it up by one unit duplicate the plane and rotate it by 90° believe it or not you're almost done with the base mesh but there is one problem when you try to bend it which is the point of this wind Shader it looks wacky to fix this you want to add some more topology and now when it bends it looks more natural and more realistic I may be asking this doesn't look like grass at all well you're right because we need to make a mask to do this we add another plane rotate it and move it off to the side then we scale it down to be a more of a grassy strand kind of thing add some more topology bevet it with contrl B to add even more topology take that Strand and duplicate it and move it around rotate it but make sure to keep it within the bounding box except for the bottom the bottom should actually go outside scoot some vertices around to get a little bit more detailed and a little bit more chaos in the grass because grass is nothing but organized add a subdivision modifier with control 3 to make it more smooth and make sure you select the bottom and increase the mean vertex creas 2 one next up you want to add a material cuz we're going to be running this out you can delete the principal bsdf and add an emissive node and connect it to the output and now when you head into rendered mode you'll see that the grass is white and that is exactly what you want when you render this out also make sure the background is either black or transparent select the resolution to either 1024 or 512 add a camera make sure it's centered and move it back change the typef frame perspective to orthographic and change the orthographic scale so it matches it just perfectly hit F12 to render it out and you can see you have a black and white mask or white and Alpha mask save this image to your desktop and the base grass is all set up now if you want to have the maximum amount of control of your wind you need make one adjustment in blender you want to select your object and add a second UV map make sure it is the second one the hierarchy is very important name it whatever you want something tour of like windmap will do just fine and make sure the little render icon is on if there are any LOD models on your object make sure to do the same process with all of them then select all the lots and go over to your UV Shader editor AO shortcut is contrl F10 to get there very handy if you swap a lot to memorize these shortcuts so this map is basically a gradient that tells the wind Shader how much the object should be affected by the wind and where the gradient goes from zero at the bottom since the y axis here is zero in the UV map going all the way up to one at the very top where the wind Shader will be affecting the object with 100% Force now just to show a little bit more complicated example here in the case of a tree the UV wind map here is just a projection from view from the front side and you can see that on the bottom here the wind isn't really affecting the leaves at all and near the top it's affecting more and more now an even better example is this Willow Tree here that has hanging Vines this is where the power really comes in with this method you can see that the vines are rotated 180° in the UV map this causes it so the top part or rather the bottom part of vines is being affected more than the top this effect cannot be achieved by just using the height of the vertex in each object the grass is basically perfect but all you want to do is scale it down and move it just a little bit down cuz you don't really want any value to being EX exactly one because it's a little bit too strong bandage now you can go ahead and Export your model in fbx or whatever format that you usually use fbx is the standard one and Export it with the same settings that I have here now I'm going to bring both my models in here so I have the grass model here this is pretty big because it's a meter by meter so you might want to scale this down in blender what you want to do is create a material you can uh either create and look for the material or you press create and just press M to quickly create a new material a little life hack there in unity and call This Grass mat you could go and apply it uh fre you could even go and apply this but that doesn't do much now I want to make the Shader so in order to make the Shader go here create and you need to have urp so if you don't have urp you need to do the same thing as I showed in the beginning go to the Shader graph tab urp and choose an unlit Shader graph you can use a lit Shader graph or unlit doesn't matter it changes l but for my use case I'm going to use unlit and call this a grass Shader now you can double click the Shader graph and this is all we have never mind I don't unlit I want lit I thought I needed unlit because I'm not using any lighting at least not for this graph but it also gives you other things now in order to start with to get the alpha I do not recommend just grabbing this in here because we want to reuse this this is the grass is just an example we're going to create a texture 2D and call this texture mask drop in here bring it out and look for a sample texture 2D we're not going to connect this to the base color we're going to connect this to the alpha and then for the color we're going to add a new variable called color we could leave it as that and just connect that oops connect that into the base color another very important thing that we're going to need right away is a float called Alpha clipping threshold you Alpha CPP clipping Thresh threshold uh and you see there is no Alpha clipping here actually there is uh but if you don't have it then you need to make sure you enable Alpha clipping right here and we just connect this and with this Shader graph if we go to the grass mat after saving we can click up here and look for it the name grass Shader and we could drag our map into here and now you can see we have a very poor very pixelized grass because you want to increase the alpha threshold that makes it a little bit smoother and also if you're getting this weird clipping thing up here which is very common is the wrap mode because this texture is being wrapped so if you're to apply this on object that has bigger UVS you would see a derra make sure this is set to clamp and that gets rid of that annoying line there is one small problem with this that's working but the backside is invisible I've seen a lot of people basically you duplicate this and just rotate it by 90° and that doesn't fix it but it does also double the amount of vertices so I have a different method where is it render both faces and no it is not that simple because if you render both faces and you go look at the back it's a little bit off you can see the sun the Shadow's right here so the sun is coming from let me make this bigger you can see the sun is coming from that way but it's still dark the reason is cuz the normal is being is that way so this face thinks it is facing away from the Sun to fix that we need to flip the normals but only when it's on the back side so how do we do that if we get the normals which is a normal Vector set it to tangent it says also right here the normals is in Tangent space this is the normal so if we just select this into here nothing will change because I'm just assigning its normals to its normals but if we put this through a flip node and go ahead and flip everything and put this into normal it's going to flip its normals so now you can see there's a bit of a shading artifact here uh but now you can see this side is bright and this side is also bright because now the normal has been flipped towards that way but we only want to be on one side in order to fix that there is a node called is front face so now it's checking whether we're looking at the front face and this has to be the fragment shador because we're doing it per pixel not per vertex because the vertex can't have two normals so we're changing this based on the pixel not on the vertex all right so now we're going to place this flip into a branch node well first is front phas so now if it is the front FL if it is a front face don't do anything don't flip it because it's correct if it's not the front face however flip it and we connect that into the normal and now you can see this side is bright and this side is dark precisely what we need if I go to rotate this even more dark bright that is working perfectly now this method isn't going to be need needed if we decide to have our normals facing directly upwards this is what I'm doing with this so that the grass is more evenly shaded and has a more stylized look to it I'm not going to show you how to do that uh I'll do that maybe if once I show you how to make proper grass cuz this by far is not proper grass but since we are making the Shader I will show you how to easily turn this off it's very simple we just get another Branch uh and also add a variable Boolean called flip back faces bring that in and put that into the predicate so if it's true we want it to flip it if it's false we don't want to flip it so we bring that back in and plug that into the normal once we save it if you click on the grass material here you can now see there is a variable or a Boolean here that us to flip it or not flip it now it's time for the fun part it's the wind Shader part this is the part that is the most important one uh I haven't seen many people actually make it in this method so I think it'll be very interesting so let's get this grass model the method I am talking about here if you look at the single grass strand as the grass bends it bends downwards most tutorials just make it so that the grass bends or just displaces towards the side but I want this to also Bend downwards I could also have it Bend downwards even harder so that say this actually probably makes it look more natural but here it's bending underneath the floor so one is probably a little bit too high and the fact that bends downwards that is what makes these nice let's go and save that that's what makes these nice kind of patterns the wind patterns you don't really get that nice effect if it doesn't Bend downwards now in order to achieve that effect we got to start from the beginning first we need to actually displace this just even a little bit in order to do this we use in the Shader graph the position right here we want to offset this position so uh first we're going to have to get the position of each ver vertex called just a position node and in World space and if we just select out to the position nothing will change because it is setting the position to its position what would you look at that it disappears because we are setting the there it is the reason for that is is because this is an object space even says right here and this is in World space so what is happening is we are checking the world position of this grass and it is off the world so like Negative X and I'm displacing it from its origin negx that amount so that's why it's not going to work uh so what we need is to transform it from World position to object position so we're going to add a transform position and turn that from world to object position and now we're just setting its position to its own position now how do we displace it well yes you probably guessed it you add to the position we could go and hide that and hide this and hide that so it's a little bit more organized we could immediately so you want to add a noise texture it's way too big so you want to scale this down now uh we don't want to displace it on every single axis so we're going to make a combine RGB and we're going to displace this only on the x axis for now and let's see if we just save this there you go it is being displaced this is correct this is what we want now in order to make this move over time uh pretty simple you want a tiling and offset plug it that into the simple noise and then you want a time so you take time of it and connect this to the offset uh yes and you can save that is going very fast and one problem is this is being offset in X and YZ you can see it's going diagonally uh let's make it to so it only goes into X so let's go ahead and put you through a combine again and the x connect that there so now it's being moved only in that direction which is what we want now we definitely want to scale this down let's say to 10 maybe even more five there you go now another problem we have is the grass is the center here what right here the reason is cuz this is going from 0 to 1 so it's offsetting it at a minimum of zero and a maximum of one we want to change that so after the noise has been being calculated we want to subtract half and now it's going from 0.5 or5 to.5 and if you want to fix it so it's on a scale from uh 0 to 1 rather or rather from negative 1 to one you just multiply by by two now it's going from one to negative 1 I think the noise is still too large so let's bring that down to one there we go that's a lot better now another problem we have is that it's being offset the entire thing we want the bottom to not offset at all now in order to make this actually work we need to bring in a UV node set it to the second Channel make sure all of your objects that is going to be using this method the UV wind map is going to be the second Channel if you're using light Maps then go ahead and use the uh the third Channel because this is the Z I guess the first second and third right because the order does matter it doesn't care about names it cares about the order now we care about the y axis so go ahead and separate it or split it and I guess this is the X and this is the y- axis you could double check this always if you're not sure you can always double check it by connecting to the base color and you can see here it's black and here it's white that is perfect so we're going to connect the color back to color we are now going to multiply the end result with its height and there we go we could also change the color to be Green Let's uh make the green stand out for now so you can see this is where most most tutorials would end however WS very important here now is adding the vertical part to it but before that we need to add a strength modifier what I mean by that is you want to run this through a multiply like I had before I just deleted it for some reason add a float call it Bend strength save that and this will control how strong it's being affected so that will uh come handy later now uh if you want this let's go double it so it's stronger and let's also make this a bit faster to make it faster you just bring the time and multiply it by two yeah that's work very crucial part to get this nice waving effect cuz as it is right now with this tiling offset if we if we duplicate this a few times over you can see they're all moving exactly the same what want is the wind to propagate so first it starts pushing it to the side here and then goes through we're going to make that real quick so we can move this offset off to the side and what we're going to need to do this is a position in fact we're going to want the absolute World we're going to split this uh so that we can have it on the XY axis we don't cuz this is X Y and Z uh the green channel is the z-axis so it's a little bit confusing here and then we can combine it back just like that so the X and the Y sorry in unity the y axis is upwards as you can see right here we need the x and z axis so x and z cuz we want this to kind of the texture you can imagine to propagate on this flat plane and we're going to connect this to the UV because we don't want this we don't want the simple noise to pile on its own UV we want to create a new UV which is the world and you can see now it is propagating that already works if you want to visualize this we can by creating a plane and bringing it up let's have it just to the side of it and let's go ahead and add this grass to this uh now that is not necessarily what we want to see there what we want to see is the tiling of this noise so we can do that by connecting this uh first we need from the Sher and connected there we save that and now we should be able to see there you go no matter where this is the texture is kind of mapped to the world and so you can see that as the black Parts this goes towards the negative and then as the white Parts go over it it goes towards the positive just kind of going across it and if we were to rotate this you can see it is stretched because you're not mapping it on the z-axis only on the XY so we can delete that and connect the color back up and connect you back up here there we go and we can also control this tiling if you want it to be smaller but if you want to do that you just go a change the scale of it well that that's only if you're using a texture which is another pretty important point I want to bring up is noise is very expensive to calculate and calculating the noise for each vertex on each strand of grass is a little bit too expensive in my liking so what I did and what I recommend you to do is make your own wind map so this is a tileable texture I made this in Photoshop your method of making this highly depends on what programs you have you can make this probably in a oh uh one thing if you're using a texture you want to do is a uh cuz when you're using a texture for a position you need to sample texture LOD and select that as the wind map and now you can connect it as you can see and if I put this through it is more chaotic because this is this scale but for the purpose of this tutorial I'm just going to use the simple noise if you want to be more optimized I do recommend using this however so I have the propagation and the problem with this now even if we select this and bring up the bend strength like 10 and you could see it is propagating but it doesn't feel like grass this is what most tutorials show you is just to kind of push it along the axis what we want to do is instead turn this into kind of a circular function so that let me separate one of the grasses so that when it pushes it instead of it's going to the sides it takes a circular path like that so what we want to do is take the strength of it so how much is being displaced on the x axis and then let's uh we're going to need this for the future uh but for now just put a multiple multiply and then we're going to need this we're going to plug this into a cosine and a sign this is how you make oh this is how you graph a circle right and now what we're basically saying is the amount it is moved by the X I want to move that down by same amount but why well it's not the same amount it's the cosine amount of that or the sign point is depending on the value that we saw earlier on the plane it moves it on the X and the Y so when it's one ideally it moves it on the X by one and the Y also by negative one because it's going to be like that so technically this should just work if we connect this one to the X because this is going to be how much we move on X and this one to the y sorry the opposite way around so if we just ignore this uh UV thing that we had in the past this technically should work you you see now it is being placed upwards so the circle Ed but you do see it is going down here and then back up and then back down here so it's sort of working and now here we need to multiply by -2 * pi and this sort of uh it kind of breaks here so it's it's giving very interesting results but this just basically centered it you'll see the result of that uh fairly fairly soon and to fix this we want to now multiply both of these by its UV wind map so we just need to plug both of these into multiply a multiply node and plug you in and now plug these in instead now this is closer but as you can see still not quite there yet we need to make a few modifications so we could delete this now cuz we do not need this cuz we're multiplying it over here we're going to plug you into a subtract and then also we're going to plug you into a multiply let's go ahead to make some more space here so we're going to plug you into a multiply for now we're going to keep it just at one and then we're going to multiply you once more by itself and then connect you instead of that by subtracting it from the height we basically instead of telling because uh the XY cordinates of a circle the cosine and S is giving you the XY from the bottom so how much to displace it at X but if you imagine if the grass is straight up pointing straight upwards the Y is currently at one because the circle point is up here and the x is at zero because it is at the center of the graph and that would basic be telling it okay displace it upwards by that much but we don't want to displace it at all and in fact supposed to go downwards so we have to subtract it from the original height so that now it's telling us by how much do you have to move it down to bring it to that position and then here we multiply it uh this will be our vertical Bend strength so we're going to add a new float call it vertical Bend strength this is a useful uh one to have even though most of the time it's going to be to netive 1 for different objects you might want it to be a bit different now you can see it's working it was working it was moving it upwards now it's moving it only to the side side and that's because the vertical Bend strength is zero if we set to one so we're telling it to move it down when it's bending out the way so bend strength a little bit too strong let's set to like one uh in general right here Bend strength uh 1 because we're multiplying it by -2 pi one is the largest value you would really realistically want here cuz that is 1/4 of a circle thanks to uh this multiplication here if we set to two it is now be bending it by 180 degre degrees degrees if we set to three it's going to be bending it by uh 270 and four is going to be doing a full 360 so I really do suggest limiting this Factor so by clamping it the minimum you want to be negative 1 and the most you want to be one and usually one is also a little bit too large so I usually like to go for like8 or something just so it doesn't clip through the floor it's almost clipping here so you can see that with this Shader the Shader is basically complete now if we just duplicate this quite a lot of course it be better if you like change the scale and everything uh and also I do want to turn off cast Shadows so that's a lot smoother you can see that's got a very nice pushing effect you could play around with this vertical Bend quite a bit you can make it a lot smaller so now pushing it down really hard which is not really nice uh but it could be interesting for some models and if you have any models that are hanging so if I were to take this grass for example and make it s that's the wrong thing and make it hanging for this one one I would have to set you to one so that's now being pushed upwards that's actually really cool and if you want to be push even more upwards you could set to two or 10 that's 100 or 10 and you can't see it because the bottom ones but there you go now it does if you go too high it does kind of do some strange things because it is being pushed that way in order to fix that I actually haven't done this but you could probably clamp it but to avoid that just don't make this valy too strong you could fours or thre is a little bit strong uh if you want to make this grass look better just just I know like I said this is a grass toal but this looks so bad I kind of want to fix it we can do this by having the normals Point upwards we could easily do this by just making a plane make sure it's in the middle and bring this upwards now what we're going to do is let's just select the higher L model for now if we go into edit mode and go into normals we can see the direction the normals are being placed if we add a transfer attribute or a data transfer select face Corner data custom normals and nearest corner of nearest face and select this as a source uh note it says right here AOS smooth has to be on so turn that on if I apply this you can see all the normals are pointing straight up and then reexport it as fbx the fbx model you could delete this and bring it back in now you would say it looks worse why because we are inverting the back face remember this back face is pointing upwards and now it's back face it's flipping it so it's Point downwards so the sun thinks it's pointing the opposite way that's wrong we don't want to flip it and that's much better way too vibrant so let's bring that down and just look look at that uh you can also match the ground color or the color of the grass to the ground a little bit better and you'll get more of this kind of result you could use this with anything so let me give you a an example and this willow tree is the perfect example that I mentioned earlier if uh let's go ahead and for example duplicate this willow tree and select the one that we already made so the wind and then I have the willow tree vine material right here so if I open that up this is just a black and white text of a will W have Alpha here instead of black and white but that doesn't matter too much if I go like select that you can see it's basically working the same way but I need to make sure that the vertical bench strength is set to negative 1 sorry not negative uh positive you can see it's being pushed upwards that is way too much 10 you can see it is going in a circular fashion one is plenty and then if we select this it doesn't work because uh reasons I think my plant wind Shader is set up just a tad a bit differently yes I am using the actual Alpha here the reason for this is mine also supports textures if you want let's do that let's let's upgrade our grass Shader to support textures as well so instead of using a texture mask which we've been using up until now we can use any texture and if you want to be a texture I mean it will it would already work except for the fact that there is no color selected to the base color so if you connect the texture to the color to the base color then now the texture will be on the color and make sure the alpha is set to the alpha there it is of course we're going to have to change our texture to support Alpha but that's simply or our texture mask to support Alpha cuz we currently it's black and white so now we want it to be white and Alpha but if we want to use a normal texture then use the color with Alpha this setup no longer works because now you you see it's using the texture and the texture is white which is all right the way to fix it is we multiply U by the color we had previously so now white times the color equals our new color and this also is an added benefit if we do have a texture here we could easily change the color of a texture if we want so right here we could easily change the color same as we're changing the white color we can change the textured color as well and of course you need to change the black to be Alpha and that is how you make a wind Shader that actually bends rather than displaces at this point the only thing I could do to make it even better is making or getting better models This Grass model here was only made quickly for you guys to follow along if I show my model that I spent hours creating you could see it works far far better I hope you found this tutorial insightful thank you for watching and bye-bye

Channel: Box Studios

Views: 1,339

Keywords: Chains, Box Studios, Game Asset modeling tutorial, Blender modeling, How to make Game assets, How to model in blender, Blender Modeling, Unity URP wind shader tutorial, Unity wind shader tutorial, shader tutorial, unity tutorial, How to make a wind shader, Unity how to make a wind shader, URP Wind shader tutorial

Id: H8pNYFbqfJo

Length: 31min 19sec (1879 seconds)

Published: Mon Mar 18 2024