Is it possible to create animated billboards? For my use case, I’m trying to create a “pulse animation” around a billboard (like this:
http://jsfiddle.net/Fy8vD/). Initially I created a div on top of the billboard and animated it using CSS3, which worked great except it doesn’t adjust its position with the billboard as the map zooms or pans.
Next, I noticed that the Billboard .image property can be set as an Image or Canvas or Promise, so I created an additional billboard with a Canvas that contains a circle that’s animated using requestAnimationFrame where its transparency (globalAlpha) and scale are changed per animation frame (i.e. creating the pulse animation). Unfortunately, this isn’t as smooth as I would like and also I’ve noticed that it eventually crashes with an error unless I cancel the animation before a number of frames are executed:
[.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not ‘texture complete’
I’m guessing this is because I’m setting billboard.image = canvas on every animation frame and Cesium is creating a new image during each step of the animation (I noticed the image GUID changes per animation frame and it seems another user is seeing a similar issue: http://cesiumjs.org/forum.html?place=msg%2Fcesium-dev%2FcF9Vt28Wk-4%2FnJ68p3YONKcJ)
Finally, I looked into creating an Image() object with a src set to an SVG that’s animated (after seeing a stackoverflow post about it: http://stackoverflow.com/questions/24869733/how-to-draw-custom-dynamic-billboards-in-cesium-js) but it seems to only render static SVG images rather than displaying the animated SVG.
Any help would be greatly appreciated!