Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
  3. Join us on November 16th, 2023, between 1 pm and 9 pm CET for Ask the Experts Online on Discord and on Unity Discussions.
    Dismiss Notice
  4. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Update to the Unity Editor Software Terms Unite 2023 - Ask the Experts Online Unite 2023 Registrations are now LIVE!

WebGL Retina Scaling

Discussion in 'WebGL' started by RobRab2000, Mar 24, 2020.

  1. RobRab2000

    RobRab2000

    Joined:
    Nov 28, 2012
    Posts:
    29
    Hi, I know there were some changes introduced into 2019.3 which changed the way that scaling is handled in WebGL. There is a bit mentioned in the 'What's New': https://unity.com/releases/2019-3/platforms#high-dpi-support-webgl-deployment-target

    I was curious where I can find more information on how this is being handled and whether it is possible to disable it. Its actually a really great features that we've been looking forward to, its just that on a low power Macbook Pro, you're having to deal with a really high resolution on slow intel graphics. So ideally I'd like to be able to disable it or at least have some control over what the default dpi is.

    Thanks
     
    RobRab2000, Mar 24, 2020
    #1
    ShadowHealth and fxlange like this.

  2. fxlange

    fxlange

    Joined:
    Dec 20, 2016
    Posts:
    42
    Hi, as far as I know you can't disable it. What I'm doing instead is to reduce the render scale via the universal render pipeline.This only scales down the scene rendering but not the UI: https://docs.unity3d.com/Packages/c...sal@7.1/manual/universalrp-asset.html#quality

    I'm okay with the result. UI obviously much better, super crisp! But render scale of 0.5 on a screen with hdpi factor 2 doesn't look great. Maybe I'm doing it wrong.
     
    fxlange, Apr 1, 2020
    #2

  3. Kamyker

    Kamyker

    Joined:
    May 14, 2013
    Posts:
    1,084
    Kamyker, Apr 6, 2020
    #3

  4. fxlange

    fxlange

    Joined:
    Dec 20, 2016
    Posts:
    42
    Hi @Kamyker - I don't see the connection between video player and the way scaling is handled in webgl since 2019.3. I would assume the issue you linked could be connected to the new/fixed scaling but not the other way around, right?
     
    fxlange, Apr 6, 2020
    #4

  5. unity_eXnVkHhghvGMpg

    unity_eXnVkHhghvGMpg

    Joined:
    Nov 17, 2018
    Posts:
    2
    Hey,
    Any updates about this?
    I'm facing a problem with my WebGL app on Macs (very high resolution and very low performance)
     
    unity_eXnVkHhghvGMpg, Sep 17, 2020
    #5

  6. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    944
    The current page template now has a configuration field for devicePixelRatio. If you want to render to standard DPI, you can use the following template:

    Code (CSharp):
    1. <!DOCTYPE html>
    2. <html lang="en-us">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6.     <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
    7.   </head>
    8.   <body style="text-align: center">
    9.     <canvas id="unity-canvas" style="width: {{{ WIDTH }}}px; height: {{{ HEIGHT }}}px; background: {{{ BACKGROUND_FILENAME ? 'url(\'Build/' + BACKGROUND_FILENAME.replace(/'/g, '%27') + '\') center / cover' : BACKGROUND_COLOR }}}"></canvas>
    10.     <script src="Build/{{{ LOADER_FILENAME }}}"></script>
    11.     <script>
    12.       createUnityInstance(document.querySelector("#unity-canvas"), {
    13.         devicePixelRatio: 1, // Force rendering to standard DPI
    14.         dataUrl: "Build/{{{ DATA_FILENAME }}}",
    15.         frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
    16.         codeUrl: "Build/{{{ CODE_FILENAME }}}",
    17. #if MEMORY_FILENAME
    18.         memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
    19. #endif
    20. #if SYMBOLS_FILENAME
    21.         symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
    22. #endif
    23.         streamingAssetsUrl: "StreamingAssets",
    24.         companyName: "{{{ COMPANY_NAME }}}",
    25.         productName: "{{{ PRODUCT_NAME }}}",
    26.         productVersion: "{{{ PRODUCT_VERSION }}}",
    27.       });
    28.     </script>
    29.   </body>
    30. </html>
    31.  
    whereas if you would like to render to high DPI (default in minimal page template), you can use

    Code (CSharp):
    1. <!DOCTYPE html>
    2. <html lang="en-us">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6.     <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
    7.   </head>
    8.   <body style="text-align: center">
    9.     <canvas id="unity-canvas" style="width: {{{ WIDTH }}}px; height: {{{ HEIGHT }}}px; background: {{{ BACKGROUND_FILENAME ? 'url(\'Build/' + BACKGROUND_FILENAME.replace(/'/g, '%27') + '\') center / cover' : BACKGROUND_COLOR }}}"></canvas>
    10.     <script src="Build/{{{ LOADER_FILENAME }}}"></script>
    11.     <script>
    12.       createUnityInstance(document.querySelector("#unity-canvas"), {
    13.         devicePixelRatio: window.devicePixelRatio, // render to retina/high-dpi (or you can just leave this field out, as this is the default)
    14.         dataUrl: "Build/{{{ DATA_FILENAME }}}",
    15.         frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
    16.         codeUrl: "Build/{{{ CODE_FILENAME }}}",
    17. #if MEMORY_FILENAME
    18.         memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
    19. #endif
    20. #if SYMBOLS_FILENAME
    21.         symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
    22. #endif
    23.         streamingAssetsUrl: "StreamingAssets",
    24.         companyName: "{{{ COMPANY_NAME }}}",
    25.         productName: "{{{ PRODUCT_NAME }}}",
    26.         productVersion: "{{{ PRODUCT_VERSION }}}",
    27.       });
    28.     </script>
    29.   </body>
    30. </html>
    31.  
    Using the minimal page template as an example here since it is smaller to paste to a forum post. The regular template also has this, and note how the regular template dynamically chooses high DPI for desktop devices, and standard DPI for mobile devices.
     
    jukka_j, Oct 6, 2020
    #6
    mandisaw and aromana like this.