--- title: See How This Procedural 2D Grass Works Under The Hood description: A breakdown explains how the game Jarl, a Viking colony simulator, renders its 2D grass procedurally using GPU compute shaders instead of geometry. Two compute... canonical: https://daily.dev/posts/see-how-this-procedural-2d-grass-works-under-the-hood-ajhej92rk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: See How This Procedural 2D Grass Works Under The Hood | daily.dev og:description: A breakdown explains how the game Jarl, a Viking colony simulator, renders its 2D grass procedurally using GPU compute shaders instead of geometry. Two compute... og:url: https://daily.dev/posts/see-how-this-procedural-2d-grass-works-under-the-hood-ajhej92rk og:image: https://api.daily.dev/og/posts/AjHeJ92rK.png og:image:alt: See How This Procedural 2D Grass Works Under The Hood og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # See How This Procedural 2D Grass Works Under The Hood **[80 LEVEL](https://daily.dev/sources/80lv)** · 3 min read · 0 upvotes · 0 comments ## Summary A breakdown explains how the game Jarl, a Viking colony simulator, renders its 2D grass procedurally using GPU compute shaders instead of geometry. Two compute passes regenerate every visible blade each frame from a hash of tile coordinates, writing pixel data directly into a screen-sized atomic buffer that a compositor sorts into the scene. There are no blade entities, meshes, or persistent state, and on an RTX 3080 Ti at 4K the full pass runs in well under 1 millisecond. The write-up includes an interactive WebGPU demo letting readers inspect the wind field, depth buffer, and density mask, and cites inspirations like Ghost of Tsushima's grass and God of War's wind system. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How does the 2D grass rendering system in the game Jarl work without using any geometry or meshes? Grass is treated as an image rather than geometry: two compute shaders regenerate every visible blade from scratch each frame, using a hash of tile coordinates and blade index to derive position, height, color variation, and sway phase. The result is rasterized pixel by pixel into a screen-sized atomic buffer that a compositor then sorts into the scene, with no persistent blade entities or state. _daily.dev surfaces graphics programming breakdowns like this for developers exploring GPU-driven rendering techniques._ ### What is the performance cost of GPU compute based procedural grass rendering at 4K resolution? On an RTX 3080 Ti at 4K resolution, with tuned parameters, the full compute pass for regenerating and rasterizing procedural grass stays well under 1 millisecond per frame. This makes the technique viable for large open-world scenes where grass covers most of the visible area, such as meadows and forests in a Viking colony simulator. _Developers benchmarking GPU compute techniques can find breakdowns like this useful on daily.dev._ ## Similar posts on daily.dev - [UE5 Developer Showcased Nanite Grass That Moves Naturally](https://daily.dev/posts/ue5-developer-showcased-nanite-grass-that-moves-naturally-oqduvis25) · 80 LEVEL · 0 upvotes · 0 comments - [False Earth: From WebGL Limits to a WebGPU-Driven World](https://daily.dev/posts/false-earth-from-webgl-limits-to-a-webgpu-driven-world-zzrupzujv) · Codrops · 9 upvotes · 2 comments --- Tags: [#game-development](https://daily.dev/tags/game-development), [#webgpu](https://daily.dev/tags/webgpu) [View this post on daily.dev](https://daily.dev/posts/see-how-this-procedural-2d-grass-works-under-the-hood-ajhej92rk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"See How This Procedural 2D Grass Works Under The Hood","url":"https://daily.dev/posts/see-how-this-procedural-2d-grass-works-under-the-hood-ajhej92rk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/see-how-this-procedural-2d-grass-works-under-the-hood-ajhej92rk"},"datePublished":"2026-08-12T14:50:12.095Z","dateModified":"2026-08-12T14:50:35.033Z","description":"A breakdown explains how the game Jarl, a Viking colony simulator, renders its 2D grass procedurally using GPU compute shaders instead of geometry. Two compute...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e0dd5782b02d7da0318c947886d33aa5?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e0dd5782b02d7da0318c947886d33aa5?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"80 LEVEL","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"80 LEVEL","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/78eebcd76c154e6bbfd565fed7dc4093","url":"https://daily.dev/sources/80lv"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/see-how-this-procedural-2d-grass-works-under-the-hood-ajhej92rk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"game-development,webgpu","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"80 LEVEL","item":"https://daily.dev/sources/80lv"},{"@type":"ListItem","position":3,"name":"See How This Procedural 2D Grass Works Under The Hood"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/see-how-this-procedural-2d-grass-works-under-the-hood-ajhej92rk#faq","mainEntity":[{"@type":"Question","name":"How does the 2D grass rendering system in the game Jarl work without using any geometry or meshes?","acceptedAnswer":{"@type":"Answer","text":"Grass is treated as an image rather than geometry: two compute shaders regenerate every visible blade from scratch each frame, using a hash of tile coordinates and blade index to derive position, height, color variation, and sway phase. The result is rasterized pixel by pixel into a screen-sized atomic buffer that a compositor then sorts into the scene, with no persistent blade entities or state. daily.dev surfaces graphics programming breakdowns like this for developers exploring GPU-driven rendering techniques."}},{"@type":"Question","name":"What is the performance cost of GPU compute based procedural grass rendering at 4K resolution?","acceptedAnswer":{"@type":"Answer","text":"On an RTX 3080 Ti at 4K resolution, with tuned parameters, the full compute pass for regenerating and rasterizing procedural grass stays well under 1 millisecond per frame. This makes the technique viable for large open-world scenes where grass covers most of the visible area, such as meadows and forests in a Viking colony simulator. Developers benchmarking GPU compute techniques can find breakdowns like this useful on daily.dev."}}]} ```