cesium: depthFailMaterial for dynamic polylines

The new depthFailMaterial property currently only works for static polyline entities. This is because the PolylineGeometryUpdater uses a PolylineGeometry for static polylines and a PolylineCollection for dynamic ones. We’ll need to add depth fail material support to the PolylineCollection

var viewer = new Cesium.Viewer('cesiumContainer');
var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    requestWaterMask : true,
    requestVertexNormals : true
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;
viewer.scene.globe.depthTestAgainstTerrain = true;

var length = 1000;

var startLon = Cesium.Math.toRadians(86.953793);
var endLon = Cesium.Math.toRadians(86.896497);

var lat = Cesium.Math.toRadians(27.988257);

var terrainSamplePositions = [];
for (var i = 0; i < length; ++i) {
    var lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
    var position = new Cesium.Cartographic(lon, lat);
    terrainSamplePositions.push(position);
}

var positions = [];
function getPositions() {
    return positions;
}
viewer.entities.add({
    polyline : {
        positions : new Cesium.CallbackProperty(getPositions, false),
        followSurface : false,
        width : 5,
        material : new Cesium.PolylineOutlineMaterialProperty({
            color : Cesium.Color.ORANGE,
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        }),
        depthFailMaterial : new Cesium.PolylineOutlineMaterialProperty({
            color : Cesium.Color.RED,
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        })
    }
});

Cesium.when(Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, terrainSamplePositions), function(samples) {
    var offset = 10.0;
    for (var i = 0; i < samples.length; ++i) {
        samples[i].height += offset;
    }
    positions = Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(samples);

    var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
    offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
    viewer.camera.lookAt(target, offset);
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
});

About this issue

Original URL
State: open
Created 7 years ago
Comments: 18 (13 by maintainers)

Most upvoted comments

I was also trapped by this. Finally worked around by using primitive with depthTest (sub attribute of renderState) set to false. Example:

      this._candidateLinePrimitive = this.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.PolylineGeometry({
              positions: this._candidateLinePositions,
              width: this.defaultLineWidth,
              vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT
            })
          }),
          appearance: new Cesium.PolylineMaterialAppearance({
            material: new Cesium.Material({
              fabric: {
                type: "PolylineDash",
                uniforms: {
                  color: (() => {
                    let c = this.lineMaterial.color.getValue();
                    return new Cesium.Color(c.red, c.green, c.blue, 1.0);
                  })()
                }
              }
            }),
            renderState: {
              depthTest: {
                enabled: false  // shut off depth test
              }
            }
          }),
          asynchronous: false   // block or not
        })
      );

Then the update process is a remove-if-exists-then-add process:

if (!_.isEmpty(this._candidateLinePrimitive)) {
    this.scene.primitives.remove(this._candidateLinePrimitive);
}

//code aforementioned

If you want to update this primitive immediately (which happens to be my case), you should also set asynchronous to false.

+10

hailengc on Aug 16, 2018