Two overlapping polygons at the same height causes z-fighting

[ketulm]

Note that if you remove the height attribute, then polygons are rendered fine with no artifacts (note that this used to cause z-fighting in the old version, e.g. 1.11).

Here's a simple sandcastle example:

http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=f4873be79823131e312c1f0b92f3c179

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

entities.add({
    polygon: {
		hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
                -58.0, 10.0,
                -50.0, 27.0,
                -50.0, 32.0,
                -58.0, 30.0
            ])),
		material : Cesium.Color.fromRandom({alpha : 1.0}),
		height: 0
    }
});

entities.add({
    polygon: {
		hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
                -59.0, 10.0,
                -51.0, 18.0,
                -51.0, 40.0,
                -59.0, 41.0
            ])),
		material : Cesium.Color.fromRandom({alpha : 1.0}),
		height: 0
    }
});

viewer.zoomTo(viewer.entities);

[hpinkos]

Thanks for including the code example @ketulm. The reason the problem only happens when you specify height: 0 is because a different type of primitive is used behind the scenes when height: 0 vs height: undefined.

We unfortunately currently don't have great support for z-ordering, but it's a frequently requested feature and is on our roadmap.

[ketulm]

It appears that I can specify the height in the hierarchy instead as a workaround. However, I do see another related issue where there is z-fighting at the meridian which is seen through the globe when rotating but not seen in the view where the polygon is visible. This artifact goes away if you set scene3DOnly to true.

I was able to recreate this on Sandcastle (note that there is only one polygon that crosses meridian):

http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=f5a6f76d8ab9d66749412303f346f314

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

entities.add({
    polygon: {
		hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([
				-2.14793,75.0,4000.0,
				-2.14793,74.0,4000.0,
				-2.0,73.90693,4000.0,
				0.0,72.37584,4000.0,
				0.41488,72.0,4000.0,
				2.0,70.27,4000.0,
				2.2028,70.0,4000.0,
				3.42462,68.0,4000.0,
				4.0,66.75117,4000.0,
				4.29422,66.0,4000.0,
				4.88039,64.0,4000.0,
				5.26936,62.0,4000.0,
				5.49261,60.0,4000.0,
				5.57231,58.0,4000.0,
				5.52386,56.0,4000.0,
				5.35753,54.0,4000.0,
				5.07948,52.0,4000.0,
				4.69246,50.0,4000.0,
				4.19614,48.0,4000.0,
				4.0,47.3666,4000.0,
				3.55758,46.0,4000.0,
				2.77996,44.0,4000.0,
				2.0,42.27753,4000.0,
				1.8661,42.0,4000.0,
				0.75655,40.0,4000.0,
				0.0,38.77996,4000.0,
				-0.52478,38.0,4000.0,
				-2.0,36.01362,4000.0,
				-2.01097,36.0,4000.0,
				-3.76933,34.0,4000.0,
				-4.0,33.75649,4000.0,
				-5.79141,32.0,4000.0,
				-6.0,31.80802,4000.0,
				-8.0,30.0875,4000.0,
				-8.10855,30.0,4000.0,
				-10.0,28.54958,4000.0,
				-10.75471,28.0,4000.0,
				-12.0,27.12805,4000.0,
				-13.6748,26.0,4000.0,
				-14.0,25.78725,4000.0,
				-16.0,24.52782,4000.0,
				-16.85779,24.0,4000.0,
				-18.0,23.30881,4000.0,
				-20.0,22.10708,4000.0,
				-20.18166,22.0,4000.0,
				-22.0,20.93352,4000.0,
				-23.56745,20.0,4000.0,
				-24.0,19.74154,4000.0,
				-26.0,18.54275,4000.0,
				-26.88905,18.0,4000.0,
				-28.0,17.31274,4000.0,
				-30.0,16.03645,4000.0,
				-30.05681,16.0,4000.0,
				-32.0,14.72598,4000.0,
				-33.07132,14.0,4000.0,
				-34.0,13.35343,4000.0,
				-35.89029,12.0,4000.0,
				-36.0,11.91893,4000.0,
				-38.0,10.43459,4000.0
            ])),
		material : Cesium.Color.fromRandom({alpha : 1.0})
    }
});

viewer.zoomTo(viewer.entities);

[hpinkos]

@ketulm the artifact you're seeing is a known issue #4746

And setting the height in hierarchy isn't actually having an effect on your polygon. Positions are scaled to the ground by default unless you specify perPositionHeight: true. But I imagine if you do set that you'll see the z-fighting artifact again.

[hpinkos]

For a workaround, if you need a height for your polygons you could turn order independent translucency off and give your polygons an alpha very close to 1

var viewer = new Cesium.Viewer('cesiumContainer', {
    orderIndependentTranslucency: false 
});
var entities = viewer.entities;

entities.add({
    polygon: {
		hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
                -58.0, 10.0,
                -50.0, 27.0,
                -50.0, 32.0,
                -58.0, 30.0
            ])),
		material : Cesium.Color.fromRandom({alpha : 0.99}),
		height: 4000
    }
});
	
entities.add({
    polygon: {
		hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
        
                -59.0, 10.0,
                -51.0, 18.0,
                -51.0, 40.0,
                -59.0, 41.0
            ])),
		material : Cesium.Color.fromRandom({alpha : 0.99}),
		height: 4000
    }
});

viewer.zoomTo(viewer.entities);

If you don't need a height, i would recommend just leaving height undefined. The polygons will be drawn on the ground in this case.

[ketulm]

@hpinkos I didn't know about having to specify perPositionHeight attribute, thanks for letting me know. Also, the polygon height is being used to control the display/z-order so its use is not a requirement but will definitely test out the other workaround you mentioned to see if it's sufficient.

[ketulm]

perPositionHeight: true has the same issue, just not as drastic as when specifying the height attribute.

[mramato]

z-fighting will always occur for opaque polygons with the same explicit height (the same is true for any opaque geometry occupying the same "physical" space, i.e. overlapping ellipsoids, extruded polygons with shared walls, etc..). There's no way around it in the general case, it's just the nature of describing the world in 3D. Using very slightly translucent geometry is probably the best you can do (or as @hpinkos suggested, just leave off height).

For the specific case of geometry on the ground, we can already order them (though that's something the Entity API itself doesn't allow for yet).

I recommend we close this issue since it will never actually be addressed in a way that makes the original example code work as desired.

[pjcozzi]

@ketulm thanks for the detailed writeup and code example. I am going to close this as a duplicate with #4108. In the meantime, it sounds like there are some reasonable workarounds in this issue.