Display lag with large number of objects

Hello all,

I am working on a project dealing with sensor data. In my backend everything is stored in a database which is getting polled by a controller and converted into kml to display on the cesium globe. This poll happens every 5-10 seconds and contains around 4000-8000 objects (we store up to 1 minute worth of data so we are looking at somewhere like 20k - 50k points). Following this I have an update function which slowly fades the markers out which updates every 5 seconds.

To load the kml on the map I use the following function:
var dataSource = new Cesium.KmlDataSource();
               dataSource.load('link').then(function(value){
viewer.dataSources.add(dataSource);
});

On the update color function I am iterating over all of the objects and updating them like so:

newColor being the current color of the object. var colorUpdate = Cesium.Color.fromAlpha(newColor, .4); dataSource.entities.values[i].billboard.color = colorUpdate;

When I do and add or color update I see a large amount of lag and was curious if there was anything you would suggest to fix this? Generally I get a freeze up for a few seconds. After 60 seconds of the data being on the map it gets removed like so:
                  dataSource.entities.remove(dataSource.entities.values[i]);

Sorry the code is messed up here it is more formatted

Add new objects:
var dataSource = new Cesium.KmlDataSource();
dataSource.load('link').then(function(value);
viewer.dataSources.add(dataSource);
});

Update color:
var colorUpdate = Cesium.Color.fromAlpha(newColor, .4);
dataSource.entities.values[i].billboard.color = colorUpdate;

Remove:
dataSource.entities.remove(dataSource.entities.values[i]);

Hi there,

The best way to optimize the update is to use the entity system rather than updating the values yourself. To summarize all data that’s read into Cesium is represented as an Entity object, and all an object’s attributes are stored as Property object, which defines how the values change over time. Cesium is designed and optimized for the Entity / Property system, so using those will help your performance.

Here are some code examples: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=590dad7822024c22dc3333ae7bf75b86

We have a tutorial on this subject coming out in about a week, so hang in there if you need more help.

Hope that helps,

  • Rachel

When using the load

var dataSource = new Cesium.KmlDataSource();
dataSource.load('link').then(function(value);
viewer.dataSources.add(dataSource);
});

This is creating a datasource which contains an entity collection. I looked at your example, which and is there a way to use kmldatasource and add Reference Properties to the entire collection, without iterating over all of them to add the reference property? Since I am not creating each individual marker and adding them in I still need some guidance as that is how the example above shows it being done.

For example I saw
Cesium.ReferenceProperty.fromString(targetCollection, referenceString)
does that just reset everything in that collection to have that reference string property?

Chris

Hi Chris,

In order to use the Entity API, you will have to iterate over your entities and add a Property for material, or whatever you need to update whenever you add a new object to your scene. Fortunately that shouldn’t be too difficult – check out this example which loads a datasource then applies custom styling to each entity. Your use case should be similar, but you’ll be defining a TimeIntervalCollectionProperty: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=DataSources

For an example of how to use the TimeIntervalCollectionProperty (which is what you need if I undertand correctly), see the gist example I posted previously here.

Hope that helps,

  • Rachel

Rachel - I guess my major question is will this improve performance? It seems as if I maybe now be fixing the ability to update colors more efficiently; however, I'm now pushing all of the stress on to the update function? So instead of seeing the lag on my color update I'm going to see it every time I poll for new data and have to add it in the map? I could be wrong I am just curious about your thoughts on that. Remember I am adding 5k-6k objects every few seconds.

Also I found point primitive collections and I've found I have minimal lag on a color update there; however they lack the ability to use time intervals? Would these not be a good option to use?

Hi there,

Can you share your update function as a sandcastle gist? It really depends on what you’re trying to do.

Best,

  • Rachel