Flickering labels

CesiumJS
1

Sometime between Cesium-1.29 and the latest 1.35 a change was made which introduced a flicker when adding a bunch of labels to the scene. The following code snippet can be dropped into SandCastle and demonstrates the issue.

// Cesium.CesiumWidget is similar to Cesium.Viewer, but
// is trimmed down. It is just a widget for the 3D globe;
// it does not include the animation, imagery selection,
// and other widgets, nor does it depend on the third-party
// Knockout library.
var widget = new Cesium.CesiumWidget('cesiumContainer', {

    terrainProvider : new Cesium.CesiumTerrainProvider({
    url : ‘https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles’,
    requestWaterMask : true,
    requestVertexNormals : true
  })
});

var count = null;
var drawLabelCollection = null;
var scene = widget.scene;
var x = null;
var y = null;

setTimeout(function() {
    
    for(x = -180; x < 180; x=x+5) {

        for(y = -90; y < 90; y=y+5) {

            drawLabelCollection = new Cesium.LabelCollection();

            drawLabelCollection.add({
                font: 'bold 15px Arial, sans-serif',
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                position: Cesium.Cartesian3.fromDegrees(x, y, 500),
                text: '(' + x + ', ' + y + ')',
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            });

            scene.primitives.add(drawLabelCollection);

            count++;
        }
    }
    console.warn('Done ' + count);
}, 5000);

Any idea what would cause the imagery layer flicker?

Thanks

Jerrold S

2

Hi there,

I’m not sure what causes the imagery flickering – I was having trouble reproducing your issue, but I noticed that you’re creating a new label collection for every label you add. You’ll see much better performance if you add all your labels to a single collection and add the entire collection in one step. See this code example: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=d7c4b004f8b42edfa42e3bb78231918d

Hope that helps,

  • Rachel
3

I stumbled into that issue myself and managed to track it down a bit further. The problem happens whenever the texture atlas holding the glyphs for the labels needs to be updated. That always happens when you add a new label collection but also when you add a label with a sufficient amount of new glyphs to exhaust the currently remaining atlas space.

The issue is simple when you dig a bit: the atlas updates cause a framebuffer to be bound, removing the framebuffer needed for normal drawing operations (causing the observed flickering because during that one frame the framebuffer being blitted to the canvas does not contain what it should).

Either the atlas update needs to happen outside of normal drawing or it needs to explicitly preserve the previous framebuffer. I have been looking around a bit but could not find a proper way to fix it.

A quick hack as a workaround would be to replace the _bind/_unBind pair of Source/Renderer/Framebuffer.js with:
    Framebuffer.prototype._bind = function() {
        var gl = this._gl;
    this._previousFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
        gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebuffer);
    };

    Framebuffer.prototype._unBind = function() {
        var gl = this._gl;
        gl.bindFramebuffer(gl.FRAMEBUFFER, this._previousFramebuffer);
    };

Obviously, that is not a good long-term solution.

4

One additional bit of information: I first noticed the problem after pulling in tags/1.33.

5

Hi

This was fixed with https://github.com/AnalyticalGraphicsInc/cesium/pull/5632.

It will be in the 1.36 release on Aug 1.

Thanks

–Tom