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

https://stackoverflow.com/questions/57776001/how-to-detect-ipad-pro-as-ipad-using-javascript
Which will also refer to https://stackoverflow.com/questions/56578799/tell-ipados-from-macos-on-the-web

That’s unfortunate. My recommendation is to check the nav agent, which should indicate if it is an iPad.

That’s where Apple started lying about their device. I’ve come to the conclusion that we shouldn’t try to hack around Apple’s lies ourselves, and if something isn’t working properly because of that, place the blame fully on Apple. Tell users to use a different browser that doesn’t lie, like Chrome, or tell them to change their device settings for Safari if they want the correct behavior.

Maybe use the screen dimensions then. If it’s exactly an iPad’s dimensions, it’s an iPad.

There are platform detector scripts you can use, which is what I would do.

1 Like

Hi,
I want to compile my project for both asm.js and wasm targets. Please, anybody has the C sharp code and which files or scripts I have to edit to make it work? I am using 2019.2.6f1 version.
And finally, do I have to set up something on the webserver side where my WebGL app is hosted?
Thanks

Has anyone managed to get the Video Player working in WebGL on Mobile? Using Chrome for Android. Works on Chrome desktop (Windows) but not Android.

Never had a problem with it.
Just make sure that the file format and the codec of the video are supported on the device browser.

Could you upload a working example to github please? Can’t get it to work on MOBILE no matter what.

Create a project with a Video Player component
https://docs.unity3d.com/Manual/class-VideoPlayer.html
And instead of selecting a video in your project, set the source as URL, and add there a URL (not a local file) to a video with supported format, like MP4 (you’ll want H.264 format just to be sure https://caniuse.com/#search=mp4 )
An example for such video
https://threejs.org/examples/textures/sintel.mp4

1 Like

How do I communicate with the browser on iOS? Regular calls to jslibs outside of coroutines do work, right?

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?

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.

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.

2 Likes