Flickering when adding a new polygon entity

[hpinkos]

Reported on the forum: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/xKVI49Ux430

In this example, the polygons flicker each time a new polygon is added to the collection. It looks like the polygons are drawn solid instead of with an alpha for a split second.

var viewer = new Cesium.Viewer('cesiumContainer');

var dataSource = new Cesium.CustomDataSource('Polygons');
viewer.dataSources.add(dataSource);

var x = 20;
var y = -120;

setInterval(function(){
   x -= 5;
   y += 2; 

    var area = [0 + y, 51 + x, 5 + y, 51 + x, 2.50 + y, 48 + x];
    dataSource.entities.add({
        name: 'test',
        show : true,
        polygon : {
            hierarchy :{
                positions: Cesium.Cartesian3.fromDegreesArray(area)
            },
            material : Cesium.Color.RED.withAlpha(0.5)
        }
    });
}, 1000);

[denverpierce]

I can confirm this on time-dynamic entities as well. If an entity goes from transparent to solid, such as in a time interval property color, there's about one frame where the transparent color is rendered as solid.

[mertkurkcuoglu]

Hi cesium team;
I want to inform you that flickering does not seen in primitive rendering. I tested it for adding several polylines as an entity at first, i encountered flickering problem while moving on any polyline. Then when i switch entity to primitive, flickering problem has been lost.

[hpinkos]

Thanks for the extra information @mertkurkcuoglu!

[jeremywilliams]

Hi cesium team,

I am still experiencing this issue. Whenever I click on a polygon shape the screen flickers. I was wondering if anyone has a workaround or knows of a fix in the works?

[hpinkos]

Hello @jeremywilliams. Can you please post a short Sandcastle example that reproduces the issue you're seeing? Thanks!

[roderickgreen]

We are also experiencing this. Any help would be appreciated. Here is a sandcastle demo. When you click in the scene it adds a new polygon entity and the others flicker.

[hpinkos]

@roderickgreen unfortunately we don't have a workaround for this, and I'm not sure how soon we'll be able to look into fixing it. If you have some extra time to look into it we would gladly take a pull request!

I think the problem is happening in StaticGeometryColorBatch
StaticGeometryColorBatch creates one primitive that has geometry used to draw each polygon entity. When a new polygon entity is added, StaticGeometryColorBatch destroys the old primitive and creates a new one with all previous polygons and the new polygon.
I'm not sure if this is the problem, but to me it looks like for a split second both the old and new primitive are being drawn, and then the old one is removed.

[roderickgreen]

@hpinkos thanks for the pointer. I'm not sure how long it will take for me to get up to speed on the source to try to tackle this but I'll at least give it a shot.

For others, a possible workaround is to group entities in CustomDataSources to control which entities end up in batches for rendering. See this example.

(Edit): I should mention that we are still motivated to fix the underlying problem. Besides potential performance problems with using collections of data sources, we have another use case where we are modifying polygon hierarchies using the mouse and that also causes flicker when the polys are translucent. I don't have a good way to work around that.

[roderickgreen]

FYI I have a fix for this. I need to wait for people to get back from vacation to get the CLA signed, then I'll work to put together a pull request.

[hpinkos]

Thanks @roderickgreen! Looking forward to your contribution =)

[ghost]

Another temporary hack workaround for those waiting for the merge and are seeing this with GroundOverlays in KML:

tick = async () => {
  this.kmlDs = await this.kmlDataSource.load(kmlDocument);
  let rectangle = undefined;
  //find the flickering entity
  for (var entity of this.kmlDs.entities.values) {
    if (entity.rectangle) {
      rectangle = entity;
    }
  }
  rectangle.show = false;
  await this.viewer.dataSources.add(this.kmlDs);
  await this.wait(100);
  rectangle.show = true;
}

wait = ms => new Promise((r)=>setTimeout(r, ms))

[cesium-concierge]

Congratulations on closing the issue! I found these Cesium forum links in the comments above:

https://groups.google.com/forum/?hl=en#!topic/cesium-dev/xKVI49Ux430

If this issue affects any of these threads, please post a comment like the following:

The issue at #3945 has just been closed and may resolve your issue. Look for the change in the next stable release of Cesium or get it now in the master branch on GitHub https://github.com/AnalyticalGraphicsInc/cesium.

---

I am a bot who helps you make Cesium awesome! Contributions to my configuration are welcome.

🌍 🌎 🌏

[thw0rted]

FWIW I just ran into this a few weeks before the fix was released -- my workaround was to make a fixed collection of entities whose dynamic properties were CallbackProperties, with the actual by-the-minute values tracked in a separate object. For example, I had several polygons on the ground represented by a PolylineVolume each. I got flickering when I dynamically added and removed them (several times per second) but buttery smooth performance when I kept a persistent collection of entities each of which dynamically referenced a corresponding array of Positions representing their hierarchy.

I realize the actual flicker is fixed, but if you find yourself running into performance issues dynamically adding and removing, consider testing if the approach I've described helps.