I am trying to put thousands of points on a Cesium map and running into problems with Firefox crashing. I am required to use Firefox. The map seems to be able to display 15,000 points (as images). However, it is also almost unusable. Zooming and panning have huge delays and eventually crash. Does anyone know how many points the limit should be? Also, is there a better way to display these points then the way I am doing it? I really hope it's me and not Cesium. I heard that creating czml and then passing it in is slower so I have the following javascript test:

function test(){
  for (var i=0; i<15000; i++){
     tempLat +=1;
     tempLon +=1;
     if(tempLat>90){
      tempLat=0;
      tempLon=0;
     }
     addBillboard(scene, ellipsoid, tempLat,tempLon);
  }
}

 //this is from the sandcastle examples for cesium. 
 function addBillboard(scene, ellipsoid,tempLat,tempLon) {
    var primitives = scene.primitives;
    var image = new Image();
    image.onload = function() {
        var billboards = new Cesium.BillboardCollection();
        var textureAtlas = scene.context.createTextureAtlas({image : image});
        billboards.textureAtlas = textureAtlas;
        billboard = billboards.add({
            position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(tempLat, tempLon)),
            imageIndex : 0
        });
        primitives.add(billboards);
    };
    image.src = '../images/Cesium_Logo_overlay.png';
}

I am trying to put thousands of points on a Cesium map and running into problems with Firefox crashing. I am required to use Firefox. The map seems to be able to display 15,000 points (as images). However, it is also almost unusable. Zooming and panning have huge delays and eventually crash. Does anyone know how many points the limit should be? Also, is there a better way to display these points then the way I am doing it? I really hope it's me and not Cesium. I heard that creating czml and then passing it in is slower so I have the following javascript test:

function test(){
  for (var i=0; i<15000; i++){
     tempLat +=1;
     tempLon +=1;
     if(tempLat>90){
      tempLat=0;
      tempLon=0;
     }
     addBillboard(scene, ellipsoid, tempLat,tempLon);
  }
}

 //this is from the sandcastle examples for cesium. 
 function addBillboard(scene, ellipsoid,tempLat,tempLon) {
    var primitives = scene.primitives;
    var image = new Image();
    image.onload = function() {
        var billboards = new Cesium.BillboardCollection();
        var textureAtlas = scene.context.createTextureAtlas({image : image});
        billboards.textureAtlas = textureAtlas;
        billboard = billboards.add({
            position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(tempLat, tempLon)),
            imageIndex : 0
        });
        primitives.add(billboards);
    };
    image.src = '../images/Cesium_Logo_overlay.png';
}

• javascript
• dictionary
• cesiumjs

1 Answer 1

Your code is creating 15,000 BillboardCollection primitives, each with one Billboard each. You will have much better performance if you create one BillboardCollection and add 15,000 Billboards to that collection.

Here's a working example you can use with the b28 release. Paste this into the b28 Sandcastle: http://cesiumjs/releases/b28/Apps/Sandcastle/index.html?src=Billboards.html&label=Showcases

Note that some of these APIs will be changing in the uping release. Always check CHANGES.md for a list of breaking changes.

require(['Cesium'], function(Cesium) {
    "use strict";

    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    var primitives = scene.primitives;
    var ellipsoid = viewer.scene.globe.ellipsoid;

    var billboards = new Cesium.BillboardCollection();

    var image = new Image();
    image.onload = function() {
        var textureAtlas = scene.createTextureAtlas({image : image});
        billboards.textureAtlas = textureAtlas;
        primitives.add(billboards);
    };
    image.src = '../images/Cesium_Logo_overlay.png';

    function addBillboard(tempLat, tempLon) {
        billboards.add({
            position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(tempLat, tempLon)),
            imageIndex : 0
        });
    }

    var tempLat = 0;
    var tempLon = 0;
    for (var i = 0; i < 15000; i++){
        tempLat += 1;
        tempLon += 1;
        if (tempLat > 90){
            tempLat = 0;
            tempLon = 0;
        }
        addBillboard(tempLat, tempLon);
    }

    Sandcastle.finishedLoading();
});