Skipping Levels of Detail


Cesium and 3D Tiles use Hierarchical Level of Detail (HLOD) to adaptively load and refine 3D models. Doing so allows the engine to render low resolution tiles when they are far from the camera and high resolution tiles when they are near the camera. However, standard methods of displaying HLOD models will load every level of resolution up until the desired resolution is achieved.

New updates in Cesium’s 3D Tiles renderer now allow it to skip levels of detail while loading, significantly decreasing load time, network requests, and memory usage. In order to accomplish this, Cesium only loads a subset of the tiles when traversing the HLOD tree based on visual heuristics and applies some clever rendering tricks to accurately blend between multiple levels of detail. By doing this, Cesium prioritizes higher resolution tiles.

A comparison of our original (left) and new (right) loading methods. The image on the right converges to the final result in signficantly less time and downloads fewer tiles. Both of these were captured with cache disabled on a throttled network connection.

An example 3D tileset containing City Hall in Philadelphia.

Adding the optimization to skip levels of detail has decreased both load time and memory usage by 30-50%, with minimal impact on performance while loading and no performance difference in the steady state when no tiles are loading. Our original algorithm loaded the above model City Hall on a throttled connection in 16 seconds while the optimized code loaded it in 11 seconds. Skipping levels of detail dropped data usage from 32 MB to 22 MB.

The graphs below depict the data downloaded and the frame time as the tileset loads. The original method (left) shows significantly higher data usage relative to our new level-skipping approach (right). Performance graphs show that frame rates are largely unaffected. After the tileset has finished loading, the graphs show that with either method, the time to render a single frame drops to around 16ms.

Original Optimized

In order to accomplish the level skipping without glitches and popping artifacts, Cesium applies several rendering tricks to blend between multiple levels of detail. The graphs below show the number of draw calls used to render AGI’s headquarters depicted in the animated image at the top of this post.

On the left is a graph depicting the number of draw calls used to render the tileset using the original method. The image on the right shows the number of draw calls made while the model is loading with the new level skipping method. We can observe that in the beginning, when the model is mostly not loaded, the new method makes a greater number of draw calls than the old method. This is due to additional draw calls for blending levels of detail. However, both approaches level off to the same number of draw calls, showing that the new approach incurs no extra cost after the tileset has finished loading.

Original Optimized

We’re excited about this new approach to rendering Heirarchical Level of Detail which will significantly speed up Cesium and 3D Tiles!

Get started with a Cesium ion account

Sign up for free