Cesium: Polygon triangles disappear when zoomed out far

[hpinkos]

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polygon.html&label=Geometries
Hit home then continue to zoom out, you'll see triangles on the red and blue polygons disappear

Seems to have been introduced in 1.23

[bagnell]

This happens because they are clamped to terrain and the shadow volume isn't extruded far enough below terrain.

Another problem I noticed was that slightly lowering the extrusion would fix the issue when using STK World Terrain, but not for the ellipsoid. I think the mountainous region covered by the red polygon must have a minimum height high enough above the ellipsoid that the shadow volume doesn't drop below the lower resolution ellipsoid tiles.

[pjcozzi]

This happens because they are clamped to terrain and the shadow volume isn't extruded far enough below terrain.

The lower bound of the volume should be extruded in the vertex shader based on the SSE and distance so it always encloses the terrain.

[billwritescode]

@bagnell @pjcozzi Do you have any suggestions for a workaround from an API perspective to keep polygon triangles from disappearing while a fix is still pending?

[hpinkos]

This example from @billwritescode is even more noticeable, you don't even have to zoom out that far:

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

var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/world'
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;

viewer.entities.add({
  polygon: {
    hierarchy: {
      positions: [Cesium.Cartesian3.fromDegrees(0.5, 0.5), 
        Cesium.Cartesian3.fromDegrees(1, 0.5),
        Cesium.Cartesian3.fromDegrees(0.5, 0)]
    },
    material: Cesium.Color.LIME,
  }
});

viewer.entities.add({
  polygon: {
    hierarchy: {
      positions: [Cesium.Cartesian3.fromDegrees(1, 0.5), 
        Cesium.Cartesian3.fromDegrees(1.5, 0.5),
        Cesium.Cartesian3.fromDegrees(1, 0)]
    },
    material: Cesium.Color.RED,
  }
});


viewer.entities.add({
  polygon:{
    hierarchy: {
      positions: [Cesium.Cartesian3.fromDegrees(1.5, 0.5), 
        Cesium.Cartesian3.fromDegrees(2, 0.5),
        Cesium.Cartesian3.fromDegrees(1.5, 0)]
    },
    material: Cesium.Color.BLUE,
  }
});

viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(0.75, 0.5, 500000.0)
});

[pjcozzi]

@billwritescode instead of extruding down based on the SSE in the vertex shader, you could workaround this by tweaking the Cesium code to extrude really far in JavaScript. @hpinkos had a PR open for this; it is not the right long-term solution for Cesium, but could be a reasonable stopgap for your app.

[adunham1962]

@billwritescode instead of extruding down based on the SSE in the vertex shader, you could workaround this by tweaking the Cesium code to extrude really far in JavaScript. @hpinkos had a PR open for this; it is not the right long-term solution for Cesium, but could be a reasonable stopgap for your app.

@pjcozzi could you elaborate a bit on your first sentence? I'm not familiar with the acronym "SSE" or where in the Cesium code we could apply the suggested stopgap while a solution for this issue is pending.

[hpinkos]

@adunham1962 you can see my proposed fix here: #4485
You could try adding that change until we have a better fix

[adunham1962]

@hpinkos thanks!

[hpinkos]

Also reported here: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/IumYr5kQT6k

[hpinkos]

@billwritescode this issue has been fixed in master and will be included in the Cesium 1.30 release available February 1st

[billwritescode]

Thanks @pjcozzi @hpinkos @adunham1962 @bagnell! I am thrilled.