Tutorial: Stylized Grass in Godot 4

we are going to cover creating a grass smashing blender then animating and populating that with a multi mesh and Shader in Godot 4. if you don't want to follow either of those steps there is a link in the description to a public GitHub repository where you can download the gltf grass mesh and all the materials itself you can also skip to areas of Interest with the chapters below this process was inspired by AG Beauty's enchanting stylized grass video for Maya and Unreal Engine a link to their video is also available in the description this is blender 3.5 and we're going to start in a new scene the first thing you're going to want to do is get rid of everything that's in here because we just need a plain mesh so let's press a to select every object in the scene hit X and then click delete now we're going to want to add a new plane mesh so we can hit shift and a to open up the add prompt and we can go to the mesh fold out menu and select plane now we're going to want this plane to stand up on its side and to do that we are going to rotate it so select it hit R and then X to rotate across the x-axis that pale Red Line you can see there and hit 90 to rotate it 90 degrees you hit enter it is now perpendicular to the ground we want this bottom bit here to be the base of the grass and this top bit here to be the top and where this green and red line intersect is going to be our floor so let's move it so our base is lined up with this floor if we hit G it'll move the object around if we then hit Z it'll move it on the z-axis and we can hit one to move it one meter up the mesh we created by default is a two meter by two meter mesh so moving at one meter up Works in this instance now we're going to want to change over to edit mode by hitting Tab and we're going to want to scale the whole object so it is much much thinner so we can do that by hitting s and then X to scale on this x-axis and we're going to type in 0.1 we want to add some Cuts along it so we have some extra geometry and we're going to do that with a loop cut if you hit Ctrl and r you can hover over one Edge and you can see a yellow lines being created here we scroll the mouse wheel up we will create two Edge cuts and you can keep going up and you can go down to choose how many Cuts you want in your geometry we're going to make two Edge cuts and then you can apply those by left clicking you can choose where they apply but that doesn't match too much to us just right click and they'll go to their default positions and we now have a blade of grass with a bottom part a middle part and a top part I'm going to merge the top two vertices so that our blade grass comes to one point hit M and merge at the center and then we're going to want to make our bottom two points taper a bit together so we're going to just scale them down if you select the bottom two vertices hit s and enter 0.5 it will now be half the width it was there I then like the aesthetic of having this lower section be a little bit wider than the top so I'm going to select these lower two vertices hit s to scale again and type 1.2 with that done we can hit tab to exit edit mode and return to object mode and we're going to try and bend this blade of grass and there are a few ways we can do that you can use proportional editing and move the points around to manually curve it over but I'm going to do it a bit more procedurally using a modifier the modifier we're going to use needs a point to reference to bend the blade of grass around we're going to use an empty for that so if we hit shift and a and we add a new empty we can select plane axis we now have this point here we can reselect that blade of grass and we can go down to the modifiers panel down here we can then add a new modifier in this drop down and we can select if I can see it a simple deform modifier I'm going to expand this bit so we've got a bit more visible space so you can see it's bending the mesh but not in the way we want to start with we're going to add the point we are bending around if you click this button in the origin it'll show us the other objects in our scene which is just the empty alternatively you can click this uh eyedropper and then select the empty manually but I'm just going to click on that drop down and select the empty so now as transforms are relative to that point on the ground we're going to want it to be a bend and you can see right there that it's bending straight over I want the bend to be a lot more subtle than that so you can increase or decrease the angle with this angle property I think 15 degrees is kind of Plenty you can also click on it and type in a value manually so now we've got that point we can select these uh this empty and based on where it is the uh the bend will be relative to it so for example if I move it up by hitting G and then Z to move the uh point up you can see it's going to change where the bend is relative to that subtle Bend is nice enough for me with that all settled on we can select our blade of grass and we can apply this modifier and now the geometry is permanently altered to be in that way and then we can delete the empty because we don't need it anymore so select that hit X and hit delete so what we want to do now is we want to make a little patch of grass by repeating this mesh and changing its scale and angle we want this patch of grass so that when it's viewed from above or straightforward or from any side that it's thick and there's no visible gaps so I'm going to want about 12 to 16 of these if we select the original blade of grass we can hit shift and G and then we will get a duplicate we right click that duplicates gone back to its original point you can see we've got the duplicate in the scene collection here and we can use all of our transform tools to move and position it around so I'm going to start by moving it hitting G and then pressing X to move it on the x-axis and then we want to alter the rotation a bit so I'm going to hit R and then Z so it rotates around the z-axis which is going to control the actual facing direction from a perpendicular view so let's just mess with the rotations of it and then we can alter the scale if we hit s and Z it'll decrease the height of the mesh and if we do that we'll need to hit G and Z to move it back down to ground level there we go two blades of grass let's repeat that for the opposite side shift d right click and then G and X move on the x-axis uh let's hit R and Z to rotate it around that Middle Point and then for this one I'm going to make it a bit wider and I'm going to do that by scaling it on the x-axis and we're going to apply these transforms to our Blades of grass over and over until we have a small square patch of ground to operate in okay let's speed through this process if you want to see how these angles look from face on if you have a large keyboard with a numpad you can hit one to view from the front view for you to view from the side view which is revealed a load of gaps and seven people from overhead if I swap back to three I'm just going to rotate this around so that we've got a bit more fill there and I'm going to rotate this around there foreign so now we've got about enough Blades of grass and it's working from the forward and side view we can see if we hit seven that there's quite a lot of space in between these now I'm going to fix that by selecting all of them and scaling it in every axis but the z-axis so if we hit s and then we hit shift Z Now we will scale in every axis bar this is about the z-axis and that'll bring them all closer together so that's going to really help mask some of that overhead those overhead gaps and then if we want a bit more than that we can say take individual uh individual Blades of grass we can hit R and we can hit X and rotate them in their x-axis well if we want the local x-axis we hit X twice and then it will tilt them forwards or backwards now that we've arranged all of our Blades of grass we can focus on the UV editing part of this so if we jump over to the UV editing tab we are going to want to select all of our Blades of grass Okay jump back to layout select all of them with a and jump over to UV editing so this is going to give us two views uh The View on the right being a copy of the viewport we have a second ago but the view on the left is how all of the UVS of these individual Blades of grass look when they're unwrapped and we're going to be using the information from this UV map to figure out how we're going to color and move around our Blades of grass with Moringa dough so we're going to start by hitting U and we're just going to click unwrapped unwrap all those bits of graphs and you can see we've got all of them there didn't expect them to be the same size and that's because I've missed a step okay let's jump back to the layout tab and with all of the blades of grass selected we're going to need to apply their scales and transforms now if we jump back to the UV editing Tab and we hit you to unwrap them they will respect their individual Heights so the problem was we'd done a lot of scaling back there when we were moving everything around and we needed to apply those scales so that this UV unwrap can actually see how big the individual faces are meant to be so what we want is we want all of these layers of grass you can see it's lined up as it is uh in the viewport here we want all of the bases to touch the bottom uh and that just means we need to do some cleanup so the way we're going to clean up ones like say this one where the base is at the top is we're going to click this UV sync selection option and now whenever we select an option we select something here it will select the matching item in the viewport on the right if we hit L while hovering over a selection it will select the whole linked object so you can see that this one that's upside down is this one here all we're going to do is we're going to hit with this whole blade selected is hit R and we're going to type in 180 to flip it 180 degrees now we can repeat that for all our Blades of grass until they're all oriented the right way so let's hover over it hit L and then hit R and type 180. uh you can also manually select all of the points by holding shift and selecting them but that L link selection is really handy let's hit L and select this last one hit r180 and now all of these are the right way up for the sake of my effect I'm going to scale all of these up I'm just going to hit s make them all a bit bigger and hit G and move them up the only real benefit of that is the uh the effect is going to move the blades of grass the closer to the top of the UV map is so using the space to it's full extent will make things more reliable over on the Shader side of things but the key point is have these bases lined up with the floor back over to layout we are pretty much done here if we hit a we can select all of them and right click and click join to join all those meshes together and now you'll see in the scene collection we have our one plane that is our merged object I'm going to rename that to grass and we can focus on exporting so if we hit file and Export your dough primarily deals with gltf files so get to gltf 2.0 I have a folder called stylized grass video and in that I am going to call this file grass and with that all done we can jump on over to Godot if you've made it this far and want to support me making more Godot tutorials I now have a patreon and if you want to see more I've done I have a course Godot for beginners that will give you source code and written guides for a scale project in the lovely engine so this is Godot 4 stable and we have an empty project with our grass glb file in it the way we're going to apply our graphs is we're going to take a multi-mesh instance and that is a node in Godot that specializes in repeating a mesh over and over in an area in a sort of scattered fashion or you have some control over how it'll do it but by default it's easy for scattering objects like grass so we're going to start by in the Sentry on the left clicking 3D scene as the root node and we're going to hit Ctrl a and we are going to add a multi-mesh instance this multimesh instance needs a mesh that it's going to uh that it's going to copy so our grass and it's going to need a mesh that it's going to apply that grass mesh to so we can add a plane in here and we can scatter that grass mesh all over it so let's add a mesh instance that's going to be our base so Ctrl a add a mesh instance 3D and I'm going to rename that to graph space and then we're going to want our grass file well we're going to want our grass gltf file which is this one here so if you find the glb file in the file system we can right click on it and click instantiate and now we get our graphs and we're just going to want that as a child of the root so we need access to the mesh instance itself within this gltf file in order to get access to that because we've just got this node 3D at the moment we're going to want to right click on this graph and we're going to want to check editable children from the drop down and now we can see this yellow named grass mesh that's visible right there let's go back to our grass base in the inspector and let's add a plane mesh in the mesh property we're going to select a new plane mesh and we're going to click on this plane to expand it and we're going to set the size I'm going to make it quite big 30 meters by 30 meters so you can see in comparison how big these Blades of grass are and the space we're going to fill if we select the multi mesh instance now we have everything we need to actually get this mesh populated with those so there's this multi-mesh drop down that appears at the top of the viewport when you have a multi mesh instance selected if you select that you'll go to populate surface option and then within there we can do all the setup we need so our Target surface is this plane mesh we're going to apply our effect to so we're going to select the grass base and our source mesh is the mesh we want lots of copies of so our grasp so select the yellow named grass mesh after that we're going to want to choose a number I'm going to start with say 5000 and see how it looks and that is an awful lot of grass I might be able to get away with less than that so I'm going to repeat this process I'm going to click the populate surface option these options will remain here but I have noticed if you navigate to other scenes these properties get lost which is a pain so uh yeah it's easiest to edit it now right after I've created things I'm going to just try 2500 and see if that's plenty and unfortunately that's not plenty we're getting some big gaps here so let's just do about four thousand and call it there we go so now we can focus on the actual appearance of these made of graphs you may notice that uh the blade of grass are only visible from certain angles and when it's quite peculiar um when you create meshes in blender the actual mesh themselves is only one-sided so when I open it in Godot these meshes will disappear when viewed from certain angles we're going to be able to patch that up within the Shader itself so first of all something that's quite messy at least at the moment is having all of them casting individual shadows I'm just going to get rid of that for the moment so I'm going to jump into my multi mesh instance 3D in the Sentry I'm going to find the cast Shadow option so in the inspector under geometry we can change cast Shadow to off and now we just get our uh varying white to gray Blades of grass we can now start applying actual effects to the grass Itself by adding a material and we're going to add that material to the multi-mesh instance so it applies to all of the grass it's created at once so in the material override property we're going to click the drop down to the right of it and create a new Shader material if we expand that new Shader material we can add a new Shader and within this we're going to use a visual Shader which is a massively improved system in godo4 so we're going to select a visual Shader and we're going to name the file grass and click create if we click on that grass file in the Shader property it will expand the Shader editor in the bottom panel and with that we will get a view of how our we will get our viewport and we will have our data editor itself we're not going to need to view any of this stuff on the sides I may be able to go into distraction free mode yeah there we go so this distraction free option will just get rid of the inspector and the scene tree and you need to click it again to get that back so with this Shader itself gives us control over a whole bunch of properties using graphs and nodes we're going to start by setting the color because that's easiest and in this drop down over here on the left we have access to a vertex and fragment Shader vertex is used for positioning the actual object itself and fragment is used for coloring so there are a couple of properties we can do to control how it's going to interact with the light at the moment that's going to make things a bit prettier if we drag from this normal option we can create a new node and we're going to want to select a vector compose this is going to let us create a vector 3. so the normal is the way that this mesh thinks is up and we want that to be straight up at the moment so if we change the Y value in this Vector composed to one we have x to the point straight up and now every point on this mesh thinks straight up is the angle it should use for how it's going to be lit and I'm going to also drag that into the normal map slot and now our grass is looking a lot more uniformly lit uh every segment of the grass is going to be shaded the same way too so it's going to hide those seams on the mesh themselves a bit after that we can also control how it's affected by light by fiddling with this roughness value if we drag that over into a new slot we can select a constant and find a float constant and now our roughness is going to be set to Zero by default now I've just remembered another step that would be nice so I'm going to exit distraction free mode and head over to this Shader material think if we expand the Shader there we go we get options for modes and flags and these are just extra options for the Shader itself they're going to control how it's going to be lit and stuff like that this cull mode is what makes the plane only visible from one side because at the moment it calls the face that it thinks is on the inside and we don't want it to do that so if we change the coal mode to disable we're going to pretty much double the amount of grass we can see we can now see the backs of all of those Blades of grass if we expand that again now we can make some other changes if we head over to the diffuse mode we can change that to tune and we're going to get something a bit closer to cell shaded lighting which is all as you can already see a much more uniform color uh being uniform is nice because it's going to make the grass the grass look fluffier and Blobby from further away so back into distraction free mode Let's uh fiddle with the color for our uh out of Blades of grass we want our grass to be a dark green at the bottom and Fade to a paler green as we get closer to the top so we're going to do that by finding out how far up the blade of grass we are we're going to do that with the UVS when we made those UVS we made it so that the base was at the bottom and the tip was at the top so we can look up in this Shader how far up the UV I'll be on and if we're near the bottom of the UV we're near the bottom of the blade of grass so we're going to need to get the UV to then uh make assumptions from that so if we right click on some empty space we can add a new UV input it's under the input Tab and it's just called UV capital u and capital V and we're going to want to get the Y value from this because we don't care how far along that UV we are we just care about how high we are so we're going to want to decompose this vector 2. so if we pass that into a vector decompose and change it to a vector 2 we can now grab the Y value as you can see it's black and top white at the bottom we want a value that is white at the top black at a volume white at the top black at the bottom because we want it to be a value about zero when we're bit by the bottom and a value about one when we buy the top so we can pass that into a 1 minus node so we drag out from that node we drag into empty space and we select our one minus node and you can see if we look at that we have the same panel but inverted and you can use this I button to preview values in real time so now we've got that one minus value we can use the value to determine what color we want our grass to be we're going to select our color from two options using the mix node and I think it's infected three mix so what a vector 3 mix does is we can have a color in one slot and a color in another and then this weight values determines how what our result will be whether it's closer to the first value the second value or a blend so a weight of 0.5 in a mix will give us a color in between the two first properties so let's drag our one minus value into the weight and now we our will have a value of 0 around the base of the plant and a value of one around the top of the plant in fact if we just drag that out into our Albedo and we return to view our plants we will see we have all of these laser graphs the black near the bottom and then they raise to white as they get higher and higher up so now we can just swap that black and white value out for an actual green so if we drag this uh this pipe going into the a value of the mix node we can select a new color parameter using a parameter gives us a value that we can actually set in the Shader itself so we can reuse this with different colors later on as opposed to this constant which is a value you can only change when you're in the Shader itself so I'm going to call this the base color I'm going to change the default value to on and now we can set what the default value of Base color is so whenever you first create this material what color it's going to have and we're going to want a sort of dark muted green so if we select sort of a green and we want to be or saturated this isn't updating okay I don't know why that didn't update uh but uh using the saturation on this side of the Color Picker we can control uh we can make the colors visible and then actually select our green so I'm going to want a kind of dark but not very saturated uh green and I've just found desaturated colors give us sort of more pale wheaty feel aesthetic so I'm going to go with something like that for a start and then I'm going to do a writer green as a second one so from the B property of this mix mode I'm going to drive into open space we're going to add another color parameter so in this second the color parameter we're going to want to rename it to uh grass column uh enable the default value again and we're going to set the default value to a paler green do something like that and now it's going to blend from this value to that value as we go up and that should be enough that if I expand over here we can see we've got uh we have our grassy colors although that's a little bit sort of yellowy and a little bit too pale for me so I'm going to make that value darker I've ended up spending an awful lot of time apparently with grass colors but there we go that's starting to look really good so uh these two colors are 1c40a as the hex code for my base and I've got 3A 97 11 as the hex code for the top uh and so if I Collapse the Shader editor we can see this grass as it is and that's quite nice and now we can focus on actually moving these Blades of grass which is arguably the harder part of this whole challenge we want to change to the vertex Shader because the vertex Shader is responsible for positioning all of the meshes within our multimesh instance well the all the meshes it determines the position of all the vertices of whatever mesh has this material so let's change over to the vertex data and we get access to the vertex information for each of our Blades of grass and we're going to start by just offsetting all of the vertices and then from there we'll build up more and more uh complexity as we try to add movement so we want to offset each vertices in our blade of graphs and we don't want to offset them when they are near the base if they're near the base we don't want that to move around because if the base that's where the roots are it shouldn't be moving so we want our value where the UVS are near the bottom like with the color we want there to be little displacement and the other top we want there to be more displacement so let's get that information we want to grab our UV again and in exactly the same way as the last one we want to decompose it and get the x value get the Y value even a vector 2 decompose get the Y value passed into a 1 minus and we can see how this looks by just uh offsetting our current vertex by this value and then we'll see everything start displacing so if I add our current vertex value so this is the position of every vertices in our mesh if we just offset that by this UV value we'll start to see some changes in our game world so if we pass this vertex into an ADD unless we want a vector 3 and down here we want to pass our one minus value into the B property of that ad uh we'll now have all of our original positions with whatever the UV is added on top so we should get no displacement at the base and displacement in some direction uh happening around the top so if we collapse that and we collapse the Shader view we should start to see we're getting lines as all of our Blades of grass are moving but the important thing here is that the bases of these beta grass are staying in their origin and as they get further out they're all moving out from that point so that's good we are offsetting our vertices but we want to offset it first of all over time and using noise to get uh waves of motion noise being a 2d texture that you uh use to create semi-random changes over an area but too simply so let's return to our Shader editor and let's start combining noise into the mix so we can get noise with a texture 2D parameter if we right click on some empty space and add a texture 2D parameter we can rename this parameter to wind noise I'm going to grab this up drag the sampler 2D into a texture 2D and when I do that it'll set up this texture 2D properly when you create a texture 2D mode it is expecting a sampler 2D object that will tell it what the value and the texture is at the different points on the texture by default it's set to this texture mode when you are using a value you're providing from a parameter you need to change it to sampler Port but you can see when we dragged it in here it changed it to sampler Port by default so now we have our value and we want to combine this noise with what we have down here so the way we're going to combine the noise with this value is we're just going to multiply Alpha up the grass we are this value by the output of the noise so we're going to pass these into a vector 3 multiply so we've got our noise going in the a value and our UV one minus value of going into the B slot and then we can plug that into our Edition here in the inspector click the drop down for wind noise and we're going to select a new noise texture and we're going to want a very lumpy uh generic noise without too much intricate detail on it so that we get broad motions across the grass so if we click this noise drop down within that noise texture we can select a new Fast noise light object expand it and within there we can control our noise type that's not too important to me because we uh when it makes noise it has one broad layer of noise and complexity that's added on top we're going to remove that complexity so we're going to go into this fractal drop down and we're going to change the type from fbm to none and now you see we get this very broad lumpy noise the grass should be moving in a bit of a more interesting way so yeah you should see we're getting a uh some Jagged motion across as the noise is changing the value that's sampled and we're getting a bit more varied motion we can now start scrolling that noise over time to make it move and make it look like the wind is rustling this patch of grass in order to pan the noise texture we're going to need to control the UV that's updating the point of the noise we're reading and there is a function for moving a noise texture and that is a UV panning function so if I search panning we get a UV panning node and we can take the output from that and put it into our sampler port we want to hand the node based on what the current time is so we're going to want to pass the time in some form into this offset if I just drag that offset into a Time node and we return to our view we will see we have our grass is moving like nuts they're all offsetting in exactly the same way at the moment but the grass itself is moving and that looks silly okay so we're going to want to control the part of the noise texture we're reading from based on where the grass is in the world so that they'll all move independently of each other we expand the Shader editor we need to grab their current position in the world we are going to grab that with the node position World function the node we want to grab the x and z coordinates of this because we don't care how high it is we just care how far along and how far into the mesh we are so we're going to decompose this vector 3. with a vector decompose function and we're going to compose this as a new Vector too so I'm going to drag the x value from there into a vector compose and change it to a vector 2. we can now drag the Z value into the Y slot and instead of having this 3D World position we've got a 2d World position of how far along and how deep it is I'm just going to add the current time to that all right I'm going to add the time to that so I'm going to take a vector 2 add function and I'm going to pass the current time into the B channel for that and then I'm going to use this result in the offset so now we've got a different value for our time based on where our node is in the real world we noticed it was moving much too quickly a second ago we're going to control that by decreasing the scale so change the scale of the Panner to 0.1 and that will move at the tenth of the speed it did just then so if I Collapse this and we get a good look we will see all of the grasses moving and it's all moving independently it's moving much too much at the moment though in order to decrease how much the grass is moving if we jump back into the Shader editor we can go back to this point where we are multiplying all our values together and we can multiply it by a smaller value so the actual offset itself decreases so let's pass that multiply into this another multiply uh and change the second value of multiply to be 0.1 so now all the offsets are going to be a tenth as big and if we pass that into the ad and return to our scene we have lovely grass swaying in the breeze and with that the grass is all set up here are some examples of it in use in a project one important step when you're making your levels in blender it's also important to create the meshes you'll use for the bases of your multi-mesh instruments they don't have to be connected physically so long as it's all one mesh we can scatter our grass on top with those multi-meshes if you want me to cover more foliage or have me cover for example having a player displace the grass underfoot let me know in the comments thank you very much for watching and I will see you in the next one

Channel: Bramwell

Views: 30,081

Keywords:

Id: vp51qoyv08g

Length: 39min 25sec (2365 seconds)

Published: Fri May 19 2023