Yousef’s blog

WPF Earth: Virtual Earth 3D using the Presentation Foundation

April 15, 2007 on 3:51 pm | In Uncategorized |

About one and a half year ago, when I first heard of WPF (the Windows Presentation Foundation) I started some experiments with the technology. One aspect which particularly gained my interest was the ability to easily add 3-dimensional objects to a user interface. As a Windows Live-guy, I figured it might be interesting to map Virtual Earth onto a sphere using WPF (there didn’t exist an official 3D client for Virtual Earth back then).

Since I bumped into quite a few problems during development, it set the project aside a few times. Now I finally fixed all major problems and am ready to post some results. Read on to play with the application yourself, and read about the problems I encountered.

I started by creating a 2D client for Virtual Earth using WPF (screenshot). The 2D client simply consists of a grid divided into four cells. When the user zooms in, the focused cell splits itself into four child cells displaying the images of the next zoom level.

Since it’s possible with WPF to use the content of any control as a Visual for a VisualBrush, I tried using the VisualBrush of the 2D grid as a material for a 3D sphere. Of course it isn’t that easy to create your personal Google Earth clone. The technique did bring up a 3D earth, but as you might have expected, the texture of it didn’t really resemble our actual planet. Take a look at this screenshot. The 2D image has been stretched to wrap around the entire sphere, which causes the weird look.

To solve this, we need to know a little bit more about maps in general. Because the original Virtual Earth map is flat, they must in some way or another have projected the earth’s surface on a 2D area. The projection used by Virtual Earth is one of the most commonly used for maps, the Mercator projection. You can read more about the Mercator projection at Wikipedia.

To implement the Mercator projection, I had to adjust the TextureCoordinates of the sphere model. This simply is a set of coordinates telling the WPF engine where to put each point of a texture onto the model. The model I used previously was generated by a 3D to XAML conversion program (ZAM 3D), and thus hard-coded into the program. To adjust the TextureCoordinates it would be great if I could find some functions generating the sphere-model. Luckily, the 3DTools project exposes these functions. The 3DTools also contains a trackball class, which I used to implement user navigation. Anyway, I adjusted the ‘GenerateSphericalTextureCoordinates’ function using the formulas found at the Wikipedia page about the Mercator projection. This gave the result I was hoping for.

Unfortunately, this wasn’t the last problem I bumped into. Everything worked fine, but when I zoomed in to street-level, the texture looked very blurry. I didn’t know how to solve this, so I asked fellow developers for help at the WPF forum. Daniel Lehenbauer who worked on the 3D part of WPF helped me out:

“One thing you might also consider is dividing your mesh into several pieces and using multiple images.  If the texture limit of your card is, say, 1024 x 1024, you can use a 1024 x 1024 images for each part of the mesh rather than the entire thing improving your ability to zoom.
Also note that if you use an image larger than what your card supports WPF will not complain.  It will just scale down the image before sending it to the card.”

Ok, so it turned out to be a hardware problem. I did what Daniel advised me to do: splitting the mesh into several pieces. Every gridcell in the original 2D implementation now turned into a separate model. This approach turned out to work perfect.

Of course there have been more difficulties during development, but I described the major ones above. If you like, you can play around with the result yourself. The projection still isn’t perfect (lat/long isn’t 100% accurate), and the navigation can be improved a lot (note that new images are being loaded only at the center of the sphere). But hey, I didn’t actually try to make a Google Earth or VE3D competitor or something! This experiment just shows how someone without any 3D programming experience can use the Windows Presentation Foundation to put something quite nice together (if I may say so myself).

• Download executable (36K)
• Run XBAP (XAML Browser Application, 36K)

(Use your mouse wheel to zoom. Left-click and drag to rotate. New images are only loaded at the center of your view, so you might want to drag around a bit)

I am still thinking what to do with the project. I might wrap it into some kind of component or maybe release the source. Anyway, let me know what you think about it by leaving a comment below!

Tags: 3d, google maps, mapping, maps, virtual earth, virtual earth 3d, windows presentation foundation, wpf