Labels appear fuzzy or with jagged edges

CesiumJS
1

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.

2

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! :grinning: :rocket:

-Sam

3

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

4

@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?

5

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.

image
image892×586 17.8 KB

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:

image

6

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