Blending colours

[Juan Friss]

1. A concise explanation of the problem you're experiencing.

I am trying to blend colors, in particular I would like some type of effect as "lighten" in canvas 2d (using webGL blendEquation and blendFunction).

I am running the following example in sandcastle, but changing the appearance doesn't seem to change the way colors blend.

Am I making some mistake assigning the blendEquation and blendFunction? Or it just doesn't work the way I think it does? 

Thank you!

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

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

var appearance = new Cesium.PerInstanceColorAppearance({

    flat: true,

    renderState: {

        blending: {

            enabled: true,

            equationRgb: Cesium.BlendEquation.MIN,

            equationAlpha: Cesium.BlendEquation.MIN,

            functionSourceRgb: Cesium.BlendFunction.ONE,

            functionSourceAlpha: Cesium.BlendFunction.ONE,

            functionDestinationRgb: Cesium.BlendFunction.ZERO,

            functionDestinationAlpha: Cesium.BlendFunction.ZERO

        }

    },

});

var counter = 10;

for (var i = 0; i < counter; i++) {

    for (var j = 0; j < counter; j++) {

        viewer.scene.primitives.add(

            new Cesium.Primitive({

                geometryInstances: new Cesium.GeometryInstance({

                    geometry: new Cesium.RectangleGeometry({

                        rectangle: Cesium.Rectangle.fromDegrees(-55 +i, -33 +i, -54 +  2*i, -32 +  2*i)

                    }),

                    attributes: {

                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(i/counter, j/counter, 0.8, 0.99))

                    }

                }),

                appearance: appearance

            })

        );

    }

}

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

My final goal is to render a heatmap.

[Sean Lilley]

I think it's because the independent translucency algorithm that Cesium uses needs to override the blend state.

A couple things to try would be to disable OIT with:

var viewer = new Cesium.Viewer('cesiumContainer', {

    orderIndependentTranslucency : false

});

Or if you are able, set the appearance translucency to false. It is true by default.

var appearance = new Cesium.PerInstanceColorAppearance({

    flat: true,

    translucent: false,

    renderState: {

        blending: {

            enabled: true,

            equationRgb: Cesium.BlendEquation.MIN,

            equationAlpha: Cesium.BlendEquation.MIN,

            functionSourceRgb: Cesium.BlendFunction.ONE,

            functionSourceAlpha: Cesium.BlendFunction.ONE,

            functionDestinationRgb: Cesium.BlendFunction.ZERO,

            functionDestinationAlpha: Cesium.BlendFunction.ZERO

        }

    },

});