DepthFailMaterial for polyline will overlap every other depthFailMaterial including PointCollection and label

CesiumJS
1

Hi everyone,

I’m currently working on a measurement tool in CesiumJS. I have:

  • A Polyline entity

  • A PointCollection for vertices

  • Some Label entities

All of them are using depthFailMaterial so that they remain visible when behind terrain or 3D tiles.

The Issue

When the polyline has a depthFailMaterial, it always renders on top of:

  • Other entities’ depthFailMaterial

  • PointCollection

  • Labels

Even when those entities also define their own depthFailMaterial.

It looks like the polyline’s depth fail pass overrides everything else visually.

Simplified Code Example

Polyline

const polylineEntity = viewer.entities.add({
  polyline: {
    positions: positions,
    width: 4,
    material: Cesium.Color.YELLOW,
    depthFailMaterial: Cesium.Color.YELLOW,
  }
});

PointCollection

const pointCollection = viewer.scene.primitives.add(
  new Cesium.PointPrimitiveCollection()
);

pointCollection.add({
  id: "PointId",
  position: somePosition,
  color: Cesium.Color.CYAN,
  pixelSize: 15,
  scaleByDistance: new Cesium.NearFarScalar(1.5, 2.0, 1.5e7, 1.5),
  disableDepthTestDistance: Number.POSITIVE_INFINITY,
});

Label

viewer.entities.add({
  position: somePosition,
  label: {
    font: "14px monospace",
    showBackground: true,
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    pixelOffset: new Cesium.Cartesian2(0, -10),
    eyeOffset: new Cesium.Cartesian3(0, 0, -1),
    disableDepthTestDistance: Number.POSITIVE_INFINITY,
    fillColor: Cesium.Color.WHITE,
    text: "Test"
  }
});

Observed Behavior

Whenever the polyline is behind terrain or objects:

  • Its depthFailMaterial is rendered

  • That depthFail pass appears on top of everything else

  • Even if the point or label should visually appear above it

It seems like the polyline’s depth fail pass ignores normal depth ordering relative to other depth-fail-rendered primitives.

Questions

  1. Is this expected behavior in CesiumJS?

  2. Is there a way to control render order between depthFail materials?

  3. Would using separate Primitive instead of Entity help?

  4. Is this related to render pass ordering internally?

Any suggestions or recommended approach would be greatly appreciated.

Thanks!

2

Hi @realuseriz ,

Thanks for your post and welcome to the Cesium community.

Thanks for providing a detailed description of the issue you are seeing and some sample code. To make your problem more clear could you create a working example using our sandcastle tool https://sandcastle.cesium.com/ that reproduces the issue you are seeing? This will make it possible for us to understand the exact issue, answer your questions, and provide the best possible solutions.

Thank you!
Luke

3

Hi Luke,

Thanks for replying. Here is the link for working example.

4

Hey @realuseriz ,

Thanks for that example in sandcastle! I had a tinker and seem to have resolved the issue you’re having. Here’s a link to the sandcastle with some changes.

image
image503×204 32.2 KB

My changes are lines 15-17 and from line 84. My approach was to create the labels as a LabelCollection after the polyline and add that collection to the scene.primitives. It seems that when your polylines and labels were all added via viewer.entities.add that internally they are re-ordered. I’m not sure exactly why that happens, but this approach should solve your issue. If you add more entities or primitives to the scene after this, you should be able to call scene.primitives.raiseToTop(labelCollection) to bring your labels to the top again.

Let me know how that goes!

5

Hey @darcyvdd ,

This approach works like a charm. Initially my concern was on the PointPrimitiveCollection, which are added by viewer.scene.primitives.add that basically the same as your solution. So your answer really helps solve my issue.

Thanks a lot @darcyvdd @Luke_McKinstry