Canvas 3d JS Library

Some time ago we had a demo that would give a 3D representation of routes obtained from the Google maps api, along with some points of interest the user could search for (like coffee shops). While the library keeps getting updated, this demo did not, and no longer worked on systems running recent versions of the library. This was unfortunate as the demo showed some neat applications for C3DL, so we decided to resurrect it.

Having never seen the original working, I had a difficult decision to make. Do I update the existing code to work with the newer versions of the library? Or do I write a new demo from scratch? In theory the update should have been the easier route, but it was using code that had been rendered obsolete before I joined this project. Instead of learning an outdated version of the library to update one demo, I kept only the basis of the code (mostly the interaction with the Google Maps API), and wrote most of the rest. As the demo progressed we had several ideas about things to be improved or added. For example, each of those points of interest gets a little 3D model (a tetrahedron for now) to show where it is, but we realized it would be better if the user could click on that point of interest and find out what it is, what the address is etc., so now you get a pop-up with the name, address and phone-number of the point.

Without further ado, here’s a picture of (and link to) the demo:

I did have to limit the number of roads that are visible at one time, and only show points of interest that are close by, just to reduce the strain on the system (A trip from Toronto to Vancouver involves a lot of roads and an extraordinary number of coffee shops).

There are a few things that I’d like to improve on when the opportunity presents itself, or would be happy to see other people try.

• This uses an old version of Google’s API. It would be nice to bring it up to version 3.
• The overhead compass would look nicer if it was partially transparent (So you could see the letters indicating the directions, but not the rectangle they sit on). While this concept is supported by OpenGL and the png format, support for it isn’t in the library yet.
• The tetrahedron’s that indicate points of interest work, but a better model would make the demo look nicer.
• A road model that was more than just a flat rectangle could make the demo look nicer too.
• When you click on a point of interest, it causes a pop-up with information about that location, instead it would be nice to have that information appear as floating text in the canvas, so it doesn’t interrupt the demo.
• It would also be nice to get elevation data, but the Google Maps API doesn’t provide it, so it would have to come from somewhere else. Then we could make the roads go up and down with the elevation instead of assuming the world is perfectly flat. That would require a little extra code to accommodate the new data, but most of the hard calculations are already done.
• The overhead compass often misses getting drawn when the page first loads, but will show up on a refresh. This is peculiar as the code is supposed to wait until all models are loaded before it actually starts.