Polygon fill imperfections cause mouse pick errors

CesiumJS
1

Polygon fill draws normally under the overhead Angle, and so does mouse pick (The red arrow represents the mouse position)

image

However, the fill rendering of the polygon is missing in the tilted view, causing the mouse pick exception

image
image716×284 37.7 KB

Cesium.Math.setRandomNumberSeed(1234);

const viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });

const entity = viewer.entities.add({
  label: {
    show: false,
    showBackground: true,
    font: "14px monospace",
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: Cesium.VerticalOrigin.TOP,
    pixelOffset: new Cesium.Cartesian2(15, 0),
  },
});

viewer.screenSpaceEventHandler.setInputAction(movement => {
  const pick = viewer.scene.pick(movement.endPosition);
  if (pick?.id) {
    const cartesian = viewer.camera.pickEllipsoid(
      movement.endPosition,
      viewer.scene.globe.ellipsoid
    );
    entity.position = cartesian;
    entity.label.show = true;
    entity.label.text = `ID: ${pick.id}`;
  } else {
    entity.label.show = false;
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


const polygonCollection = new Cesium.PrimitiveCollection();
viewer.scene.groundPrimitives.add(polygonCollection);

const positions1 = Cesium.Cartesian3.fromDegreesArray([-107.0, 33.0, -107.0, 28.0, -102.0, 29.0, -97.0, 27.0, -97.0, 31.0,]);
const polygon1 = createPolygonInstance('red', positions1, Cesium.Color.RED.withAlpha(0.5));

const positions2 = Cesium.Cartesian3.fromDegreesArray([-107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0, 25.0,]);
const polygon2 = createPolygonInstance('yellow', positions2, Cesium.Color.YELLOW.withAlpha(0.5));

const positions3 = Cesium.Cartesian3.fromDegreesArray([-95.0, 27.0, -95.0, 22.0, -90.0, 23.0, -85.0, 21.0, -85.0, 25.0,]);
const polygon3 = createPolygonInstance('blue', positions3, Cesium.Color.BLUE.withAlpha(0.5));

polygonCollection.add(
  new Cesium.GroundPrimitive({
    geometryInstances: [polygon1, polygon2, polygon3],
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
    })
  })
);


function createPolygonInstance(id, positions, material) {
  const fill = new Cesium.PolygonGeometry({
    polygonHierarchy: {
      positions,
      holes: [],
    },
  });
  const fillInstance = new Cesium.GeometryInstance({
    id: id + '-polygon',
    geometry: fill,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(material),
    }
  });
  return fillInstance;
}

Sandcastle demo: Cesium Sandcastle