Search code examples
cesiumjs

Cesium Labels Blurry after disabling fxaa

I've followed the answer in this post Cesium label blurred but have had no luck.

I've made sure that viewer.scene.fxaa = false and nothing seems to change. Please see my screenshot attached.

enter image description here

Does anyone have a fix for this?

Thanks so much!

Solution

  • Be wary of hard-coding something like viewer.resolutionScale = 2. There's a baked-in assumption on this line of code that the user probably has a high-DPI screen, and their browser is scaling up the webpage accordingly. Running this line of code on a system that is already using a 1:1 pixel ratio may cause it to render twice as wide and twice as tall as what the device can actually display.

    Here's an alternate suggestion:

    viewer.resolutionScale = window.devicePixelRatio

    It's not perfect, but better than a hard-coded 2. It will attempt to get the Cesium viewer to exactly match the device's native pixels, which may not be the same size as "CSS pixels", particularly on high-DPI screens.

    A value of "1" here (the default) means that Cesium's viewer canvas pixels are the same size as the webpage's idea of CSS pixels, which may be larger and chunkier than the screen's own native pixels. Higher numbers act as a multiplier on the WebGL canvas resolution, taking more graphics memory and performance. You may find that the machine you're testing this on already has a window.devicePixelRatio of 1.5 or 2.0, so the line above may not act any differently from a hard-coded 2 on your particular machine. But checking the local devicePixelRatio is better than making assumptions.