Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice

Question What is the best practice for minimizing the memory occupied by Runtime in a WebGL build?

Discussion in 'Web' started by K_Kuriyama, Nov 11, 2022.

  1. K_Kuriyama

    K_Kuriyama

    Joined:
    Jul 4, 2020
    Posts:
    66
    We are trying to make WebGL mobile-ready, but the size of the runtime is a serious problem because Safari on iOS can only hold roughly 500MB of heap.
    JS platforms such as Babylon.js can create a scene in less than 50MB, while Unity consumes more than 150MB, which is a huge disadvantage.
    What are your best practices for this problem?
     
  2. CodeSmile

    CodeSmile

    Joined:
    Apr 10, 2014
    Posts:
    5,797
    Determine what consumes most of the memory, then optimize that. Most likely it will be textures, but could be anything really. The best practices are readily available once you know what to optimize.

    500 Mb is generally too high for a stable WebGL build, not just for Safari or iOS. You should aim to stay within the default 256 mb or at most 384 mb. Do test as much as possible on as many devices as possible, including devices that are in every-day use not just some dev devices that most often have few apps on it and only default background services running, probably not even music.
     
  3. K_Kuriyama

    K_Kuriyama

    Joined:
    Jul 4, 2020
    Posts:
    66
    @CodeSmile
    Thank you for your response.
    > 500 Mb is generally too high for a stable WebGL build,
    If you are using a PC browser, you should be able to allocate up to about 4 GB of heap space, and on those platforms, 500 Mb should be no problem at all.
    There are many PC WebGL applications out there that consume more than 2GB and they work fine.
    > You should aim to stay within the default 256 mb or at most 384 mb.
    Why 256MB or 386MB? Is there evidence of this somewhere? If you have evidence, can you please tell us where to find the documents listed?
     
  4. CodeSmile

    CodeSmile

    Joined:
    Apr 10, 2014
    Posts:
    5,797
    It's not as simple as that. The browser may limit the memory size of a tab, and Unity apps require contiguous memory so if the allocated heap tries to grow, it may fail if there's no free contiguous memory block of that size available, even if the size of available memory is much higher than that.

    How do you determine how much memory they use? The memory size you see in Task Manager under the process for a specific browser tab is the entire memory in used by the browser, and certainly a large portion of that memory may be from the Unity app, but the web page itself may add a lot to that memory too (ie javascript, images, cache, etc).

    Just my own experience and user reports (specifically mobile). 256 MB is pretty stable all around. You can go for 300-400 which will work mostly fine but over 400 may start to give you crashes here and there.

    Even though you can target desktop-only with WebGL you at least have to add a notice or redirect for non-desktop browsers so that mobile, console, etc. users will not attempt to load the content.

    Did a quick check with Unity's Forma demo: https://forma.dl.it.unity3d.com/

    According to Task Manager there are drastic differences in memory consumption:
    Chrome: 383 MB
    Firefox: 481 MB (total: 1280 MB)
    Opera GX: 135 MB (total: 792 MB)
    Edge: 46 MB (total: 510 MB)

    I determined the browser page by just checking which tab was marked with "High" power usage and had high CPU % utilization. Of course, process doesn't mean tab, so you can only check the memory consumption of the browser when there's just one tab open, and subtract the difference when the browser has only one empty tab open, to give you a more reliable figure. The "total" is what the browser consumed with just one tab open.
     
    Last edited: Nov 12, 2022
  5. K_Kuriyama

    K_Kuriyama

    Joined:
    Jul 4, 2020
    Posts:
    66
    @CodeSmile

    > How do you determine how much memory they use?
    We determined this through the browser's task manager. The heap memory check in the Developer Tools does not seem to show the memory required for drawing.

    > 256 MB is pretty stable all around. you can go for 300-400 which will work mostly fine but over 400 may start to give you crashes here and there.
    Where did you check these memory values, if in iOS, where did you check the amount of memory, was it measured by WebInspect?
     
  6. CodeSmile

    CodeSmile

    Joined:
    Apr 10, 2014
    Posts:
    5,797
    It was the initial memory size setting. Can't remember whether we profiled it on a device.
     
  7. K_Kuriyama

    K_Kuriyama

    Joined:
    Jul 4, 2020
    Posts:
    66
    @CodeSmile
    The initial size setting is different from the actual memory.
    If the initial size setting is exceeded, the heap size will increase according to the GrowthStep setting, and Runtime will force the application to stop when the MaximumMemorySize is reached.

    However, there is a possibility that the web browser will crash before reaching MaximumMemorySize, so the application will be terminated at the lower of the two.

    Also, memory consumption varies by device, so I think it is essential to check here. For iOS, where the browser can hold the least amount of memory, you should be most careful.
    For example, the compression format of Texture has a large impact.