Google Summer of Code/2015/AcceptedProjects/WebGL frontend for OSM2World

From OpenStreetMap Wiki
Jump to: navigation, search


Student: Sukant Garg (gargsms)

Mentor: Tobias Knerr (Tordanik)


This project aims to utilize the already available 3D data on the OpenStreetMap servers to render a 3D view of the world map in the browser.

We plan to use three.js to render the data using WebGL.

Weekly Progress

Week 1

Research work on the new file format to use for transferring data was done. The file format is now decided. We don't have a name for it yet because we don't need it for now. The format will be a rolling release till the project completes, or maybe later as well.

The format is made of binary data kept in a parse-able order. A sample file can be of this format:

 003 002 [x1 (int24)][y1 (int24)][z1 (int24)][x2 (int24)][y2 (int24)][z2 (int24)]

where 003 is a single byte encoded data in a UintClamped8 format that specifies the object type, here Vector3D. Other object types for now are 011 for a group of Triangles.

002 is a single byte encoded data specifying the count of entries in the group. Here there are 2 entries. A maximum of 255 entries can be made in a group for obvious reasons.

The later part is the vertex data. Each of the co-ordinates have an index which will remain valid throughout the file (unlike OBJs.)

Triangles have other data like Diffuse, Ambient and Specular information apart from the vertex entries and count.

Week 2

The work on writing the parser was started. The parser is written in JavaScript as it needs to render the data on the client side.

I will put the link to the GitHub repository here soon.

Before writing the parser, it felt quite easy to implement because of the generic nature of the format.

Later, a few anomalies were found. The Uint32Array in JavaScript requires the byte-stream to be precisely a multiple of 4 bytes. This was not guaranteed by our file format. So the shift was made to DataView which can tokenize the byte-stream in any multiple.

Week 3

The parser now works just fine. I need to check the integrity of the parser with some real files. I will be doing the same very soon.

Week 4

The rendering of the data received will be finished soon.

Later, I need to put everything in a web page that performs XHR to fetch data and render the same on the screen.

Week 5

The hard part of the project starts now.

The panning, and zooming algorithms are to be implemented in the code to make the render navigable.