HTML-land and fancy billboards


I had some issues with using billboards which I may detail and ask about in another thread. But the summary is difficulty with advanced animations, many image svg redraws, ever expanding TextureAtlas with many image swaps. So I am testing HTML to fill in and I am encountering some issues.

There are a set of points with longitude and latitude and some fancy graphics. I render these as HTMLElements. Then on 'cesium globe motion/updates' I center that HTML over the corresponding location using something like this:

position = new Cesium.Cartographic.fromDegrees(lon, lat, 0);
cartesian = scene.globe.ellipsoid.cartographicToCartesian(position);
result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
//set styles using x y of result

That works great, except the HTML does not smoothly track as you pan and zoom. Some approaches to address that were:

--- first naive approach ---
use camera.moveEnd.addEventListener

Works but not smooth, but very jumpy since it obviously waits until you stop moving.

--- less naive ---


Better. But there is an annoying lag in the HTML movement trailing the map movement. This lag is larger the faster you pan. Out of curiosity would postRender had been a better choice?

--- was surprised to see this next one not work smoothly ---

Custom render loop

function tick() {

The same as above, annoying lag.

--- ---

It feels as if the components controlling the globe motion are somehow ahead of the render loop before the above moveHTML finishes.

The moveHTML method moves a single HTML element (when testing the above) and is rather fast plus whatever time a single wgs84ToWindowCoordinates and cartographicToCartesian takes.

I already have a hacked version of Cesium where I restricted camera tilt and am willing to hack it further. Is there anything that would help keep these two worlds better in sync? I feel like the hacks I made in rotate3d where very smooth, no camera jumping i.e. not correcting overshoots and blocking it from happening. Is there something similar I could use for this?

Much appreciated for any insights, comments, opinion, or voodoo secrets. Another fair statement is stop using html for the love of all things and ask about billboards issues.



Sorry, I don’t have a good suggestion for you. I would think using a preRender event would work, so I’m not sure where the lag would be coming from. Is there an easy way to make a sandcastle example to demonstrate this?

Matt has an old branch for animated billboards that might interest you:



Hey Hannah,

Thanks for taking the time to reply. I took your suggestion and built a Sandcastle and to my surprise it worked perfectly. So I spent a chunk of time debugging to find the issue. The culprit was not Cesium; it was 'user error'.

Thanks for the quick reply!