Best and most performant implementation of dynamic shapes in cesium -

i working application using cesium viewer. need able display collection of shapes updated dynamically. having trouble understanding best way this.

i using entities , using callbackproperties allow updating of shapes.

you can through sandcastle idea of how doing this. there polygon object being used basis cesiumcallback, , getting edited piece of code. (simulated settimeout)

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 cesium 1 (aka color -> material) var polopts = {};   // function getting location polopts.hierarchy = new cesium.callbackproperty(function() {   var hierarchy = [];   (var = 0; < 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); 

the polygon being passed in class generically describes polygon, has array of coordinates , style options, render method calls method renderpolygon passing in itself. method of rendering shapes works need to, not performant. there 2 cases shapes updating, 1 type of shape updated on long period of time, slow rate once every few seconds. other shapes will updated many times, thousands, in few seconds, not change again long time, if ever.

i had 2 ideas how fix this.

idea 1: have 2 methods, renderdynamicpolygon , renderstaticpolygon. renderdynamicpolygon method above functionality, using cesiumcallbackproperties. used shapes getting updated many times during short time being updated. renderstaticpolygon method replace entities properties using callbackproperties constant values, once updating done.

this creates lot of other work make sure shapes in right state, , doesn't shapes being updated on long period of time.

idea 2: how primitives work, tried removing old entity , adding again updated properties each time need updated, resulted in flickering, , unlike primitives, not find async property entities.

i tried using primitives. worked great polylines, remove old 1 , add new 1 updated properties. using async = false ensure there no flickering. issue ran here not shapes can created using primitives. (is true?)

the other thing tried using geometry instance using geometry , appearance. after going through tutorial on cesium website able render few shapes, , update appearance, found close impossible figure out how update shapes correctly, , have hard time getting them correct. shapes need have right shape, fill color , opacity , stroke color, opacity , weight. tried use polygonoutlinegeometry, had not luck.

what best way implement this? 1 of these options headed right way or there other method of doing have not uncovered yet?

---

[edit] added answer of have gotten, still not complete , looking answers.

i have came pretty solution this, still has 1 small issue.

i made ways of showing entities. calling 1 render , 1 paint. render uses the cesium.callbackproperty isconstant property true, , paint isconstantproperty false.

then created function change entity render paint , vice vera. goes through entities callback properties uses setcallback property overwrite property correct function , isconstant value.

example: create ellipse based on circle object have defined.

// isconst true if being "painted" , false if being "rendered" ellipse: lenz.util.extend(this._getstyleoptions(circle), {   semiminoraxis: new cesium.callbackproperty(     this._getradius.bind(this, circle),     isconst   ),   semimajoraxis: new cesium.callbackproperty(     this._getradius.bind(this, circle),     isconst   ), }) 

so when shape being updated (while user drawing shape) shape rendered isconstant being false. when drawing complete converted painted version using code this:

existingentity.ellipse.semiminoraxis.setcallback(   this._getradius.bind(this, circle),   isconst );                             existingentity.ellipse.semimajoraxis.setcallback(   this._getradius.bind(this, circle, 1),   isconst ); 

this works great performance wise. able draw hundreds of shapes without frame dropping @ all. have attached screen shot of cesium map 612 entities before , after changes, frame rate in upper right using chrome render tool.

before: locked @ fps 0.9 note: redacted rest of ui, witch makes globe cut off, sorry

and after changes: fps remains @ 59.9, perfect!

whenever entity 'converted' using constant not constant callback properties, , other entities of same type flash off on again. cannot find better way conversion. feel thought there must still thing missing.