WebGL builds for mobile

[Johannski]

@willtospawn

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.

[Johannski]

New build with 2020.1.0f1: WebLoadingTest

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

[monark]

@Johannski

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

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

[Johannski]

@monark

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?

[monark]

@Johannski

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.

[Johannski]

@monark

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

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…

@monark

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.

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

[monark]

@Johannski

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…

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

[Pawuchock]

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).

[jukka_j]

@Pawuchock

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).

Not being able to used IndexedDB means that the browser will not cache any large downloaded files. If your project only consists of relatively small files, generally < 25MB, the browser will cache them into regular browser cache instead of IndexedDB, so that will not be an issue.

I.e. overall the effect will be a bit longer startup time.

[Johannski]

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

[b9n]

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

[Johannski]

@b9n : Didn’t work with WebXRViewer so far, but maybe this repo is interesting for you: GitHub - Rufus31415/Simple-WebXR-Unity: ⭐ Bringing WebXR to Unity 3D ! B-)

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.

[DerrickBarra]

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

[mentolatux]

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

[Johannski]

@mentolatux

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.

[mentolatux]

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?

[Johannski]

@mentolatux

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 /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.

[oharinth]

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.

[Johannski]

@oharinth

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.

[oharinth]

@Johannski

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?