Dealing with Large CZML - Webpage Crashing and Poor Performance

Hi everyone,

I am trying to stream/simulate few thousand points (i.e. ~3000). More or less this (http://apps.agi.com/SatelliteViewer/) is what I am trying to achieve in terms of loading and smoothness of animation and interaction.

I have a large CZML file with all the points and their time-dynamic positions. Each entity (point) has thousands of time-dynamic position values. Sample of my CZML file is posted here (https://cesiumjs.org/forum.html#!msg/cesium-dev/hekkZtC9g-8/J_QfBpXqBwAJ).

From the documentation and forum posts which I have been reading from last few days, I concluded that I should be using standard Entity for the creation of points instead of PointPrimitive as Entity also provides lots of other features and in the back end it also uses PointPrimitiveCollection. So I guess I am safe with this approach?

I am streaming entities using EventSource and adding each of them on arrival into the dataSource. See the following code snippet:

Server Side:

for(var i = 0; i < czml.length; ++i) {
var entity = czml[i];
res.write(“event: czml\n”);
res.write('data: ’ + JSON.stringify(entity) + ‘\n\n’);

}

``

Client Side:

var czmlDataSource = new Cesium.CzmlDataSource();
var czmlEvent= new EventSource(czml-stream-url);

czmlEvent.addEventListener(‘czml’, function(packet) {

czmlDataSource.process(JSON.parse(packet.data));

}, false);

viewer.dataSources.add(czmlDataSource);

``

Sometimes it works (mostly in FireFox) and page doesn’t crash but the performace is really bad (lagging) and sometimes (mostly in Chrome) the web page get crashed.

I have spend hours and hours still unable to find the actual reason. One this is sure that it has to deal with the data I am loading as small number of entities works fine i.e. around 50-60 but when I tries to load more i.e. around 120+, it keeps repeating the same above behavior.

Another thing where I want to highlight is that each entity (point) has thousands of predefined time-dynamic positions. So basically each one has a huge array like this:


“position” : {

“epoch” : “2012-08-04T10:00:00Z”,

“cartographicDegrees” : [

0,some-LNG,some-LAT,1,
1000,some-LNG,some-LAT,1,
1100,some-LNG,some-LAT,1,

81000,some-LNG,some-LAT,1,
]
}

``

What would you recommend to deal with huge array of positions for each entity? If one entity has thousands of positions then thousands of entities will have millions of position values and may be the data structures are unable to store/handle all this huge data and may be that is the reason for webpage crashing?

So (1) issue is the webpage crashing while loading large data and (2) is the performance.

Any kind of inputs are really appreciated. Thanks.

This blog post may be helpful for you: http://cesiumjs.org/2016/03/02/Performance-Tips-for-Points/

-Hannah

Hi Hannah,

Thanks for pointing this out. I already have gone through it but it’s not really helping in terms of performance. I am getting 2FPS which is super bad. I will keep posting as the things will come along.

However, my crashing issue has been resolved by increasing the per tab memory limit set by the browser. Thanks to @Matthew Amato for bringing this up in another post.

So it’s ‘Path’ which is breaking the performance. After removing it from my CZML, FPS has increased to 25 from 5.
This is how my path looked like:

“path”:{
“material”:{
“polylineGlow”:{
“glowPower”:0.1,
“color”:{
“rgba”:[255,255,0,255]
}
}
},
“width”:0.8,
“leadTime”:0,
“trailTime”:70,
“resolution”:600
}

``

and I have around ~2000 moving points. Any suggestion that how should I tweak this so that it doesn’t eat performance?

I am using NVIDIA GeForce GTX 960M intel i7 with 12GB RAM.

Here is the graphics features list:

  • Canvas: Hardware accelerated
  • Flash: Hardware accelerated
  • Flash Stage3D: Hardware accelerated
  • Flash Stage3D Baseline profile: Hardware accelerated
  • Compositing: Hardware accelerated
  • Multiple Raster Threads: Enabled
  • Native GpuMemoryBuffers: Software only. Hardware acceleration disabled
  • Rasterization: Software only. Hardware acceleration disabled
  • Video Decode: Hardware accelerated
  • Video Encode: Hardware accelerated
  • WebGL: Hardware accelerated
    Full report is attached. Does it look fine?

Graphics-Feature-Status.pdf (70.9 KB)

Thanks for providing all of those details. I don’t see any reason why your app would be running slowly.
Sorry I don’t have any suggestions. Hopefully someone else will have an idea

-Hannah

hello,can you send me your czml file?Iwant to learn about it,thanks!