WebGL builds for mobile

After the nice blog post about WebAssembly now being officially supported and smaller and better than ever, I thought I might give it a spin to see for myself how good it works. I was quite surprised to see that the brotli compression compressed better than gzip.
You can see the small test I did here: https://github.com/JohannesDeml/UnityWebGL-LoadingTest

My experience:

• Building times are still crazy long, that's not really fun, even for a small application like that one.
• Stripping out unity features you don't want is now pretty easy with 2018.2.
• With TMP and Physics included the application has about 3MB size, with Gzip I had around 4MB.
• Loading times for this simple application are quite good on PC.
• Experience on mobile is nowhere near you can get with other frameworks like three.js

Especially the last point makes building WebGL applications with Unity quite uninteresting for me. I'm wondering where the problems are and what the roadmap is for WebGL for supporting mobile. I got this message that it is not supported, the application still worked, but loading the scene (at least that's my guess since the progress bar halted at 90%) took more than 10 seconds.

TL;DR: Is unity focussing on WebGL for mobile and if so is there a roadmap?

 

I think Unity is hesitant to officially support mobile WebGL until the builds work on iOS. The problems with iOS are numerous.

- Only support for WebGL 1.0
- Incredibly small ram sizes on iPhones
- Even smaller memory available for browser applications
- Lots of memory issues with webassembly

Unity builds work great on old mid- to high-end Android phones, but are horrible on iOS.

What Unity could do is support native device texture compression on download like PlayCanvas. That would help keep the download size and ram usage much smaller.

 

I've heard WebAssembly is now supported on iOS devices. Will it improve the situation with Unity support on iPhones/iPads?

 

Hm, that makes sense. The test I did was on an iPhone SE, so maybe the experience is better on android (I won't remove the test from my website, so feel free to test on android as well).
@svaa1982: It does work, but it was a bad experience, not sure about future plans though.

 

What build and settings did you use to get this working? I can successfully launch your test using my iPhone X with good results, but I am unable to build my own project and get it to run (2018.2 or 2018.3 beta). I can get builds to run on Android without issue. I can't get Unity's own benchmark project to run either (which they claim can be run on mobile) https://files.unity3d.com/marcot/benchmarks2018.2.5f1/

I always get a memory crash:

 

Nothing special actually... I will upload the project to github, so you can have a look. iOS only supports WebGL 1.0 as far as I know.

As I learnt, the project I uploaded can be further optimized, if the server is configured correctly. I didn't define any file types to be transmitted with brotli compression, so the project could probably load quite a bit faster. I guess it is still not realy feasible for mobile though.

Hi Marco! I'm worndering, how are the plans for mobile webgl builds? And where is the priority right now? Is it optimizing build times, or better compression techniques or supporting more hardware/platforms?

 

A few months ago the issue with ios was that it removed the flag that said WebAssembly didn't work. But didn't make WebAssembly work. https://news.ycombinator.com/item?id=16292864

I have tried the patch that they made later but it had no effect.

Non-WebAssembly builds work.

 

Thanks for the honest answer, I thought that you will probably focus on desktop, since mobile supports not all your used standards.

 

@Johannski what are the build settings for your test project? It runs very well on my iPhone SE.

When I build anything myself (eg. a nearly empty project), the app always crashes at startup with "Error: Out of executable memory". Same with the unity benchmark, as @Tremmy mentioned. Have you encountered this issue before?

I'm on iOS 12, Unity 2018.2.8

 

Have you tried making a non-WebAssembly build?

 

Haven't tried that yet, will do.
Johannski's build seems to be a WebAssembly build, that why I was curious if there's a way to make it work with that.

 

@any_user @Tremmy Sorry for the delay, been busy.
I uploaded the project to github: https://github.com/JohannesDeml/UnityWebGL-LoadingTest
Hope that helps

 

I tried a very similar test but as soon as I add any scripting in to control the camera the engine code doubles in size and then fails to load on an iPad Pro using Safari, it never makes it past the loading screen. Unity 2018.2.14

 

Same here. Seems to be a common issue, maybe memory leaks?

 

Did a new test with Unity 2019.3.0f6. iOS still gets the annoying warning, but still works. Loading time on iOS is still pretty long and the file size increased a bit comparing to 2018.2, but there are less files and wasm streaming is supported.

https://deml.io/experiments/unity-webgl/2019.3.0f6/

I guess it is still not a focus for Unity, and iOS still only supports WebGL 1, but for desktop they have made improvements. I was quite surprised, that I didn't have any problems with building my last gamejam game (using Unity 2019.3 and URP) for WebGL: https://lu-bu.itch.io/mortar-mortar

So as of now: Using Unity for Desktop is agood choice, if you want to support mobile (especially iOS), it's goindg to be hard.

 

The default webGl template that Unity provides is just for testing purposes and can easily be exchanged. Better use e.g this one https://github.com/cs-util-com/cscore/tree/master/CsCore/UnityTests/Assets/WebGLTemplates/DefaultV2 which does not have this warning dialog included

 

Hi @CsUtil,

interesting take. So you're overwriting the js method in the html file. I did it the other way around by stripping out the unwanted js code as a post build step: https://github.com/JohannesDeml/Uni.../Editor/RemoveMobileSupportWarningWebBuild.cs

Could be a bit more elaborate to change the whole function, but this did the necessary trick. Any other improvements in there compared to the minimal html version?

 

Thanks for sharing @Johannski indeed I found your approach curious as I share the same one with @CsUtil (and documentation) where you just write a custom template that sets any conditions you wish in

compatibilityCheck

and reuse across projects (also suggested by @Marco-Trivellato in another thread). I understand you might prefer doing it in post build, I need to restyle default Unity template anyway...

Can also confirm that simple URP builds work fine on iOS devices (tested back to iphone 7) deploying from Unity 2019.3+. However, these are going to expand in the following months so will see then!

 

Saves a few bytes (since the actual code is removed) and works also for older unity version that did not support unchecking those features. So just a minor difference, but both ways are totally fine to do I would say. The Template thing does sound more like the official solution, so I recommend sticking with that.

 

New build with 2020.1.0f1: https://deml.io/experiments/unity-webgl/2020.1.0f1/

My thoughts for the new unity version

• Build size improved, we're down to 2.8 MB for this simple project.
  
• Build times improved, but compression time for brotli is very high. I would like to see a quality level slider for compression.
• Needed to change the htaccess file, I didn't manage to get gzip to work correctly, but brotli is more interesting anyways
• The brotli compressed build does not work with unity's build&run localhost on firefox. You will need to use Chrome to test your build locally.
• The new template options are quite nice, I built a simple responsive template without any branding
• Loading times on older androids are still very long
• If something breaks in the build on mobile, it is still very hard to debug

 

For me testing on iOS Safari it doesn't get past the loading bar

 

Huh, very interesting, thanks for testing. The loading bar will be stuck at 90% for ~4 seconds (at 90% all assets are loaded and the engine initializes).

Did you try to reload the page?
And which device did you use? Runs without problems on my old iPhone SE.
Edit: Do the other versions (2018, 2019) work on your phone?

 

I didn't, now I have and it loaded second time.
First time I left it for several minutes before I closed it.
Tested on a iPad Pro 10.5 2018 model MQDX2B/A
iOS 13.5.1

Runs lovely now it's loaded

If I clear browser data and cache, I basically get the same issue repeating, doesn't load the first time, does load in a new tab. Even though the original tab is still stuck....

2018 and 2019 versions work first time

Would you concider adding a simple camera script?
In my earlier experiments of Nov 2018 it was adding any sort of script that seemed to total break it.

 

I see, I think I had that problem as well, but dismissed it after reloading. I added that caveat to the readme, not quite sure what the problem is...

Sure, no problem. I added a simple constant rotation to the camera, updated in the same link: https://deml.io/experiments/unity-webgl/2020.1.0f1/

If you want to play around with the project and add your own camera orbit script or something like that, you can just fork it over here: https://github.com/JohannesDeml/UnityWebGL-LoadingTest

 

Interestingly that new demo is now loading first time for me...

 

When you are using webgl inside of iframe, safari wont be able to use indexdb, so does it mean, all the assets and other stuff is going directly to CPU?
Having problem, that cpu on iphone 8 goes like 110%+ after simply loading assetbundle with 3d model and ~8 textures (albedo,normals, etc).

 

Just a quick update with Unity 2020.2.0b11:
Builtin Renderpipeline: https://deml.io/experiments/unity-webgl/2020.2.0b11/
URP: https://deml.io/experiments/unity-webgl/2020.2.0b11-urp/
The filesize of URP is 2.5 MB larger, I guess stripping does not work that well here (maybe the whole post processing stack is included, even though it is not used?).
Other than that, the file size got a little bit smaller compared to 2020.1, and removing the skybox saves another 30 KB. Transition to the new version was very smooth, no problems here

 

the 2019.3 version doesnt seem to work with 2019.4 on WebXRViewer ios, do you have anything that works on 2019.4?

 

@b9n: Didn't work with WebXRViewer so far, but maybe this repo is interesting for you: https://github.com/Rufus31415/Simple-WebXR-Unity


I added an in dom console for easy mobile debugging. It binds itself to the normal console.log functionality while not breaking it, so it can be used in parallel. Might be useful for some You can try it yourself here


Another functionality I added is an output for the startup time. I will start tracking this in the next unity versions, since the time it takes to load is quite interesting (especially for mobile).
I also tested 2020.3 and 2021.1, not much changes to note compared to earlier unity versions.

 

Thanks for the debug console javascript, that's pretty useful!

 

on my side is not working, i just test project in unity 2020.3.3

 

Okay, so from what you sent me the problem is a miss-configuration of your server. Either your server does not support brotli compression, or you didn't use the provided .htaccess file in the repo.

 

thanks for respond me here fast and also on email, is first time I try this, if can help me to tell me where to place htaccess will be great and also if not compress with brotli my project will be big, so is not fix to work with this?

 

Take a look at the docs here: https://docs.unity3d.com/Manual/webgl-server-configuration-code-samples.html
For apache servers, place the htaccess file in <Application Folder>/Build/.htaccess. For other server technology you will need a different setup (the docs should help there).
As for your other question: Yes, exactly. If you don't compress your build it will be a lot larger and therefore annoying for mobile users.

 

Hi Johannsky,
Your work is great. Thank you for your efforts.
I tried to publish your project using by "Unity WebGL Publisher" pakage:



Like above, I clicked "Build and Publish".
But I failed to publish and i got following error:



Is there any good way to publish using by "Unity WebGL publisher" function?
I want to listen your opinion.

 

Ah, that is an error Unity introduced in the new beta. Follow the instructions I posted here: https://forum.unity.com/threads/webgl-emscipten-permission-denied-errors.1130176/#post-7278394

Other than that, I didn't know of the publisher package, thanks for pointing it out.

Edit: Ah, apparently it got fixed in 2021.2.0b7, so upgrading to the latest beta should do the trick as well.

 

Thank you, Johannski
I followed your solution, and I succeed to "Build and Publish".
Then following link automatically created:
https://play.unity.com/mg/other/webglloadingtest

But i faced to new problem.
If open the link from the desktop, it is stopped in 90% of loading process:

And if I open the link from my iPhoneXR, the screen shows warning:


So I cannot run well from the "Build and Publish".
Do you have any good idea for this problem?

 

That is possible that the unity server doesn't handle the build compression from the Publishing Settings?
Did you try to disable the compression on build yet?

 

I added WebGL Publisher to the project. So the problem is, that the new beta uses some css selector, that seems to be incompatible with the template for webgl publisher. I tested version 2020.3 LTS, which worked out of the box:
https://play.unity.com/mg/other/2021-2-0b7

This version was built with the (new) master branch, which is now on version 2020.3 to avoid confusion.

 

I tested the webgl build with the new 2021.2.0b7 beta.

• The beta has no annoying permission issue when building, so that's good!
• WebGL 1.0 is now marked as deprecated, is there any official statement on that? As pointed out on the website, WebGL 2.0 is still not compatible with iOS. Not sure, if it is a good idea to deprecate 1.0 then already...
• There are shader compile errors when using the 7 beta with URP 12 - Case 1360175

Other than that, no noteworthy changes compared to first beta

 

I tried Compression Format to Disabled, but it made same result.
it stopped at 90%.

 

https://developer.apple.com/documentation/safari-release-notes/safari-15-beta-release-notes

 

Your work is amazing!
I tested your WebGL publisher link.

in my iPhoneXR, loading succeed. but warning message appeared and screen was stopped:

But I think perhaps latest iPhone device can run it well. I couldn't test it because I don't have it.

in my iPad, loading succeed, and it works perfectly without warning:


Thank you, Johannski.

 

How about to access the DevConsole (pressing F12 ?) from your webbrowser to see if any error report show up?

 

Oh, I haven't heard so far. Thanks for the link, that is great news!

The problem was that the publishing site uses its own html template (and therefore ignoring the one you use) and there seems to be an incompatibility with the new Untiy beta with this template.

I think this is due to unity's own template they are enforcing on the publisher site (You can try the version I hosted on my own website with your phone, I'm very certain it will work).
Happy that I was able to help you

 

Yes, I already tested it. Your own website works perfectly from my iPhoneXR and iPad.
And I think if i upload your latest version build to my own web site, it will work perfectly.
But I prefer to apply your build to Unity WebGL Publisher, because it is more handy. and I'm not good at tuning my own web site.
In WebGL Publisher, your build works perfectly in iPad. But in iPhoneXR it doesn't work. So I wonder why.
I will test it from latest iPhone device later. And If someone already tested it, i want to know the result.

 

hi i test project,it's very good, but i want know how to modify loading progressbar and loading background and logo?