"Persistence-of-render"-like effect with cesium entities?


We’re struggling here with the best way to implement a visual effect that our system has been artificially generating via fake CZML intervals, but that, due to a recent refactor, became very difficult - if not impossible - to generate in such manner.

We’d like that, for entities whose position is not very often updated, have them still remain visible within Cesium for a given minimum amount of time.

Use cases for this are manually-catalogued events, or other entities whose timestamped samples many times includes a single data point (and which, being a single moment, Cesium does not display at all) or whose samples are so much apart in time that we’d rather show them separately as two distinct billboard presentations.

Is there a simple way of configuring / changing / implementing this in Cesium?

Many thanks!

This can be done out of the box today, no hacks or workarounds needed, using SampledPositionProperty and the forwardExtrapolationType and forwardExtrapolationDuration options.Here’s the code for a full example that you can paste into Sandcastle. It assumes a sample coming in after 3 seconds, shows the “ping” and then fades it out over 5 seconds. It should be very straightforward to adapt to whatever you’re needs are. You can also use TimeIntervalCollectionPositionProperty instead depending on your exact use cases are and if you care about fading out versus abrupt disappearance.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var minimumDuration = 5;

var lastUpdateTime = Cesium.JulianDate.addSeconds(Cesium.JulianDate.now(), 3, new Cesium.JulianDate());

var fadeTime = Cesium.JulianDate.addSeconds(lastUpdateTime, minimumDuration, new Cesium.JulianDate());

var position = new Cesium.SampledPositionProperty();

position.addSample(lastUpdateTime, Cesium.Cartesian3.fromDegrees(-75, 34, 0));

position.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;

position.forwardExtrapolationDuration = minimumDuration;

var fancyColor = new Cesium.SampledProperty(Cesium.Color);

fancyColor.addSample(lastUpdateTime, Cesium.Color.YELLOW);

fancyColor.addSample(fadeTime, Cesium.Color.TRANSPARENT);

var ping = {

position : position,

point : {

pixelSize : 10,

color : fancyColor




Hope that helps and let me know if you have any other questions.

Hi Matthew,

Thank you so much! - that was exactly what we needed. It is working now.

The cherry on top of the cake would be to be able to achieve that “fade to transparent” effect on the Color sampled property without injecting specific color sample points (the system is real-time and not mandatorily ordered and injecting fade color data point would mean needing to re-evaluate and re-write the whole color sampled interval for each client). Is that possible? - for example, having a default color property (transparent) and applying something akin to forwardExtrapolationType to HOLD the color value during a piece of data’s validity period?

Many thanks for any help!


I would have to think about it some more, but the best out-of-the-box solution (I think) would be to use a CompositeProperty for the color and add a SampledProperty with start and translucent sampled for each interval as it comes in. There’s no need to recreate/reassign anything, you would just create a new SampledProperty and push a new TimeInterval into CompositeProperty that exists as the Color property.

That being said, it might be easier to write a custom function that does exactly what you want using CallbackProperty for the color.