How to make polylines always visible

CesiumJS
1

Im drawing a polyline and it’s not visible through building or terrain, is there a way to force it to always show no matter what?

I’ve seen it in one of cesium measure example but I cannot tell which property is responsible for that
working version can be seen here: Cesium Stories

measure
measure935×654 75.4 KB

this is what I currently have:
measure

2

Hi @Nitsan_Baleli,

you have to declare the “depthFailMaterial” for the polylines like in this code snippet:

    var entity = viewer.entities.add({
        polyline: {
            positions: [Cesium.Cartesian3.fromDegrees(point1.lon, point1.lat, point1.height), Cesium.Cartesian3.fromDegrees(point2.lon, point2.lat, point2.height)],
            width: 2.0,
			material: Cesium.Color.CHARTREUSE,
            depthFailMaterial: Cesium.Color.CHARTREUSE
        }
    });

Best, Lennart

1 Like
3

Hi @lennart.imberg , I didn’t mention it but Im already using it.
if you could look at the gif in the original post, it seems that depthFailMaterial only comes into play after the second click ?

this is the relevant code of how the polyline is made:

var dynamicPositions = new Cesium.CallbackProperty(function () {
  return activeShapePoints;
}, false);

...

polyline: {
  positions: dynamicPositions,
  width: 3,
  material: new Cesium.ColorMaterialProperty(
    Cesium.Color.RED.withAlpha(0.7)
  ),
  depthFailMaterial: Cesium.Color.RED.withAlpha(0.7),
  heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
},
4

it may be related to this: depthFailMaterial for dynamic polylines · Issue #5333 · CesiumGS/cesium · GitHub

5

Here’s one of my config setups for these lines (where props is a plain key-value object);

polyline: {
                    positions: props.positions,
                    width: props.lineWidth,
                    arcType:   Cesium.ArcType.GEODESIC,
                    perPositionHeight: props.perPositionHeight,
                    classificationType: Cesium.ClassificationType.BOTH,
                    clampToGround : props.clampToGround,

                    material: new Cesium.PolylineOutlineMaterialProperty({
                        color: props.color,
                        outlineColor: Cesium.Color.LIGHTGREY.withAlpha(0.4),
                        outlineWidth:0
                    }),
                    depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
                        color: Cesium.Color.LIGHTGREY.withAlpha(0.4),
                        outlineColor: Cesium.Color.LIGHTGREY.withAlpha(0.4),
                        outlineWidth:0
                    }),
                }

You might have better luck with a polyline material for this purpose rather than a plain color, I’m not sure why but I never got those working well (or consistent).

Cheers,

Alex

2 Likes