How Do Games Render So Much Grass?

Sdílet
Vložit
  • čas přidán 1. 06. 2024
  • An overview of my grass rendering explorations and an implementation of billboard grass, a common technique used in nearly every single video game.
    Support me on Patreon!
    / acerola_t
    Twitter: / acerola_t
    Twitch: / acerola_t
    Discord: / discord
    Code: github.com/GarrettGunnell/Grass
    References:
    developer.nvidia.com/gpugems/...
    Music:
    Gold Falls Casino - HuniePop OST
    Joy - Persona 3 OST
    Bad Bully - Kizumonogatari 2 OST
    Chapters:
    00:00 Intro
    01:36 Getting Started
    03:37 GPU Instancing
    06:51 Improving Appearance
    10:07 Finishing Touches
    11:50 Optimizations
    14:04 Conclusion
    Thanks for watching!
    This video is dedicated to my friend, Alotryx.
    also please subscribe haha please man please just subscribe dude please just like one sub I swear I'm not addicted please man please just one sub please
    #acerola #gamedev #graphics #unity #indiegame #unity3d #madewithunity #indiedev #unity2d
  • Věda a technologie

Komentáře • 561

  • @spwwww8258
    @spwwww8258 Před 2 lety +923

    Just wanted to address one point about using GPU Instancing:
    Without GPU Instancing mesh data isn't copied from the CPU to the GPU every frame. That's why the GPU has its own memory.
    The mesh data is loaded to the GPU once, only a small amount of data which tells the GPU how to render that mesh is updated constantly.
    For example data about where the mesh should be rendered. (uniforms)
    The performance problems thus don't stem from having to load too much data to the GPU, but by bad scheduling.
    When rendering each instance of an object separately, the GPU and CPU are constantly in a dialogue and have to wait for each other.
    With GPU Instancing the CPU combines all of that data, sends it to the GPU and then lets the GPU vroom vroom through the workload without any interruptions.
    Whats also nice is that with GPU Instancing you can just keep that data around on the GPU for as long as you like.
    So you have the flexibility of updating it every frame, only sometimes or only once.
    Updating a complete mesh every frame is sometimes referred to as streaming and only done in very specific circumstances. Constantly shapeshifting terrain maybe. Though even then other methods are usually preferred when possible.

    • @ewinter9021
      @ewinter9021 Před rokem +20

      Great explanation. Wanted to ask where did you learn about this topic? (A class or book perhaps? because as a wanna-be indie dev with no technical training i would love to begin researching things like this but it definitely doesn't seem like entry/gateway material and prob has tons of prerequisites to understanding lol).
      TLDR: How did you go about learning this information? And do you have any tips on resources that could be useful to learn or understand this in more depth for those getting started?

    • @turkym7md5
      @turkym7md5 Před rokem +7

      @@ewinter9021 You can fire up a c++ project and start tinkering with OpenGL, look for an opengl c++ series or a book it would teach you alot about GPUs

    • @turkym7md5
      @turkym7md5 Před rokem +7

      Another use case for updating a mesh every frame is for 2D batching, because every frame you have to resort and recalculate the batched sprites and send their mesh data to the GPU.

    • @bash0985
      @bash0985 Před rokem +1

      @@ewinter9021 There are also some good books and video series' using Java instead of C++ which might be a bit more friendly to people who haven't dealt with it before. I personally recommend ThinMatrix's 3D engine series on CZcams and the book "Computer graphics programming in OpenGL with Java". They teach graphics programming from the ground up and are much lower level and in depth than anything you might do in Unity

    • @maximeumbra7235
      @maximeumbra7235 Před rokem +9

      Pretty accurate description although the performance issues aren't "exactly" due to bad scheduling over which you get no control in the first place, big part is very poor bus performance with the number of commands sent but that isn't it alone either, on the GPU side large bottleneck also arises from warp under utilization when the commands are sent in a manner that don't use the full warp width, in addition say 10k commands to process isn't exactly a walk in the park within a common 5ms frame budget usually afforded for driving the rendering.
      The basic notion is damn good though and while the position data isnt necessarily uniform this does a good job to illustrate that if you have more than a dozen of anything you need to batch in one manner or another (method described here isn't the only one, you can also use constant buffers for direct pointers to the vert position buffers etc)

  • @level7feeders13
    @level7feeders13 Před rokem +331

    1970: people in 2020 will have flying cars
    2021: in order to render grass you need grass

    • @Rudxain
      @Rudxain Před 9 měsíci +5

      This is why we need to touch grass

  • @AlexTuduran
    @AlexTuduran Před rokem +119

    You could randomize the y-axis rotation, randomly darken it with a very low frequency noise for more color variation, use material ambient occlusion to further improve the definition of the grass, use an atlas of grass textures for even more variation, implement basic specular reflection for a more pbr look and some basic sub-surface scattering. Regardless, this is a nice explanation.

  • @joewilliams8286
    @joewilliams8286 Před 2 lety +263

    Best video I’ve seen on the topic, love how you give detail over the whole process and explain the theory behind it… gained a subscriber

  • @HKragh
    @HKragh Před rokem +121

    Hi, fellow tech artist here: Overall nice look. I would add some additional effects. Grass should animate a little more in zones of related movements, and in waves.
    Then there is lighting. Calculate a standard fresnel effect (dot(pos-cam, viewDir) as uv in a fresnel LUT), and use the sky color as a tint where grass is seen very heads on. It will highlight the curves of the terrain. Also grass is a 3D structure in a vertical position, so calculating some light based on viewing direction (dot(pos-cam, lightDir)) would work wonders. As grass animates, it changes how it faces light, so could also do something here, to make it change lighting as it waves.
    Lastly: grass is shiny, so adding some soft specularity (again use the pos-camPos as a pseudo normal) is a nice final touch

  • @Ash_18037
    @Ash_18037 Před rokem +76

    4:30 I don't think storing a huge buffer of positions on the GPU is by itself instancing. The way I understand it is if you have say a 50 vertex mesh and you need to draw this say 50,000 times, you could get the CPU to create a buffer of 50 vertices * 50,000 and submit that large buffer to the GPU. You would still only need to do that once because the grass does not move, so you incur the hit one frame only. However that still means you are using a large amount of GPU memory on repeated mesh data and also some performance as the GPU has to process that large buffer.
    So instead of duplicating all 50 identical (non-transformed) grass mesh vertices 50,000 times, why not simply store a single instance of the grass mesh vertices on the GPU, then get the CPU to create just a position (and possibly rotation, color vertices) for each 50,000 grass object instead of the full 50 vertex grass mesh. So instead of 50,000 * 50 * vertex_size you are submitting and storing 50,000 * vertex_size on the GPU (simplification but the general idea).
    The GPU still needs to process this 50,000 buffer but it is now much smaller using far less GPU memory and the GPU spends less time doing so. It then takes that single mesh instance and transforms it when rendering each instance to the correct location using the single vertex position data. Of course this means that GPU instancing is only useful for world objects such as grass where the mesh is identical for all instances. Providing a per instance rotation vector (and possibly color vector) can make this duplication much less noticeable.
    I've implemented exactly this for grass recently using Godot and the MultiMesh class it provides. docs.godotengine.org/en/3.5/classes/class_multimesh.html#class-multimesh

    • @HallyVee
      @HallyVee Před rokem

      Can this be done for billboard trees at vast distances? ... er wait, billboard != mesh, is it :)

  • @heyjakeay
    @heyjakeay Před rokem +5

    Never would I have expected HuniePop and Kizumonogatari backing music to a technical topic like this

  • @adelAKAdude
    @adelAKAdude Před rokem +82

    That was surprisingly enjoyable to watch ... and informative ... Thank you !

  • @AndreCastel
    @AndreCastel Před rokem +18

    Just discovered your channel and it's exactly what I needed, so thank you for the great content. Please don't change 🙂 the low budget 2000s look and effects is a breath of fresh air. Keep up the good work.

  • @TacoTechnica
    @TacoTechnica Před rokem +12

    Underrated stuff! Was looking into grass rendering and stumbling across this was very helpful, Gonna check out the rest of the grass stuff and also the rest of the channel since your presentation on topics is great!

  • @MrWaketeu
    @MrWaketeu Před 2 lety +11

    Fantastic video ! I knew everything about instancing, but for an unknown reason, I stayed until the end of the video ! Please continue to make such great content

  • @icedude_907
    @icedude_907 Před rokem +6

    Just want to inform you that both me and a friend were recommended one of your videos today despite never seeing you before.
    This could be about to hit the algorithm.
    Watched a few of your vids now, extremely well done content

  • @antonynepgen2045
    @antonynepgen2045 Před rokem +5

    I love the entire way that you explain everything, I honestly learnt enough that I will remember most of it while it was entertaining - I could watch these for fun for ages

  • @DreamPharaoh
    @DreamPharaoh Před 2 lety +8

    That was great, thank you for all of the details too. I will be tackling this problem soon and so it was nice to have a direction on it.

    • @Acerola_t
      @Acerola_t  Před 2 lety +2

      Good luck! It's something I've been researching for quite awhile.

  • @James-Calvin
    @James-Calvin Před 8 měsíci +2

    Another wonderful video, Acerola. I have seen this technique used before in games I've played. Your grass looks amazing! I love the yellowing effect you added related to the height. It's amazing!

  • @buttforce4208
    @buttforce4208 Před rokem +9

    Amazing video, I've been looking all over for something like this. Thanks so much for making it, GPU Adrien Brody!

  • @soul-candy-music
    @soul-candy-music Před rokem +2

    I love everything about this video, lmao. Super knowledgeable, funky detective and retail store style beats, intriguing kitchen/living room ted talks - instant sub.

  • @JoBot__
    @JoBot__ Před rokem

    That quick recap on the previous video was very useful, and I got everything I needed. Thank you.

  • @DarkDax
    @DarkDax Před rokem +3

    Great video mate! Just started looking into shaders so this video was really informative. Some of that math might have gone over my head but still really enjoyable haha

  • @HuxleyCrimson
    @HuxleyCrimson Před 7 měsíci

    Top notch content man. We have some real added value information here, and it gets deep enough while clearly conveyed and staying at reach. Kudos to you. Instant sub.

  • @wordydird
    @wordydird Před rokem +5

    I just looked this up cause I was curious what the 2d plane grass was called, but this was really interesting and I learned a lot more than I expected.
    Cool stuff man, definitely gonna sub and watch more

  • @pcih6176
    @pcih6176 Před rokem +3

    I loved your performance in "The Pianist"!

  • @aleningi96
    @aleningi96 Před rokem +2

    Great video about gpu instancing. I'm getting into shaders rn and this was super useful!

  • @gus3000spam
    @gus3000spam Před rokem +2

    Cool video, chill and informative. I like your style !

  • @KoshakiDev
    @KoshakiDev Před rokem +5

    The editing is on point. I enjoyed the video as a casual viewer and also enjoyed it as a legitimate tutorial

  • @mariovelez578
    @mariovelez578 Před 2 lety +5

    This is an amazing video! I learned almost nothing because I already knew this stuff, but you explained it so well!

    • @Acerola_t
      @Acerola_t  Před 2 lety +3

      Thanks!
      The next 2 grass vids go into some more modern techniques.

    • @mariovelez578
      @mariovelez578 Před 2 lety +3

      @@Acerola_t Just did, commenting on all of them to help the algorithm

    • @Whatismusic123
      @Whatismusic123 Před rokem +1

      dragon vale is a fire game

    • @mariovelez578
      @mariovelez578 Před rokem

      @@Whatismusic123 Lol, yes it is!

  • @PMARC14
    @PMARC14 Před rokem +3

    The math was surprisingly easy, but what was crazy was the artistry in it by taking into account all the many properties to make it look nice.

  • @19vangogh94
    @19vangogh94 Před rokem +3

    I love this "Standing In Room Microphone sprinkled with animations" format, its so unique, you shouldn't loose it!

  • @maribelmenese4845
    @maribelmenese4845 Před rokem

    I really love how you put the music you use on the description

  • @fluffycritter
    @fluffycritter Před rokem +18

    Nice technique. A physical wind simulation could be done by doing some shaders that do a fluid dynamics simulation (e.g. water ripples) within a texture and then use lookups into the texture to determine the sway amount. I've also seen some really clever techniques of using the depth buffer of a camera pointed down on the environment to drive the fluid dynamics based on objects moving around (for example, having large gust-of-wind objects that are only rendered on the dynamics sim texture).

    • @kitkittsy
      @kitkittsy Před rokem

      My immediate thought when animation was brought up was that the sin of the x/z positions of the grass would be used to emulate waves of wind. Perhaps not as accurate as a simulation, but trivially different to implement than height-frequency method used here?

  • @jeffmcguire1599
    @jeffmcguire1599 Před rokem

    Dope videos. Going back to watch others. Thanks for making this stuff!

  • @ghwii
    @ghwii Před rokem +1

    As a game Dev, and also someone who really digs math and algorithms, you can't even begin to grasp how grateful I am CZcams randomly decided to recommend your channel. All of your videos I've seen are a gold mine. Absolutely awesome content!

  • @johncreativeproducts5688
    @johncreativeproducts5688 Před 2 lety +2

    what a great video man! thanks so much!!

  • @allepiccondor1166
    @allepiccondor1166 Před rokem +1

    Great video man can’t wait to see more

  • @Kenji_195
    @Kenji_195 Před rokem +1

    Videos like this really motivates me to keep experimenting with Unity, it was very interesting and fun to watch!!

  • @WizardsCode
    @WizardsCode Před rokem +3

    Great work... learned alot. Thank you.

  • @Buttered_Bread
    @Buttered_Bread Před 9 měsíci

    Super interesting stuff, real glad I came across ur vid!

  • @Korcunu
    @Korcunu Před rokem

    Great video and great editing! Really useful info for me as a hobbyist gamedev although I understood only 10% and probably need to rewatch the video multiple times xD

  • @joeypepperoni6078
    @joeypepperoni6078 Před 11 měsíci

    I've been searching for this video for months even though I didn't know it existed. I feel like I've found a secret tome of knowledge in this video and your channel. Thank you Acerola!

  • @DatBass
    @DatBass Před rokem +1

    awesome video, i've always wondered how this was possible.

  • @jarrednorris
    @jarrednorris Před rokem +2

    glad this popped onto my recommended. Inspired me to work on some more code. Keep it up and enjoy 1 more sub!

  • @towyan8187
    @towyan8187 Před rokem +1

    Dude your voice with that BGM is addictively great. It helps me sleep lol

  • @adiyn_
    @adiyn_ Před rokem

    Best intro, amazing humor, cool nick, looking goo- i mean nice content quality, man i'm subscribing

  • @ktz1185
    @ktz1185 Před rokem +1

    2:01 "In order to render grass, you need grass to render" fucking love it

  • @six-sided-matrix
    @six-sided-matrix Před rokem +2

    This dude sounds like his boss told him to make a video but sound enthusiastic about it

  • @mariocamspam72
    @mariocamspam72 Před rokem +1

    really nice explanation of a difficult concept

  • @sethhannah7191
    @sethhannah7191 Před rokem

    This video style is hilarious! subbed :)

  • @sethcarson2201
    @sethcarson2201 Před rokem

    That quick rundown on Dynamic Details was genuinely the cherry on top

  • @arsnakehert
    @arsnakehert Před rokem

    Love how this video is very much a paper in video format, but not only that, in _interesting_ video format
    Thanks for making this! \o/

  • @voizeh7140
    @voizeh7140 Před rokem +1

    Holy cow! Your channel are awesome! And also funny

  • @KaiMCGRPS
    @KaiMCGRPS Před rokem

    i saw one vid by you and i'm currently binging your content, your videos are so cool

  • @kylejennings819
    @kylejennings819 Před 2 lety +14

    As an artist with little code experience longing for a powerhouse grass setup. I would love to see an in depth tutorial including code

    • @Acerola_t
      @Acerola_t  Před 2 lety +17

      Unfortunately I don't have much interest in doing coding tutorials, I prefer focusing on theory and leaving the rest as an exercise for the reader. This is mainly because when I was learning, I noticed a sheer lack of theory focused graphics content.
      The core of this implementation is compute shaders which I learned from this great tutorial:
      kylehalladay.com/blog/tutorial/2014/06/27/Compute-Shaders-Are-Nifty.html
      Additionally my source code is in the description, it is a little messy but referencing it and reading documentation on functions you aren't familiar with should be able to get you there.

  • @EthanFilms
    @EthanFilms Před rokem +1

    Amazing video!!! Subbed!

  • @CausticCatastrophe
    @CausticCatastrophe Před rokem

    I really appreciate these videos. they are a breath of fresh air. :)

  • @HarryTheLoser_
    @HarryTheLoser_ Před 10 měsíci +1

    Damn, this helped a lot, you definitely will blow up!

  • @RosemaryWilliams49fruits

    +1 for very informative. +sub for comedic style being on point.

  • @DavidRutten
    @DavidRutten Před rokem +2

    That arrow with the fake alpha cracks me up every time.

  • @TheLotroNerd
    @TheLotroNerd Před 2 lety +5

    Why people should like this channel. Its not adhd there are no annoying rapidly flashing scenes ever 3 seconds. They guy actually knows what he is talking about, the guy doesn't put up with bs. His content is valid and knowledgeable, and its not a 3 hour long tutorial. Bravo!

  • @ZettXXII
    @ZettXXII Před rokem +1

    I learned a lot, thanks mate.

  • @realPowerPaul
    @realPowerPaul Před rokem +2

    Thank you for explaining and sharing in detail! First video I found from you and I look forward to check out your channel later. You earn more subs and if you are consistent, I'm pretty sure you will get them! Stay tuned!

  • @TheHypnotistDK
    @TheHypnotistDK Před rokem +1

    Awesome video! Keep going

  • @bunksoup8137
    @bunksoup8137 Před rokem +2

    My favourite part is the wire plugged into a wireless mic.

    • @Acerola_t
      @Acerola_t  Před rokem

      It's unfortunately not wireless it's a samson q2u

  • @2Fast4Youtube
    @2Fast4Youtube Před rokem +2

    Okay, you got me with the recap.
    Subscribed forever now, you are stuck with me

  • @MikolajZMiasta
    @MikolajZMiasta Před rokem

    Great video, thank you a lot!

  • @INeatFreak
    @INeatFreak Před 2 lety +2

    Thanks for this superior tutorial.

  • @etopowertwon
    @etopowertwon Před rokem +2

    You can use different textures and add random rotation during placement to make it look less uniform.
    Also I know this technique since Quake 1 days.
    There they used it for explosions, as they are spherical by nature. I defitenly remember it seeing in other games, but Q1 is my first memory as it also was the first game I played that had real 3d

  • @zerosick
    @zerosick Před 2 lety +2

    liked the monogatari references
    subbed

  • @nguyenhoangminhtrung2779

    Thank you for these videos!

  • @QckSGaming
    @QckSGaming Před rokem +1

    Excellent video, that's a sub!

  • @meerkat22
    @meerkat22 Před rokem +1

    Strangely perfect explanation!

  • @Tenetri
    @Tenetri Před rokem +1

    cool vid dude, keep it up!

  • @jake3255
    @jake3255 Před 8 měsíci +4

    I remember in Just Cause 2 they had trees billboarded beyond a certain distance, and just made sure that the texture was always facing directly at you. If you flew directly above a tree, it would be lying flat on the ground and rapidly swivel beneath you

    • @Acerola_t
      @Acerola_t  Před 8 měsíci +3

      breath of the wild also used this technique for their trees, pretty neat!

    • @tefhypr.2
      @tefhypr.2 Před 24 dny

      a lot of games also use it, mario 64 does it (i dont blame them, it was 1996) half life 2 does it and a few others

  • @EpicDragonfly
    @EpicDragonfly Před rokem +1

    amazing video!!

  • @Gilesone1989
    @Gilesone1989 Před rokem +1

    Interesting video to understand what's going on behind the scene

  • @dyna6460
    @dyna6460 Před rokem

    I love the way you explain things thanks you

  • @centur
    @centur Před rokem +1

    good vid, subbed

  • @fredericklyle4001
    @fredericklyle4001 Před rokem

    10/10 my new favorite youtuber. Needs more cowbell? no, needs more grass. (i'm here from your video about bad grass tutorials)

  • @a_random_person_
    @a_random_person_ Před rokem +2

    That was a great video. Even gave me motivation to look at real grass to compare realism

  • @socks2441
    @socks2441 Před rokem +4

    fascinating. its so clever how this stuff works. i feel like the grass could do with some better textures though. also, i dont know how hard it would be to add shadows to them but that would look amazing too. probably completely tank performance though, unless you could bake the shadows and animate them swaying with the wind along with the grass etc.

  • @emiel333
    @emiel333 Před rokem

    Awesome. ❤. I’ve subscribed

  • @TreesPlease42
    @TreesPlease42 Před 8 měsíci

    This is cool, thanks!

  • @Ugric
    @Ugric Před rokem +3

    This video is really enjoyable, well made and easy to understand! :)
    Wouldn’t be surprised if you got really popular soon!

  • @bluebukkitdev8069
    @bluebukkitdev8069 Před rokem

    So I've been looking for someone who is competent with graphics programming and is happy to explain in detail for some time now. Everyone on YT right now either doesn't go into detail, or uses too much technical jargon, or is outdated by at least 6 years. This was a good find. Have a free sub.

  • @lukapogo
    @lukapogo Před rokem

    Great video!

  • @copycatlyn
    @copycatlyn Před 8 měsíci

    i have no idea how i found you, but i am happy you're did. no clue what you're saying either. this is just great :) not due to your explaining, but due to my stupid and ignorance.

  • @grochlin7106
    @grochlin7106 Před 2 lety +2

    I had to watch the peepotalk part twice at two different speeds just to half-understand it. good video :)

    • @Acerola_t
      @Acerola_t  Před 2 lety

      something something trig functions and conditional logic based on localized variance

  • @yuukil5522
    @yuukil5522 Před rokem +1

    Your channel is like the brutal moose of video game design like same humor and same quality

  • @pixelrunner2775
    @pixelrunner2775 Před rokem +2

    "In order to render grass, you need the grass to render"
    ah yes, the grass here is made out of grass

  • @stoneboi1395
    @stoneboi1395 Před 2 lety +1

    surprisingly high quality, hidden gem of a channel

    • @stoneboi1395
      @stoneboi1395 Před 2 lety

      My tips are to allow more head room in your IRL shots, but i loved the editing and the grass solurion was really cool

    • @Acerola_t
      @Acerola_t  Před 2 lety

      Thanks! I'll take that into consideration

  • @ThatPawikBoy
    @ThatPawikBoy Před rokem +1

    I love you Sir, thank you so much.

  • @lvsas
    @lvsas Před 2 lety +2

    realy good video :)

  • @idontlikethis980
    @idontlikethis980 Před rokem +1

    I am indeed watching this in the future
    Thank you for addressing this matter

  • @user-db9do2hi7b
    @user-db9do2hi7b Před 6 měsíci

    Man youre awesome, thanks

  • @bluebaby30
    @bluebaby30 Před rokem

    Great video, P3 music was the cherry on top

  • @user-xe6wc8yt7u
    @user-xe6wc8yt7u Před rokem +1

    That’s cool video!

  • @AntonBryzghalov
    @AntonBryzghalov Před rokem

    That's just awesome!

  • @hmidi
    @hmidi Před rokem +1

    enjoyable to see and learning stuff as well .. Good Busy (as we say in dutch)

  • @steppe7369
    @steppe7369 Před 2 lety +7

    good video :)

  • @cipriancristian9933
    @cipriancristian9933 Před rokem +8

    Final thing looks so cool!
    However, shouldnt the grass follow the same direction while it is blown by the wind? I dont mean all the plane having the same direction direction. I mean just similarities in direction per small regions

  • @danielalva2
    @danielalva2 Před 2 lety +2

    great video