Game Development Reference
A WebGL Globe
Patrick Cozzi and Daniel Bagnell
WebGL brings hardware-accelerated graphics based on OpenGL ES 2.0 to the
web. Combined with other HTML5 APIs, such as gamepad, fullscreen, and web
audio, the web is becoming a viable platform for hardcore game development.
However, there are also other killer applications for WebGL; one we are partic-
ularly interested in is mapping. The web has a long history of 2D maps such as
MapQuest, OpenStreetMap, and Google Maps. WebGL enables web mapping to
move from flat 2D maps to immersive 3D globes.
In this chapter, we present a WebGL globe rendering pipeline that integrates
with hierarchical levels of detail (HLOD) algorithms used to manage high res-
olution imagery streamed from standard map servers, such as Esri or Open-
StreetMap. Our pipeline uses screen-space techniques, including filling cracks
between adjacent tiles with different LODs with a masked Gaussian blur, filling
holes in the north and south pole with masking and ray casting, and avoiding
depth fighting with vector data overlaid on the globe by rendering a depth plane .
We use these techniques in Cesium, http://cesium.agi.com , our open-source
WebGL globe and map engine. We found them to be pragmatic, clean, and light
on the CPU.
Rendering Pipeline Overview
Imagery is commonly served from map servers using 256
256 RGB tiles. Tiles
are organized hierarchically in a quadtree, where the root node covers the entire
180 ◦ to 180 ◦ longitude and
90 ◦ to 90 ◦ latitude, 1 at a very low resolu-
1 As we'll see in Section 3.4 the latitude bounds are actually
for the most common