Efficient and smooth animated tiles

[mdespriee]

Hi there,

Our use case is to display animated precipitation radar data. The animation is 72 timesteps long (-3h->3h by 5mn), image switch every 500ms (+ a manual slider for the user to navigate along time).
Given the geographic coverage of data and the backend capabilities, the most adapted is to display tiles. But our attempts with that approach led to quite a bad experience. In short, there was a lot of flickering of tiles, especially when moving/dragging the map. The browser was also quite overwhelmed with queries, 256*256 default size of tiles was too small.

We switched back to an imageOverlay-based implementation, with some manual prefetch of images to have them in the browser cache to avoid missing images in the animation.

That's not very satisfactory as we had to hard-code some regions, and the image we serve are too big and costly (in throughput for the user, and real money on back-end side). We're still interested in a tile-based approach, probably with larger tiles than the default 256px.

Are there any viable approaches (plugins ?) to properly animate tileLayers with a good overall user experience ?

[IvanSanchez]

I can suggest leveraging https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GL/ . It lets you define several URLs per tile, so each of them will be loaded as a WebGL texture, and then you should define a custom shader to choose the right texture based on the value of a uniform (as a bonus, interpolate as needed).

One issue with this approach is the number of available textures per WebGL context. The number varies between 8 and 64, depending on the GPU+OS+browser combination. Loading 72 textures is gonna be problematic.

[mdespriee]

Very interesting, thanks.
Indeed, the 8-64 limit compromise the thing, but I like the 1 tile/many textures approach 💡

[IvanSanchez]

Another option is to do <video> tiles, kinda like L.VideoOverlay. But such a "videotilelayer" should have extra code to sync all the video tiles to the same frame, and that also requires the backend to serve video files.