Help for improvements to my code for dynamic shapes

CesiumJS
1

Hi,

Any help is greatly appreciated~.

I have some billboard images which has multiple shapes associated with it, update rate’s probably about 300samples per 500ms;

I tried to implement the shapes with entities, but the shapes gets visualized later than the image per update if i do not use the CallbackProperty

This ‘lag’ looks confusing as I need to update the positions every 500ms and also produces this " Invalid array buffer length" error after a while.

Using the CallbackProperty on the position property didnt work too well either as the shapes doesn’t get updated at all for my desired update rate.

I tried implementing the shapes with primitives as well. While the shapes and image now updates together, it introduces lag time (probably due to the recreation of primitives).

The viewer becomes unusable on a 500ms update rate as the sample size increases as well.

below’s my code on sandcastle with the entities, feel free to comment~

var viewer = new Cesium.Viewer(‘cesiumContainer’, {sceneMode:Cesium.SceneMode.COLUMBUS_VIEW, timeline : false, animation : false});

var pinBuilder = new Cesium.PinBuilder();

var SAMPLE_SIZE= 300;
var UPDATE_RATE = 500;
var WITH_GRAPHIC = true;

var i =0, areapins=;
var area2 = ;

var ellipseOptions1 = {
semiMajorAxis : 100000,
semiMinorAxis : 100000
};

var ellipseOptions2 = {
material:Cesium.Color.RED.withAlpha(0.8),
semiMajorAxis : 200000,
semiMinorAxis : 200000,
};

var callback = function(){
return this.callbackPosition;
};

Cesium.when(Cesium.GroundPrimitive.initializeTerrainHeights(),function(){
    for(;i<SAMPLE_SIZE; i++){

        var lat = ( (0.5 - Math.random())*90).toFixed(4);
        var lon = ( (0.5 - Math.random())*180).toFixed(4);

        var entityOptions = {
            name : 'Blank blue pin',
            callbackPosition : Cesium.Cartesian3.fromDegrees(lon, lat),
            billboard : {
                image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 28).toDataURL(),
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM
            }
        };

        var entityOptions2;
        if(WITH_GRAPHIC){
            entityOptions.ellipse = ellipseOptions1;

            entityOptions2 =  {};
            entityOptions2.callbackPosition = Cesium.Cartesian3.fromDegrees(lon, lat);
            entityOptions2.ellipse = ellipseOptions2;

        }
       
        var entityInstance1 = viewer.entities.add(entityOptions);
        entityInstance1.position = new Cesium.CallbackProperty(callback.bind(entityInstance1), true);
        areapins.push(entityInstance1);

        if(WITH_GRAPHIC){
            var entityInstance2 = viewer.entities.add(entityOptions2);
            entityInstance2.position = new Cesium.CallbackProperty(callback.bind(entityInstance2), true);
            area2.push(entityInstance2);
        }
    }
});

var running = false;
var randomUpdate = function(){
//viewer.entities.suspendEvents();

var i2 =0, counter2= areapins.length;
for(;i2<counter2; i2++){
    var lat = ( (0.5 - Math.random())*90).toFixed(4);
    var lon = ( (0.5 - Math.random())*180).toFixed(4);
   
    //areapins[i2].position.setCallback(callback.bind(areapins[i2]), false);
    areapins[i2].callbackPosition = Cesium.Cartesian3.fromDegrees(lon, lat);
    areapins[i2].position.setCallback(callback.bind(areapins[i2]), true);
   
    if(WITH_GRAPHIC){
        //area2[i2].position.setCallback(callback.bind(area2[i2]), false);
        area2[i2].callbackPosition = Cesium.Cartesian3.fromDegrees(lon, lat);
        area2[i2].position.setCallback(callback.bind(area2[i2]), true);
    }
}

//viewer.entities.resumeEvents();

};

Sandcastle.addToolbarButton(‘Toggle Interval Updates’, function(){
running = !running;
});

Sandcastle.addToolbarButton(‘Update Positions’, function(){
randomUpdate();
});

setInterval(function(){
if(running){
randomUpdate();
}
}, UPDATE_RATE);

``

2

Hello,

Sorry, I don’t have a good solution for this. In the example you are posting, the ellipses are drawing asynchronously, and that is why they show up on the map after the billboards. However, they draw fairly quickly because they are computed on web workers which means they can be computed simultaneously in different threads. When you force them to draw synchronously it bog down your application because they are all being computed in the main thread, and drawing that many ellipses at once takes a significant amount of time. I think your current solution is your best bet. You can try increasing the granularity to see if that makes the ellipses render more quickly, but past a certain point it will make your ellipses have noticeable straight edges.

Also, I don’t think you need to use a callback property. Since you are setting isConstant: true the callback function is only being called once. You can just set the position property directly instead.

Best,

Hannah

3

okies, thanks Hannah!