How do Major Video Games Render Grass?

385,727
0
Published 2023-11-06
Trying out the last grass and foliage rendering techniques used by Ghost of Tsushima.

šŸ›’ Recommended books (on Amazon): www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wā€¦
ā¤ļø Support me on Patreon: www.patreon.com/simondevyt
šŸŒ My Gamedev Courses: simondev.teachable.com/

Disclaimer: Commission is earned from qualifying purchases on Amazon links.

Follow me on:
Instagram: www.instagram.com/beer_and_code/
Twitter: twitter.com/iced_coffee_dev

In this video, I tried implement the grass techniques explained by SuckerPunch in their talk "Procedural Grass in 'Ghost of Tsushima'". We walk though a lot of their basic setup, explore some possible alternative implementations, and end up with a nice little scene full of grass.

Three.js SSAO Used:
github.com/N8python/n8ao

References talks:
Ā Ā Ā ā€¢Ā ProceduralĀ GrassĀ inĀ 'GhostĀ ofĀ Tsushima'Ā Ā 
www.gdcvault.com/play/1027033/Advanced-Graphics-Suā€¦

All Comments (21)
  • @asandax6
    Simon: "I'm just messing around" (Proceeds to make one of the most awesome grass scenes that looks better than some games released in 2023)
  • @deanolium
    For the wind, try giving each blade of grass a random 'stiffness' which goes from 1 to 0.8 or so then use this to multiply the effect from the wind. That would give a little bit of variance to each blades movement which would make it feel a little more realistic, since each blade will have slightly different resistance to being moved by the wind.
  • I'm mesmerized by how good this stuff can look. I'm not a game developer, but you make me want to become one. šŸ˜
  • @neoshenlong
    Dude, you are like "yeah I'm just messing around" and then build a scene that looks absolutely amazing and far better than like half of the games I can think of right now.
  • @B0ltSoft
    As the developer of GrassFlow, I approve of this video. It's weird how familiar hearing about their grass setup feels to how I ended up developing it. Ghost of Tsushima actually inspired me to add bendy grass and stuff at the time because I was jealous they could do it and I didn't have it. That was back when using geometry shaders though, now it's just raw mesh instancing baybee. At one point I hacked together an experiment inspired by nanite using a compute shader based micropolygon software rasterizer to render a truly insane amount of grass with like 1000 triangles per single clump and hundreds of millions of triangles at like 2K 450 fps. I wish it was practical to implement that more generally. But cool nonetheless
  • @seriouce4832
    Simon, consider this: Since the video compression really messes with the grass details far away, you could consider this step: Simply upscale the video to 4k and upload. This sounds a bit silly but the 4k stream will have much more bitrate and the grass will look much nicer, even though it is technically still a 1080p video. The upscaling does not make it nicer, but the higher bitrate does - and you won't get that from youtube without increasing the resolution.
  • @zeekjones1
    I'd add the actors move vector to the "wind" for a given area so the grass gets a little push as you pass through.
  • @AnimusAgent
    The fact that this was made in Javascript is mind-boggling for me as a web-developers that have been working with JS-related stuff for about 10 years. And as always, awesome video!
  • This looks very nice, if you really want to sell the wind illusion you could make the butterflies be slightly perturbed by the wind waves.
  • @playonce4186
    To be honest man, this grass looks artisticly unique and very beautiful. I really love it ! One of the best grasses I have seen in a game. The more realistic something is to real life the more it looses that childlike connection and desire to that play game. Your grass has a a type of characterstic to it which i find very wanting to run around the grass meadowy hills.
  • @RGSTR
    I used to dream of becoming a game programmer. Now, I watch technical videos such as this, and enjoy them a lot. Thank you!
  • @mattwayne9128
    Some of the best javascript and game dev content on the Internet. Thanks for sharing your knowledge. I'll definitely be looking into your courses (when I get some money).
  • @kingcrimson_2112
    you are a true wizard. And I absolutely love your approach of tutorial making. Please dont stop, its inspiring.
  • @zarblitz
    I think the real value of this video (aside from the great approach to grass) is demonstrating how to turn a description of a methodology into an implementation
  • @4.0.4
    I'm absolutely impressed by how good of a result you got for what is basically a throwaway toy demo. Love your explanations.
  • @LewisRidyard
    I recently watched the same GDC talk, after playing the game for the first time, and wondered how it could be approached in the browser. Super cool to see your thought process, especially around the points you chose to focus on vs simplify. Great stuff. Really loving your content both here and on Twitter!
  • @DavidsKanal
    Love how you're doing your tutorials in the browser - not only is it easier for people to view this demo, but it also constantly reminds people of the power of modern browsers and what you can make with them. I much prefer this approach over fiddling around in some heavyweight engine like Unity.
  • @Draxen
    Absolutely insane, you sir are a genius. Thanks for another informative and fun video šŸŽ‰