Gents,
I need to animate multiple small circles. At most there could be few hundred.
Here is an example
In GE I generated and processed KML each frame with acceptable performance.
In Cesium I combine all lines in one primitive and all dots into another and replace primitives each frame.
This performs trice worse, which is unacceptable and could be a show-stopper.
Actually, there is no need to re-create the whole thing each frame. Some parts only need to be updated once per second. But the whole “dashboard” should move along the model smoothly.
Now, I’m about to try drawing it on canvas and then giving it to Cesium as a ground overlay (each frame).
And my questions:
-
What are possible ways to improve performance of current implementation?
-
How can I move multiple geometries at once? Will this improve performance comparing to re-creating them? (move each frame, but re-create rarely)
-
I found myself implementing something like Entity API on top of geometries/appearances just to be able to combine multiple geometries into one primitive. Can I control this in Entity API or CZML?
-
Do you think that “canvas + ground overlay” could work?
-
Can you propose another, possibly better, solution?
Thank you.
var appearance = new C.PerInstanceColorAppearance({ flat: true })
var instances = _.map(o.circle, function(circle) {
var color = circle.fill || circle.stroke || C.Color.WHITE
return new C.GeometryInstance({
geometry: new (circle.fill ? C.CircleGeometry : C.CircleOutlineGeometry)({
center: C.c3(circle.center, circle.alt)
, radius: circle.radius
, vertexFormat: appearance.vertexFormat
})
, attributes: {
color: C.ColorGeometryInstanceAttribute.fromColor(color)
}
})
})
…
o.primitive = new C.Primitive({
geometryInstances: instances
, appearance: appearance
, asynchronous: o.asynchronous
})
…
f.primitives.remove(prev)
…
f.primitives.add(o.primitive)