How to create animated heatmaps?

Hi @Rob, you were on the right track with this comment:

The only way I can imagine using rectangle entities is by creating a procedural texture material that allows the number of rows/columns to be specified and an array of values or colors specified for each “cell” in the resulting grid. However, I have no experience with materials/shaders so I don’t know how feasible this is or what the performance would be like.

We did something similar for another project that required heatmap visualization. I extracted some of the functionality into a sandcastle example:

https://sandcastle.cesium.com/#c=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

Peek 2021-09-08 14-59

The idea is to create a textured ground primitive and update the texture whenever the values change. Just note that this example uses some classes in the private Renderer API like Texture and Sampler. It also it relies on some undocumented behavior in the material API that lets you use a Texture object directly instead of an image uri. Check out the comments in the sandcastle for more details about the approach.

I don’t have code for moving the ground primitive. Worst case you can create a new primitive each time it needs to move, as long as this isn’t happening super frequently. You should be able to re-use the same texture.

Let me know if this helps. I’m happy to explain the approach in more detail if anything is unclear.

4 Likes