circle primitive renders oddly

CesiumJS
1

I don't see a way to post a screen shot so i guess it you want to see what I'm talking about you have to go to my test site and look at it.

http://74.69.121.94/SwarmWatch1.04/Index.html

Zoom into Western NY State and look at the two overlapping circles. The one on the left is a primitive and the one on the right is not.

Why doesn't the primitive render a uniform green? There is a strange pattern in it.

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

var entity = viewer.entities.add({
           position: Cesium.Cartesian3.fromDegrees(-78.2221, 42.9898),
           ellipse: {
                semiMinorAxis: 50000.0,
                semiMajorAxis: 50000.0,
                material: Cesium.Color.GREEN.withAlpha(0.5),
            }
        });

var ellipse = entity.ellipse;

var scene = viewer.scene;
var instances = ;
              
        instances.push(new Cesium.GeometryInstance({
            geometry: new Cesium.CircleGeometry({
                center: Cesium.Cartesian3.fromDegrees(-78.8784, 42.8864),
                radius: 50000.0
            }),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromAlpha(Cesium.Color.GREEN, 0.5))
            }
        }));

2

You need to pass the correct vertexFormat to the CircleGeometry constructor. Here is an example:

new Cesium.CircleGeometry({
center: Cesium.Cartesian3.fromDegrees(-78.8784, 42.8864),
radius: 50000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
})

``

Best,

Hannah

3

Thank you!