Blending colours

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 + 2i, -32 + 2i)

}),

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.

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

}

},

});

``