City Rendering

Rendering Building Corners with Open Street Map

So I finally got rid of those cubes which I showed in the first blog and made some progress.  I started by creating a simple web service to query data from the overpass API – I mostly stole the request URL from the Vizicities source. I hope the creator (Rob Rawks) doesn’t mind!

The main steps that I took were the following:

  • I converted the cube to a flat “plane” to act as the ground
  • Build the web service
  • Parse the JSON data from the overpass API
  • Convert the list of points to Cartesian coordinates
  • Use the nodes to generate a massive list of points
  • Convert the list of points to vertices
  • Draw these using the GL_LINES primitive types

The parse the JSON data from the API I used the fairly common (I believe) technique of relying on Key Value Coding to set the properties for me. As long as the class structure matches the JSON key’s this technique works brilliantly. On a side note –  I also noticed this was much faster than the CSharp parsing I had done in the past using a naive parsing implementation using This API returns a list of “nodes” which are points on the map. These nodes are then references by “ways” and “relations” to create polygons – for you other graphics dudes – you can think of the nodes as “vertices” and the “ways” as a collection of indices into the nodes (though of course with lots of metadata around the objects).

Once I had the list of points, the next step was to convert them into a coordinate system I could render with. Our planet is an approximate ellipsoid shape. To make it easy to render  the best option is to project this onto a flat surface. This in itself is a complicated topic with  multiple projection solutions available (each with advantages and disadvantages). In this case, any simple projection formulae would do. I searched online and found this implementation which converts to an OSGB coordinate system (Ordnance Survey Great Britain). I simply pasted this into my project and then converted it to C/Objective-C.

Once I had all of the nodes in my rendering coordinate system, I simply looped through the data and added some additional points to convert this into vertices. I chose to draw using GL_LINES as this is by far the easiest I could think of to get started with. Of course later on we will want to convert these to triangles!!! Other than this there were some other basic changes so I could add color information to each vertex etc.

I am not entirely sure what I will work on next. I might add some controls to zoom, pan and rotate the ground so I can better see/debug the changes I make. I hope to eventually add shadows, textures, vegetation, simulate the water and maybe experiment with some physical based rendering.

Here are some pictures of what I have so far:

Looking at an angle
Looks much better when rendered from a top down view
Looks much better when rendered from a top down view

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s