Game Development Reference
In-Depth Information
3
I
A WebGL Globe
Rendering Pipeline
Patrick Cozzi and Daniel Bagnell
3.1
Introduction
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.
3.2
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
globe,
×
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
85
≈±
for the most common
projection.
 
Search Nedrilad ::




Custom Search