Performance issues with entity animation

CesiumJS
1

Hey guys,

We're working on a university project where we are developing a satellite orbit viewer, which has to display the satellites' footprints.

Currently we're using JavaScript's setInterval function to update the footprint's position whenever the satellite moves. We've implemented it as follows:

Here is how the footprint entity is created:
var currentAreaOnEarth =
{
   position: Cesium.Cartesian3.fromDegrees(satPosition[0], satPosition[1]),
   ellipse: {
      semiMinorAxis: 250 * footprint,
      semiMajorAxis: 250 * footprint,
      outline: true,
      outlineColor: Cesium.Color.RED,
      outlineWidth: 4,
      material: stripeMaterial
   }
}

Here is were the setInterval for animation is configured:
function animate() {
  Satellites.animateCurrentAreaOnEarth(cesiumViewer);
  Satellites.updateSatelliteInformation(cesiumViewer);
};
setInterval(animate, 150);

This is the function that does the updating of the entity's position at each interval:
animateCurrentAreaOnEarth: function (cesiumViewer)
{
  for (var i = 0; i < this.arrayOfSatellites.length; ++i)
  {
     if(this.satelliteFootprints[i].show == true)
     {
  var satPosition = this.showSatellitePosition(cesiumViewer, i);
  this.satelliteFootprints[i].position = Cesium.Cartesian3.fromDegrees(satPosition[0], satPosition[1]);
     }
  }
}

The problem we are experiencing is that with many satellites the setInterval method causes a large performance hit. We were wondering if you could help us with how to animate these footprints similar to how the satellite entities are animated, or a way to attach these footprints to the satellite entities so that they move with the satellites themselves.

Thank you for any help you can provide us!

2

Hello,

I think this is because your ellipses are being computed asynchronously in a web worker. This is because the entity collection thinks the ellipse is going to be static since it has all static properties. To get around this, we can use a CallbackProperty for the positions argument to let the entity collection know it is going to be changing. See the example below:

var currentAreaOnEarth =

{
position: new Cesium.CallbackProperty(getEllipsePosition, false),
ellipse: {
semiMinorAxis: 250 * footprint,
semiMajorAxis: 250 * footprint,
outline: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 4,
material: stripeMaterial
}
}

function getEllipsePosition() {
return Cesium.Cartesian3.fromDegrees(satPosition[0], satPosition[1]);
}

``

Best,

Hannah

3

Hi Hannah,

That solved the problem, thank you so much for the help!