The core mechanic of 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.

Because of this, a lot of curious players have asked us, “how the heck were you able to spawn so many ants in WebGL?” We 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).

1. GPU Instanced Materials

This one’s pretty straightforward (although I didn’t 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 “GPU Instancing” 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’s running.

The cool thing about this is that it’s super easy to do! Simply find the toggle to “Enable GPU Instancing” in the material settings, and you’re good to go!

2. Simplify the Ants

Probably 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.

We 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.

Fortunately, the ants are so small and numerous that this loss of fidelity (and mobility) doesn’t 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.

We also experimented with a cute lil wiggly animation for the ants to give them a bit more “life.”

Unfortunately, this “life” 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.

My 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.

3. Physics, Collisions, and Rigidbodies

“But wait!” I hear you ask, “Sammich is a physics-based game! How the hell were you able to process the physics calculations of so many rigidbodies at once?!”

Fun 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’s 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.

Because of this, we don’t 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!

For a bit of extra performance, we also disabled collision events for bug/bug colliders as well as bug/sammich colliders. That’s right, the thousands of ants that players are painting onto the sammich aren’t even colliding with the sammich itself!

In fact, the only reason the ants have colliders in the first place is so they can contribute to the sammich’s center of mass and detect when a dropping piece of food lands on them.

4. Turn off the lights!

You’d be surprised how much you can get away with visually without having any sort of lighting in your game.

In fact, 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.

Rather than relying on extremely costly lighting and shadow calculations, consider instead baking such visuals into the material itself. You don’t need a light source to make your objects look bright and colorful!

Out 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!).

Conclusion

Making 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’s 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).

However, if you design your art style and asset pipeline in a way that keeps these constraints in mind as you’re developing, you can often avoid creating assets or scenes that are unnecessarily complex and performance-heavy from the outset.

As a result, your game will be able to run surprisingly well in WebGL, and even better in a stand-alone build!

Hopefully this ramble has been enlightening! If you would like to stress-test the performance of our game yourself, you can find it here!

We actually had time to fit in a physics-free “Sculpting Mode” that lets players paint with ants to their heart’s content, so go wild with it! We’d love to see your creations!

‘Til next time! :pointright: :cowboy: :pointright: