Bug: Animation lag when dealing with SampledPositionProperty in Chrome's incognito mode

CesiumJS
1

1. A concise explanation of the problem you're experiencing.
Apparently this issue seems to be only noticable in Chrome Incognito mode. It works fine in normal chrome browser.

I have a customDatasource that has a method that loads entities dynamically in every 10 seconds based on viewport. It checks for previous entities that has old position and then re-assigns with sampledPositionProperty (two samples: oldPos, newPos). The viewer's clock is also set to the entities start and old time.

After which, when the clock.shouldAnimate is set to true, the entities would move smoothly. However when I pans the map to another location, the animation starts to get very laggy.

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

Incognito mode is for security purposes.

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

Cesium 1.42

2

Hi there,

Could you maybe provide a Sandcastle example to reproduce this? That would help us track down exactly what’s going wrong.

Thanks!

Gabby

3

Hi Gabby,

Thanks for the reply. My mistake, I did a few more troubleshooting and the problem in my app actually exists in both incognito mode and the normal mode.

I've tried sandcastle to replicate the problem and apparently it seems to be working fine...
It may just be my issue, suspected memory leak somewhere but to no avail. Will keep investigate and keep u updated.

Here's a sample of the code.

var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false
});
viewer.clock.startTime = new Cesium.JulianDate();
Cesium.JulianDate.addSeconds(viewer.clock.startTime, 2, viewer.clock.stopTime);
viewer.clock.currentTime = viewer.clock.startTime;
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
viewer.clock.onTick.addEventListener(function(clock){
    if(Cesium.JulianDate.equals(clock.currentTime, clock.stopTime)){
        clock.shouldAnimate = false;
    }
});

var data = ;

function createMultipleBillboards() {
    var rect = viewer.camera.computeViewRectangle();
    generate1000EntitiesData(rect);
    viewer.entities.suspendEvents();
    for (var x = 0; x < data.length; x++) {
        var newPos = Cesium.Cartesian3.fromRadians(data.lon, data.lat);
        
        var entity = viewer.entities.getOrCreateEntity(data.id);
        entity.position = getSampledPosition(entity, newPos, viewer.clock.startTime, viewer.clock.stopTime);
        entity.billboard = {
            image : '../images/facility.gif'
        };
    }
    
    viewer.entities.resumeEvents();
}

function getSampledPosition(entity, newPos, startTime, stopTime){
    var sampledPosProperty = new Cesium.SampledPositionProperty();
    if(Cesium.defined(entity.position)){
        sampledPosProperty.addSample(startTime, entity.position.getValue(stopTime));
        sampledPosProperty.addSample(stopTime, newPos);
        return sampledPosProperty;
    }else{
        return newPos;
    }
}

function playAnimation() {
    viewer.clock.currentTime = viewer.clock.startTime;
    viewer.clock.shouldAnimate = true;
}

function generate1000EntitiesData(rect) {
    data = ;
    for (var x = 0; x < 1000; x++) {
        data.push({
            id: x,
            lon: getRandomInRange(rect.west, rect.east, 3),
            lat: getRandomInRange(rect.south, rect.north, 3),
        });
    }
}

function getRandomInRange(from, to, fixed) {
    return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
    // .toFixed() returns string, so ' * 1' is a trick to convert to number
}

viewer.camera.moveEnd.addEventListener(function () {
    createMultipleBillboards();
    playAnimation();
});

setInterval(function(){
    createMultipleBillboards();
    playAnimation();
}, 5000);