Instanced Rendering of Parameterized 3D Glyphs with Adaptive Level-of-Detail using three.js
Sandro Steeger, Daniel Atzberger, Willy Scheibel, Jürgen Döllner · 2024
This paper contributes an optimized web-based rendering approach and implementation for parameterized meshes used as 3D glyphs for information visualization. The approach is based on geometry instancing by means of instanced rendering in three.js, and further allows for dynamic mesh selection according to a level-of-detail function and data-driven parameterization of the meshes. As an application example, we demonstrate a visualization prototype of a 2.5D information landscape that allows for exploration of source code modules of a software system. To this end, each data point is represented by a 3D glyph selected from a glyph atlas according to its type and level-of-detail. We benchmark the approach against a straight-forward baseline implementation using regular three.js meshes by evaluating the overall run-time performance. For this, we use a real-world dataset and synthetic variants with up to 50000 data points. Compared to the baseline implementation, the proposed approach achieves up to a 3000 % higher median FPS count on laptop and desktop-class hardware and allows for the visualization of up to 1300 % larger datasets interactively. These results suggest that leveraging instanced rendering for 3D glyphs with LOD increases the feasible dataset size for interactive, web-based visualization by an order of magnitude.