Browser crushes when drawing massive amount of circles

Hi all,

I am trying to draw 90 * 180 circles on the globe, but the browser crushes. Compare to the rectangle geometry, there is no problem to draw 90 * 180 rectangles. Am I doing something wrong? Or is it because circle geometry has not been optimized?

Below is how I draw circles:

var geometryInstance = new GeometryInstance({

geometry: new CircleGeometry({

center: Cartesian3.fromDegrees(tempLon, tempLat),

radius: 55500


attributes: {

color: ColorGeometryInstanceAttribute.fromColor(extentColor)


id: [name, value[i][j], [tempLat, tempLon, 55500], fieldIndex]



var primitive = new Primitive({

geometryInstances: instances,

appearance: new PerInstanceColorAppearance(),

releaseGeometryInstances: false



Hi Steven,

If you adjust the granularity used to determine how many vertices are generated for the circle, performance will be much better. See this discussion:!topic/cesium-dev/CzkZXqX6axQ


I also submitted #2173 to try to minimize this problem in the future.


Hi Patrick,

Thanks for the reply. I tried to increase the granularity, and the performance is better. However, comparing to rectangle, rendering the same amount of circles is still way slower. Would you please briefly explain why?

Thanks again,


在 2014年10月1日星期三UTC-7下午5时10分26秒,Patrick Cozzi写道:

The circle uses a different subdivision algorithm and needs to approximate both the curve of the circle and the curvature of Earth. For now, just use a higher granularity for circles than for rectangles if your app can tolerate it. The code that generates the triangles for the circle is the generic polygon triangulation algorithm. Eventually, we will replace this with a custom one (which rectangle already has) to improve performance.