Cesium Static Polylines Performance

CesiumJS
1

Hey there,

I'm trying to draw static polylines and i'm getting performance issues.
Started with entities, then moved to PolylineCollection with primitives,
then tried polylineGeometry and then combined instances with polylineGeometry.

The combining of instances realy improved the performance issues but i have a big problem that i need to remove and add polylines in interval, and after adding 1 primitive with the geometryInstances, it can't be change.
That means if you want to add/remove polylines u have to remove the primitive and add a new one with the new geometryInstances - that's a problem.

Here's the code - copy paste to the Cesium Sandcastle.
var viewer = new Cesium.Viewer('cesiumContainer');

var collection = new Cesium.PrimitiveCollection();

for (var lon = -180.0; lon < 180.0; lon += 5.0) {
  for (var lat = -85.0; lat < 85.0; lat += 5.0) {
      var instance = new Cesium.GeometryInstance({
          geometry : new Cesium.PolylineGeometry({
              positions : Cesium.Cartesian3.fromDegreesArray(calcCirclePos(lon, lat)),
              width: 1.0,
              vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT
          }),
          attributes : {
              color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
          }
      });
      
      collection.add(new Cesium.Primitive({
          geometryInstances : instance,
          appearance : new Cesium.PolylineColorAppearance({
              translucent : false
          })
      }));
  }
}

viewer.scene.primitives.add(collection);

function calcCirclePos(x, y) {
    var positions = ;
    
    for(var i = 0; i < 30; i++) {
        var currX = x + 2 * Math.cos(2 * Math.PI * i / 30);
        var currY = y + 2 * Math.sin(2 * Math.PI * i / 30);
        positions.push(currX, currY);
    }
    
    positions.push(positions[0], positions[1]);
    
    return positions;
}

So best performance i succeed to get is primitiveCollecion with polylineGeometry, but still its really bad performance, im getting 15FPS when im zoomed out.

I hope u have solution to my problem, the context that i need static polylines with abillity to add/remove with good performance.

Thank you.

2

Hi there,

Can you provide a few more details about your use case? Optimization will depend on how your data is received. Around how many polylines do you have? Do you know all of the time intervals and geometry up front, or does data only become available on the fly? If all the data is available upfront, then I would trust the Entity API to handle it, since that’s what its designed for. If the data is completely dynamic, depending on how its passed, your app can use some heuristics to determine how lines should be batched. If its this case, are the polylines passed in batches, or one at a time. Please provide as much detail as you can.

Best,

  • Rachel
3

Hey Rachel,

At first thank you for ur answer, i really appreciate it.

The use case is that at the startup of the app, im loading around 10,000 polylines from a REST API, and then i have an interval of 10 seconds that im getting updates from REST API about new/deleted polylines,

The maximum polylines we’re talking about are around 15,000, and the updates are only for deleted or new polylines, i mean that the polylines are static - not changing positions, only add/remove them.

Are you sure about Entity API? im getting really bad performance when we’re talking about this amount of polylines.

And just for case, when i’m saying bad performance i mean the drawing and after that too - after Cesium added the polylines, i’m about 5 to 10 fps.

Hope u have a good optimization for this.

Thank you,

Daniel.

4

Hi there,

Here’s an example using the Entity API which has very reasonable performance: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=1d65725b90d881b4728d69f10bd011e4

Our polylineCollection (the primitive layer) performance definitely has a lot of room for improvement, which we’ll improve when we get around to using dynamic buffers, see the open issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/932

Hope that helps!

  • Rachel