Small verticle rectangular polygons rendered as triangles

CesiumJS
1

I noticed an issue with small polygons clipping.

In the bellow sandcastle example a series of small vertically oriented rectangular polygons, increasing in height, should be rendered, but the shorter rectangles clip to triangles, If I try and create two triangles to mimic the rectangle, the same results occur.

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;

var instances = ,
dLong = -0.00001,
dLat = 0.00000001 ,
longitude =-122.95287197,
latitude = 49.16011209,
polyLength = 10,
startElevation = 5,
elevationFrom_m = 5,
elevationTo_m,
deltaElevation = 0,
i = 1,
polyPositions = ,
primitives;

primitives = scene.primitives;

var polys, poly;

  for ( i = 1; i <= 20; i++) {
    deltaElevation = 0.05 * i;
     
    elevationTo_m = elevationFrom_m + deltaElevation;
     
    polyPositions = [
                       Cesium.Cartesian3.fromDegrees(longitude, latitude, elevationFrom_m),
                       Cesium.Cartesian3.fromDegrees(longitude + polyLength * dLong, latitude + polyLength * dLat, elevationFrom_m),
                       Cesium.Cartesian3.fromDegrees(longitude + polyLength * dLong, latitude + polyLength * dLat, elevationTo_m),
                       Cesium.Cartesian3.fromDegrees(longitude, latitude, elevationTo_m),
                       Cesium.Cartesian3.fromDegrees(longitude, latitude, elevationFrom_m)];
     
     instances.push( new Cesium.GeometryInstance({
                geometry: new  Cesium.PolygonGeometry.fromPositions({
                    positions:  polyPositions,
                    perPositionHeight: true,
                    vertexFormat:   Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
                }),
                attributes: {
                    color:  Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 1}))
                }
            }) );
     
      elevationFrom_m = elevationTo_m;
  }

scene.primitives.add( new Cesium.Primitive({
geometryInstances: instances,
appearance: new Cesium.PerInstanceColorAppearance({ flat: true }),
show: true
}));

var center = Cesium.Cartesian3.fromDegrees(longitude, latitude , startElevation),
heading = Cesium.Math.toRadians(0),
pitch = Cesium.Math.toRadians(-20.0),
range = 40.0;

viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

``

2

As a side note, I also tried with wall geometry,

instances.push( new Cesium.GeometryInstance({
geometry: new Cesium.WallGeometry({
positions: [
Cesium.Cartesian3.fromDegrees(longitude, latitude),
Cesium.Cartesian3.fromDegrees(longitude + polyLength * dLong, latitude + polyLength * dLat)],
maximumHeights: [elevationTo_m,elevationTo_m],
minimumHeights: [elevationFrom_m,elevationFrom_m],
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 1}))
}
}) );

``

However if the the length of the wall is shorter, the wall won’t render, in the example provided change

polyLength = 10 -> ```polyLength = 3
`

3

Hello Berwyn,

I responded to your issue on GitHub: https://github.com/AnalyticalGraphicsInc/cesium/issues/2897

I don’t believe a vertical polygon is currently supported functionality, and I’ll look into the WallGeometry issue shortly.

Thanks!

-Hannah