When we add a label to Polygon with extrudedHeight set, the label's style will be affected

CesiumJS
1

When we add a label to Polygon with extrudedHeight set, the label’s style will be affected.

Here’s my code

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

var redPolygon = viewer.entities.add({
  name: "Red polygon on surface",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([-115.0,37.0,-115.0,32.0,-107.0,33.0,-102.0,31.0,-102.0,35.0, ]),
    material: new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString('#1b2876').withAlpha(0.6)),
  },
});
var polyPositions = redPolygon.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
redPolygon.position = polyCenter;
redPolygon.polygon.extrudedHeight = new Cesium.ConstantProperty(10000.0);
redPolygon.label={
    // position:
    text:'Red polygon on surface',
    color : Cesium.Color.fromCssColorString('#fff'),
    font:'normal 32px MicroSoft YaHei',
    scale : 0.5,
  
    horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
    heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND,
    verticalOrigin : Cesium.VerticalOrigin.BASELINE,
    disableDepthTestDistance : 10000.0,
    //distanceDisplayCondition:new Cesium.DistanceDisplayCondition(10.0, 20000.0)
};

viewer.zoomTo(viewer.entities);

This is the effect

Snipaste_2023-09-20_13-41-50
Snipaste_2023-09-20_13-41-501026×507 58.2 KB

The text should be white, but it is affected by polygon’s texture

sandcastle

2

Hi there,

This looks similar to Translucency issues with label on top of billboard · Issue #9681 · CesiumGS/cesium · GitHub. I wonder if the issue is not restricted to billboards, but rather translucent object rendering in general.

I’ll add your report to that issue as well.

3

Thank you for your response, however, I believe this issue is of a different nature. If the polygon.extrudedHeight property is not set, the desired effect remains unaffected.

Snipaste_2023-09-25_13-49-54
Snipaste_2023-09-25_13-49-541170×628 100 KB

4

I think the bug is occurring for similar reasons which are described more in-depth in Separate pass for billboards · Issue #8810 · CesiumGS/cesium · GitHub.

As a workaround, you can set orderIndependentTranslucency to false and then specify an eyeOffset for the label.

var viewer = new Cesium.Viewer("cesiumContainer", {
 orderIndependentTranslucency: false,
});

redPolygon.label = {
    ...
    eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -800000.0)
};

Sandcastle