Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice

State of Unity webgl on mobile

Discussion in 'Web' started by andyz, Feb 5, 2019.

  1. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    2,261
  2. kognito1

    kognito1

    Joined:
    Apr 7, 2015
    Posts:
    331
    We recently made all our applications work with Android (and soon iOS 12.2!) and I'd say the general gotchas were:
    • Memory limits are obviously much tighter (lower end Android/2GB iOS devices can do about ~300MB or so on the heap before failing)
    • There's no compressed texture support for Android (etc2) or iOS (pvr) with Unity (out of the box) so your textures will be ~4x the size (makes the previous point way worse)
    • Every phone/tablet almost always has some "retina like" screen and since Unity (again out of the box, but you can work around this) doesn't understand dpi on webgl, you'll get naive scaling by default (sometimes as high as 3x!)
    • There's no "kosher way" to prevent a device from going to sleep on the web, so you'll have to use workarounds like nosleep.js
    • A lot of our javascript callbacks were on mouse events, corresponding touch events had to be added
    • Wasm performance on iOS is great (basically desktop quality), but I'd only rate Android as good (might be slower than what you are accustomed to)
    • Instant page reloads are a killer; browsers can't seem to gc the previous Unity content/div fast enough and mobile devices almost never have enough memory to handle this
    • using the OS provided virtual keyboards in a wasm/Unity context is actually really hard, so hard we just made our own virtual keyboard
    • This one is a bit specific, but we had to create this whole extra assetbundle variant build pipeline so that we could selectively load different texture assetbundles depending on platform (and still have it magically work)
    • There's a lot buggy Android devices (and mobile gpu drivers) out there...
    For the most part though, I'd say it kind of all just works if you keep art budgets/scope realistic. These are definitely exciting times! App stores' days may be numbered!
     
  3. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    2,261
    Yes the non-native resolution just makes it look poor - how did you fix that?

    Please work on mobile webgl Unity! - by default you see a poorly styled (tiny) warning message and then badly scaled content!!
     
  4. kognito1

    kognito1

    Joined:
    Apr 7, 2015
    Posts:
    331
    andyz likes this.
  5. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
    It seems that the wasm streaming option in 2019.1beta works well on both iOS and Android(Chrome).

    Projects that couldn't be cached now both loads faster and can be loaded from cache
     
  6. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    2,261
    The osx retina fix is not ideal for mobile on which you really just want to set the canvas to a suitable resolution and aspect ratio for the current device and orientation. I will have to try and modify the device-ratio solution to become a custom width/height one
     
  7. Katori

    Katori

    Joined:
    Nov 30, 2009
    Posts:
    60
    Try with the Better Unity WebGL Template and see what that looks like.
     
  8. kognito1

    kognito1

    Joined:
    Apr 7, 2015
    Posts:
    331
    Yeah our solution ended up being quite custom. A lot of coordination between the unity wasm module and the html/css surrounding it. That's what I kind of meant in the other thread about Unity having no easy options. Now that I fully understand all the edge cases and interaction points (with html/css/etc.), it's going to take Unity a lot of work to make some out of the box solution that "just works" for everyone's use case. It may not even be possible/feasible.
     
    senkoi, andyz and De-Panther like this.
  9. balsarxml

    balsarxml

    Joined:
    Jul 17, 2019
    Posts:
    1
    Unity WebGL: Honestly, It basically doesn't work well. On most of my tests on iPhone 8, games basically ran for about 10s and then completely crashed the browser. Some super-simple html games worked fine.

    If you want to test webgl games on mobile, I wrote an article here!
     
  10. CocosGames

    CocosGames

    Joined:
    Aug 31, 2014
    Posts:
    38
    Where?
     
    jsleek and JamAkel like this.
  11. vive_creative

    vive_creative

    Joined:
    Mar 22, 2019
    Posts:
    12
    Unity should hire someone from three.js and let him work on their WebGL export module. Right now it's just aweful!! Doesn't work on mobile and takes forever to load!!
     
    megame_dev and JamAkel like this.
  12. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    1,633
    I am amazed webgl from unity wont run on Android. Stunned.. I have been tellign clients it's possible, is this really 2021? Unbelievable.
     
    JamesArndt likes this.
  13. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,932
    It will run on Android, but it requires engineering effort to optimize your assets to do so. It won't run efficiently out of the box, but it can most definitely be done. Project Tiny may be one solution for you depending on your project requirements.
     
  14. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    529
    It does run. Change the pipeline to URP and it will run smooth.
     
  15. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    1,633
    Yes I noticed that it does work after the warning on some projects, other projects I get a javascript error. Will look into project tiny, thanks guys
     
  16. Johannski

    Johannski

    Joined:
    Jan 25, 2014
    Posts:
    824
    It does run on both android and iOS. Loading times aren't optimal and minimal file size is not that great, but it runs quite well. URP has better performance, but also a larger initial file size.
    To see a live demo along with the code, take a look at https://github.com/JohannesDeml/UnityWebGL-LoadingTest
     
    De-Panther likes this.
  17. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
    Great work!

    And you don't need to use post build process. You already use WebGLTemplate, just add this code to the html file
    https://gist.github.com/De-Panther/f08cb4902bd21ee403d579a12510be2c
     
    Johannski likes this.
  18. Johannski

    Johannski

    Joined:
    Jan 25, 2014
    Posts:
    824
  19. MadeFromPolygons

    MadeFromPolygons

    Joined:
    Oct 5, 2013
    Posts:
    3,974
    @JamesArndt we are limited by VRAM usage (which translates to RAM in WebGL as its all shared as you know) and wondering if swapping to URP is recommended for WebGL projects that are having memory issues? We do not crash, but safari shows the "using too much memory" warning and we really need to eliminate it but running out of things we can optimise. Currently using in built pipeline.

    Anybody else here that knows if URP is better for memory please let me know!
     
    JamesArndt likes this.
  20. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Summing up recent progress since @kognito1 's 2019 post above, and roadmap on this area:
    - memory usage and startup times should have gotten a little bit better starting from Unity 2020.1 with the new page loader templates. Be sure to have WebAssembly Streaming enabled, and have the web server also configured to enable it. We expect memory usage to get better again on Unity 2021.2, after a new compiler toolchain migration.
    - Unfortunately in general Chrome on Android is still a mess: there are still a small number of 32-bit new entry level Android devices being manufactured in 2021, and even on 64-bit devices, Chrome is still 32-bit process. This is the main reason why WebAssembly applications can rarely exceed 300MB on the Wasm heap size.
    - adding compressed texture support is now on the board, initially to add the different compressed texture formats, but that will require either doing multiple builds per each format type, or do multiple asset bundles one for each format type
    - high DPI support was completed (was it 2020.1, I forget), so mobile devices should get good native resolution. There was a range of versions where mobile devices would default to standard DPI, but that is now changed to default to high DPI also on mobile. On older Unity versions, check out the main generated index.html: If it has a line "config.devicePixelRatio = 1;", remove it to get high DPI.
    - regarding page reloads causing content not being able to load: there were some bugs on Unity front (and apparently still is at least when Decompression Fallback is enabled), and there are known bugs on Safari, Chrome and Firefox fronts. Safari iOS 12.x had issues that it would not be able to run multiple wasm pages consecutively, fortunately that has been fixed. Cleanup seems to be difficult on the web, and mobile devices run into issues earlier than desktop devices.
    - adding virtual keyboard support is something that is on our task board as well. In the meanwhile, there was another thread on this forum that offered two excellent looking plugins, check them out!
    - finally on performance: we are tracking with Google some issues about entry level Android devices, where the GPUs are so weak that Chrome's own WebGL compositor eats away most of the fillrate performance on the devices. There is a "constant overhead" that Chrome/WebGL brings, and that is squeezing Unity rendering performance down. (then again, I would not dare to claim Unity rendering performance to be 100% speed of light either)

    One thing to be very aware are background music clips. Audio on the web is very memory usage heavy, because of limitations of Web Audio API. A good way to check out audio memory usage is with Firefox about:memory tab, which can show how much of memory is consumed by uncompressed audio data.
     
    fxlange, Shah494, OceanX000 and 5 others like this.
  21. ROBYER1

    ROBYER1

    Joined:
    Oct 9, 2015
    Posts:
    1,450
    I would be keen to see when the updated compressed texture support is available, particularly if we want to do separate builds for mobile, the reduction of texture sizes would be a massive boost to performance.
     
  22. bogdan-serbanescu

    bogdan-serbanescu

    Joined:
    Jun 14, 2017
    Posts:
    20
    This sounds like good news! Can you give us some ballpark timeframe for the compressed texture support for iOS/Android specific formats @jukka_j ?
     
  23. Meltdown

    Meltdown

    Joined:
    Oct 13, 2010
    Posts:
    5,822
    May I ask why people would want to run WebGL content on their mobile device?
    This is what apps are for, and they give a better gaming experience than viewing a page in a browser would.
     
  24. OceanX000

    OceanX000

    Joined:
    Feb 24, 2021
    Posts:
    120
    We are developing games for the WeChat mini-game platform, and user base is very huge. Players are all using mobile devices.
     
    De-Panther and Meltdown like this.
  25. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,932
    I can't speak for all use cases, but during my time at NASA my manager requested web content that would run in-browser on any device be that mobile or desktop. They didn't want to place a mandate on their users having to download a native app for an interactive web experience. In this case Unity wasn't the best approach, and a native Javascript engine was more well suited.
     
  26. henriqueranj

    henriqueranj

    Joined:
    Feb 18, 2016
    Posts:
    177
    Also note that Unity applications go way beyond entertainment and the public audience.

    Working on serious games, I can name a few examples:
    • Mobile WebAR is growing rapidly and a considerable adoption can be seen in the marketing industry for quick and short experiences (see 8thWall success).
    • For Enterprise, Web applications are still the most acceptable solution for distribution of interactive learning experiences and serious games. There is a lot of complexity involved in releasing an application (mobile and/or desktop) to high security environments.
    • Also for Enterprise, several clients have a Web-based Learning Management System that provides learning experiences and manages their learning progress. Thus, a Web application is the only option.
    • Further for serious games, we have several use cases of interactive experiences where we want to engage players with very little friction. So requiring them to install an app for an informative experience can lead to a high drop-off rate. For example, games for recruiting, assessment, advocacy, ...
    I really hope to see mobile WebGL working properly with Unity.
     
  27. TheVirtualMunk

    TheVirtualMunk

    Joined:
    Sep 6, 2019
    Posts:
    150
    Just making sure - this option is gone in 2020.2? Does this mean it's enabled by default? Could only find info on WebAssembly Streaming on the server setup part; https://docs.unity3d.com/2020.2/Documentation/Manual/webgl-deploying.html, while the 2019.3 documentation says it's a toggle; https://docs.unity3d.com/2019.3/Documentation/Manual/webgl-deploying.html

    Edit: Also, all this talk about Android being worse than iOS - I'm experiencing the exact opposite. testing on iPhone 6S my application runs at 25-30 fps in the first 30-60 seconds, and then somehow the performance goes to 60 fps, while on android (Samsung S10e) the performance is great from the beginning. On iPhone X, the framerate seems to be locked at 30 fps, even though we are doing Application.targetFrameRate = -1.

    How to debug something like this? Yea I can connect the profiler on PC but that doesn't help when it's running fine there. I can connect Android to chrome for some browser debugging, but that doesn't work with iOS.

    Another finding worth mentioning; canvas dirtying seems to be VERY expensive on iOS. Don't know why this is the case, but had to redo all my world canvases into sprites instead.

    Lastly, is there any way to get Screen.SafeArea on WebGL builds? I guess not... :(
     
    Last edited: Apr 23, 2021
  28. OceanX000

    OceanX000

    Joined:
    Feb 24, 2021
    Posts:
    120
    I had the same problem in iOS safari, and don't know how to solve.
    https://forum.unity.com/threads/frame-rate-drops-at-game-beginning-on-ios-safari.1064447/
    @jukka_j
     
    TheVirtualMunk likes this.
  29. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    We currently are shooting for Unity 2021.2 milestone, but it will be cutting close. Nevertheless this is actively developed.

    Yes, WebAssembly streaming is now always enabled and used if the web server is configured with the Content-Type: application/wasm MIME type for the .wasm file.

    One thing to try is to run a performance profile from the beginning when things are slow, and then run another performance profile after things are running fast. If they look proportionally the same, i.e. there is no spike in any one function in the slow case compared to the fast case, then it is almost certainly due to tiered wasm compilation happening in Safari.

    Hmm, do we have some kind of blind spot here? I would expect the whole screen would be safe area for WebGL? What happens when you call that API on WebGL?
     
    De-Panther likes this.
  30. unisip

    unisip

    Joined:
    Sep 15, 2010
    Posts:
    340
    Hey, I am not sure this is the correct place for posting bugs about Unity WebGL mobile. I am trying to build a Unity WebGL page for display on mobile, and from my tests the input system with canvas has some issues.
    I made a very simple test, with a simple canvas button that has a script that logs when it received OnPointerDown and OnPointerUp events.
    When testing on a desktop browser, I can see that I receive OnPointerDown once and OnPointerUp once when pressing/releasing the button.
    However, on mobile, OnPointerDown keeps firing continuously when the button is pressed.

    Is this a known issue ? I haven't touched the default EventSystem gameobject, so I am using the StandAloneInputModule. should I use some other input for UI inputs on mobile ?

    I am using Unity 2020.3.29f1