What's the right way to redraw a primitive?

CesiumJS
1

I want to draw a lot of ground polylines and update their positions. Think of it like snakes crawling on a ground :slight_smile: .

Here’s a sandcastle: Cesium Sandcastle

As you can see, I’m adding new polylines and removing them 100ms later, otherwise the polylines blink.

So far, I know I can make my geometry synchronous, but that still requires me to remove primitives and re-introduce them later.

Is that the only way to update primitives or can I somehow update geomentryInstance’s positions or use something like a callback property?

Thank you

2

Hi Mike,
It looks like you are making updates in a correct and efficient way. Is there something different you are trying to achieve? I believe only the Entity API includes a callback function for updating geometry positions, but the Entity API results in poor performance for large numbers of polylines.
Jeff

3

@y2kiah Thank you for the response. I’ve gone through the source code, and it seems like for “asynchronous: false”, re-creating primitives is indeed an intended way to update positions of primitives.

How do I render primitives “asynchronous: true” without it resulting in flickering while rendering? That setTimeout I have in Sandcastle doesn’t feel very good to me. Picking an arbitrary timeout delay might in fact not be enough depending on how much CPU is under load.

UPDATE:

Here’s an example from our application where doing a synchronous update with 100 polylines and 4x CPU throttling somehow results in 308ms taken to do “loadSynchronous”

image
image1902×356 101 KB

image
image1780×592 154 KB

4

Hi Mike,
Here is a sandcastle example with asynchronous: true, no setTimeout and no flickering. The idea is to use the ready flag on the ground primitive to trigger creation of the next primitive.

Jeff

1 Like
5

That is much better now, thank you!

Is there a way to listen to the “ready” state instead of doing setInterval ?

The scenario is sometimes our primitives don’t move. We have use cases when we just have static ones, and it would be bothersome to have another attribute within our codebase to switch between “asynchronous” and “synchronous” rendering.

6

The ready flag is a boolean so you will have to poll for results. If you don’t want to run the logic through setInterval, you could look into a custom render loop, which would give you the ability to run logic on each render frame.
https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html#.ConstructorOptions
This can be done by setting useDefaultRenderLoop to false, and implementing your own render loop in its place.
Just to be clear, I’m not suggesting that this is a good option. It’s best to decouple update logic from the render loop, so the setInterval option is not a bad way to schedule updates, though you should time the interval using a high-precision timer to get accurate timing between update frames.