Use of Callback Properties Causing Animation Hesitation

In order to represent noise monitors located around airports I have been adding entities that are made up of an ellipsoid and a label. I then use the CallbackProperty/ColorMaterialProperty to adjust:

  • the radius of each ellipsoid
  • the color of each ellipsoid
  • the text of each label
  • the scale of each label
    This allows me to represent noise levels at each noise monitor with the dB level as well as visual indicators of the noise level (color and size of the graphical representation). Here’s a screen shot of the current method:

The problem is that when I use the callback properties to adjust either the size or color of the ellipsoids I get a very noticeable performance hit. There are typically aircraft models flying in the scene along with the noise monitors. When the noise monitors are active the animation of the aircraft models is slowed and begins to lurch. However, if I remove the noise monitors or only update the text in the noise monitors via a callback property (and not the size or color) the animation of the aircraft models is very smooth.

I have used an approach of only adding a label entity to represent the noise monitors. I’m able to adjust the labels’ text, background color and scale using callback properties and still have the aircraft animation be very smooth.

So it seems the issue has to do with using the callback properties to adjust the radius and color of the ellipsoid entities. Here’s a portion of the code I’m using to add and update the ellipsoids and their properties:

Creating the noise monitor entities:

var newObject = cesiumViewer.entities.add({


position: Cesium.Cartesian3.fromDegrees(nm.pos.LON, nm.pos.LAT, nm.pos.ALT),

show: false,

ellipsoid: {

radii: new Cesium.CallbackProperty(nm.updateMonitorSize_Ellipsoid(nm), false),

material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(nm.updateMonitorColor(nm), false)),

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND


label: {

text: new Cesium.CallbackProperty(nm.updateMonitorValue(nm), false),

font: ‘100 72px sans-serif’,

fillColor: Cesium.Color.BLACK,

outlineColor: Cesium.Color.BLACK,

outlineWidth: 1.0,

style: Cesium.LabelStyle.FILL_AND_OUTLINE,

scale: new Cesium.CallbackProperty(nm.updateLabelScale(nm), false),

eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -200.0)



newObject.type = ‘noiseMonitor’;

nm.object = newObject;


Callback function to update size:

// *************************************************************************

NoiseMonitor.prototype.updateMonitorSize_Ellipsoid = function(nm){

return function() {


    try {

        return new Cesium.Cartesian3(nm.radii, nm.radii, 0.1);


    catch (ex) {

        console.log("Error: Returning default monitor size of " + intDefaultNoiseMonitorSize);

        return new Cesium.Cartesian3(intDefaultNoiseMonitorSize, intDefaultNoiseMonitorSize, 0.1);






Callback function to update color:

// *************************************************************************

NoiseMonitor.prototype.updateMonitorColor = function(nm){

return function() {


    try {

        return nm.CesiumColor;


    catch (ex) {

        console.log("Error: Returning monitor color 'none'");

        return new Cesium.Color.fromCssColorString(strNoiseMonitorColor_None).withAlpha(dblDefaultNoiseMonitorColorAlpha);






The actual values for the size and color are calculated elsewhere.

I’ve tried placing my own HTML divs on the globe and updating their text, size and background color. I can produce objects that I really like as far as their appearance goes. And updating their appearance does not degrade overall performance at all. But I run into issues with z-order between them and objects in the scene.

So the questions I have:

  1. Am I doing something wrong that is causing the radius and color adjustments to the ellipoids to result in performance hits?
  2. Is there a better object for accomplishing what I’m trying to do?
  3. Is it possible to modify the entity label background to be a circle or to have rounded corners? (I don’t want to have to modify the Cesium library to do this)
    I wanted to put together a Sandcastle example, but I think it would take a while to put together an example that really demonstrates the issue well. The performance impact doesn’t seem to clearly correlate to CPU. So it would require all the set up to animate aircraft models and update the noise monitors. If an example is absolutely necessary I can think more about how to accomplish that.

Thanks for any assistance in advance! I’d be glad to provide more details if needed.


Sorry, I forgot to add…

Cesium Version: 1.50

OS: Windows 10 Pro - Version 10.0.17134 Build 17134

Browser: Chrome - Version 69.0.3497.100 (Official Build) (64-bit)

Hey Rob,

Thanks for the detailed explanation and write up of the issue. I know I recommended using a CallbackProperty a while back for dynamic properties, but the drawback in this case is all those entities are being updated every frame which starts to get expensive.

If those properties aren’t changing every frame, you might try updating them directly, so something like:

entity.ellipse.material = Cesium.Color.RED;


If they are updating every frame, you might have to go a level deeper and either write a custom appearance or use primitives directly. I believe this performance hit is because the primitives are getting recreated every frame.

But it sounds like they don’t update every frame, so try that directly changing the properties and let me know if that fixes it!

1 Like

Hi Omar,

Thanks for the response! I tried updating the properties directly as you suggested. Updating the ellipsoid radii works fine. But when I try to update the ellipsoid material the ellipsoid is not drawn. No errors… just doesn’t get drawn. If I look at the colors being assigned they look good to me. I’m creating colors using Cesium.Color.fromCssColorString. When I print the colors to the console that the material is being set to I’m getting values like (1, 0.8352941176470589, 0, 1.0). Any idea why this would happen?

To tell you truth I like using just the labels instead of drawing the ellipsoids and labels. But I would like to be able to make the label round or at least round the corners. Is there a practical way to do this?

Thanks for your help,


It’s strange that the ellipsoid disappears when you update it. I’m having a hard time recreating that. So what you’re saying is when you update the material with something like:

entity.ellipse.material = Cesium.Color.fromCssColorString("#FF0000");


That it disappears?

The actual color you’re getting looks correct, I believe the colors are stored as floating point numbers from 0 to 1 as opposed to integers from 0 to 255.

I’m not sure if there’s a better way to get a circle around the labels like that.

It appears that when you are updating the material property directly like this you cannot pass a value containing alpha. If I pass a color value without alpha then the color is applied and the object is displayed.

Thanks for your help. I’d love to be able to shape the label, but I guess that just isn’t possible at this point.

It looks like the labels are just HTML “div” elements added to the scene. I can create my own “div” elements and format them as I like, but I when I add them to the globe I have issues with them appearing above my aircraft models in z-order.

I guess I’ll just go with rectangular labels for now.

Thanks again.