Render optimization regarding updateData on a source.

[wayofthefuture]

In PR (#1605), updateData was added as an optimization for setData so that sources could be modified incrementally resulting in performance gains. In our application we call updateData once per second with considerable feature changes, and use heavy animations as well, so we are seeking to optimize performance as much as possible. We have been tracking re-renders of the map and are wondering if there could be further performance enhancement regarding updateData and map re-renders. When using updateData (or setData) to add/remove 1 feature per second, it triggers about 30-50 map renders per second. Could there be a significant performance improvement by batching updates somehow prior the next requestAnimationFrame resulting in 1 map re-render per updateData? I'm new to Maplibre and don't understand why the removal/addition of one polygon on a source would cause so many renders to occur. If there was a way to reduce this render count, or possibly pause rendering on the map pending source modification, I think it could greatly improve performance (at least in our application). The 'render' event is fired in map.ts once in the render event and it doesn't appear to be fired anywhere else. Please see the following code pen below where we remove/add 1 polygon per second via updateData and the render count is indicated at the top of the page: https://codepen.io/wayofthefuture/pen/zxGzovK?editors=0010

[HarelM]

I'm not 100% sure this is the case, but I'm guessing that there are things that need to be animated as part of the data update and thus the spikes in render count, but feel free to try and optimize this.

[wayofthefuture]

Do you mean things that need to be animated in Maplibre or our application? In the codepen you'll notice that we are only adding 1 polygon and removing 1 polygon once per second.

[HarelM]

Maplibre, yes I saw the codenpen and agree that it's a strange behavior, but it might be related to some tile boundary stuff (i.e. when the polygon is placed in a specific tile it causes some animation requests), IDK...

[wayofthefuture]

I went ahead and updated the codepen to implement a render feature addition to map.ts. It basically introduces a debounceRender(func, frameRateMs) method and isRenderDebounced boolean. So in the event you wanted to call setData or updateData using a ton of features and have that complete before the next render, you could call map.debounceRender(func, frameRate). Using this on 10,000 features I noticed a GPU improvement of about 500% (at least on my computer). Since there is no truly asynchronous way to await updateData worker processing, then the frameRate seems to be the only way. However, if the work takes longer than the frameRate to complete, then the custom debounce will not take effect. https://codepen.io/wayofthefuture/pen/zxGzovK?editors=0011

  //just temporarily using __render as a placeholder for the original _render
  map.__render = map._render;

  map.debounceRender = (func, frameRateMs) => {
    map.isRenderDebounced = true;
    try {
      func();
    } finally {
      setTimeout(() => {
        map.isRenderDebounced = false;
        map._render(performance.now());
      }, frameRateMs);
    }
  };

  map._render = (paintStartTimeStamp) => {
    if (map.isRenderDebounced) return map;
    map.__render(paintStartTimeStamp);
  };

[HarelM]

While I can't argue about performance improvements with this method, the risk here of not rendering smoothly is great and there might be some code flow that this will get hurt (some animations of stuff, flyto, easeto etc).
I don't have a good idea how to improve this situation, unfortunately...
If you could think of an API that will facilitate the current behavior but won't be too intrusive it might be the path forward.

[wayofthefuture]

Ok thanks