Order Independent Translucency not blending properly

Author: gbeattyCreated Aug 3, 2016Updated Sep 16, 2026

Labelstype - bugcategory - graphics

There seems to be a problem with how OIT is blending translucent objects. In the following sandcastle example, the rectangles are almost completely opaque. They appear to blend properly with the globe, but when blending with other rectangles the underlying rectangles are visible when they shouldn't be.

javascript

Cesium.Math.setRandomNumberSeed(1234);

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

var i;
var height;

for (i = 0; i < 5; ++i) {
    height = 200000.0 * i;

    entities.add({
        rectangle : {
            coordinates : Cesium.Rectangle.fromDegrees(-87.0, 37.0, -83.0, 42.0),
            height : height,
            material : Cesium.Color.fromRandom({alpha : .99})
        }
    });
}


viewer.zoomTo(viewer.entities);

oit_bug

What it should look like: oit_correct

Source: CesiumGS/cesium

View original on GitHub View discussion on GitHub