Blinking effect for streaming CZML polygons

Our application is processing CZML streams every second. One scenario has a CZML update containing many polygons, triangles to be specific - average 100 polygons. These polygons are updated on every update cycle. The polygons update; however, with each update, there is a blinking effect on those polygons. All 100 polygons have unique identifiers.

Is there a mitigation for this?

Buffer the changes then apply all changes onPreRender

The problem is your are specifying in the CZML that your polygons are static, so Cesium treats them that way on the client and triangulates them asynchronously in a background worker. The correct solution is to specify that your polygons are time-dynamic in the CZML, easiest way would be to wrap them in a CMZL interval for the time that they apply.

Hey Matthew, can you post an example?

Also, if I’m using the Entity API without CZML, how can I specify time-dynamic polygons?

Hello,

See this demo for using interpolation on a Polygon using CZML: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Polygon%20-%20Interpolating%20References.html&label=CZML

For declaring polygons using the Entity API, you can use CallbackProperty on any attribute to make the entity dynamic.

Here is an example of using a CallbackProperty for the box position:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var lon = -114.0;
var callback = function() {
lon += 0.05;
return Cesium.Cartesian3.fromDegrees(lon, 40.0, 300000.0);
};

var blueBox = viewer.entities.add({
name : ‘Blue box’,
position: new Cesium.CallbackProperty(callback, false),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.BLUE
}
});

``

Best,

Hannah

If your data is interval based rather than changing every frame, you can also check out this example: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Polygon%20-%20Intervals,%20Availability.html&label=CZML

And via the Entity API you would use TimeIntervalCollectionProperty instead of CallbackProperty (for intervals, still use Callback for changing every frame).

Thank you both! I will look at both Properties to learn what’s best for my case.

By the way, there’s a small mistake in the documentation of TimeInterval. The code example provided uses misnamed properties

Thanks! I fixed that doc mistake.

-Hannah

Thanks for the information. We decided to not go with a time-based approach some time ago to adapt with legacy services. If the CZML is wrapped in a time interval, I’m curious to know how Cesium mitigates the blinking under the hood - versus static polygons.

For static polygons, is Cesium performing a remove-and-redraw? Thus, causing the blinking.

Yes, the blinking is caused by a remove-redraw. Static geometry is drawn asynchronously using webworkers to avoid unnecessary lag in the application.
To avoid blinking with dynamic polygons, we draw them synchronously. Here is a code example of how to add a polygon synchronously:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;

var positions = Cesium.Cartesian3.fromDegreesArray([
-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0
]);

scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : Cesium.PolygonGeometry.createGeometry(Cesium.PolygonGeometry.fromPositions({
positions : positions,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
})),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
}
}),
appearance : new Cesium.PerInstanceColorAppearance({
closed : true,
translucent : false
}),
asynchronous: false
}));

``

Best,

Hannah

Our data provider was modified to wrap the CZML entities in a time interval - very similar to the “Intervals, Availability” demo on sandcastle. This mitigated the blinking; however, the problem when that is hooked in is the huge decrease in fps. With time-dynamic data, fps is bogged down to 1-3fps without roughly 100 time-dynamic polygon czml.

Was wondering if there should be any settings with the CzmlDataSource.DataSourceClock that needs to be configured or sychronized with Viewer.clock? The CzmlDataSource is initialized with ~30 day time interval - x days in the past, and y days in the future from the current time (below).

{
“id” : “document”,
“name” : “Scenario1”,
“version” : “1.0”,
“clock”: {
“interval”: “2016-02-28T16:00:00Z/2016-03-23T17:00:00Z”,
“currentTime”: “2016-03-21T16:00:00Z”,
“range”:“UNBOUNDED”,
“multiplier”: 1
}
}

``

The browser is receiving czml updates every second and an polygon entity is available for the entire scenario time interval; each polygon position is wrapped in a time interval that can change each second. Is there a performance cap that Cesium can support as far as how many time-dynamic entities can be supported?

Thank you.