Building Procedural 2D Grass With GPU Compute
Jarl Frode recently shared a great write-up explaining how 2D grass rendering with compute shaders works in Jarl, a Viking colony simulator inspired by Valheim, RimWorld, Terraria, The Majesty, and The Kingdom. The game uses pixel art, a 2D global-illumination renderer, and a procedurally generated world streamed in chunks.
Since much of the world is made up of meadows and forests, grass is almost always on screen. The grass system needed to be procedural and cheap enough to cover large areas, while still matching the art style and reacting dynamically to lighting, wind, and creatures moving through it.
What you see above isn't geometry. Two compute passes regenerate the grass blades every frame and rasterize them directly into a screen-sized atomic buffer.
"The system we ended up with treats grass as an image rather than geometry. To keep things simple, there are no blade entities, no meshes, and no persistent state: every frame, two compute shaders regenerate every visible blade from a hash and write it, pixel by pixel, into a buffer that the compositor then sorts into the scene. This is not the fastest possible approach, but it is a reasonable one for our performance target at this stage of development: at 4K on an RTX 3080 Ti, with tuned parameters, the full pass stays way under 1 ms.
Every frame, the grass is rebuilt from scratch. A compute shader walks the visible screen tiles, asks a small density texture how much grass grows there, and generates each blade from a hash of its tile coordinates and index. The hash provides everything a blade is: its position inside the tile, its height, its color variation, its sway phase. Because the hash inputs are world coordinates, the same blade appears in the same place every frame, no matter where the camera is."
Inside the breakdown, you'll find a link to the interactive demo where you can explore the system and inspect the wind field, depth buffer, density mask, and more. The developer also cites Ghost of Tsushima's GPU-driven grass and God of War's wind system, among other inspirations, and provides additional resources for further reading.
Read the full Simple 2D Grass Rendering with WebGPU article here.
Aside from open-world exploration, Jarl features base building, resource management, crafting, boss fights, interactions with NPCs, combat, trading, and more. Most of the game is developed using Aseprite, FMOD, and Visual Studio Code or Zed. A Steam page is on the roadmap, until then, you can follow development and hear about upcoming playtests via the official website.
Subscribe to our Newsletter, join our 80 Level Talent platform, Discord, and follow us on Twitter, LinkedIn, Telegram, and Instagram, where we share breakdowns, the latest news, awesome artworks, and more.
Are you a fan of what we do here at 80 Level? Then make sure to set us as a Preferred Source on Google to see more of our content in your feed.
Keep reading
You may find these articles interesting
