Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Showcase Tips and tricks for using WebGL on desktop and mobile (tested up to 2021.3.11f1)

Discussion in 'Web' started by doctorpangloss, Apr 22, 2019.

  1. Calvin2274

    Calvin2274

    Joined:
    Sep 11, 2014
    Posts:
    17
    Somehow my WebGL on iOS keep reloading randomly, any ideas how to fix that ?
     
  2. OceanX000

    OceanX000

    Joined:
    Feb 24, 2021
    Posts:
    121
    I think the biggest possibility is the memory problem. You can use the xcode instrument to monitor the memory usage.
     
  3. unity_RFh-E2_9HBTzeg

    unity_RFh-E2_9HBTzeg

    Joined:
    Sep 14, 2020
    Posts:
    1
    Hi, I would like to ask a question, can anybody knows how to disable some gesture on iPad, because, my games running pretty well on that device but if a player moves faster the finger from the center to the bottom, the game exit from the full screen, and another problem with the iPad is the giant button to exit from the full screen in the top-left corner, did anybody knows ho to fix these problems?
     
  4. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    The general web technique to prevent default browser gestures&actions from taking place is to register an event handler of the appropriate type in Javascript, and call "event.preventDefault();" on the received event.

    See e.g. this page: https://stackoverflow.com/questions/50156425/prevent-swiping-between-web-pages-in-ipad-safari

    That is something that you can drop in into a WebGL page template.
     
  5. Blarp

    Blarp

    Joined:
    May 13, 2014
    Posts:
    270
    Same problem here, only seems to work on builds less than 30mb.

    Tried every "fix" imagineable, my data build is around 129mb, firefox doesn't see any big memory useage at all. 2021 version of unity
     
  6. Blarp

    Blarp

    Joined:
    May 13, 2014
    Posts:
    270
    The most important thing I learned is:

    Click on Profiler, go into Memory, and take a memory snapshot and look at your Assets. Meshes and Textures will run up ram and crash you all the time. This was destroying me for awhile because I was deleting things until it worked, until the profiler really told me the bigger story.

    Never bypass this test in a WebGL build that is geared toward mobile. If you use over 500mb of ram, it will be guaranteed bad news.

    @Calvin2274
     
  7. OleksandrMartysh

    OleksandrMartysh

    Joined:
    Dec 13, 2015
    Posts:
    25

    You can force Unity to build both by editing this line in ProjectSettings.asset file in your Project/ProjectSettings folder:
    webGLLinkerTarget: 2
    0 = asm.js
    1 = Wasm
    2 = both
    I don't know if you should setup something on your webserver.

    P.S. I am not sure, that it is still possible for Unity 2021+, because asm.js is deprecated from this version of Unity.
     
  8. Tahir_Ghafoor

    Tahir_Ghafoor

    Joined:
    Apr 9, 2017
    Posts:
    2
    Hi, im trying to keep the mobile webgl game to landscape mode only so i use css to force rotate the window, the problem is that whenever i do this, all the UI buttons' hitboxes doesnt sync with the UI picture, anyone else had this issue? Any ideas how to fix this?
     
  9. doctorpangloss

    doctorpangloss

    Joined:
    Feb 20, 2013
    Posts:
    270
    Don't do that, make the canvas full screen and do landscape in your game.
     
  10. jkj_spillehallen

    jkj_spillehallen

    Joined:
    Aug 11, 2022
    Posts:
    3
    We managed to get our game down to 660mb. 2D game with ~ 4x4k in uncompressed rgba32 atlasses/textures, webgl 1, max code stripping.
    Empty projects we have measured to around 450mb.

    Measuring technique (the only somewhat reliable afaik): Always use same device if you want to compare because different devices can vary by 100s of MB in results (we use iPhone 12 because of the devices it is the one producing the most reliable numbers). Always test like this: 1. Make sure you only have one tab open then go to about.blank. 2. kill the browser (swipe it out) This is very important, if you don't do this it will not be a clean measurement. 3. Clear safari browser cache in IOS settings. 4. open (should start in about.blank) and launch.
    You want to measure memory with Safari dev tools running on a Mac with a real IOS device connected (anything else will not show the real memory use). The numbers reported in Chrome dev tools on a pc / mac or Android will NOT be anywhere near the actual memory use on the IOS device (which is typically 3-5 times more).
    Out lowest supported IOS device is iPhone 7 which on a good day (fresh install and only one tab open) has 800-1000mb memory available. Note. in real life scenarios with apps/services/tabs running this WILL be lower.

    Unfortunately browsers don't go out of memory gracefully, they just reload so it is important to keep a very vigilant eye on memory. Test frequently during development because some minor thing may cause memory consumption to go nuts, and it is not always obvious what it was, so the less commits you have to consider as the culprit and fix later the better you are off. If you can avoid it, don't use 3rd party plugins or smart Unity features, and those you absolutely do need to use; test their memory consumption the best you can.

    But wait there is more.. WASM memory is managed by Unity (unlike wegbl libraries such as Three.js where the browser handles memory) and WASM memory will only ever grow, never shrink. Unfortunately on IOS when memory expand it is (with extensive testing done) jumping in ~160-200mb increments (regardless of which growth settings you set in Unity). So the trick is to obviously not leak memory and be mindful of your memory allocation, how, when, what. It might be a good idea to simple load everything you need and do as little allocation as possible (pools etc), but that depends on your scenario. Also note that it is tricky when an asset is actually unloaded and how to do it, for example Destroy doesn't free up the memory, you have to do additional steps (find info in other posts).

    There is a WASM memory reporting overlay you can enable in the newest Unity beta versions, which is pretty useful to see WASM memory running the WebGL build in the browser. Although profiling inside Unity does not show the real memory numbers, it is still useful as a relative indicator to find out where your memory problems may be.

    Anyways sorry for the long reply, hope some of it was useful.
    ps. We have generally had no problems on Android, there is no memory bloat and frame wise also fine.
     
    OleksandrMartysh and pachermann like this.
  11. azinsf7

    azinsf7

    Joined:
    Nov 14, 2020
    Posts:
    3
    Does anyone have any suggestion for making a call in IOS
    I already tried OpenURL("tel://number");
    it only works on Android :(
     
  12. pachermann

    pachermann

    Joined:
    Dec 18, 2013
    Posts:
    135
    there is a open link addon in the assetstore that let's you open urls in webgl
     
  13. nnhhaadd

    nnhhaadd

    Joined:
    Sep 7, 2015
    Posts:
    11
    Can you tell me which post are you referring to? I'm dealing with this kind of problem and no matter what I do my game randomly crashes on iOS Safari.