Cesium Performance Lag Every Second when processing data

CesiumJS
1

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

PerformanceCap.PNG
PerformanceCap.PNG1821×645 189 KB

2

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

3

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.