Improve Mesh Loading

In this article, we will demonstrate how to change the loading strategy for mesh data to speed up your browser app.

By default, mesh data loads from the top down, starting with the lowest resolution. This works if your initial screen is at a country level but is inefficient when zoomed into a city. The viewer loads all levels of mesh data, wasting time and bandwidth on barely visible data.

Let's watch a video to see this effect:

As demonstrated in the video, the buildings in this example are loading at a slow pace. A loading performance similar to that shown in the following video would be significantly more efficient.

The modification is substantial, not only in terms of loading strategy but also from the standpoint of user experience. To implement this change, it is necessary to add only a few lines of code to your application configuration:

function setMeshesToDetailFirst() {
   window.map.applyToAllLayers((layer) => {
       if(layer instanceof TileSet3DLayer) {
           layer.loadingStrategy = TileLoadingStrategy.DETAIL_FIRST;
       }
   });
}