Browser zoom causes image quality degredation

[thw0rted]

Using the browser zoom function causes imagery to pixelate significantly. Test this with any Sandcastle demo: load the demo, wait for all the tiles to load at full resolution, then user your browser's text zoom function (CTRL+= on Windows and Linux) to increase zoom significantly, maybe 150-200%. UI elements (toolbar buttons, etc) should resize correctly, and the widget should still occupy the entire viewport. (Ideally, you'd do this in a new window but that isn't working, see #5858.)

As you increase the zoom factor, watch the map tiles. The resolution of the tiles will get worse with each step. I'm not sure this can be fixed, but maybe there's some webGL property that can be set to ignore the zoom factor?

[thw0rted]

I forgot to mention: one of the more serious impacts is actually on billboard rendering quality. Even a very low zoom factor (110-120%) introduces serious aliasing effects, especially noticeable if your image has straight lines. Load the Billboard demo and show the "marker" billboards, then zoom to ~120% -- the edges on geometric shapes look terrible.

compared to

As you might have guessed, I discovered the issue accidentally -- my billboards looked awful, and I spent some time trying to figure out what I might have changed in my code / application configuration to cause it. I eventually noticed that some buttons were also bigger than I expected, and as soon as I reset the browser zoom, the billboard quality came right back.

[emackey]

This is, sadly, intentional. We used to preserve quality when browser zoomed, but there were too many mobile devices out there with high-dpi or "retina" displays, without the GPU power to handle those displays at full resolution. A decision was made to use CSS pixels, not native pixels, for the WebGL canvas by default, thus restoring compatibility with those devices but causing the effect you reported here.

You can take manual control over this using window.devicePixelRatio and viewer.resolutionScale.

[thw0rted]

I actually use viewer.resolutionScale already to provide an in-app "quality toggle" for users on older / slower devices. Is there any way to differentiate a desktop browser with zoom applied from a high-DPI display at "normal" zoom? I'd like to at least make sure the user is aware when the visual quality is "intentionally" degraded...

[pjcozzi]

Related to

High-res printing (multiview port)

in #4678, which will scale up billboards/labels/line width, etc. for large resolutions.

[mramato]

I actually use viewer.resolutionScale already to provide an in-app "quality toggle" for users on older / slower devices. Is there any way to differentiate a desktop browser with zoom applied from a high-DPI display at "normal" zoom? I'd like to at least make sure the user is aware when the visual quality is "intentionally" degraded...

Unfortunately, no, window.devicePixelRatio is the only value available to JavaScript. A value of 1.0 means "current screen resolution" but browsers will automatically use values larger than 1.0 for mobile devices and 4K displays. For example, some iPhones and iPads use a value of 3.0, which means you are rendering at 1/3 screen resolution. You can always use the native hardware resolution by ensuring viewer.resolutionScale = window.devicePixelRatio;, but this is a bad idea because a lot of mobile and 4K devices will not be able to actually render WebGL content at that resolution in a usable way.

I wish I had a better answer for you, but this is one of those areas where our hands are tied until the browsers expose a better API.

[mramato]

@thw0rted Thanks for raising the issue, but I'm closing this since there's nothing actionable we can do on our end. Please start a thread on the forum if you want to continue the conversation and maybe the community can provide some good suggestions that we didn't think of. (at which point I'd be happy to reopen the issue with implementation details).