Flashing billboard issue

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

With large number of different coloured billboards in 3D view and where the markers are very close together, I am experiencing a flashing effect where the different coloured markers are almost fighting to be in front of one another whilst the globe is spinning.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer(“cesiumContainer”, {

     mapProjection : new Cesium.WebMercatorProjection(),

timeline: false,

navigationHelpButton: false,

navigationInstructionsInitiallyVisible: false,

homeButton: false,

fullscreenButton: false,

sceneModePicker: false,

baseLayerPicker: false,

animation: false,

selectionIndicator: false,

infoBox: false,

});

// marker

var redMarker = new Cesium.BillboardGraphics();

redMarker.image = new Cesium.ConstantProperty(’/assets/images/red_icon.png’);

redMarker.scale = 0.6;

var greyMarker = new Cesium.BillboardGraphics();

greyMarker.image = new Cesium.ConstantProperty(’/assets/images/grey_icon.png’);

greyMarker.scale = 0.6;

var yellowMarker = new Cesium.BillboardGraphics();

yellowMarker.image = new Cesium.ConstantProperty(’/assets/images/yellow_icon.png’);

yellowMarker.scale = 0.6;

var geojsonSource = new Cesium.GeoJsonDataSource(“geojson”);

geojsonSource.load(activities).then(function(dataSource) {

entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++) {

var entity = entities[i];

entity.point = undefined;

if(entity.properties.event_type._value === “a”) {

entity.billboard = redMarker;

} else if(entity.properties.event_type._value === “b”) {

entity.billboard = greyMarker;

} else if(entity.properties.event_type._value === “c”) {

entity.billboard = yellowMarker;

}

}

viewer.dataSources.add(geojsonSource);

viewer.camera.setView({

destination : Cesium.Cartesian3.fromDegrees(16.1646144968971, 24.185302734375, 11000000.0)

});

});

// auto rotate

function spinGlobe( dynamicRate ){

var previousTime = Date.now();

this.viewer.scene.postRender.addEventListener(spinning = function (scene, time){

var spinRate = dynamicRate;

var currentTime = Date.now();

var delta = ( currentTime - previousTime ) / 1000;

previousTime = currentTime;

this.viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);

});

}

spinGlobe(0.02);

``

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

To have different coloured markers to distinguish between different event types whilst the globe automatically spins to show the breadth of events around the world.

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

Cesium 1.41

Max OSX 10.13.2

Chrome 63

2

Hi Damien,

You can use the Billboard.eyeOffset property to set the “order” of the billboards, and you can change it based on the distance to the camera when you spin the globe if needed.

Also, side note, you don’t need to specify the mapProjection unless you are using 2D or Columbus View modes.

Thanks,

Gabby