2D Polygon Rendering Artifacts

[mwminer]

I am seeing a couple strange behaviors when drawing polygons in 2D mode. In both cases the polygons are rendered accurately in 3D mode. The issues can be replicated in the sandbox example "Draw a polygon" by pasting the included code.

First, when I draw a circle like polygon close to a pole it renders 4 strange triangles that are drawn within the polygon. However, in 3D mode the circle renders properly, without them. Here is the code that I pasted into the sandbox for this issue:

transitioner = new Cesium.SceneTransitioner(scene);
transitioner.to2D();
cb.affectedByLighting = false;
var polygon = new Cesium.Polygon();
polygon.affectedByLighting = false;
polygon.setPositions(ellipsoid.cartographicDegreesToCartesians([new Cesium.Cartographic2(-42.75,65.6249),
new Cesium.Cartographic2(-58.7498,64.3139),
new Cesium.Cartographic2(-71.5318,60.7427),
new Cesium.Cartographic2(-80.3024,55.6384),
new Cesium.Cartographic2(-85.8009,49.6215),
new Cesium.Cartographic2(-88.9521,43.0974),
new Cesium.Cartographic2(-90.4365,36.317),
new Cesium.Cartographic2(-90.6873,29.4448),
new Cesium.Cartographic2(-89.9653,22.6),
new Cesium.Cartographic2(-88.4185,15.8811),
new Cesium.Cartographic2(-86.1224,9.3805),
new Cesium.Cartographic2(-83.1049,3.193),
new Cesium.Cartographic2(-79.365,-2.5773),
new Cesium.Cartographic2(-74.8895,-7.8139),
new Cesium.Cartographic2(-69.6722,-12.386),
new Cesium.Cartographic2(-63.7362,-16.1532),
new Cesium.Cartographic2(-57.1585,-18.9746),
new Cesium.Cartographic2(-50.0889,-20.7259),
new Cesium.Cartographic2(-42.75,-21.3201),
new Cesium.Cartographic2(-35.4111,-20.7259),
new Cesium.Cartographic2(-28.3415,-18.9746),
new Cesium.Cartographic2(-21.7638,-16.1532),
new Cesium.Cartographic2(-15.8278,-12.386),
new Cesium.Cartographic2(-10.6105,-7.8139),
new Cesium.Cartographic2(-6.135,-2.5773),
new Cesium.Cartographic2(-2.3951,3.193),
new Cesium.Cartographic2(0.6224,9.3805),
new Cesium.Cartographic2(2.9185,15.8811),
new Cesium.Cartographic2(4.4653,22.6),
new Cesium.Cartographic2(5.1873,29.4448),
new Cesium.Cartographic2(4.9365,36.317),
new Cesium.Cartographic2(3.4521,43.0974),
new Cesium.Cartographic2(0.3009,49.6215),
new Cesium.Cartographic2(-5.1976,55.6384),
new Cesium.Cartographic2(-13.9682,60.7427),
new Cesium.Cartographic2(-26.7502,64.3139)]));
primitives.add(polygon);

The second issue is when I draw a polygon across the date line. Occasionally, one or more lines are rendered across the entire earth in 2D mode, but the polygon looks fine in 3D mode. Here is the code that I pasted into the sandbox for this issue:

transitioner = new Cesium.SceneTransitioner(scene);
transitioner.to2D();
cb.affectedByLighting = false;
var polygon = new Cesium.Polygon();
polygon.affectedByLighting = false;
polygon.setPositions(ellipsoid.cartographicDegreesToCartesians([new Cesium.Cartographic2(-176.3437,11.6397),
new Cesium.Cartographic2(-179.881,11.3338),
new Cesium.Cartographic2(-183.3023,10.4275),
new Cesium.Cartographic2(-186.5001,8.9531),
new Cesium.Cartographic2(-189.3814,6.9614),
new Cesium.Cartographic2(-191.8712,4.5174),
new Cesium.Cartographic2(-193.9114,1.696),
new Cesium.Cartographic2(-195.4586,-1.421),
new Cesium.Cartographic2(-196.4804,-4.7479),
new Cesium.Cartographic2(-196.9514,-8.1962),
new Cesium.Cartographic2(-196.851,-11.6746),
new Cesium.Cartographic2(-196.1629,-15.0895),
new Cesium.Cartographic2(-194.8767,-18.344),
new Cesium.Cartographic2(-192.9929,-21.3391),
new Cesium.Cartographic2(-190.5298,-23.9743),
new Cesium.Cartographic2(-187.533,-26.1519),
new Cesium.Cartographic2(-184.0836,-27.7825),
new Cesium.Cartographic2(-180.3019,-28.7933),
new Cesium.Cartographic2(-176.3437,-29.1358),
new Cesium.Cartographic2(-172.3856,-28.7933),
new Cesium.Cartographic2(-168.6039,-27.7825),
new Cesium.Cartographic2(-165.1545,-26.1519),
new Cesium.Cartographic2(-162.1577,-23.9743),
new Cesium.Cartographic2(-159.6946,-21.3391),
new Cesium.Cartographic2(-157.8108,-18.344),
new Cesium.Cartographic2(-156.5246,-15.0895),
new Cesium.Cartographic2(-155.8365,-11.6746),
new Cesium.Cartographic2(-155.7361,-8.1962),
new Cesium.Cartographic2(-156.2071,-4.7479),
new Cesium.Cartographic2(-157.2289,-1.421),
new Cesium.Cartographic2(-158.7761,1.696),
new Cesium.Cartographic2(-160.8163,4.5174),
new Cesium.Cartographic2(-163.3061,6.9614),
new Cesium.Cartographic2(-166.1874,8.9531),
new Cesium.Cartographic2(-169.3852,10.4275),
new Cesium.Cartographic2(-172.8065,11.3338),
new Cesium.Cartographic2(-176.3437,11.6397)]));
primitives.add(polygon);

[pjcozzi]

Thanks for the examples. I noticed a few of these artifacts too. We plan to rewrite the ellipse and circle triangulator to create less triangles in general, which should also fix this.

As for general polygons crossing the IDL in 2D and Columbus view, I don't believe we added support for that yet (it is not in Polygon.prototype._createMeshes). I could provide some guidance if this is something you want to contribute, @mwminer?

[pjcozzi]

@mwminer I'm implementing support for polygons crossing the IDL in 2D and Columbus view.

[pjcozzi]

@bagnell I assigned this to you given your work in #502. You can build from the polygonidl branch. However, this is not a near-term priority.

[pjcozzi]

Updated code:

var transitioner = new Cesium.SceneTransitioner(scene);
transitioner.to2D();
var polygon = new Cesium.Polygon();
polygon.affectedByLighting = false;
polygon.setPositions(ellipsoid.cartographicArrayToCartesianArray([
Cesium.Cartographic.fromDegrees(-176.3437,11.6397),
Cesium.Cartographic.fromDegrees(-179.881,11.3338),
Cesium.Cartographic.fromDegrees(-183.3023,10.4275),
Cesium.Cartographic.fromDegrees(-186.5001,8.9531),
Cesium.Cartographic.fromDegrees(-189.3814,6.9614),
Cesium.Cartographic.fromDegrees(-191.8712,4.5174),
Cesium.Cartographic.fromDegrees(-193.9114,1.696),
Cesium.Cartographic.fromDegrees(-195.4586,-1.421),
Cesium.Cartographic.fromDegrees(-196.4804,-4.7479),
Cesium.Cartographic.fromDegrees(-196.9514,-8.1962),
Cesium.Cartographic.fromDegrees(-196.851,-11.6746),
Cesium.Cartographic.fromDegrees(-196.1629,-15.0895),
Cesium.Cartographic.fromDegrees(-194.8767,-18.344),
Cesium.Cartographic.fromDegrees(-192.9929,-21.3391),
Cesium.Cartographic.fromDegrees(-190.5298,-23.9743),
Cesium.Cartographic.fromDegrees(-187.533,-26.1519),
Cesium.Cartographic.fromDegrees(-184.0836,-27.7825),
Cesium.Cartographic.fromDegrees(-180.3019,-28.7933),
Cesium.Cartographic.fromDegrees(-176.3437,-29.1358),
Cesium.Cartographic.fromDegrees(-172.3856,-28.7933),
Cesium.Cartographic.fromDegrees(-168.6039,-27.7825),
Cesium.Cartographic.fromDegrees(-165.1545,-26.1519),
Cesium.Cartographic.fromDegrees(-162.1577,-23.9743),
Cesium.Cartographic.fromDegrees(-159.6946,-21.3391),
Cesium.Cartographic.fromDegrees(-157.8108,-18.344),
Cesium.Cartographic.fromDegrees(-156.5246,-15.0895),
Cesium.Cartographic.fromDegrees(-155.8365,-11.6746),
Cesium.Cartographic.fromDegrees(-155.7361,-8.1962),
Cesium.Cartographic.fromDegrees(-156.2071,-4.7479),
Cesium.Cartographic.fromDegrees(-157.2289,-1.421),
Cesium.Cartographic.fromDegrees(-158.7761,1.696),
Cesium.Cartographic.fromDegrees(-160.8163,4.5174),
Cesium.Cartographic.fromDegrees(-163.3061,6.9614),
Cesium.Cartographic.fromDegrees(-166.1874,8.9531),
Cesium.Cartographic.fromDegrees(-169.3852,10.4275),
Cesium.Cartographic.fromDegrees(-172.8065,11.3338),
Cesium.Cartographic.fromDegrees(-176.3437,11.6397)]));
primitives.add(polygon);

[bagnell]

The rendering artifacts across the IDL were fixed in #720.

A new issue was submitted for the artifacts in 2D near a pole: #748.