title: Best and most performant implementation of dynamic shapes in cesium
body: <p>I am currently working an application that is using a Cesium Viewer. I need to be able to display a collection of shapes that will be updated dynamically. I am having trouble understanding the best way to do this.</p>
  
  <p>I currently am using Entities and using CallbackProperties to allow for the updating of shapes. </p>
  
  <p>You can through this into a sandcastle to get an idea of how I am doing this. There is a polygon object that is being used as the basis for the cesiumCallback, and it is getting edited by another piece of code. (simulated with the setTimeout)</p>
  
  <pre><code>var viewer = new Cesium.Viewer('cesiumContainer', {});
  
  var polygon = {};
  polygon.coordinates = [
      {longitude: 0, latitude: 0, altitude: 0},
      {longitude: 10, latitude: 10, altitude: 0},
      {longitude: 10, latitude: 0, altitude: 0}
  ];
  
  
  // converts generic style options to cesium one (aka color -&gt; material)
  var polOpts = {};
  
   // function for getting location
  polOpts.hierarchy = new Cesium.CallbackProperty(function() {
    var hierarchy = [];
    for (var i = 0; i &lt; polygon.coordinates.length; i++) {
         var coordinate = polygon.coordinates[i];
         hierarchy.push(Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, coordinate.altitude));
    }
    return hierarchy;
  }, false);
  
  viewer.entities.add({polygon: polOpts});
  
  setInterval(function(polygon){
         polygon.coordinates[0].longitude--;
  }.bind(this, polygon), 1000);
  </code></pre>
  
  <p>The polygon being passed in is a class that generically describes a polygon, so it has an array of coordinates and style options, as well as a render method that calls this method renderPolygon passing in itself.
  This method of rendering shapes works for everything I need it to, but it is not very performant. There are two cases for shapes updating, one type of shape will be updated over a long period of time, as a slow rate like once every few seconds. The other is shapes that will will get updated many times, like thousands, in a few seconds, then not change again for a long time, if ever. </p>
  
  <p>I had two ideas for how to fix this.</p>
  
  <p>Idea 1: 
  Have two methods, a renderDynamicPolygon and a renderStaticPolygon.
  The renderDynamicPolygon method would do the above functionality, using the cesiumCallbackProperties. This would be used for shapes that are getting updated many times during the short time they are being updated.
  The renderStaticPolygon method would replace the entities properties that are using callbackProperties with constant values, once the updating is done. </p>
  
  <p>This creates a lot of other work to make sure shapes are in the right state, and doesn't help the shapes that are being updated slowly over a long period of time.</p>
  
  <p>Idea 2: 
  Similarly to how the primitives work, I tried removing the old entity and adding it again with its updated properties each time its need to be updated, but this resulted in flickering, and unlike primitives, i could not find a async property for entities.</p>
  
  <p>I also tried using primitives. It worked great for polylines, I would simply remove the old one and add a new one with the updated properties. I was also using the async = false to ensure there was no flickering. This issue I ran into here was not all shapes can be created using primitives. (Is this true?)</p>
  
  <p>The other thing I tried was using the geometry instance using the geometry and appearance. After going through the tutorial on the cesium website I was able to render a few shapes, and could update the appearance, but found it close to impossible to figure out how to update the shapes correctly, and also have a very hard time getting them to look correct. Shapes need to have the right shape, a fill color and opacity and a stroke color, opacity and weight.  I tried to use the polygonOutlineGeometry, but had not luck.</p>
  
  <p>What would be the best way to implement this? Are one of these options headed the right way or is there some other method of doing this I have not uncovered yet? </p>
  
  <hr>
  
  <p>[Edit] I added an answer of where I have gotten, but still not complete and looking for answers. </p>