GroundPrimitive Render Error

[BloodlustLR]

I want to use PolygonGeometry and groundPrimitive to draw Hexagonal Grids on Terrain, but there is a problem with the color rendering of the hexagonal grid, which goes out of the edge grid.And I check the edge points to ensure points are correct.
`hexagonInstances.push(new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(geoInfo.cartesian3Data as Cesium.Cartesian3[]),
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
id: "Hexagon-" + geoInfo.indexX + "_" + geoInfo.indexY,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(this.config.showSatelliteImage?color.withAlpha(0.2):color.withAlpha(0.8))
}
}))

this.viewer.scene.primitives.add( new Cesium.Primitive({
geometryInstances: hexagonInstances,
interleave: true,
vertexCacheOptimize: true,
allowPicking: false,
asynchronous: false,
appearance: new Cesium.PerInstanceColorAppearance({
flat: true
})
}), 0)
`

[ggetz]

Hi @BloodlustLR,

Where is the hexagon grid outline coming from? Can you provide a Sandcastle code example that replicates the issue? That would help us give us more context to determine the issue.

Thanks!

[BloodlustLR]

Hi @BloodlustLR,

Where is the hexagon grid outline coming from? Can you provide a Sandcastle code example that replicates the issue? That would help us give us more context to determine the issue.

Thanks!

the hexagon grid outline is drawed by myself with GroundPolylinePrimitive.The code above is my Sandcastle code example, which color render incorrectly.Thanks!@ggetz

Sandcastle Example

Sandcastle Example Code:

const border = {
    "west": 121.62921213591129,
    "south": 24.81999135320948,
    "north": 24.865129705580536,
    "east": 121.67205922150731
};

const data = [
    [
        [
            121.63778155330164,
            24.865129705580532
        ],
        [
            121.6463509706242,
            24.860615882618365
        ],
        [
            121.6463509706242,
            24.851588228512096
        ],
        [
            121.63778155330164,
            24.84707439736872
        ],
        [
            121.62921213591129,
            24.851588228512096
        ],
        [
            121.62921213591129,
            24.860615882618365
        ],
        [
            121.63778155330164,
            24.865129705580532
        ]
    ],
    [
        [
            121.65492038781119,
            24.865129705580532
        ],
        [
            121.66348980479482,
            24.860615882618365
        ],
        [
            121.66348980479482,
            24.851588228512096
        ],
        [
            121.65492038781119,
            24.84707439736872
        ],
        [
            121.6463509706242,
            24.851588228512096
        ],
        [
            121.6463509706242,
            24.860615882618365
        ],
        [
            121.65492038781119,
            24.865129705580532
        ]
    ],
    [
        [
            121.62921213591129,
            24.851588228512096
        ],
        [
            121.63778155330164,
            24.84707439736872
        ],
        [
            121.63778155330164,
            24.838046726903297
        ],
        [
            121.62921213591129,
            24.833532887581978
        ],
        [
            121.62064271852094,
            24.838046726903297
        ],
        [
            121.62064271852094,
            24.84707439736872
        ],
        [
            121.62921213591129,
            24.851588228512096
        ]
    ],
    [
        [
            121.6463509706242,
            24.851588228512096
        ],
        [
            121.65492038781119,
            24.84707439736872
        ],
        [
            121.65492038781119,
            24.838046726903297
        ],
        [
            121.6463509706242,
            24.833532887581978
        ],
        [
            121.63778155330164,
            24.838046726903297
        ],
        [
            121.63778155330164,
            24.84707439736872
        ],
        [
            121.6463509706242,
            24.851588228512096
        ]
    ]
];

const viewer = new Cesium.Viewer("cesiumContainer");

let cartesian3Data = [];
for(let hex of data){
  let hexData = [];
  for(let position of hex){
    hexData.push(Cesium.Cartesian3.fromDegrees(position[0], position[1]));
  }
  cartesian3Data.push(hexData);
}

//drawOutline
let hexagonOutline = [];
for(let hex of cartesian3Data){
    hexagonOutline.push(new Cesium.GeometryInstance({
        geometry: new Cesium.GroundPolylineGeometry({
            positions: hex,
            width: 2
        })
    }));
}

viewer.scene.groundPrimitives.add(new Cesium.GroundPolylinePrimitive({
    geometryInstances: hexagonOutline, 
    interleave: true,
    allowPicking: false,
    appearance: new Cesium.PolylineMaterialAppearance({
        material: new Cesium.Material({
            fabric : {
                type : 'Color',
                uniforms : {
                    color : Cesium.Color.WHITE.withAlpha(0.5)
                }
            }
        })
    })
}), 0);

//drawHexagon
let hexagon = [];
for(let hex of cartesian3Data){
  let geometry = new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(hex),
      vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  });
  let instance = new Cesium.GeometryInstance({
      geometry: geometry,
      attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom())
      }
  });
  hexagon.push(instance);
}
viewer.scene.groundPrimitives.add( new Cesium.GroundPrimitive({
    geometryInstances: hexagon,
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true
    })
}), 0);


//zoomToArea
let rectangle = Cesium.Rectangle.fromDegrees(border.west, border.south, border.east, border.north);
let entity = viewer.entities.add({
    rectangle: {
        height:0,
        coordinates: rectangle,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
    }
});
viewer.zoomTo(entity).then(() => {
    viewer.entities.remove(entity);
});

^{edited for formatting}

[ggetz]

Thanks @BloodlustLR!

I can confirm there seems to be artifacts based on the camera angle:

2023-05-18.09-25-16.mp4

[BloodlustLR]

Thanks @BloodlustLR!

I can confirm there seems to be artifacts based on the camera angle:

2023-05-18.09-25-16.mp4

Yes,That's the problem.It seems a bug of GroundPrimitive.

[ggetz]

Also reported in #11292.

[LTJhon]

I also encountered this problem. However, during my testing, I found that this does not seem to happen when the area of each instance is small

[jjspace]

Also reported on the forum here

[wenzhihao123]

@BloodlustLR @ggetz I also encountered this problem。 I find if you set ：viewer.scene.globe.depthTestAgainstTerrain = false，and use Primitive instead of GroundPrimitive，it worked perfect ! But i want to set depthTestAgainstTerrain = true in my whole project！What should i do ? Please give me some advices，Thanks a lot !

[BloodlustLR]

@BloodlustLR @ggetz I also encountered this problem。 I find if you set ：viewer.scene.globe.depthTestAgainstTerrain = false，and use Primitive instead of GroundPrimitive，it worked perfect ! But i want to set depthTestAgainstTerrain = true in my whole project！What should i do ? Please give me some advices，Thanks a lot !

The reason for this error is that the intersections of the rendered polygons of the same level overlap, so in my project, the solution I am taking to temporarily avoid this problem is to divide them into odd and even rows and render them separately. The effect is very good. You can Take a similar approach. But I don’t think this is the best way, because dividing one rendering into two times will still increase the performance burden. I still hope that the official can help solve this BUG.

[wenzhihao123]

@BloodlustLR @ggetz I also encountered this problem。 I find if you set ：viewer.scene.globe.depthTestAgainstTerrain = false，and use Primitive instead of GroundPrimitive，it worked perfect ! But i want to set depthTestAgainstTerrain = true in my whole project！What should i do ? Please give me some advices，Thanks a lot !

Thanks for your solution ~ I also agree that the official can help solve this problem.

[jjspace]

Reported on the forum again with an example showing a number of polygons in close proximity and being unable to select the specific one under the cursor due to the shadow volumes. sandcastle

[ggetz]

Also reported in #12294 (comment).

There are also weird interactions when polygons are drawn side by side, but I can't reproduce it every time. For example, if I draw 4 square polygons to create a larger square, some corners will fill in with the color of their neighbor, depending on the viewing angle.

Example of 2 polygons affected by the problem:

Example of the viewing angle problem (visible on the green polygon, filling the missing part of the red one) :
https://www.youtube.com/watch?v=WQyBPmldGGo

Here's a sandcastle replicating the problem

[mirop99]

Hello @ggetz, thank you for working on this. We are unfortunately also still experiencing this problem (this is my colleague's previous comment: #11883 ) - currently using v 1.118.

It seems to me that in our case it is the same bug as this #11291 (comment) - https://www.youtube.com/watch?v=WQyBPmldGGo , and that in both of those cases the camera angle does not matter.