Animated Dashed Lines - Best Approach?


Loving Cesium - thanks for all your great work.

I’m trying to animate a polyline with a dash pattern so that the dashes “crawl” along the line to indicate direction of flow or travel.

I’ve come up with a solution using a CallbackProperty for the dash pattern, which is demonstrated in this gist.

This works well enough, but my question is whether this is the best approach for this sort of thing?

Would I be better off trying to define a material using Fabric, or create a modified version of the existing PolylineDashMaterial.glsl shader to include a time element?

Are there any performance benefits to these respective approaches?



Howdy Andrew!

Thanks for posting your approach here, I’m sure it’ll be useful to others in the community here. I think if you aren’t using a lot of polylines in the scene (less than 100 or so) then this is a fine approach. The only issue with CallbackProperties in general is that they mark an entity as dynamic, which forces recreating a lot of the underlying primitives.

Creating a custom material where you can move this along by updating a uniform would likely be faster if it is indeed recreating these primitives every frame. I would be wary of prematurely optimizing this though. If you are running into performance issues, I would first use something like the Chrome profiler to benchmark and see where the bottleneck is, and try to run an isolated test with and without the callback material before delving into creating a custom material.

What kind of project are you working on?