Detect and Avoid Common Performance and Memory Issues in Unity WebGL Builds

♪♪ Hello, everyone. My name is Oz, and I'm a game dev evangelist at Backtrace Source Labs. Today, we're going to see some of the ways we can avoid common performance and memory issues arising in Unity WebGL builds. The first point we'll be taking a look into is managing performance. And a major constraint running a WebGL build in a browser with good performance is memory. So, in terms of memory, what are the problems and what are the considerations that we got to take a look at?

So, as you know, the complexity of the content you can run is constrained by memory. The memory is allocated by the browser, and the amount of memory it has available varies on a number of factors, including the device you use, the operating system you use, which browser you use, and whether it runs on a 32-bit or a 62-bit browser, and a couple of other factors. So, to understand how memory impacts performance, it is very important to first see how memory is allocated in a Unity WebGL build. For this, we need to take a look into Unity heap. So what is Unity heap or a memory heap, as Unity calls it? So, basically this is where all runtime objects are stored, and these could include native objects, assets that are loaded, scenes, shaders, animation files, as well as other managed objects. So it is worth noting that this heap is one contiguous block of allocated memory. Until a few years ago, you had to allocate the max size of the heap in the build settings, but now, Unity supports heap expansion on demand, depending on the needs of the game, and it's expandable to up to two games. However, the same feature can actually often cause your game to crash, especially where the browser fails to allocate one contiguous block of memory, and this is exactly why it's very important to keep the heap size as small as possible.

Now, to understand how we can keep the memory heap size small, we have to first take a look into what Unity does to all of the assets and scene data in a browser, and what happens when you build a WebGL application in Unity. So when you build a WebGL application, what happens is Unity generates a .data file. And this is basically all the assets and scenes in the application that is required at the time of launch, and all of that is packed into a .data file, including Unity's scenes, textures, models, UI's price, audio assets, shaders, and pretty much everything else that you need for the game to run. And basically Unity WebGL does not have access to a real file system, therefore it has to create a virtual memory file system, and the browser then unpacks the .data file into this particular virtual file system. And the browser, while the game is running, keeps the data uncompressed. Now imagine if you have a complex scene with all sorts of assets, right? Including 3D models, shaders, everything. So you can see how possibly it can run into memory issues and slow down the game performance as well. So the question then, that arises is, what can you do to reduce memory? Well, there are a few techniques that you can adopt to reduce memory use. And one way, the most common is to use asset bundle. So you could put all of the most frequently, but bigger assets into an asset bundle and load it, unload it on demand whenever you want. And it's also worth noting that the asset bundles are directly downloaded into Unity's heap and therefore they avoid extra allocation done by a browser. If there are big bundles, one technique is to possibly cache the data and this is basically one additional thing that helps you to avoid redownloading each time you actually play the game. So the third one is something called an addressable system, which is an alternative to asset bundles. And sometimes it's started as a better version of asset bundles. However, it does have some of its own share of problems, including supporting WebGL builds out of the box. But there are some workarounds that exist to make it work. The next important consideration with regards to WebGL builds is the garbage collection or GC in short.

So typically what GC does is it locates and collects unused memory and then reallocates it into the Unity heap. On other platforms, when you GC runs, all running threads are paused to give time for the GC to check the stack. This is not possible on WebGL due to limitations in JavaScript. So what Unity does here is it simply runs once after each frame because the condition for the GC to run on WebGL is that the stack has to be empty and this happens only after each frame is rendered.

Now we'll look into some of the examples of code that increase GC and reduce performance and how we can actually write a better code. So in the first example that I have here, you can see how manipulating a string is a major cause of performance issue and sometimes can also cause an application to run out of memory. And the primary reason this happens is because any manipulation of string causes Unity to create a new string each time and this can quickly add up. For instance, if the code were to be part of the update loop. This example you can see here is where you have countdown timer showing on a UI and the countdown timer text is being updated continuously in the update loop by appending the countdown prefix with the countdown value. And each time you do that, it's creating a new string which can quickly really add up and it's not good for the memory. On the right, you can see how this code is being rewritten into a better code where we separate the label and the value and therefore avoid the string manipulation altogether. Here's another example of string manipulation. If it's using enlarged for a loop. You know, in a non-WebGL build, this might run as fine as it could be because the garbage collector will be involved but not so much in a WebGL build because in WebGL build it doesn't get a chance to get involved until the end of the frame and therefore this will likely run out of memory and crash. Here I do have some other examples where you can optimize Unity code to reduce memory allocation and reduce the need for frequent garbage collection. So when using strings, for instance, if you need to manipulate and pen string, use StringBuilder instead of Plus. If you're using Unity functions where the function would return an array and you have to do some array manipulations or iterate to an array, so you should cache it before you use it in a for loop. For comparisons like comparing a name or tag, not many of us know that these accessors actually return a new string each time, so it's better to use, for instance, to compare to a tag, use CompareTag function. And last but not the least, in case of coroutines, one common thing we tend to do as programmers is to use a line that returns new WaitForSeconds or WaitUntil or WaitWhile. So instead, cache it and use that, especially if you're using it in a for loop.

While we spoke about the ways memory can be managed in some situations and how we can reduce memory use, there are some unexpected situations that can cause applications to run out of memory or cause applications to even crash, so this is where tools that can help debugging these issues come into play. So one of those tools is Backtrace, which I use in applications and games I make for any platform. And of course, WebGL is no exception. So when I integrate that, I can see errors in real time and dashboard and help me troubleshoot performance and out of memory issues. Things like what we see today, these can be actually used and then that information can be collected to fix further problems before they get out of hand.

That's pretty much the end of the session. If you have any questions about WebGL or Unity, please feel free to get in touch with me. My contact details on this slide. Thanks for tuning in.