BabylonJS + WebGL + Bing + Maps + 3D = BabylonBing


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...

Bing 3D Maps using WebGL and BabylonJS

In this post, we will look at how we can use BabylonJS and WebGL  to create a 3D height map and route path using data from Bing Maps REST Services.

TRY THE DEMO [IE11, Chrome, or FF required] |  DOWNLOAD THE SOURCE


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!


Now that IE11 supports WebGL along with Chrome, Firefox, and a host of other browsers, I am betting that we will see a resurgence of interest in this 3D browser tech. BabylonJS is an easy to use 3D library written in JavaScript that leverages the power of WebGL to create cross-platform 3D experiences. If we couple that with the Bing Maps API, which allows querying of satellite imagery, driving directions, and elevation data, we can fairly easily build a realistic 3D scene of any area on earth!

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

Back in January, Bing Maps added an Elevations API which allows for querying of elevation data for a bounding box on the map. This msdn article gives the details on the REST API for this data.


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...


The Discussion

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.