# Flickering labels

**URL:** <https://community.cesium.com/t/flickering-labels/5769>\
**Category:** CesiumJS\
**Created:** [July 7, 2017, 9:06pm UTC](https://community.cesium.com/t/flickering-labels/5769 "2017-07-07T21:06:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jerrold\_Stoy](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jerrold_stoy/32/3777_2.png) [@Jerrold\_Stoy](https://community.cesium.com/u/Jerrold_Stoy)\
**Post date:** [July 7, 2017, 9:06pm UTC](https://community.cesium.com/t/flickering-labels/5769/1 "2017-07-07T21:06:26Z")

</div>

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', {

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

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

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

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawLabelCollection = new Cesium.LabelCollection();

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scene.primitives.add(drawLabelCollection);

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

Any idea what would cause the imagery layer flicker?

Thanks

Jerrold S

---

<div class="post-metadata">

**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\
**Post date:** [July 10, 2017, 1:09pm UTC](https://community.cesium.com/t/flickering-labels/5769/2 "2017-07-10T13:09:43Z")

</div>

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](http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=d7c4b004f8b42edfa42e3bb78231918d)

Hope that helps,

- Rachel

---

<div class="post-metadata">

**Author:** ![koch](https://avatars.discourse-cdn.com/v4/letter/k/45deac/32.png) [@koch](https://community.cesium.com/u/koch)\
**Post date:** [July 18, 2017, 8:56am UTC](https://community.cesium.com/t/flickering-labels/5769/3 "2017-07-18T08:56:35Z")

</div>

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:  
&nbsp;&nbsp;&nbsp;&nbsp;Framebuffer.prototype.\_bind = function() {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var gl = this.\_gl;  
&nbsp;&nbsp;&nbsp;&nbsp;this.\_previousFramebuffer = gl.getParameter(gl.FRAMEBUFFER\_BINDING);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindFramebuffer(gl.FRAMEBUFFER, this.\_framebuffer);  
&nbsp;&nbsp;&nbsp;&nbsp;};

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

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

---

<div class="post-metadata">

**Author:** ![koch](https://avatars.discourse-cdn.com/v4/letter/k/45deac/32.png) [@koch](https://community.cesium.com/u/koch)\
**Post date:** [July 18, 2017, 9:04am UTC](https://community.cesium.com/t/flickering-labels/5769/4 "2017-07-18T09:04:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tom](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/tom/32/1994_2.png) [@tom](https://community.cesium.com/u/tom)\
**Post date:** [July 19, 2017, 12:30am UTC](https://community.cesium.com/t/flickering-labels/5769/5 "2017-07-19T00:30:03Z")

</div>

Hi

This was fixed with [https://github.com/AnalyticalGraphicsInc/cesium/pull/5632](https://github.com/AnalyticalGraphicsInc/cesium/pull/5632).

It will be in the 1.36 release on Aug 1.

Thanks

–Tom