Model coloring is applied globally to all the models

[szsolt]

While testing the sandcastle model coloring example found a tiny but annoying bug. When there are multiple models and colors are applied to them, all of them will have the same color.

Modified the sandcastle example to demonstrate it:

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true
});

var entity;

function getColorBlendMode(colorBlendMode) {
    return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
}

function getColor(colorName, alpha) {
    var color = Cesium.Color[colorName.toUpperCase()];
    return Cesium.Color.fromAlpha(color, parseFloat(alpha));
}

// The viewModel tracks the state of our mini application.
var viewModel = {
    color : 'Red',
    colors : ['White', 'Red', 'Green', 'Blue', 'Yellow', 'Gray'],
    alpha : 1.0,
    colorBlendMode : 'Highlight',
    colorBlendModes : ['Highlight', 'Replace', 'Mix'],
    colorBlendAmount : 0.5,
    colorBlendAmountEnabled : false,
    silhouetteColor : 'Red',
    silhouetteColors : ['Red', 'Green', 'Blue', 'Yellow', 'Gray'],
    silhouetteAlpha : 1.0,
    silhouetteSize : 2.0
};

// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'color').subscribe(
    function(newValue) {
        entity.model.color = getColor(newValue, viewModel.alpha);
    }
);

Cesium.knockout.getObservable(viewModel, 'alpha').subscribe(
    function(newValue) {
        entity.model.color = getColor(viewModel.color, newValue);
    }
);

Cesium.knockout.getObservable(viewModel, 'colorBlendMode').subscribe(
    function(newValue) {
        var colorBlendMode = getColorBlendMode(newValue);
        entity.model.colorBlendMode = colorBlendMode;
        viewModel.colorBlendAmountEnabled = (colorBlendMode === Cesium.ColorBlendMode.MIX);
    }
);

Cesium.knockout.getObservable(viewModel, 'colorBlendAmount').subscribe(
    function(newValue) {
        entity.model.colorBlendAmount = parseFloat(newValue);
    }
);

Cesium.knockout.getObservable(viewModel, 'silhouetteColor').subscribe(
    function(newValue) {
        entity.model.silhouetteColor = getColor(newValue, viewModel.silhouetteAlpha);
    }
);

Cesium.knockout.getObservable(viewModel, 'silhouetteAlpha').subscribe(
    function(newValue) {
        entity.model.silhouetteColor = getColor(viewModel.silhouetteColor, newValue);
    }
);

Cesium.knockout.getObservable(viewModel, 'silhouetteSize').subscribe(
    function(newValue) {
        entity.model.silhouetteSize = parseFloat(newValue);
    }
);

function createModel(url, height) {
//    viewer.entities.removeAll();

    var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
    var heading = Cesium.Math.toRadians(135);
    var pitch = 0;
    var roll = 0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

    entity = viewer.entities.add({
        name : url,
        position : position,
        orientation : orientation,
        model : {
            uri : url,
            minimumPixelSize : 128,
            maximumScale : 20000,
            color : getColor(viewModel.color, viewModel.alpha),
            colorBlendMode : getColorBlendMode(viewModel.colorBlendMode),
            colorBlendAmount : parseFloat(viewModel.colorBlendAmount),
            silhouetteColor : getColor(viewModel.silhouetteColor, viewModel.silhouetteAlpha),
            silhouetteSize : parseFloat(viewModel.silhouetteSize)
        }
    });
    viewer.trackedEntity = entity;
}

function createModel2(url, height) {
//    viewer.entities.removeAll();

    var position = Cesium.Cartesian3.fromDegrees(-123.0774619, 44.0503706, height);
    var heading = Cesium.Math.toRadians(135);
    var pitch = 0;
    var roll = 0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

    entity = viewer.entities.add({
        name : url,
        position : position,
        orientation : orientation,
        model : {
            uri : url,
            minimumPixelSize : 128,
            maximumScale : 20000,
            color : Cesium.Color.GREEN,
            silhouetteColor: Cesium.Color.BLUE,
            silhouetteSize: 5.0
        }
    });
    viewer.trackedEntity = entity;
}

createModel2('../../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);

var options = [{
    text : 'Aircraft',
    onselect : function() {
        createModel('../../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
    }
}, {
    text : 'Ground vehicle',
    onselect : function() {
        createModel('../../SampleData/models/CesiumGround/Cesium_Ground.glb', 0);
    }
}, {
    text : 'Hot Air Balloon',
    onselect : function() {
        createModel('../../SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);
    }
}, {
    text : 'Milk truck',
    onselect : function() {
        createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);
    }
}, {
    text : 'Skinned character',
    onselect : function() {
        createModel('../../SampleData/models/CesiumMan/Cesium_Man.glb', 0);
    }
}];

Sandcastle.addToolbarMenu(options);

Sandcastle.addToggleButton('Shadows', viewer.shadows, function(checked) {
    viewer.shadows = checked;
});

The color of the two initial planes should be different, one green and one red, however both are red.
Changing the color from the drop down will change the color of both models.

The silhouette color is applied correctly.

Thank you guys for your great work!

[pjcozzi]

Thanks for the report, @szsolt. Good catch!

Thanks for the fix too.

Smaller code example:

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

function createModel(url, height, color) {
    var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
    var heading = Cesium.Math.toRadians(135);
    var pitch = 0;
    var roll = 0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

    var entity = viewer.entities.add({
        name : url,
        position : position,
        orientation : orientation,
        model : {
            uri : url,
            minimumPixelSize : 128,
            maximumScale : 20000
        }
    });
    entity.model.color = color;
    viewer.trackedEntity = entity;
}

createModel('../../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0, Cesium.Color.RED);
createModel('../../SampleData/models/CesiumGround/Cesium_Ground.glb', 4990.0, Cesium.Color.BLUE);

[hpinkos]

Also reported here: https://groups.google.com/d/msg/cesium-dev/pLiUh6f7MEI/mbJUyI_oBAAJ

[pjcozzi]

Fixed in #4798