Dynamic billboard animations

CesiumJS
1

Is it possible to create animated billboards? For my use case, I’m trying to create a “pulse animation” around a billboard (like this:
Edit fiddle - JSFiddle - Code Playground). 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: svg - How to draw custom dynamic billboards in Cesium.js - Stack Overflow) but it seems to only render static SVG images rather than displaying the animated SVG.

Any help would be greatly appreciated!

2

As you discovered, we don’t have good support for animated billboard images yet. Since it’s a perfectly valid use case, I submitted a new issue https://github.com/AnalyticalGraphicsInc/cesium/issues/2319 that you can keep an eye on. Not promises as to when we’ll get to it; but as always we appreciate any pull requests.

3

I first tried using an animated .gif which didn’t work, but I have had success animating a billboard using CZML by loading images of the animation in intervals (see code below). However, this method ties the animation to the clock, so I’m not sure it can be looped.

What I’m struggling with now is using “scaleByDistance” so the billboard doesn’t scale.

[

{

“id”:“Target”,

“availability”:“2014-11-06T08:11:16Z/2014-11-06T08:32:25Z”,

“billboard”:{

“scale”:1.0,

“scaleByDistance”:“undefined”,

“image”:[

{

“interval”:“2014-11-06T08:32:05Z/2014-11-06T08:32:05.1Z”,

“uri”:"…/Images/pyro/explosion_01.png"

},

{

“interval”:“2014-11-06T08:32:05.1Z/2014-11-06T08:32:05.2Z”,

“uri”:"…/Images/pyro/explosion_02.png"

},

{

“interval”:“2014-11-06T08:32:05.2Z/2014-11-06T08:32:05.3Z”,

“uri”:"…/Images/pyro/explosion_03.png"

},

{

“interval”:“2014-11-06T08:32:05.3Z/2014-11-06T08:32:05.4Z”,

“uri”:"…/Images/pyro/explosion_04.png"

},

{

“interval”:“2014-11-06T08:32:05.4Z/2014-11-06T08:32:05.5Z”,

“uri”:"…/Images/pyro/explosion_05.png"

},

{

“interval”:“2014-11-06T08:32:05.5Z/2014-11-06T08:32:25Z”,

“uri”:"…/Images/pyro/explosion_06.png"

}

],

“show”:[

{

“interval”:“2014-11-06T08:11:16Z/2014-11-06T08:32:05Z”,

“boolean”:false

},

{

“interval”:“2014-11-06T08:32:05Z/2014-11-06T08:32:25Z”,

“boolean”:true

}

]

},

“position”:{…}

}

]

4

Is it possible to create animated billboards? For my use case, I'm trying to create a "pulse animation" around a billboard (like this:

I was trying to achieve the billboard Image with the GIF format.

But no use.
If someone here did use the GIF formats in billboard or atleast in entity api level please help me out.

5

Hi, I asked Matt to provide his GIF implementation in the GitHub issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/2319

6

I tried the solution given by mat for animated bilboards but why the imagery is not coming on the globe. Could you please provide a solution where i can have both animated bilboard and the imagery.

7

If you’re using the old version of CesiumJS linked to in that issue, then imagery doesn’t appear because it’s now served through ion, and old versions don’t support ion.

The best way would be to copy the changes from Matt’s branch (which you can see here https://github.com/AnalyticalGraphicsInc/cesium/compare/animated-billboards ) into the latest version of CesiumJS. This does involve knowing how to edit the source and rebuilding CesiumJS, which can be tricky if you’re not comfortable with JavaScript, but here’s the build guide: