Moving objects with labels and billboards performance problem

CesiumJS
1

Hello there, I love Cesium! If one day I have a baby, I will name her "Cesium". Long story short, here is the explanation:

1. A concise explanation of the problem you're experiencing.
Scenario says user should be able to see icons and the labels on icons together. (at least 6000). The icons are moving with 3 second intervals. FPS drops drastically.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
Created example from "pointPrimitive" example@ cesium blog. Changed it to billboards because each feature should have its own icon. Here is the example:

in case of code cannot be seen, here is the sandcastle code:

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
scene.debugShowFramesPerSecond = true;
var numberOfPoints = 5000;
var gridSize = 360 / Math.sqrt(numberOfPoints);
var bbs = ;
var lbs = ;
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
var labels = scene.primitives.add(new Cesium.LabelCollection());

for (var longitude = -180; longitude < 180; longitude += gridSize) {
    for (var latitude = -90; latitude < 90; latitude += gridSize / 2) {
        var bb = billboards.add({
            imageId : 'billboard point',
            image : '../images/Cesium_Logo_overlay.png',
            position : Cesium.Cartesian3.fromDegrees(longitude, latitude),
        });
        var lb = labels.add({
            position : Cesium.Cartesian3.fromDegrees(longitude, latitude),
            text : longitude+"",
            showBackground : true,
            font : '14px monospace',
            horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            disableDepthTestDistance : Number.POSITIVE_INFINITY
        });

        bbs.push(bb);
        lbs.push(lb);
    }
}

function animate(){
    for(var i = 0; i < bbs.length;i++){
        var x = randomIntFromInterval(-180,180);
        var y = randomIntFromInterval(-90,90);
        var newPos = Cesium.Cartesian3.fromDegrees(x, y);
        bbs[i].position = newPos;
        lbs[i].position = newPos;
    }
    
    setTimeout(function(){
      animate();
    }, 3000);
}

function randomIntFromInterval(min,max){
    return Math.random()*(max-min+1)+min;
}

animate();

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Because planes are moving, not standing still, and each plane has a name to be seen.

4. The Cesium version you're using, your operating system and browser.

Latest one. 1.56.1 I guess.

2

Thanks for the kind words! I’d love to meet little baby Cesium one day.

Are you able to get the performance you need with dynamic points with PointPrimitive as described here? https://cesium.com/blog/2016/03/02/performance-tips-for-points/

If so, I think you might be able to still use textured materials with primitives and get good performance, see the Geometry and Appearances guide:

https://cesium.com/docs/tutorials/geometry-and-appearances/

Alternatively, you could try to represent the planes using simple points when you’re zoomed out far, and only when you zoom in closer do you replace them with billboards. The long term solution would be to add a vector tile format to 3D Tiles (https://github.com/AnalyticalGraphicsInc/3d-tiles/issues/25) which would make it easy to tile and work with massive amounts of this kind of data.