Search code examples
cesiumjs

Cesium label blurred

I created a Cesium label, using the following code:

        var label: Cesium.LabelGraphics = new Cesium.LabelGraphics({
            text : lab,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
            font: '15px Helvetica',
            fillColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL,
            pixelOffset: new Cesium.Cartesian2(20, 20)
        });

But it is blurred...

I would like to have a clearer label. Is this image you can see inside the red rectangle the real label. In the blue rectangle is the label with a zoom In. In the green rectangle is how I would like it to be. enter image description here

Is there some way to make the label clearer?

Thanks!

Solution

  • In Bllboard.js or Cesium.js change 

    gl_Position = czm_viewportOrthographic * vec4(positionWC.xy,-positionWC.z, 1.0);

    to

    gl_Position = czm_viewportOrthographic * vec4(floor(positionWC.xy + 0.5), -positionWC.z, 1.0);

    It will makethe billboards snap to a pixel, instead of get blurred.

    also disable the FXAA (antialias) in your viewer initialization

    viewer.scene.fxaa = false

    it will make the billboards and labels much more crispy !

    Before

    before .

    After

    after