1 of 23

2 of 23

Google Maps + WebGL

= MapsGL

Bill Baxter, Software Engineer, MapsGL team

WebGL Camp #4, San Jose Dec 9, 2012

Google Confidential and Proprietary

3 of 23

MapsGL

Google Confidential and Proprietary

MapsGL is our effort to move Google Maps into WebGL.

[Switch to Live Demo]

MapsGL just launched as a public opt-in Beta on October 13 of this year.

It’s live right now on maps.google.com.

If you visit maps.google.com with a supported browser, it will ask you if you’d like to try it out.

If you click yes, it will do a quick test to make sure your machine is capable, and switch you to the new WebGL renderer if everything checks out ok.

Once you’re in MapsGL everything looks remarkably similar at first.

But of course what's happening under the hood is completely different.

Instead of the server sending us pre-renderered tile images, the server sends just the raw vector data, and we use WebGL to create a rendering of that on the fly, on the browser.

And this enables some nice enhancements:

1 - text now zooms smoothly as you go in and out, and roads don't get jaggy from trying to zoom raster images

2 - 3d buildings

[Go to Rome, satellite mode]

3 - oblique rotations

4 - street view integration

4 of 23

Why?

- Better Maps

- Better Web

Google Confidential and Proprietary

5 of 23

Google Confidential and Proprietary

6 of 23

Google Confidential and Proprietary

7 of 23

Google Confidential and Proprietary

8 of 23

Fluid

Better Maps

Google Confidential and Proprietary

9 of 23

2005

Smooth scrolling maps using AJAX

Google Confidential and Propertiery

10 of 23

Fluid

Seamless

Dynamic

Fast

Svelte

Better Maps

Google Confidential and Proprietary

SEAMLESS INTEGRATION

You can render anything in WebGL, and more importantly get it to perform well. So having our maps in webgl means we can transition smoothly into things like streetview that used to require abrupt jarring switchovers to different technologies. Now we can smoothly transition between things like 2D map, obliques, streetview.

DYNAMISM

Because it’s real 3D we can do things like render 3D buildings with parallax. The rendering of the building changes dynamically with the viewpoint. And the shadows are actually computed to be correct for the time of day and year at the lat-long you're looking at.

With classic maps we have to render 3D buildings with a fixed orthographic perspective. With WebGL now anything on the map can be dynamic if we want it to be.

SPEED

GLSL shaders let you dodge the javascript performance wall. They execute incredibly fast.

DATA SIZE

This was very important for Google Mobile Maps, but its a nice benefit for MapsGL too.

11 of 23

TECH

GPUs:

+ Great at rendering textured polygons

- Not great at rendering lines

- Not great at rendering text

- Not great at antialiasing

Google Confidential and Proprietary

12 of 23

Drawing Lines

Google Confidential and Proprietary

13 of 23

Road Lines

Google Confidential and Proprietary

ROAD LINES

When we talk about rendering lines, this is what we mean. Curvy bendy fat lines with outline strokes. In most sane drawing apis you just say what line width you want and specify the mitre/join type. Not in WebGL. WebGL basically only knows about triangles. So everything has to be expressed as triangles.

Also, our need for consistent outlines complicates the job quite a bit.

Where roads at the same level meet, the outlines should not go through the intersection. Where they pass over one another, the topmost road should appear on top.

Because of this, we actually render our roads in four passes- two for the straight segments & their outlines, and two for the joins and their outlines. This ends up reducing the amount of geometry we have to pass down to the graphics card as I'll explain in a second.

Let me show you how it works.

14 of 23

No Joins

Google Confidential and Proprietary

15 of 23

Just Joins

Google Confidential and Proprietary

16 of 23

Just Joins

Google Confidential and Proprietary

17 of 23

Road Lines

Google Confidential and Proprietary

18 of 23

Anti-Aliasing

Google Confidential and Proprietary

19 of 23

Software AntiAliasing

Google Confidential and Proprietary

20 of 23

No AntiAliasing

Google Confidential and Proprietary

21 of 23

MultiSample (MSAA)

Google Confidential and Proprietary

22 of 23

2x2 SuperSampling

Google Confidential and Proprietary

23 of 23

Software AntiAliasing

Google Confidential and Proprietary

...you can tell on the nearly horizontal lines it is not quite as good.

Incidentally I have experimented a bit with FXAA, which is a "morphological" antialiasing technique developed by a fellow at NVIDIA, but unfortunately it turns out it does not work well at all when you have two edges a pixel apart, like you have, say with a road that has a 1 pixel outline stroke. Which is basically all of our roads.

But morphological or other AA techniques are certainsomething we're interested in and looking into. We do not want to have moving to WebGL mean we take a step backwards in rendering quality. How to do quality antialiasing using GPUs is still an active research area.

[This talk was followed immediately by Roy Williams' talk about testing WebGL and his GLSL Unit shader unit-testing framework.]