How to fix flicker upon updating position of an entity?

CesiumJS
3

Thank you for the response Marco I appreciate you taking the time to look into this for me.

I did some more googling and saw that other people have what appears to be the same tracking-flicker bug except they get it when loading data from a czml, here is an issue from 2016 Weird interaction between CzmlDataSource.process and tracked entity · Issue #4647 · CesiumGS/cesium · GitHub Though they never found a solution.

I also tried using callback on the model position and it does not seem to work either.

After more research I believe I understand the issue more. When updating the position of a polyline, cesium seems to remove and then add the polyline back with the new positions, and the creation of this polyline is blocking the camera position update, so it only gets updated after the polyline is finished drawing. This would explain why the polyline doesn’t flicker only the model.

Once I understood this I was able to find a workaround, but it is very hacky. Here is the cesium sandcastle but I will also highlight what I did here for convenience. Basically I create the perpendicular line at the new point in advance, wait about 60ms and then jump the model to the next point, and then I wait another 10ms to remove the old line. This works in my browser if it doesn’t work in yours then you may need to increase the delays (which is why this workaround is still less than ideal).

let currentIndex = 0;
let entityIdCounter = 0; // Counter to be appended to entity ID

function updatePoint() {
    currentIndex = (currentIndex + 1) % positions.length;
    const currentPosition = positions[currentIndex];

    const perpendicularPoint = calculatePerpendicularPoint(currentPosition);
    
    // Increment the entity ID counter for a unique ID
    const movingLineEntityId = `movingLineEntity_${entityIdCounter++}`;

    // Create a new moving line entity with the incremented ID
    const movingLineEntity = viewer.entities.add({
        id: movingLineEntityId, // Assign a unique ID
        polyline: {
            positions: [currentPosition, perpendicularPoint],
            width: 3,
            material: Cesium.Color.BLUE
        }
    });

    // Update the model's position after a short delay
    setTimeout(() => {
        modelEntity.position = currentPosition;
    }, 60); // Delay for 60ms to avoid blocking

    // Remove the previous moving line entity that was left behind
    const previousMovingLineEntityId = `movingLineEntity_${entityIdCounter - 2}`;
    if (viewer.entities.getById(previousMovingLineEntityId)) {
        setTimeout(() => {
            viewer.entities.removeById(previousMovingLineEntityId); // Remove by ID
        }, 70); // Delay with a buffer of 10ms, doesn't take as long but still needs it
    }
}

// Use setInterval to move the model to the next position every second.
setInterval(updatePoint, 1000);

The creation of the Polyline appears to only block the camera position update, not the update of anything else in the view, which would explain why the flicker only happens when tracking.

Next, I will try offsetting the polyline updates and the model position updates so that they never happen at the same time, I hope that will be a better way to workaround the issue.