Simple Interactive Grass in Godot

hey uh in this video i'll be showing you how to make this shader um which imitates uh the player interacting with foliage uh if you just want the shader resource you can just download it in the description um i'll be showing you how to make this with the visual shader um just so it's a bit easier to explain some of the ideas but i'll also be going over written version of the shader at the end okay so to start with i've set up this simple scene which is just a ground plane which is a mesh instance with a plane shape um eight times eight and a player which is another mesh instance with a capsule which i've shrunk a little bit and turned around and then i've set up a directional light with shadows um and a world environment just with some sso and tone mapping set to film it just so we have nicer light in the scene we'll use blender to model a grass draw so as this tradition will start out with deleting the default cube and then we'll use shift a to create a plane we'll go into edit mode by pressing tab press alpha rotate x to use the x axis and press in 90 for 90 degrees then we can press g to move set to move on the set axis and control move it up and then we can select the two topmost vertices press m to merge and add center then we can exit back out of edit mode and we can go into the transform by pressing in and here we can set the size of it so we'll say that it'll be uh 10 centimeters wide and 50 centimeters tall and then we'll just use control a and all transforms to reset the scale we used so now we just need to ensure that the uv layout is correct so we can go over into the uv editor and here we can just go into edit mode select all with a then see it from the y-axis by clicking here and then press u for uv unwrapping and use project from view bounds and then we have a good ub layout now we are done with our model so we'll go up to file export and we'll export it as an obj because we just need a symbol file okay we will just go into desktop and we will save it here as straw and we'll choose selection only as we only want the model and back in our project we now want to generate a little field of grass so we'll start out by dragging a copy of the straw into our scene here and we'll create a multi-mesh instance which we'll use to make a lot of copies of the straw so if we select the multi-mesh we can use populate surface and as the target we can set the ground as the source we can set the straw and we can set the random rotation all the way up we can increase the tilt a little bit maybe increase the randomness for the scale a bit as well and then we can set a good high number like 10 000. and there we have a field of grass okay now we can get started on our shader so if we select the multimess instance under material override we can select the new shader material click it and set a new visual shader and if we click that we'll get the shader editor up here so uh first and foremost we need to make the grass green so let's create a color uniform and we'll just call that albedo and we'll plug that into the albedo and that immediately appears here and we will make the grass green we also want to set the call mode to be disabled just so we see both sides of the grass now that's actually all we want to do in the fragment shader everything else we'll be doing will be in the vertex shader okay so to get started what we want to do is to make the grass move away from the player so first and foremost we need a player position in here and we'll do that by creating a vector uniform we'll call that the player position and um we'll later be setting this with the script but for now it'll just be at zero which is fine that's also where our player is right now so um to get a direction from the player to the grass we need to take the position of the grass which is the vertex and we need to subtract um the player's position uh there's a bit of a problem here though because the vertex is actually in model space um whereas the player position is obviously in world space so we'll need to um get this into um into world space first and we can do that with the transform vector multiplication and with the world matrix so now this should be correct okay so now we have uh direction but there's still some issues with this um for one thing we don't actually want there to be any um y directionality in this we only want to push in and out on the x and z axis so we'll just uh multiply um with a vector that has a one in the two axis we want and zero in the y axis so then we'll zero out the y axis also another issue with this direction is that the further away and the larger the values are getting that's not really what we want we just want directionality so to fix that we will um normalize the value okay so that's all looking good um now we would think that we would be able to add this value to the original vertex value and we would be pushing away the grass draws but the problem is that we're still in world space here so we have to move back into model space so to do that we will again multiply by the world matrix but this time we'll do the opposite way around so we are going back into um into the into model space now then if we take the vertex here of course if we just put that in here nothing happens but if we oh we need to add with a vector if we add in all our fancy calculations here we can see it does indeed move away just like we wanted um but of course there's a couple of problems with this so obviously we don't want the entire grass draw to be pushed away only the top of it so to fix that we'll use the uv which we ensured were set up correctly before we'll use it decomposed node because we only want the y axis so if we multiply with the with the y axis or calculation here oh let's try that again then you'll see that uh something did happen but it wasn't quite the right thing and that is because the the uv coordinates um go in the opposite direction from what we want but luckily that's easily fixed we'll just use a a one minus node to uh invert the value so if we just do this then we're getting the right result now it's pushing away from it but um of course there's still some issues here the big issue being that it's pushing away no matter how far away it is from the player and so to fix this we can calculate the the length between the vertex um and the player so to do that we'll just do the length oh we should do the length between the subtractor there um and we can use this length value uh to drive a uh a smooth step we'll actually make it drive this um and then if we multiply with this value as well you'll see we'll start getting something much more like we want let's have a look here this might be a little bit difficult to see here but now we're only moving um the grass draws that are really close by and actually the value here acts as a distance or radius so if we increase this we'll increase the radius that they're being moved now to make this a bit easier to control we'll just add in a couple more uniforms so we'll take a scalar uniform and we'll call that a radius and we'll put that in here and then you can see that goes down to nothing because the the radius was zero but we'll make it one instead and then we can create another scalar uniform and we'll call this um boss and we'll just multiply by that right before the last step here and that means we can now control how much the grass is bending so we'll set that to 1.5 so now the the only thing we really need to do is to be able to control this with the player instead of as a value here now to make it the player that's actually interacting with the grass let's add a script and we'll just add in the two keywords just so we can see this happening inside the editor and we'll just need uh process function and then we just need to get access to the the grasses material so we'll say get parent and get node and multimedia instance and material override and then set shader param and we called it player pass and then we'll just give that the global trans form dot origin which is the global position and we'll save that out let's try exit and he close the scene and then if we select the player now and move him we'll see that the grass is indeed moving around the player let's just go over the shader in a written form here and as you can see it actually ends up being quite a short little shader so we do the same stuff right we disable call we have an albedo we have a player position we have a multiplier for the power and a multiplier for the radius and we start out uh getting the vertexes over into world matrix by doing a matrix multiplied multiplication we figure out the direction by subtracting we clear the y value in a different way but it's the same thing in the android we normalize the direction we calculate a distance which we use to drive the smooth step and then here we get the direction and back into a model use space um and then down here we just um at the direction plus the the powers and the the uv minus one so it's all the same stuff in the end and it works exactly the same way uh thank you for watching if you like this tutorial and would like to support me in making more tutorials and open source project like my good ol addons consider supporting me on patreon thanks to my patrons little mouse games winston johannesbunch space chase zero dimitri keane and marcus richter

Channel: Kasper Frandsen

Views: 9,754

Keywords: godot, grass, shader, visual shader, blender, game development

Id: qcScJ_vgsGU

Length: 13min 16sec (796 seconds)

Published: Wed Feb 03 2021

Reddit Comments

[u/G-Brain]

Nice. See also BotW Style Grass Tutorial (non-interactive) for wind. Would also be nice to know how to do non-flat terrain and multiple moving objects. (How do AAA games handle multiple moving objects?)

[u/DramaticProtogen]

Remember to post on godotshaders.com