Brett Camper

Tesselator’s Delight

Introduction to OpenStreetMap for WebGL

Abstract

In the past couple years, WebGL has moved from an emerging technology to a widely supported one, providing a promising & powerful toolkit for rendering OSM data in the browser. But WebGL is often daunting and foreign to web programmers, and surprisingly few resources are available to learn.

In this talk I hope to help demystify WebGL for OSM, introducing the basics of a rendering pipeline using open source code examples, including: getting data from the server via GeoJSON or binary vector tiles, turning OSM geometries into WebGL-compliant triangle primitives ("tessellation"), constructing neatly joined polygonal line segments for roads and other pathways, extruding building outlines into 3D models, and using WebGL vertex and fragment shaders to alter effects like lighting direction and viewer perspective.

All presented code is open source and also available as a plugin for Leaflet JS, making it easily accessible to developers who want to experiment with adding WebGL and 3D components to their maps.

About the author

Brett Camper is interested in graphics programming, data visualization, game & interface design, and related areas. He recently helped start Mapzen, a company focused on developing tools & apps to improve open source geo.