A journey of modern mapmaking.
As recorded by @natevw, explorer for &yet.

RSS Feed

Making maps with WebGL

At &yet, we like to think that what’s the future for the web is the future for us. Well, WebGL is an upcoming HTML5 framework that will let web apps take advantage of the fast graphics cards in computers and smartphones, and it may be standard soon. Our resident “cloud cartographer” has explored some uncommon ways of using WebGL, and is now writing about the results in third person.

What You Are About To See uses WebGL to quickly transform raster and vector data using map projections. Rather than focusing on the 3D capabilities of graphics cards and street-level map data, this prototype concentrates on making a nicely shaped world map, and then animating between projections to test its speed.

View demo
diagram of square raster and vector coordinates getting churned through GPU to produce initial Robinson picture

(Note: you’ll need to use Chromium [Mac OS X, Windows, 64-bit Linux or 32-bit Linux] or another properly-configured nightly build browser.)

This is done by doing the complicated projection math in a vertex shader on the accelerated graphics card processor instead of in JavaScript on the main CPU. The graphics card’s GPU is great at drawing pixels from shapes and images, and most CPUs have enough other things to keep them busy, so it’s really helpful to move work to the GPU in this way.

With a bit more work on this prototype, and a bit more time for browsers to finalize their implementations, you can imagine being able to embed world maps in webpages that interactively display and animate data. With the flexibility and speed of WebGL, the map wouldn’t have to be pre-generated in a fixed projection, but could instead be dynamically reshaped based on the user’s zoom level and area of interest.

blog comments powered by Disqus

from &yet