Labels appear fuzzy or with jagged edges

[mattjurgensen]

Hi All - Our users of CesiumJS complain our labels appear fuzzy, or with jagged edges. We have attempted to help improve label rendering by varying font size, font family, fill colors, background colors, scale factors, and toggle as many label properties such as fxaa that may apply to anti-aliasing as documented. We have recently upgraded to v1.90 but the rendering problem still exists.

We have had no success in improving label rendering that would provide an improved cleaner, crisper appearance. Ideally, we would like the rendering to be as clean as true-type font rendering provided by html and the browser.

Can anyone provide their comments to a solution, or if you have had similar complaints and how you may have solved this. Thank you in advance.

[sam.rothstein]

Hi @mattjurgensen,

Thank you very much for reaching out to the community with your question. To the best of my knowledge, this is still a lingering issue in CesiumJS. I am going to reach out to the rest of the CesiumJS squad to see if they have any additional suggestions. In the meantime, feedback from the rest of the community is welcomed!

-Sam

[Gabby_Getz]

Hi Matt,

Unfortunately FXAA and MSAA do not help label rendering, and in the case of FXAA may actually make their quality worse.

While nothing in currently in the works, I can assure you we are well aware label rendering could use improvement. There are no immediate plans to overhaul it at the moment, but visual quality issues are certainly top of mind.

In the meantime, I would suggest rendering labels where possible with overlaid HTML elements. You can translate any position in Cesium to the x and y position on the screen, and then position this element accordingly, like in the feature picking Sandcastle example. Then you can style as you please with different font families, colors, padding, hover states or any other effects available through CSS. This is the approach we tend to take when writing our own apps based on CesiumJS, and I believe several other CesiumJS users take this approach too.

Hope that helps, and I’m interested to see what other members of the community may be doing.

Thanks!
Gabby

[TangoGIS]

@Gabby_Getz how does this have much of a affect on performance in a scene where the view is updating less than a second on a mobile environment. with 50-100 labels vs using just a label collection?

[Mike_Badgley]

I’ve noticed this same issue with the icons/images I use for BillboardGraphics. Whether I use an SVG or a rasterized image, they appear fuzzy.

FWIW here is the code used to instantiate this object

billboard: new Cesium.BillboardGraphics({
          image:
            mode === 'careers'
              ? '/Scripts/location-map/pin-careers.png'
              : '/Scripts/location-map/pin-location.svg',
          width: mode === 'careers' ? 38 : 38,
          height: mode === 'careers' ? 50 : 53,
          scale: 0.4,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
1000000.0),
        }),

And here is one of the images I’ve tried it with:

[rileyhowley]

@Gabby_Getz Wondering if we have a solution for this yet, or a work around. Labels are very blurry for the text

[jjhembd]

Hi @rileyhowley,

When I use the default Viewer resolution, I do see blurry/pixelated text.

If I set the following option when constructing the Viewer:

const viewer = new Cesium.Viewer("cesiumContainer", {
  useBrowserRecommendedResolution: false,
});

then the label looks pretty good:

.

For further control, you can adjust the resolutionScale to higher values. Here is a Sandcastle demonstrating the effect of both options.

If you still see blurry labels after adjusting those parameters, then a Sandcastle example demonstrating the problem would help us investigate further.

[rileyhowley]

Hi @jjhembd

I tried to add the useBrowserRecommendedResolution: false, this didnt affect anything unfortunately. I am using 32x32 PNG image. The image is not blurry on my machine but within the billboard it becomes very pixelated.
Normal Image

Billboard image

Note we are using cesium engine for the implementation so we cant use the viewer so access to the resolutionScale does not appear on the cesiumWidget. Another thing I noticed that related to a blurry level, is the label text is lopsided. I will attach the sandcastle link we have setup to show the problem. Cesium Sandcastle

Kind regards

Riley

[jjhembd]

Hi @rileyhowley,

I can’t reproduce either problem, even when using CesiumWidget.

CesiumWidget allows you to set both useBrowserRecommendedResolution and resolutionScale. Here is a Sandcastle example demonstrating both options, using your image and the label from your Sandcastle.

With default resolution:

With useBrowserRecommendedResolution: false and cesiumWidget.resolutionScale = 2.0:

Is it possible your app build process is overriding the CesiumWidget canvas resolution?

[rileyhowley]

Hi @jjhembd

I don’t think its a case of the app build process overwriting the canvas resolution as when I click the sandcastle example you provided I still see the same problem. However, people in my team can see the text is perfectly straight. This seems to be mac issue?

Very strange

Kind regards

• Riley

[jjhembd]

Hi @rileyhowley, that’s helpful information. I have been testing on a Windows machine, so that probably explains why I can’t see the problem.

Can you share a screenshot of the lopsided text on Mac? I can ask someone with a Mac to try to reproduce it.

What browser are you using? What value do you get if you enter window.devicePixelRatio into the browser’s developer console?

[rileyhowley]

Hi @jjhembd

I appreciate the quick responses! Here is a screenshot of what it looks like on mac. Note, I have tested this with 2 other macs and have the exact same issue no matter the browser, however, we tested Chrome, Safari, and Edge.

The window.devicePixelRatio returns 1 for the sandcastle link and the running application

Kind regards

Riley

[Gabby_Getz]

Hi @rileyhowley,

I was able to check out the Sandcastle you provided on my Mac, and I’m seeing similar results.

I believe the lopsided text is due to Small fonts have misaligned glyphs · Issue #8474 · CesiumGS/cesium · GitHub. I’ll note in that issue that it seems to be more severe on a Mac. I was able to use the workaround suggested by the user in that thread in which the font is rendered using a larger size (I used 64pt) and scaled down using scaleByDistance.

Before	After

Here is a Sandcastle combining both my suggestion as well as @jjhembd’s suggestion for increased resolution.

I hope that covers your needs!
Gabby