Image update every tick - flashes

CesiumJS
1

Hello everyone,

I've been using Cesium in my Lab for a while and I love it. Recently I've been trying to overlay a time-variant heatmap onto Cesium. All three of the methods below work, but they flash - either transparent or white - between frames.

The heatmap images come from a canvas (via toDataUrl()). They are not small - 2K x 1.7K for example.

Here's what I've tried:

* SingleTileImageryProvider
    - Create a new one each tick, and remove the old one when the new one's promise fires. This causes a flash each frame
    - Try to update the existing STIP - still flashes
    - Use loadImage to ensure the canvas.toDataUrl() has resolved to an img. Still flashes
    - Tried creating the ImageryLayer myself, then using add() (instead of addImageryProvider) - flashes

* Entity
    - Create a new rectangle Entity every frame with a new image, remove old one. Flashes (white, or transparent if I slam _defaultTexture)
    - Use loadImage to ensure the canvas.toDataUrl(), then:
      - Update the exiting Entity's rectangle.material.image to a new image - showed solid black
      - Replace the Entity's ImageMaterialProperty with a new one - showed nothing

* Primitive
    - Create a new one each tick, and remove the old one - flashes
    - Slam rectangle.material to a new Material - flashes

Yes I know of the existence of HeatmapImageryLayer, but I have not tried that yet, because I'm trying to avoid forking Cesium and building it myself.

I don't know for sure, but I suspect that just waiting for loadImage() to finish isn't going to help because Cesium has to make a texture out of that image. I'd like to know when *that's* done so I can defer adding the ImageryLayer until then, but I can't figure out how to know.

The only way I've been able to get this to work smoothly is to pre-create a bunch of SingleTileImageryLayers with show: false, then successively turn them on/off, effectively using the imageryCollection as a cache.

Can I provide the image using a CallbackProperty?

I'm running out of ideas. This has to be a fairly common use case - there are lots of threads here where people are talking about animating billboards, updating images, etc.

Any wisdom as to what to try next?

Thanks,
Bryan

1 Like
2

Hello Bryan,

It sounds like you’re running into this bug: https://github.com/AnalyticalGraphicsInc/cesium/issues/1640

I’ve added a link to your forum post so we can notify you when we have a chance to look into it.

Sorry, I don’t have a good workaround in the meantime. Does anyone else have any suggestions?

Best,

Hannah

3

Thanks Hannah. I may be forced to write my own SingleTileImageryProvider :-S. I may also try emitting a video of the heatmaps over time and using a time-synced video material.

4

I have meet the same problem as yours, I also create heatmap with imagerylayer, when update heatmap ,the imageylayer flashes.How did you solve this?

5

I've met the same problem,have you solved it?

6

Have you tried any of the workarounds described in this issue?

If you had any success with that it’d be good to hear here or update the GitHub issue (and of course a contribution if you find a good fix would be super appreciated since this is such a common feature).