Flickery polygon on mouse over

[lilleyse]

There's a bit of flickering when hovering over an entity and changing its color. It's much easier to see when running the demo, the gif only does an ok job.

Git bisect leads to 8ba647b / #7163. @hpinkos could you check this out?

Local example

[hpinkos]

This turned out to be a bug in the sample code, not in Cesium. However, there is a change in behavior for people who had this bug in their code because Cesium was doing something incorrect before that was fixed in #7163.

The reason for the flickering is that the box is being re-created every time you set the material. This was the case before #7163 as well, but we made the mistake of not removing the previous box, so it didn't look like it was flickering because we accidentally had 2 copies of the box being drawn.

To change the color without flickering, you need to use a dynamic property for the color. The example below uses a dynamic CallbackProperty:

var color = Cesium.Color.CORNFLOWERBLUE;
var colorProperty = new Cesium.CallbackProperty(function() {
    return color;
}, false);
var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    box : {
        dimensions : new Cesium.Cartesian3(1000000.0, 1000000.0, 30000.0),
        material : new Cesium.ColorMaterialProperty(colorProperty)
    }
});

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
    var pickedObject = scene.pick(movement.endPosition);
    if (Cesium.defined(pickedObject) && (pickedObject.id === entity)) {
        color = Cesium.Color.YELLOW;
    } else {
        color = Cesium.Color.CORNFLOWERBLUE;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);