Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Bug (2020.1.4f1) WebGL fullscreen ignores dpi on Android Chrome

Discussion in 'Web' started by Marks4, Sep 1, 2020.

  1. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    On window mode it scales using window.devicePixelRatio and in fullscreen mode it doesn't scale the view / DOM canvas size.

    Consequently, UI images get blurred on fullscreen. It is easier to notice when the image just has some text and a transparent background. Note, this does not happen on Android Firefox, only Android Chrome. It doesn't happen on Desktop Chrome either.

    Attached is a unitypackage with an example. It just has a button to toggle fullscreen and a text. Build for WebGL and run on Android Chrome. Compare with Android Firefox, Desktop Chrome, etc. It only gets blurry on Android Chrome.

    In fact, to make this easier, I already hosted the example on netlify . I will leave it there for a while.


    Somebody please take a look at this bug and provide some feedback. This is a serious bug. My client wanted me to put some credits on the screen, but the credits' letters are small, and this bug makes the credits unreadable! It only happens on Android Chrome, but it really needs to work on Android Chrome!
     

    Attached Files:

    Last edited: Sep 5, 2020
  2. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
  3. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
  4. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
  5. MaskedMouse

    MaskedMouse

    Joined:
    Jul 8, 2014
    Posts:
    1,091
    If you want them to have a look at bugs, it is better to make a bug report and simply link the thread in the report.
    It'll go to the appropriate devs if QA can reproduce the issue.
    Even then it'll take some time before bugs are solved. So don't expect a fix within a few days or the next unity update.
    Bug fixing goes into a long process even when they seem to be such easy fixes.
     
  6. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    I did make a bug report. No feedback whatsoever, there is no issue for it in the tracker. I made this thread to raise awareness, hopefully if more people complains they will take a look.
     
    Last edited: Sep 9, 2020
  7. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
  8. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
  9. Unity_AlexP

    Unity_AlexP

    Unity Technologies

    Joined:
    Jul 29, 2020
    Posts:
    2
    Hi, thank you for hosting that example as it makes it easier to see the issue you're describing. I have seen the bug report you submitted about this, so I'll look into it and get back to you when I know more information.
     
    Marks4 and De-Panther like this.
  10. Unity_AlexP

    Unity_AlexP

    Unity Technologies

    Joined:
    Jul 29, 2020
    Posts:
    2
    Hi, I'm afraid because we don't officially support WebGL on mobile browsers I can not be of much help at this time, and I suspect your bug report will be responded to similarly after it has gone through our triage process.

    If you find a workaround for this issue please post it here as hopefully it can help other users facing similar issues.
     
  11. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    You know this doesn't make any sense. Why don't you support WebGL on mobile browsers? Most people don't even have desktop anymore, they just use their phone. Long gone is the time where most people use desktops. You only support WebGL on a dying use case, basically. I can't believe you took this long just to tell me that you won't help me. Wow. Thanks for nothing I guess, have a great day.

    Probably not even your fault, so this is directed to your higher ups, whoever is responsible for the decision of not supporting WebGL on mobile browsers and not letting you help me.
     
    Last edited: Sep 25, 2020
  12. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Apologies for the trouble here @Marks4. In a case like this it can sometimes difficult to react to a bug report.

    We do certainly want to take in mobile web browser related bug requests, since that will help the mobile platform become more solid towards official support.

    The reason that Unity does not yet officially state support for mobile is because we do not see that most developers would be in a position to succeed with mobile Unity WebGL projects. When Unity states official support for a platform, it can have a strong meaning for financial planning for software houses, and Unity needs to be careful in messaging to help align developer expectations.

    However, all that jargon aside, we are *very* interested in hearing about mobile issues in the web team. Only by going through these issues can we make the mobile experience better.

    I had a look at your repro, thanks for taking the time to craft that up. I can reproduce the issue in Chrome, and I believei it is actually due to the default behavior that we offer in the web page templates for mobile devices to optimize for low-end mobile fillrate. If you take a look at the generated index.html, it will have something like this in it:

    Code (JavaScript):
    1.       ...
    2.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    3.         container.className = "unity-mobile";
    4.         config.devicePixelRatio = 1;
    5.         mobileWarning.style.display = "block";
    6.         ...
    Try deleting the line `config.devicePixelRatio = 1;` from the file. Testing out your unitypackage, removing that line helped Android show full 1:1 content in fullscreen for me.

    I recently added another config field to the page templates, and while at it, I tried to improve the discoverability and documentation of that config.devicePixelRatio field.

    Let me know if that does not work, and we can look into it further.
     
    Mehrdad995 and Marks4 like this.
  13. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    @jukka_j It did not work, the screen turned black and stretched. The skybox was replaced with an all-black texture. I'm using Unity 2020.1.4f1, default template.
     

    Attached Files:

    Last edited: Oct 6, 2020
  14. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Hmm that is curious, can you zip up the project build, preferably in Development configuration?
     
  15. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
    It might be that the screen resolution is more than the max texture size for WebGL, in cases like those it'll stretch the image, as we can see in the button text.
     
  16. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521

    Attached Files:

  17. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Looking at the test case today, the main issue turns out not to be with Unity engine, but with the default page HTML template.

    Two fixes are needed:
    1. Remove the config.devicePixelRatio = 1; line from the .html file to remove the by-default enabled standard DPI rendering on mobile. I removed this from trunk today, and switched so that developers need to opt in to standard DPI. I.e. High DPI will be the default.
    2. The reason for the black screen was that due to CSS rules with nested "width: 100%" elements and Chrome's mobile scaling defautls, the canvas size ended up becoming larger than 4k pixels in width. To fix this, one can add a meta viewport tag for mobiles, and explicitly define the size of the canvas. Something like the following in the index.html file should work:

    Code (JavaScript):
    1.        if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    2.         // Mobile device style: fill the whole browser client area with the game canvas:
    3.  
    4.         var meta = document.createElement('meta');
    5.         meta.name = 'viewport';
    6.         meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
    7.         document.getElementsByTagName('head')[0].appendChild(meta);
    8.          container.className = "unity-mobile";
    9.         // Avoid draining fillrate performance on mobile devices,
    10.         // and default/override low DPI mode on mobile browsers.
    11.         // config.devicePixelRatio = 1;
    12.  
    13.         // To lower canvas resolution on mobile devices to gain some
    14.         // performance, uncomment the following line:
    15.         // config.devicePixelRatio = 1;
    16.  
    17.         canvas.style.width = window.innerWidth + 'px';
    18.         canvas.style.height = window.innerHeight + 'px';
    19.  
    20.          mobileWarning.style.display = "block";
    21.          setTimeout(() => {
    22.            mobileWarning.style.display = "none";
    23.          }, 5000);
    Although there is a minor issue with fullscreen request API and embedding a button in Unity, that resulted in a unnecessary error box to appear after migrating to fullscreen. That error is benign, and can be worked around by modifying UnityLoader.js to discard acting if a fullscreenerror is seen.

    You can try the fixed build at http://clb.confined.space/dump/webgl_dpiscale4/ , or in the attachment.
     

    Attached Files:

    Marks4 likes this.
  18. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    I got a
    404 not found
    on that link. But I am glad you found a solution to the problem! Will it ship to the next Unity version? This dpi issue might not seem like a big deal, but it is when the client wants to have a small copyright text on the bottom of the screen and it's just unreadable because of this :p. Ah no matter, I can just edit the template following your instructions. Neat!
     
  19. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    The fix should land to point releases of release channels 2021.1, 2020.2, 2020.1 and 2019.4. I am not sure if it will make it to the next point release, or if it will be the one after that.
     
    De-Panther and Marks4 like this.