The problem about depth performance between label and billboard

CesiumJS
1

What should i do to make this label’s renderOrder higher than billboard without z-fighting
case
Thanks everyone!

2

From docs

Eye coordinates is a left-handed coordinate system, where x points towards the viewer’s right, y points up, and z points into the screen

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

  var image = new Image();
  image.onload = function () {
    let bil_label_entity = 
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
      id: "7539",
      billboard: {
        image: image,
        scale: 100,
        color:Cesium.Color.fromBytes(0,0,0,150),
        sizeInMeters: true,
      },
      label: {
        text: "Label on top of scaling billboard",
        font: "20px sans-serif",
        eyeOffset : new Cesium.Cartesian3(0, 10000, 0),
      },
    });
    viewer.flyTo(viewer.entities.getById("7539"))
  };
  image.src = "../images/facility.gif";
4

Hi kasatik143
Thank you for your reply, i’m sorry that i did not describe the question clearly.
It’s actually a problem of depth test

5

Hi @lzio ! I apologize for the delayed response.

I experimented with your Sandcastle a bit and discovered that the z-fighting is a result of a general translucency issue with Billboards and Labels. We have a few issues open on Github, such as this one, that show strange behavior when the pixels of the entities are translucent.

I confirmed this by setting the color of the billboard to Cesium.Color.fromBytes(0,0,0,255) instead of Cesium.Color.fromBytes(0,0,0,150). Sure enough, the label mostly renders in front of the billboard, except for where the billboard has translucent pixels.

image
image807×410 53 KB

This may be something worth opening a Github issue for. (EDIT: I’ve done so here!) In the past, we have suggested using eyeOffset to ensure labels render in front of billboards, but this is clearly a rendering issue that I cannot name any workarounds for at the moment. I think your best bet would be to use opaque backgrounds and labels until further notice.

Let me know if you have any other questions or concerns!