Cesium Performance Lag Every Second when processing data

Exactly as the title suggests, I have to process data for 5 DataSources (CZML) every second. The Data is positional data totaling approximately 50-100 Cartesian LatLong Points, that are referenced by 10-50 polygons, that represent 2-10 3D shapes.

Sorry thats a mouthful. Every time I process the data (every second), it lags about 100ms (in the beginning, which is okay), and after 5mins 600ms (which is a problem).

I attached a profiler screenshot for reference.

After some initialization I run:

timeInterval = setInterval(processNext, 1000);

This trigger the following function (extraneous bits cut out):

//Process Data into CZML -> from JSON
function processNext() {

  var xhttp4 = new XMLHttpRequest();
  xhttp4.onreadystatechange = function() {
      if (xhttp4.readyState === 4) {

          // Execute two functions upon recieving data
              //add records to relevant data set
          xhttp4.response.forEach(function(element) {
              if (current.data.id === "layer3") {
                  //DS_layer3.process(objects);
              }
              else if (current.data.id === "layer2") {
                  //console.log("layer2");
                  //console.log(current);
                  if (current.data.camera_id === 1) {
                      //console.log(current);
                      convertboxheight(current);
                      bounding_boxes[13].position.cartographicDegrees.push(tempISO, current.data.bounding_boxes[0].v0.x, current.data.bounding_boxes[0].v0.y, current.data.bounding_boxes[0].v0.z);
                      //Do for 8 Vertices

                      if (boxC.count > 50 ){
                           //prevent Cmzl from getting too big and slowing down? -> idk if this actually happens.
                           bounding_boxes[13].position.cartographicDegrees.splice(0, 4);
                           //Also do for 8 Vertices
                      }
                      boxC.count++;
                  }
                  else if (current.data.camera_id === 2) {
                      //console.log(current);
                      //Do same thing as camera 1
                  }
                  DS_layer2.process(bounding_boxes);
              }
              else if (current.data.id === "layer1") {
                  //Process More Data, same format as above
                  DS_layer1.process(camera_data);
              }
          });
          //move timestamp forward --> doing this after adding records
          prevTime.time = prevTime.time + 1000;
      }
  }
  xhttp4.responseType = 'json';
  xhttp4.open("GET", "URLtoAPI" );
}

So is there anyway to optimize this Code or do it in a way that doesn’t take 600ms to Process?

System is HP zBook with Quadro 2000M running on Google Chrome

Hi Alex,

Any reason you can’t load in the new CZML file each time you update? It will replace the existing data.

Cesium.CzmlDataSource.load(czml).then(function(dataSource){

viewer.dataSources.add(dataSource);

}

If you need, loadJson will perform an asynchronous request and prioritize it along with the other requests being made by Cesium.

Thanks,

Gabby

The reason that I don’t want Load is because, I need to interpolate from one piece of data to the next based on time. So i need anywhere from two to five records worth of positional data before getting rid of the data.

At least I assume that I does that.

Also when looking to scale this up is there a way to process data without interrupting the event stack (mainly the animationFire call that makes cesium go). Cuz currently I"m moving a fraction of the data that I need to in the future. And If the JS spends too much time in data processing, its gonna grind Cesium to a halt.