Hello,
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 ---
scene.preRender.addEventListener
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() {
this.moveHTML();
this.viewer.render();
Cesium.requestAnimationFrame(tick.bind(this));
}
Cesium.requestAnimationFrame(tick.bind(this));
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.
Thanks,