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

Somehow my WebGL on iOS keep reloading randomly, any ideas how to fix that ?

 

I think the biggest possibility is the memory problem. You can use the xcode instrument to monitor the memory usage.

 

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?

 

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

 

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

 

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.

 

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?

 

Don't do that, make the canvas full screen and do landscape in your game.

 

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.

 

Does anyone have any suggestion for making a call in IOS
I already tried OpenURL("tel://number");
it only works on Android

 

there is a open link addon in the assetstore that let's you open urls in webgl

 

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.