3D XAML – Lots of Fun

Microsoft’s new .NET 3.0 WPF with XAML is an amazing technology. Combining DirectX3D with Windows GUI Widgets and traditional 2D XML graphics gives the web developer a great deal of power. I have been experimenting with the XAML 3D toys this week and
put together a few demonstration xbap files. These can be viewed if you are running Vista or Windows updated with .NET 3.0. The static image shots I have included below give only a taste of the actual
dynamics that XAML affords. Be aware that these are fairly heavy downloads. The Terrain model TIN sample consists of nearly 500,000 triangles and a 15Mb xbap file which obviously requires a high bandwidth connection.

The samples can be viewed here:
http://www.web-demographics.com/Earth3D-2/Earth3D-2.xbap
http://www.web-demographics.com/Terrain/Terrain.xbap

The 3D Globe is a spherical MeshGeometry3D element with the addition of a Material overlay. As a 3D model it can be scaled and spun using either traditional slider bars or with the mouse trackball interface
which allows the globe to be rotated in all axis with mouse motions. Scaling is connected to the right mouse button. The trackball interface is a welcome addition from the Microsoft WPF team as an additional download:
http://www.codeplex.com/3DTools

The animation triggers allow the globe to spin while coordinates are read out in longitude, latitude. Alternative materials are available for quickly changing the
surface of the globe even while it is spinning. The coordinate mouse move readout is possible using RayMeshGeometry3DHitTestResult to query for the intersection with the TIN model. The globe is a fascinating toy but the above coordinate
readout allows it to become a real interface with click capability to navigate to other pages, for example the experimental Terrain model shown below.

The Terrain model is a TIN generated from the online JPL/NASA
worldwind_dem WMS layer. Other DEM models such as SRTM30plus and NED are also available from the popular JPL WMS site. WMS queries can return 16bit png images with each pixel holding an actual elevation in either meters or feet. The Terrain
TIN shown below was created in a servlet using this query string which is an area roughly centered on Pikes Peak Colorado:

href="http://onearth.jpl.nasa.gov/wms.cgi?styles=feet_short_int&service=WMS&ServiceName=WMS
&request=GetMap&layers=worldwind_dem&format=image/png&transparent=TRUE&srs=EPSG:4326
&bbox=-105.254877,38.604567,-104.798595,39.044932&WIDTH=500&HEIGHT=483">http://onearth.jpl.nasa.gov/wms.cgi?styles=feet_short_int&service=WMS&ServiceName=WMS
&request=GetMap&layers=worldwind_dem&format=image/png&transparent=TRUE &srs=EPSG:4326&bbox=-105.254877,38.604567,-104.798595,39.044932 &WIDTH=500&HEIGHT=483

The resulting
mesh consists of 481036 triangles. Note that the vertical relief is initially exaggerated by using feet_short_int while the x,y coordinates are transformed to UTM83-13 meters. The relief is easily adjusted by using the Z scale slider bar on
the left which uses data binding to a ScaleTransform3D.ScaleZ. Again the model can be manipulated with the traditional slider bars or the trackball mouse movements.

A selection of DiffuseMaterial objects can
be draped over the TIN model. In this example materials are generated from both the NationalAtlas WMS and the Terraserver WMS. Any jpg or png can be used as long as the image bounding box matches the terrain model bounding box.
Interestingly multiple layers can be merged taking advantage of PNG transparency. Here is a xaml snippet showing the merging of two materials in a material group resource:
<BitmapImage x:Key="earthImg" UriSource="Images/earth.jpg" />

<BitmapImage x:Key="earthCountries" UriSource="Images/countries.png" />
<MaterialGroup x:Key="earthMat">
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<ImageBrush ViewportUnits="Absolute"ImageSource="{StaticResource earthImg}" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
�<DiffuseMaterial>
<DiffuseMaterial.Brush>
<ImageBrush ViewportUnits="Absolute"
ImageSource="{StaticResource earthCountries}" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
<SpecularMaterial Brush="#FF808080" SpecularPower="75" />
</MaterialGroup>

This terrain model contains a fairly large set of Positions, TrianglesIndices, and TextureCoordinates. Including all the material overlays and C# code the resulting xbap download is close to 15Mb. Even in this day and
age 15Mb is not a routine web page but once loaded the 3D modeling controls are all available using hardware graphics for very responsive manipulation.

We are in the early stages of this new 3D internet world
which promises to change the way we think of the web. My next experiment is to update the globe with clickable terrain models produced on the fly from existing WMS sources. This only touches the surface of the 3D modeling capability for the
mapping world. Other areas with interesting possibilities include scientific visualization, chemical modeling, and 3D network diagramming. Network diagram interfaces are a hot topic making proximity relationship models connected to search
engines possible over the web. XAML is a lot of fun to work with and I look forward to seeing the many innovative ways it will be put to use.


Fig 1 – XAML 3D Globe with NASA image texture – rotation animation, directional lighting, real time scaling and trackball manipulation, specular diffuse material.

Fig 2 – Same 3D model with NASA BMNG texture applied – coordinate readout in longitude, latitude


Fig 3 – Same 3D model with merged NASA Night Lights and VPF0 country boundaries texture applied


Fig 4 – 3D Terrain Model generated from JPL’s WMS version of WorldWind_dem (SRTM3) and draped with USGS National Atlas WMS layer set – coordinates are UTM83-13 meters for x and y with exaggerated relief in feet


Fig 5 – Same Terrain model but with USGS DOQ from Terraserver WMS draped over TIN


Fig 6 – Same Terrain model but with USGS DRG from Terraserver WMS draped over TIN


Fig 7 – More traditional 2D interface with video clip object as part of the map view. Media objects are full participants in the interface and can be zoomed and panned in the same manner as the map view.