OpenGL ES 2 shaders for drawing buildings and roads like Google Maps does

Question

I'm trying to create a shader that'll give me an effect similar to what buildings and roads look like on 3D Google Maps. You can see the effect interactively if you enable WebGL at maps.google.com, and I also found a couple of screenshots that illustrate what I'm trying to achieve:

Thing I noticed:

• There's some kind of transparency thing going on with the roads/ground and the buildings, but not between the buildings themselves. It might be that they're rendering the ground and roads after the buildings with the right blend functions to achieve that effect.

• If you look closely, you'll see parts of the building profiles have an outline. The roads also have nice clean outlines. There are a lot of techniques for outlining things with shaders... but I'm curious to find out what might have been used in this case considering mobile hardware and a large number of entities with outlines (roads and buildings)

• I'm assuming that for the lighting, some sort of simple diffuse per-vertex shader is being used for the buildings though I could be wrong.

I'm especially curious about the 'look' they achieved with buildings (clean, precise outlines/shading). It reminds me a little of what you'd see when designing stuff with CAD applications like SolidWorks:

I'd appreciate any advice on achieving this kind of look with ES 2 shaders.

Answer 1

Alright, I played around with it.

First, it seems the WebGL stuff is pretty US-centric (aren't all the cool toys?), so it doesn't work for my hometown. Here's an area that works: the White House in Washington D.C.

If you look at that with the WebGL rendering, you can see pretty clearly that the light is always coming from the north-east. All surfaces pointing towards that are lit white, the rest are lit gray. It seems to me that the rendering is done in three stages:

• The map is rendered using vector graphics. This is very visible in for instance the round road around the White House lawn, you can clearly see the circle being approximated.

• Next, the buildings are rendered using flat surfaces. What I mean by that: each surface only has one normal, which it uses to calculate the lighting. The light comes from the north-east, but it could also be fake. Note that only three colors are used: white, gray and dark gray. This could easily have been baked into the model.

• The outline of the building is rendered using lines. This is more visible here. Note the right side of the Anfiteatro Flavio, you can clearly see the outline of the triangles making up the model.

So, how would you display something similar?

• Render the map as you would normally.

• Either render the buildings to an FBO or turn off depth writing while rendering them.

• Render the outline off the buildings, optionally to the building FBO.

• Combine the FBO with the backbuffer by rendering it to a full-screen quad or turn depth writing back on.