Cesium aliasing with Chrome in 4k on Linux

[skaughtx0r]

When running Cesium in Chrome on Linux at 4k resolution. There are aliasing artifacts on polylines and markers. I dug into it a little bit and removing the image-rendering: pixelated; CSS style on the Cesium canvas fixes the problem.

This appears to be related to #3249 and #3288

Browser: Chrome 73

Operating System: Linux Mint 18.1 / Ubuntu 16.04

With image-rendering: pixelated; :

Without image-rendering: pixelated; :

[mramato]

What's the value of window.devicePixelRatio in your app? My guess is that you are not actually rendering at 4k and instead rendering at 1080p (or some other resolution) and scaling up. This is by design, we render at the resolution the browser requests from us.

The reason we add pixelated, is that most devices will look blurry due to smooth upscaling if it's not there, this is especially true on many mobile devices that ask us to render at 640x480 because they have a low-powered GPU with a crazy high resolution screen.

Depending on your use case, there's a couple of options:

1. If you okay with the upscaling but don't like the pixelated look, you can just unset viewer.canvas.style.imageRendering after constructing the view. The downside here is the blurriness referenced in Cesium looks aliased on MacBook Pro Retina display #3249, especially on some mobile devices (if you care about mobile)

2. Alternatively, if you care about mobile but need 4K support for large screens as well, you can sniff the user agent for whatever criteria you want and only unset viewer.canvas.style.imageRendering if you decide you don't want "full" resolution.

3. If you always want to render at native resolution (i.e. 4k), add viewer.resolutionScale = window.devicePixelRatio; to your app immediately after creating the viewer and it will always use the "full" resolution (no need to mess with the canvas) . The downside here is that underpowered clients with a high resolution screen (lots of mobile, some laptops, etc..) may suffer from performance issues because they simply aren't powerful enough to render at that resolution.

It's certainly possible things have changed since this code was written, so I'll leave this open until you can confirm the behavior I describe above is accurate.

[skaughtx0r]

Oh, interesting, my window.devicePixelRatio is about 1.3 which is what my OS font scaling is set to. If I change font scaling back to 1 then it looks good.

I played around with option 3 and I get a WebGL error:

An error occurred while rendering. Rendering has stopped.
TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at f (http://localhost:4200/scripts.bundle.js:468:5877)
    at y (http://localhost:4200/scripts.bundle.js:468:9014)
    at d._bind (http://localhost:4200/scripts.bundle.js:468:10029)
    at G (http://localhost:4200/scripts.bundle.js:497:9099)
    at z.draw (http://localhost:4200/scripts.bundle.js:497:13322)
    at n.execute (http://localhost:4200/scripts.bundle.js:467:9565)
    at Ue (http://localhost:4200/scripts.bundle.js:522:15598)
    at Qe (http://localhost:4200/scripts.bundle.js:522:17055)
    at rt (http://localhost:4200/scripts.bundle.js:522:25538)
    at et (http://localhost:4200/scripts.bundle.js:522:22852)

Edit: Hmmm, I seem to no longer have GPU accleration in Chrome, I'm not sure if it was caused by the above error, or if the error was caused by it using software rendering...

Option 1 should work for us since we are not targeting mobile.

[mramato]

In the next release, we'll always merge at full resolution by default: #8057