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({
id: nm.id,
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:
- Am I doing something wrong that is causing the radius and color adjustments to the ellipoids to result in performance hits?
- Is there a better object for accomplishing what I’m trying to do?
- 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.
Rob