The 2008 class gift for Dallas Seminary is supposed to be a large flat screen with a 3D world that shows where in the world DTS alumni are serving. The requirements were:

1. The target OS is still unknown and I haven't done much native Windows or Mac 3D programming. This leads me to use Papervision in Flash which I know and is very easy to use.
2. The data needs to be easily updatable. Rather than use a database, I built a flat file using a quick C# app that plots alumni by state and country and geocodes their location.
3. At DTS, the Admissions and Alumni offices are nearby, so the application needs to be interesting to Admissions. Ever since my sweet wife got me a Nintendo Wii a few months ago, I've wanted an excuse to program with it. For this project I thought, What's more fun and interesting than controlling the globe with a Nintendo Wii controller?

Video Demo

Here is a (low quality) video of an early version of the project that gives you an idea of what it's supposed to accomplish and look like. The first few seconds use mouse navigation, then it switches to WiiMote navigation.

This video requires Adobe Flash player

Live Demo

To see a live demo, click the following image. If you want to control using a WiiMote, do the following. (1) connect your WiiMote to a PC via bluetooth. (2) Download the WiiFlash 0.4 package (3) run the included WiiFlash Server, (4) refresh the demo page page, (5) click the "Home" button the WiiMote to toggle controlling via mouse or WiiMote.

Libraries Used

• Papervision3D
• Tweener
• WiiFlash
• Also thanks to this tip on WiiMote data and this tip on Papervision geocoding

All the tools for this project have been around for almost a year, so nothing is particularly cutting edge, but the mashup and purpose are pretty unique and really fun. Hopefully, playing with the WiiMote will be as fun as actually viewing the map, making the entire experience for prospective students really positive.

Last week, I visited Cancun with my in-laws and had a chance to see the ruins at Chichen Itza. I took a series of photos and made them into a panorama using Papervision3D (as done here by BlitzAgency for NBC's The Office and here by a company selling a product called Flash Panoramas). I made a little script that can handle both spherical and cubic images to see how both would look. Here's some previews of the two versions (The lines are there to show how the panorama is being constructed):

Spherical

Cubic

A cubsic panorama is composed of six images (top, bottom, left, right, front, back) while a spherical panorama is made using a single image which is stretched at the top and bottom (like a map of the world where Greenland and Antarctica are distorted). In general, it looks like the spherical version can generate the same level of detail with fewer polygons and thus more speed, but the cubic images can be a little smaller and are more easily edited.

Each of these is composed from approximately 45-50 images. I took around 15 in a circle at the horizon, 15 looking up about 45 degrees, and 15 looking down 45 degrees. Unfortunately, I didn't take enough pictures to complete the sky or the ground below, so you'll see some black spots if you "look" up or down. I used Hugin to stitch the images together, and it did a pretty good job considering I didn't have a tripod or wide angle lens to accurately take the pictures. (link: the best tutorial I have seen on image stitching)

3D Panoramas

• Pyramid: spherical | cubic
• Ball court: spherical | cubic

Original Images

• Pyramid:
  • sphere
  • front, right, back, left, top, bottom
• Ball Court
  • sphere
  • front, right, back, left, top, bottom

The view page also has a list of commands (f=fullscreen) and links to the original files.

Update: I changed the navigation to be more like QTVR where you have to click to move, and there is an arrow cursor. Also, smoothing and precision are automatically applied when you stop moving.

A few years ago, I made my first map mashup with Google Maps for Dallas Theological Seminary. It allows visitors to search for churches around the world where DTS alumni are serving. Recently, we decided to update the mashup with several features in mind:

1. Larger map - 2 years ago we were using a 800px wide layout and now we can use a 1024px layout
2. Use updated API - Google has changed APIs since then
3. Implement other maps - Yahoo and Microsoft each have good points
4. Use custom icons - we are not just showing churches now, but also schools and counselors

To handle all of this, especially the implementation of other multiple map engines, I chose to use mapstraction, a JavaScript layer which allows developers to program against a common API for all mapping engines. It turns these two proprietary mapping code blocks:

// Google maps specific code
var gmap = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
gmap.setCenter(new GLatLng(37.4419, -122.1419), 13);
var gmarker = new GMarker( new GLatLng(37.443, -122.166) );
gmap.addOverlay(gmarker);
// Microsoft Live maps specific code
mmap = new VEMap('map');
mmap.SetDashboardSize(VEDashboardSize.Normal);
mmap.LoadMap();
mmap.SetCenterAndZoom(new VELatLong(37.4419, -122.1419), 10);
var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(37.443, -122.166));
map.AddShape(shape);

into this single common set of code:

// universal map API, just change 'google' to 'yahoo', 'microsoft', etc.
var mapstraction = new Mapstraction('map','google');
mapstraction.addControls({ pan: true, zoom: 'large', overview: false, scale: true, map_type: true });
mapstraction.setCenterAndZoom(new LatLonPoint(37.4419, -122.1419), 12);
var marker = new Marker(new LatLonPoint(37.443, -122.166));
mapstraction.addMarker(marker);

In addition to Microsoft, Yahoo, and Google maps, you also get free access to a 3D map called Freeearth which is an amazing implementation of a 3D globe map (like Google Earth) using Papervision3D.

Examples

Here are examples using all four mapping engines. The only unique code is the shadow on the icons under Google maps. Also, prototype (which is used throughout the site) is handling the AJAX calls.

Try it out

• Find a Church - Google, Microsoft, Yahoo, Freeearth3D
• Find a Counselor - Google, Microsoft, Yahoo, Freeearth3D
• Find a School - Google, Microsoft, Yahoo, Freeearth3D
• Old Find a Church page

Links

• Mapstraction
• Google Maps API docs
• Microsoft Live Maps API docs
• Yahoo Maps API docs
• Freeearth docs

I've updated my original Papervision Coverflow knockoff from Phunky to GreatWhite. The main change is the use of Renderer and ViewPort, but I also added some code to stop rendering when nothing is moving to ease up on the processor. Make sure to download Papervision and Tweener before compiling it.

Links:

• Flash CS3 Project: coverflow.zip (18 kb)
• Flickr Example
• DTS Media example
  

UPDATE: Now uses Papervision 2.0 Alpha (GreatWhite). 

There are a million Apple Coverflow knockoffs (blitz, doug mccune, antti kupila, weber design) and now there are a million and one. This one is made using Papervision3d and Tweener and includes keyboard and scrollwheel support. Here are two uses, one pulling from a friend's Flickr photo stream, and the other pulling from DTS's recent media items:

This uses the Phunky GreatWhite branch of Papervision (1.9 or so 2.0 Alpha). Here's the setup:

var coverFlowData:Array = [{title: "item title", clickUrl:"http://mysite.com/target", imageUrl:"http://mysite.com/image.jpg"}];
var coverFlow = new CoverFlow(stage, camera, scene, coverFlowData); 

And here's the project (for Flash CS3): coverflow.zip (16.21 kb)

While doing development in Papervision 3D again for a campus map, I thought it would be fun to mock up a dynamic size comparison tool like the one at sizeasy. The demo has the obligatory iPhone along with a BlackBerry 8700 and a deck of cards. The measurements are in millimeters, but you could change it to whatever you want, as long as all of the objects matched up. You can also add a URL to whatever image you want to use for each object:

I've been experimenting with Papervision3D in order to make a 3D version of our campus map. On of our artists has worked up an extremely detailed map in Google Sketchup. I've rebuilt the model in Sketchup using texture maps so that its around 1000 triangles and is to scale in Google Earth. Sketchup allows exporting to Collada files (which it uses in it's own files for Google Earth) and Papervision will parse Collada. Here's the result:

I have not finished texturing the entire model, so there are some plain yellow walls.

UPDATE: I've also added a driving mode!