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. 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 Unite 2023 Registrations are now LIVE!

WebGL | MacOS | Retina | Performance

Discussion in 'WebGL' started by Berys, Sep 22, 2020.

  1. Berys

    Berys

    Joined:
    Aug 31, 2020
    Posts:
    1
    Hello there!

    [Project]

    I am starting with a simple 2D game. It will be built for WebGL. Right now I have a simple scene with background and 2D rotating sprite - just it, nothing more. I set up server, open it on Windows 10 and Edge, I have got stable 60FPS in my browser, but my friend who is working on MacBook has a really bad performance max 30FPS but it is jumping from 24-30FPS.

    [In project]

    I have a background spritre 1920x1080, 2D Hexagon Sprite rotating with simple code:
    transform.Rotate(Vector3.forward * speedRotate * Time.deltaTime);
    It is build as WebGL in 900x600 window.

    [I have tried]

    I have tried using Canvas, but it is even worse. I have compiled ready project from the asset store, more complicated - 200mb file to load for browser, and it is working in 60FPS on Mac with no problems... Mine is built is 10Mb.... and performance is awful.

    [RIGHT NOW]

    For 99% the Retina display is the problem - Browser is forcing to scale up the canvas.
    I build it 960x600 and it is the force by the browser to scale it to 1920x1200...
     
    Berys, Sep 22, 2020
    #1

  2. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    944
    If you want to try out rendering to standard DPI instead of retina DPI, you can try setting config.devicePixelRatio = 1; in the generated page .html file.

    E.g. change

    Code (JavaScript):
    1.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    2.         container.className = "unity-mobile";
    3.         config.devicePixelRatio = 1;
    4.         mobileWarning.style.display = "block";
    5.  
    to

    Code (JavaScript):
    1.  
    2.       config.devicePixelRatio = 1;
    3.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    4.         container.className = "unity-mobile";
    5.         mobileWarning.style.display = "block";
    6.  
    That should override rendering to standard DPI. You can also try out different scale factors to get different rendering ratio, but it is best not to put in a value that is higher than `window.devicePixelRatio`.
     
    jukka_j, Oct 6, 2020
    #2

  3. clown_hacke

    clown_hacke

    Joined:
    Jul 29, 2019
    Posts:
    11
    Hi @jukka_j I don't have the code in my index.html.. I'm using unity 2019.2. So please mention where to put the config.devicePixelRatio in older versions.
     
    clown_hacke, Oct 7, 2020
    #3

  4. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    944
    Sorry, I believe that overriding the devicePixelRatio configuration is only available in 2020.1 where the new loader template was introduced.
     
    jukka_j, Oct 7, 2020
    #4