BabylonJS + WebGL + Bing + Maps + 3D = BabylonBing
- Posted: Dec 11, 2013 at 6:00 AM
- 13,282 Views
Today's Web Wednesday from Andy Beaulieu shows how we can play with the new WebGL capabilities in IE11, using the power of Bing's 3D Maps...
NOTE: Before you read any further, please note that at the time of this writing, there is rumored to be a native Bing Maps 3D WebGL control, and the release is likely imminent! Still, this sample will be very useful if you are interested in terrain mapping and other aspects of using BabylonJS!
Bing Maps Tile System
When you visit Bing Maps (or google maps for that matter), the view you get is actually composed of a series of square "tiles" - each being 256x256 pixels wide. As you pan the map around, new tiles are loaded into the view so that it is filled.
The details on this tile system are available on this MSDN page, but in short, each 256x256 tile has a "Quad Key" which is a numeric representation based on Zoom Level and Location.
Querying Elevations using Bing
Displaying the Tiles and Elevation in 3D
Now that we have the Image Tiles and the Elevation data from Bing Maps, we can display these in BabylonJS. In 3D Space, we have X,Y, and Z axes to display our 2D tiles plus elevation data on. Below is how we'll do it:
This is just a short post to give an overview of the concepts used for the Babylon/Bing WebGL demo. If you are interested in more details, I suggest you check out the source code and post any questions in the comments area below!
Here are some snaps of the app;
What's fun is that you can plug in your own coordinates and follow along. Here's a local freeway...
And as Andy made clear, the source for this project is just a Git away...