How do Major Video Games Render Grass?

have you ever looked at a game like ghost of sushima and wondered wow how did they do this luckily they were pretty open about talking about how they did it let's go through their GDC talk and we'll Implement something similar based on their ideas so to get started they begin by chopping up the world into tiles tiles are used to drive various parameters of the world from artists and whoever else then they move on to describe their compute Shader setup from the sounds of it this is used to generate the per instance grass blade dat so where they are how they Bend basically everything about each blade of grass that'll be consumed by the vertex Shader so I mean the gist of it is they generate a bunch of data per grass plate so the first order of business is of course making that tile of grass we'll build an individual blade of grass using these vertex IDs or vert IDs and I'll just use the vertex Shader to create positions from that then we'll instance this a number of times generating a unique position for each blade of grass this gets us our very first completely uniform set of grass in the talk they place the individual Blades of grass using a jittered grid of points so you start with evenly spaced points and then just apply a small random offset to each one this ensures reasonably uniform coverage they also talk about using voronoi noise to give them some ways of clumping the grass for artistic purposes giving them controls for clumping and clustering we can pretty much just copy this Jitter approach verbatim so what I do here is just apply a small random offset to each blade of grass as they mentioned in the talk I'm going to skip out on the voronoi for the time being I get the feeling that it's not absolutely necessary and we can just start simple we can also add some angle variation by rotating each blade I'm just doing that in the Shader via per blade hash value that I generate why am I not using web GPU good question I probably should but I'm doing this in JavaScript and doing it this way will probably make it more broadly compatible with anybody who wants to try the code out later let's move on to some details of the grass itself in their talk Sucker Punch mentions they use a cubic bezi a curve to model the shape of the grass they have a few parameters including a tilt and bend which is used to curve the grass blade so the basic idea at least what I'm getting out of it is that you need a mechanism to shape the grass blade so that it curves they use a bezier as pictured here since you can manipulate the control points to give you a lot of control over the shape of the curve and animation I mean we could just go with that the code is right here since I had to make the animation but I fiddled around a bit and ended up just using a simple rotation of the vertex on the x- axis based on the height and a random per blade curve value gives me a really similar effect so I'm content and it show shows that there are multiple paths to achieve the effect although who knows this may come back to bite me later but let's not dwell on what ifs the next additions they make are by using a slightly rounded normal in place of the flat grass normal so you can see here that they've got an artist Supply normal map for the blade of grass I don't have an artist handy so I chose to hack this into the Shader with two rotated normals and I blend between them if I'm not supervised I will will just hack at things the effect seems to be pretty similar I get a rounding of each blade in my lighting test bed everything seems good the lighting seems to work just fine I guess I could have just taken their texture by screencapping the video but oh well and then they apply a subtle view space adjustment based on your viewing angle and the direction the blade is facing they say that they slightly shift the verts and view space there's no real details here but I kind of screwed around with with it I kind of just shift the verts in view space before the final transform is written out based on this kind of view space thickening factor which is based on the dot product of the view Direction and the grass normal I just fed that through this easing function and then ramp it down as we go completely orthogonal otherwise you get this weird crisscross with the other side I didn't spend a lot of time experimenting here you can definitely see that the grass is Lusher and Fuller like this we can zoom in and see this individual blade as I Pan the camera around kind of trying its best to stay on screen and then it gives up at some point it's an awesome trick it works great even with my incredibly lame phoned inversion let's move on to lighting and colors so they have some artists authored textures for their grass which controls gloss and color they enable specular but blend it with the terrain normal to avoid aliasing and probably the biggest thing is that they generate their own simple ambient occlusion now we've cranked up the amount of grass a bit and I'll do the exact same thing I'll have a simple gradient going from base to tip and I'm going to pick my own colors here so we'll go with a darkish green at the base and a sort of yellowish at the tip I can control this with a simple shaping function with the specular I'm just blending the normal with the up Vector based on distance I'll fiddle more with the parameters later but we've got the code in place now and finally the ambient occlusion term so this value is being generated in a really basic way starting with some overall density we'll assume that we fill that in later and we'll remap that into a shading range fully dense areas will get a lot more shading than sparer ones and then we adjust based on the height so this is kind of starting to resemble grass so they mentioned that they have some sort of global wind system driven by pein noise and that can be sampled on both the CPU in the GPU there's apparently a second talk that goes into more details but I don't feel like watching that I'm going to run with the pearlin noise keyword so first I want to get some basic movement going so I take a sample of the noise based on the grass position and I scroll that with time and I just add that on top of the curve of the grass blade this kind of adds some subtle movement then I take another couple samples of noise one is interpreted as the direction of the wind and get get remapped into the range 0 to 360° the second sample is the strength of the wind and then we just scroll both of those with time then I apply that as a rotation on the vertices in the same way we do the curve but based on the wind direction the end result is a lot stiffer instead of that Flappy effect they showed which looks awesome their whole game looks awesome but similarly I'm seeing what other ways we can do this and how those turn out I based this on some footage of plants in the wind I I captured a few weeks ago on my way to Toronto in reality you just do whatever looks good to you I feel like this looks pretty nice but keep in mind I don't have an artistic Vision here if a lot of this has looked interesting to you and you want to be able to do similar work I happen to have a Shader and math course that teaches you from the ground up we work from Total beginner to some pretty Advanced topics like we're doing right now there links in the description now the final piece of the puzzle is the L of detail system they have two levels High which has 15 vertices and low which has seven then they blend from high to low I'm going to do something hand wavy similar I'll Define high and low and that'll determine how many vertices are in each blade of grass I'm going to be super cheap and make the far away grass just a single quad so the high detail will lose its curvature as it transitions from high to low and I'll just hot swap them for each other once that's in you can see that I've placed like at least a jillion more Blades of grass into the scene where somewhere in the millions at this point but this is taking something like 1.5 milliseconds on the GPU we could definitely ring out more performance they're way more aggressive and swap out four high level of detail tiles for one low it may be worth checking that out but they were productionizing the system and I'm just screwing around here at this point it's probably up to you to hone in on some settings that work pretty well for you ghost of sushima uses thinner Blades of grass and bends them a lot so they get that nice specular reflection going which I sort of have a similar setting here after fiddling around with the parameters tweaking the lighting and colors a bit more and I added a layer of basically crap on top the little butterflies and puffs are just Shader driven nonsense but I really like the wind swep planes look that we have going so what we have looks pretty decent as is I've gone ahead and added some other stuff into the scene some terrain some different sky and fog settings tweak the lighting water with a screen space reflection and tens of thousands of trees I know we didn't follow the talk 100% but at the same time I always view these as more inspiration and a Rough Guide rather than a rigid set of steps to follow the end result looks pretty nice so I'm content and as always this is running in the browser which is really neat cheers

Channel: SimonDev

Views: 304,079

Keywords: simondev, game development, programming tutorial

Id: bp7REZBV4P4

Length: 9min 32sec (572 seconds)

Published: Mon Nov 06 2023