Earth in Google maps: rendering trillions of triangles in JavaScript

Abstract

JavaScript is not typically associated with high performance rendering. This talk covers techniques that were used to bring the massive data set of Google Earth into a web browser using standard JavaScript and WebGL. The client has access to a 3d model of the entire world, an ever-growing data set stored in servers, and the client needs to fetch and display any views (see Figures 1 and 2) of it very quickly with a limited memory budget of few tens of megabytes. The total data set, on the other hand is measured in trillions of triangles and their associated textures. The talk describes the hierarchical subdivision and the data layout used to manage this complexity. Level-of-detail mechanisms are used to render objects at different scales and to provide a quick preview when high resolution data is still loading. The unpredictable network bandwidth and latency pose additional challenges. The talk describes the algorithm used to decide which data should be 1) requested, 2) evicted, 3) kept in memory, or 4) rendered. Rendering of map elements such as roads and labels is more challenging in 3d than on a 2d map. The talk describes techniques that were used to render vectors and labels quickly at right location on the surface of the 3d terrain. JavaScript was not originally designed for high performance realtime use. For instance, the garbage collector may kick in at any point pausing the execution for tens of milliseconds. The talk describes the memory management techniques used to avoid this. To optimize for stable frame-rate and quick load time, tasks have to be carefully scheduled such that data processing and rendering can happen seemingly at the same time. The talk describes how the work was scheduled in the main execution thread and in Web Workers. To make the Earth appear realistic, atmospheric attenuation needs to be modeled accurately. The talk describes how the atmosphere and the real-time clouds are rendered.