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

Posted by Pris on Game Development See other posts from Game Development or by Pris
Published on 2012-07-04T02:35:41Z Indexed on 2012/07/04 3:23 UTC
Read the original article Hit count: 589

Filed under:
|

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:

enter image description here

enter image description here

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:

enter image description here

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

© Game Development or respective owner

Related posts about shaders

Related posts about opengl-es2