{"author_link":"\/users\/coleslaughter","author_name":"ColeSlaughter","author_uid":"coleslaughter","comments":[],"epoch":1728861565,"event":"LD56","format":"md","ldjam_node_id":405991,"likes":38,"metadata":{"p_key":"209130","p_author":"ColeSlaughter","p_authorkey":"1013882","p_urlkey":"447503","p_title":"Sammich Ants, Performance, and WebGL","p_cat":"LDJam ","p_event":"LD56","p_time":"1728861565","p_likes":"38","p_comments":"0","p_status":"WAYBACK","us_key":"1013882","us_name":"ColeSlaughter","us_username":"coleslaughter","event_start":"1728000000","event_key":"115","event_name":"Ludum Dare 56"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD56","removed_author":false},"_superparent":395186,"_trust":10,"author":13882,"body":"The core mechanic of [Sammich](https:\/\/ldjam.com\/events\/ludum-dare\/56\/sammich) centers around covering a delicious-looking sandwich with *thousands* of ants.  This proved to be a bit of a problem for us, because a general philosophy for us as an LD team is to make sure that our games work in WebGL as best as we can in order to make it as convenient as possible for people to play.\n\n![sammichtitlescreen.png](\/\/\/raw\/a36\/3\/z\/68ca4.png)\n\nBecause of this, a lot of curious players have asked us, \u201chow the heck were you able to spawn so many ants in WebGL?\u201d\nWe hope this technical breakdown will serve as both a response to that frequently asked question, as well as a general guide for how to optimize your game for WebGL builds (at least in Unity).\n\n# 1.  GPU Instanced Materials\nThis one\u2019s pretty straightforward (although I didn\u2019t personally learn about it until this jam).  Materials in a Unity URP project have some advanced options that you can set to optimize performance.  Enabling \u201cGPU Instancing\u201d for materials that will be drawn frequently and repetitively will allow Unity to batch draw calls for the same material, which will *significantly* cut down on the total number of draws that the game will have to do per-frame as it\u2019s running.\n\n![gpuInstancing.png](\/\/\/raw\/a36\/3\/z\/68ca5.png)\n\nThe cool thing about this is that it\u2019s super easy to do!  Simply find the toggle to \u201cEnable GPU Instancing\u201d in the material settings, and you\u2019re good to go!\n\n# 2.  Simplify the Ants\nProbably our biggest struggle with making our game performant despite having *thousands* of objects on screen at once was to vastly simplify the complexity of each individual object.\n\nWe started by minimizing the geometry of the ant itself, starting with the polygon count of the base body as well as chopping off their adorable little legs.\n\n![beforeAntText.gif](\/\/\/raw\/a36\/3\/z\/68ca6.gif)\n![afterAntText.gif](\/\/\/raw\/a36\/3\/z\/68ca7.gif)\n\nFortunately, the ants are so small and numerous that this loss of fidelity (and mobility) doesn\u2019t have too big of an impact on the player experience.  This is great, because it just so happens to have a HUGE impact on our performance.\n\nWe also experimented with a cute lil wiggly animation for the ants to give them a bit more \u201clife.\u201d  \n\n![animation.gif](\/\/\/raw\/a36\/3\/z\/68ca8.gif)\n\nUnfortunately, this \u201clife\u201d came at a dire cost once the number of ants reached 1000+ (a likely scenario for most players).  So, despite how much we all LOVED the little wiggly animation, we all begrudgingly made the executive decision to prioritize performance over cute-ness.\n\nMy condolences go out to @ruddgasm, our 3D artist, who had to butcher his babies just so we could make the game as performant as possible in a web browser.\n\n# 3.  Physics, Collisions, and Rigidbodies\n\u201cBut wait!\u201d I hear you ask, \u201cSammich is a physics-based game!  How the hell were you able to process the physics calculations of so many rigidbodies at once?!\u201d\n\n![neatThing.png](\/\/\/raw\/a36\/3\/z\/68ca9.png)\n\nFun Fact: The *only* rigidbody that exists in the game is the one directly tied to the sammich itself.  Rigidbodies in Unity have a nifty little setting that allows you to automatically calculate the object\u2019s center of gravity.  It does this by taking into account the size and position of all of the colliders that are attached to that object and its children.\n\nBecause of this, we don\u2019t actually need each ant to have its own rigidbody and physics simulation (thank god).  Instead, we simply attach each spawned ant as a child to the sammich, and the automatic calculations of the main rigidbody takes care of the rest!\n\n![rigidBodyHierarchy.png](\/\/\/raw\/a36\/3\/z\/68caa.png)\n\nFor a bit of extra performance, we also disabled collision events for bug\/bug colliders as well as bug\/sammich colliders.  That\u2019s right, the thousands of ants that players are painting onto the sammich aren\u2019t even colliding with the sammich itself!  \n\nIn fact, the only reason the ants have colliders in the first place is so they can contribute to the sammich\u2019s center of mass and detect when a dropping piece of food lands on them.\n\n# 4.  Turn off the lights!\nYou\u2019d be surprised how much you can get away with visually without having any sort of lighting in your game.  \n\nIn fact, [Sammich](https:\/\/ldjam.com\/events\/ludum-dare\/56\/sammich) does not use a single light source in any of its scenes!  We have the wizardry of our 3D artist to thank for that.  \n\nRather than relying on extremely costly lighting and shadow calculations, consider instead baking such visuals into the material itself.  You don\u2019t need a light source to make your objects look bright and colorful!  \n\nOut of all of our WebGL optimizations, this tip has by far served us the best when it comes to making games performant in WebGL (In fact, none of our games since LD45 have used lighting in any way!).\n\n# Conclusion\nMaking a game run smoothly in WebGL (especially a game that requires thousands of objects to be rendered at once) is a constant balancing act between processing performance and visual fidelity.  You will inevitably have to make some sacrifices when it comes to your game\u2019s assets, and even then you will eventually hit diminishing returns (even our game starts to struggle and sometimes break after ~2000 ants on WebGL, depending on the machine).\n\nHowever, if you design your art style and asset pipeline in a way that keeps these constraints in mind as you\u2019re developing, you can often avoid creating assets or scenes that are unnecessarily complex and performance-heavy from the outset.\n\nAs a result, your game will be able to run surprisingly well in WebGL, and even better in a stand-alone build!\n\n![jerry.jpg](\/\/\/raw\/a36\/3\/z\/68cab.jpg)\n\nHopefully this ramble has been enlightening!  If you would like to stress-test the performance of our game yourself, [you can find it here!](https:\/\/ldjam.com\/events\/ludum-dare\/56\/sammich)  \n\nWe actually had time to fit in a physics-free \u201cSculpting Mode\u201d that lets players paint with ants to their heart\u2019s content, so go wild with it!  We\u2019d love to see your creations!\n\n\u2018Til next time! :point_right: :cowboy: :point_right:\n","comments":5,"comments-timestamp":"2024-10-14T07:02:10Z","created":"2024-10-13T23:12:12Z","files":[],"files-timestamp":0,"id":405991,"love":38,"love-timestamp":"2024-10-15T00:47:12Z","meta":[],"modified":"2024-10-15T00:47:12Z","name":"Sammich Ants, Performance, and WebGL","node-timestamp":"2024-10-13T23:19:25Z","parent":396348,"parents":[1,5,9,395186,396348],"path":"\/events\/ludum-dare\/56\/sammich\/sammich-ants-performance-and-webgl","published":"2024-10-13T23:19:25Z","scope":"public","slug":"sammich-ants-performance-and-webgl","subsubtype":"","subtype":"","type":"post","version":1276379},"node_metadata":{"n_key":"405991","n_urlkey":"447503","n_parent":"396348","n_path":"\/events\/ludum-dare\/56\/sammich\/sammich-ants-performance-and-webgl","n_slug":"sammich-ants-performance-and-web","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"13882","n_created":"1728861132","n_modified":"1728953232","n_version":"1276379","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/56\/sammich\/sammich-ants-performance-and-webgl","text":"The core mechanic of [Sammich](https:\/\/ldjam.com\/events\/ludum-dare\/56\/sammich) centers around covering a delicious-looking sandwich with *thousands* of ants.  This proved to be a bit of a problem for us, because a general philosophy for us as an LD team is to make sure that our games work in WebGL as best as we can in order to make it as convenient as possible for people to play.\n\n![sammichtitlescreen.png](\/\/\/raw\/a36\/3\/z\/68ca4.png)\n\nBecause of this, a lot of curious players have asked us, \u201chow the heck were you able to spawn so many ants in WebGL?\u201d\nWe hope this technical breakdown will serve as both a response to that frequently asked question, as well as a general guide for how to optimize your game for WebGL builds (at least in Unity).\n\n# 1.  GPU Instanced Materials\nThis one\u2019s pretty straightforward (although I didn\u2019t personally learn about it until this jam).  Materials in a Unity URP project have some advanced options that you can set to optimize performance.  Enabling \u201cGPU Instancing\u201d for materials that will be drawn frequently and repetitively will allow Unity to batch draw calls for the same material, which will *significantly* cut down on the total number of draws that the game will have to do per-frame as it\u2019s running.\n\n![gpuInstancing.png](\/\/\/raw\/a36\/3\/z\/68ca5.png)\n\nThe cool thing about this is that it\u2019s super easy to do!  Simply find the toggle to \u201cEnable GPU Instancing\u201d in the material settings, and you\u2019re good to go!\n\n# 2.  Simplify the Ants\nProbably our biggest struggle with making our game performant despite having *thousands* of objects on screen at once was to vastly simplify the complexity of each individual object.\n\nWe started by minimizing the geometry of the ant itself, starting with the polygon count of the base body as well as chopping off their adorable little legs.\n\n![beforeAntText.gif](\/\/\/raw\/a36\/3\/z\/68ca6.gif)\n![afterAntText.gif](\/\/\/raw\/a36\/3\/z\/68ca7.gif)\n\nFortunately, the ants are so small and numerous that this loss of fidelity (and mobility) doesn\u2019t have too big of an impact on the player experience.  This is great, because it just so happens to have a HUGE impact on our performance.\n\nWe also experimented with a cute lil wiggly animation for the ants to give them a bit more \u201clife.\u201d  \n\n![animation.gif](\/\/\/raw\/a36\/3\/z\/68ca8.gif)\n\nUnfortunately, this \u201clife\u201d came at a dire cost once the number of ants reached 1000+ (a likely scenario for most players).  So, despite how much we all LOVED the little wiggly animation, we all begrudgingly made the executive decision to prioritize performance over cute-ness.\n\nMy condolences go out to @ruddgasm, our 3D artist, who had to butcher his babies just so we could make the game as performant as possible in a web browser.\n\n# 3.  Physics, Collisions, and Rigidbodies\n\u201cBut wait!\u201d I hear you ask, \u201cSammich is a physics-based game!  How the hell were you able to process the physics calculations of so many rigidbodies at once?!\u201d\n\n![neatThing.png](\/\/\/raw\/a36\/3\/z\/68ca9.png)\n\nFun Fact: The *only* rigidbody that exists in the game is the one directly tied to the sammich itself.  Rigidbodies in Unity have a nifty little setting that allows you to automatically calculate the object\u2019s center of gravity.  It does this by taking into account the size and position of all of the colliders that are attached to that object and its children.\n\nBecause of this, we don\u2019t actually need each ant to have its own rigidbody and physics simulation (thank god).  Instead, we simply attach each spawned ant as a child to the sammich, and the automatic calculations of the main rigidbody takes care of the rest!\n\n![rigidBodyHierarchy.png](\/\/\/raw\/a36\/3\/z\/68caa.png)\n\nFor a bit of extra performance, we also disabled collision events for bug\/bug colliders as well as bug\/sammich colliders.  That\u2019s right, the thousands of ants that players are painting onto the sammich aren\u2019t even colliding with the sammich itself!  \n\nIn fact, the only reason the ants have colliders in the first place is so they can contribute to the sammich\u2019s center of mass and detect when a dropping piece of food lands on them.\n\n# 4.  Turn off the lights!\nYou\u2019d be surprised how much you can get away with visually without having any sort of lighting in your game.  \n\nIn fact, [Sammich](https:\/\/ldjam.com\/events\/ludum-dare\/56\/sammich) does not use a single light source in any of its scenes!  We have the wizardry of our 3D artist to thank for that.  \n\nRather than relying on extremely costly lighting and shadow calculations, consider instead baking such visuals into the material itself.  You don\u2019t need a light source to make your objects look bright and colorful!  \n\nOut of all of our WebGL optimizations, this tip has by far served us the best when it comes to making games performant in WebGL (In fact, none of our games since LD45 have used lighting in any way!).\n\n# Conclusion\nMaking a game run smoothly in WebGL (especially a game that requires thousands of objects to be rendered at once) is a constant balancing act between processing performance and visual fidelity.  You will inevitably have to make some sacrifices when it comes to your game\u2019s assets, and even then you will eventually hit diminishing returns (even our game starts to struggle and sometimes break after ~2000 ants on WebGL, depending on the machine).\n\nHowever, if you design your art style and asset pipeline in a way that keeps these constraints in mind as you\u2019re developing, you can often avoid creating assets or scenes that are unnecessarily complex and performance-heavy from the outset.\n\nAs a result, your game will be able to run surprisingly well in WebGL, and even better in a stand-alone build!\n\n![jerry.jpg](\/\/\/raw\/a36\/3\/z\/68cab.jpg)\n\nHopefully this ramble has been enlightening!  If you would like to stress-test the performance of our game yourself, [you can find it here!](https:\/\/ldjam.com\/events\/ludum-dare\/56\/sammich)  \n\nWe actually had time to fit in a physics-free \u201cSculpting Mode\u201d that lets players paint with ants to their heart\u2019s content, so go wild with it!  We\u2019d love to see your creations!\n\n\u2018Til next time! :point_right: :cowboy: :point_right:\n","title":"Sammich Ants, Performance, and WebGL","wayback_source":[]}