CZML Stream Memory Buildup

CesiumJS
1

1. A concise explanation of the problem you're experiencing.
I am running into a memory problem while updating a czml point.
The memory usage increases in a slow consistent manner after the update function is initiated.
After 15 to 20 minutes of running, the webpage crashes with a webGl error:
"WebGL content is taking too long to render on your GPU. Temporarily switching to software rendering."
Followed by several "CONTEXT_LOST" errors.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

//Example of data (the lat/lon values change with every data update request)
var coorVals = '{"id": "identity", "lat": -50.20, "lon": 38}';

var streamWindow;
var arrayVals = ;

function arrayUpdate(){
  console.log("coorObj: " + coorVals);
  var coorObj = JSON.parse(coorVals);
  var lat = coorObj.lat;
  var lon = coorObj.lon;
  arrayVals.push(lat,lon)
}

function loadCzml(){
      sendMsg("update");
      initialCzmlLoad = formatPoint();
      viewer.dataSources.add(dataSource3.load(initialCzmlLoad));
}

// This is the main function, which is activated and killed via buttons
// The interval is 3 seconds
function liveStreamUpdate(){
      loadCzml();
      streamWindow = window.setInterval(function(){
        sendMsg("update");
        arrayUpdate();
        localObj = formatPointUpdate();
        viewer.dataSources.add(dataSource3.process(localObj));
      }, 3000);
}
  
function formatPointUpdate(){
  var coorObj = JSON.parse(coorVals);
  var lat = coorObj.lat;
  var lon = coorObj.lon;
  var id = coorObj.id;

  var czmlEntity = [{
      "id" : "document",
      "name" : "CZML Point",
      "version" : "1.0"
      }, {
      "id" : id,
      "label" : {
          "text":"Lat: " + lat + "\nLon: " + lon + "\nID: " + id
          //verticalOrigin: Cesium.verticalOrigin.CENTER
      },
      "position" : {
        "cartographicDegrees" : [lat, lon, 500]
      }
  }];
  return(czmlEntity);
}

function formatPoint(){
  console.log("COR: " + coorVals);
  var coorObj = JSON.parse(coorVals);
  var lat = coorObj.lat;
  var lon = coorObj.lon;
  var id = coorObj.id;

  var czmlEntity = [{
      "id" : "document",
      "name" : "CZML Point",
      "version" : "1.0"
      }, {
      "id" : id,
      "name" : "AGI",
      "description" : "",
      "label" : {
          "font" :'11pt Lucida Console',
          "horizontalOrigin" : "LEFT",
          "outlineColor":{
            "rgba":[
              0,0,0,255
            ]
          },
          "pixelOffset": {
            "cartesian2" : [15,0]
          },
          "outlineWidth":1,
          "showBackground":true,
          "backgroundOutline":true,
          "style":"FILL_AND_OUTLINE",
          "text":"Lat: " + lat + "\nLon: " + lon + "\nErr: " + id
      },
      "position" : {
        "cartographicDegrees" : [lat, lon, 500]
      },
      "point": {
        "color": {
          "rgba": [16, 87, 138, 255]
        },
        "outlineColor": {
          "rgba": [255,125,26,255]
        },
        "outlineWidth": 2,
        "pixelSize": 8
      }
  }];
  return(czmlEntity);
}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I am visualizing a flight path in real-ish time with nothing but lat/lon/height. The lat/lon/height values are being retrieved via websockets and a czml update is generated in javascript.

4. The Cesium version you're using, your operating system and browser.
Problem exists across multiple platforms:
Cesium: 1.43
Browser: IE11, Chromium-Browser(Ubuntu 16)
OS: Windows, Ubuntu 16

2

Is there any more information I could post that would help?
I have found a workaround by switching the point and label types to primitives instead of using CZML. The issue still pops up, so it is probably something I am doing, but it now takes 30 hours instead of 15 minutes.

3

Yeah switching to the primitive or even the entity API is better than adding a new data source for each point/label. Are you using a PointPrimitiveCollection and LabelCollection now? Roughly how many primitives are drawn when the program crashes?

4

Right now I am using point and label primitive collections. I've been running some tests, and those are fine regardless of how long I run the program. The problem seems to be coming from the way I am storing the flight path information.
I have two polyline collections that I use to visualize the path the plane has taken. One collection is for more short term values, so if the user just wants to see a small portion of the flight path, that collection is added to the viewer.scene.primitives.
The other collection is for more long term flight information. This is proving to be where I am having trouble. When the array used for the short term polyline reaches a certain length (currently set to 9000), that array set is added to the long term polyline and the short term polyline is cleared. As more array sets are added to the long term polyline collection, my fps drops and my memory usage increases, eventually leading to a webgl crash.
The array is a set of lat/lon/height values.
If there is a better way to continuously update a polyline from an array, or some other method, I would greatly appreciate being pointed at it.
Thank you for your time,
Ube Yout

5

I think you will need to periodically remove old points from the long term polyline collection. It sounds like it is growing unbounded and hitting a memory limit.

6

Thank you for your time and advice, Sean. You have been most helpful.

My current partial solution to the problem removes the long term polyline entirely.
Instead, there is a czml file that is regularly updated by a python script. This czml file is loaded into a czmlDataSource object every x updates and clears the short term polyline.
The upside of this solution is that memory increase over a long period is negligible, and if something happens during runtime, the file is external and can just be reloaded.
The downside is that I have to get a separate server going to host the file and make it available to Cesium, and there is now another moving part in the pipeline.

Thank you for your time,
Ube Yout