show/hide Entity causes material update problem

[dhonaker]

After you hide and then show an entity, the first time you try to update the entity's color it doesn't work. If you try a second time it works. I've attached some code below to demonstrate the issue. First, click the "Hide / Show Polygon" button to hide and then show the polygon. Then click the "Set polygon to blue" button, the first time will not work, the second time will.

function onLoad(){
    //create the cesium viewer
    var me = this;

    this.viewer = new Cesium.Viewer('cesiumContainer', {
        //animation : false, //temp set to false until mode feature created
        //timeline : false,  //temp set to false until mode feature created
        selectionIndicator : false,
        infoBox : false,
        navigationHelpButton : false,
        navigationInstructionsInitiallyVisible : false,
        contextOptions: {
            webgl: {preserveDrawingBuffer:true}
        }
    });

    this.entity = new Cesium.Entity({
        polygon : {
            hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([-107.0, 27.0,
                -107.0, 22.0,
                -102.0, 23.0,
                -97.0, 21.0,
                -97.0, 25.0])),
            outline : true,
            outlineColor : Cesium.Color.WHITE,
            outlineWidth : 4
        }
    });
    me.viewer.entities.add(this.entity);

    //Get the viewer toolbar and add some buttons
    var toolbar = document.getElementsByClassName("cesium-viewer-toolbar");
    //Insert the drawing tools

    //_createPolygonButton
    this._setPolygonToBlue = document.createElement("button");
    this._setPolygonToBlue.type = "button";
    this._setPolygonToBlue.title = "Set polygon to blue";
    this._setPolygonToBlue.content = "Set polygon to blue";
    this._setPolygonToBlue.className = "cesium-button cesium-toolbar-button";
    this._setPolygonToBlue.onclick = function () {
        me.entity.polygon.material = Cesium.Color.BLUE;
    };
    toolbar[0].insertBefore(this._setPolygonToBlue, toolbar[0].children[1]);


    this._showHidePolygonButton= document.createElement("button");
    this._showHidePolygonButton.type = "button";
    this._showHidePolygonButton.title = "Hide / Show Polygon";
    this._showHidePolygonButton.className = "cesium-button cesium-toolbar-button";
    this._showHidePolygonButton.onclick = function () {
        me.entity.show = !me.entity.show;
    };
    toolbar[0].insertBefore(this._showHidePolygonButton, toolbar[0].children[1]);

}

[hpinkos]

Still a problem in 1.16

Updated sandcastle example:

var viewer = new Cesium.Viewer('cesiumContainer');

var entity = new Cesium.Entity({
    polygon : {
        hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([-107.0, 27.0,
            -107.0, 22.0,
            -102.0, 23.0,
            -97.0, 21.0,
            -97.0, 25.0])),
        outline : true,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 4
    }
});
viewer.entities.add(entity);

Sandcastle.addToolbarButton('Show/Hide', function() {
    entity.show = !entity.show;
});

Sandcastle.addToolbarButton('Blue', function() {
    entity.polygon.material = Cesium.Color.BLUE;
});

• Click Show/Hide button twice to hide then show the polygon
• Click Blue button - polygon does not turn blue
• Click Blue button again - polygon turns blue

[hpinkos]

This appears to be fixed

[wizardlyluke]

This is still an issue for polygons that have an extrusion. Tested with 1.35.

var viewer = new Cesium.Viewer('cesiumContainer');

var entity = new Cesium.Entity({
    polygon : {
        hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([-107.0, 27.0,
            -107.0, 22.0,
            -102.0, 23.0,
            -97.0, 21.0,
            -97.0, 25.0])),
        outline : true,
        extrudedHeight: 50000,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 4
    }
});
viewer.entities.add(entity);

Sandcastle.addToolbarButton('Show/Hide', function() {
    entity.show = !entity.show;
});

Sandcastle.addToolbarButton('Blue', function() {
    entity.polygon.material = Cesium.Color.BLUE;
});

[hpinkos]

Thanks for the update @lucas-gedak !

[cguldner]

Would also like to mention that this is still a problem. I will note that if I go to the console and type entity.polygon.show = true, for some reason if I type this twice, then the background of the polygon shows.

[cmcleese]

Does anyone have a suggested work around for this?
I can confirm that this is still and issue and is in my use case.

Furthermore, could this be related to this issue reported here:
#3061
I dont think it should be closed either.

[hpinkos]

@cmcleese here is a workaround that works for me:

    entity.polygon.material = Cesium.Color.BLUE;
    var removeEvent = viewer.scene.postRender.addEventListener(function() {
        entity.polygon.material = Cesium.Color.BLUE;
        removeEvent();
    });

I don't think this is related to #3061. If you are seeing the crash in #3061 please post sample code in that issue to reproduce it and I'll reopen it. Thanks!

[cmcleese]

The following below does not update the polygon material color:

var viewer = new Cesium.Viewer('cesiumContainer');

var entity = new Cesium.Entity({
    show: true,
    polygon : {
        hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([-107.0, 27.0,
            -107.0, 22.0,
            -102.0, 23.0,
            -97.0, 21.0,
            -97.0, 25.0])),
        extrudedHeight: 50000,
        outlineColor : Cesium.Color.WHITE,
    }
});
viewer.entities.add(entity);

// timeout 1
setTimeout(function(){
    entity.show = false;
},1500);

// timeout 2
setTimeout(function(){
    entity.show = true;
    entity.polygon.material = Cesium.Color.PINK;
},2500);

@hpinkos After using your work around, it does work.
A initial render event needs to be called so attempting to set the color twice is needed.

// timeout 2
setTimeout(function(){
    entity.show = true;
    entity.polygon.material = Cesium.Color.PINK;
    var removeEvent = viewer.scene.postRender.addEventListener(function() {
        entity.polygon.material = Cesium.Color.PINK;
        removeEvent();
    });
},2500);

[hpinkos]

See #5371 for an example with polylines, and a few times this was reported on the forum

[hpinkos]

@cguldner @cmcleese this issue has been fixed and will be included in the Cesium 1.48 release available August 1st. Thanks!