Skip to main content
Support
Search our knowledge base

WebGL looks wrong on High resolutions (Retina)

Comments

12 comments

  • François Klingler

    Hi,

    When I do this :

    canvas.width = canvas.clientWidth * window.devicePixelRatio;

    canvas.height = canvas.clientHeight * window.devicePixelRatio;

    On a screen with Windows scaling of 200% (so the window.devicePixelRatio is 2), the app is displayed only on the lower-left quarter of the canvas space, and the rest of the canvas is black.

    Did it also happen to you, and do you have any idea of how to fix this?

    1
  • Clayton Curmi

    Hi François,

    Have you found a solution to your problem as I am experiencing the same thing. Thanks

    Regards,

    Clayton

    0
  • 銀白

    when i change width and height , well also change style.width  and style.height

    what it so?

    0
  • Utku Uzmen

    This solution is no longer usable and Unity still doesn't support retina on WebGL.

    1
  • k

    You can also add this style to the body tag on index.html:

    <body style="image-rendering: pixelated">

      ...

    </body>

    This will keep the size as is but prevent blurred pixels. Good for pixel art.

    1
  • Aleksander Guryanov

    This answer is not correct it doen't work at all. Every time when you cahnge canvas width/height, or css width/height unity will recreate canvas buffer with last width&height. Unity do it through Browser.setCanvaSize from emscripten.

    0
  • Kamil Szurant

    It's fixed in 2019.3 beta.

    0
  • Nikolaj Stausbøl

    It's not entirely fixed. It's now hard coded to support retina screens, but that's not solving the problem. The problem is now the opposite:

    You don't always want retina support. Some devices are 8x resolution and that creates a massive canvas. Even on a MacBook some webgl games are simply too heavy for the 2x retina resolution. Now if you try to modify the canvas width / height, then unity fights back and keep the retina resolution.

    There's literally no way to disable retina (or even limit an 8x device to only render 2x resolution), so no the problem isn't solved.

    0
  • Nikolaj Stausbøl

    Ok, I figured out a CSS hack to trick Unity into lowering the resolution.

    This will lower a 2x screen to render in 1x resolution.

    #canvas {
       width: 50% !important;
       height: 50% !important;
       transform: scale(2);
       transform-origin: 0 0;
    }

    Basically unity is looking at the size of the webgl canvas to determine the resolution of the game, so if we half the canvas size, the resolution will be halved too.

    Then we upscale the canvas again and make sure to scale from the top left origin of the canvas.

    This upscale shouldn't have a significant bad impact on performance.

    Now combine it with a detection of pixel density in javascript and set the css accordingly, so if you want an 8x screen to only render at 2x, then set the width / height to 25% and the scale to 4.

    0
  • Aleksander Guryanov

    Just checked in 2019.3beta10 nothing is changed, unity does not allow chages of canvas style width & hegiht. It will also change width & height of render buffer.

    This is original output (style: 300x300, canvas: 300x300):

     

    This is squished (style: 150x300 canvas: 300x300):

     

    This is stretched (style: 900x300 canvas: 300x300):

     

    As you can see sphere stays the same but should be stretched or squished.

    0
  • Rodrigo Laiz

    For me K reply did the trick. My game is a 2D game (not pixel art) and everything looked a bit blurry. Added in the body tag this:

    <body style="image-rendering: pixelated">

    and just like magic everything looked nice and crisp :)

    -1

Please sign in to leave a comment.