How to Produce Virtual Worlds Without Panoramas

QuickTimeVR panoramas are only one of many methods for allowing navigation of a virtual space. Consider this even simpler but perhaps equally powerful alternative: potraying the space through a carefully chosen network of still images.

This document describes a method for mapping a Bryce 4 virtual world ("Hollow Mountain" from last week's examples) using still images deployed on simple Web pages with four navigation links and optional imagemaps.

Here is a demonstration of the concept.

The production method is described below.

Step 1: Map the virtual world. I recommend making a sketch based on the unrendered view of your world From Top, as in this example:

The red notations on this map indicate viewpoints, or spots at which you will locate the camera to generate the still images. Number your viewpoints: these numbers are more or less arbitrary (sequence doesn't matter) but they provide an essential way of identifying locations.

I've used two types of symbol to mark viewpoints. Crossed bars indicate that four views will be taken from this point at 90-degree rotations. These views will be identified as the 12:00 position, 3:00 position, 6:00 position, and 9:00 position. A single bar indicates that only two shots will be taken at this location, one looking "ahead" and labeled 12:00, the other looking "behind" and labeled 6:00.

Step 2: Record position data. Open your world in Bryce (if it's not open already) and switch to the view From Top. Navigate the camera to a point roughly equivalent to the first point sketched on your map -- a close approximation will do. Call up the camera information by selecting Edit Current Camera from the Camera menu at mid-screen (see last week's assignment for detailed instructions). Record on paper the X,Y, and Z values in the interface window.

It's okay to round off or drop the decimal places, but don't skip this step! You may need to return to a given viewpoint several times, especially if you decide to add views later in the development of your project.

Step 3: Shoot viewpoint images. From each mapped viewpoint, render a JPEG in Bryce for each appropriate angle of view. The system I have prepared requires images to be 320 pixels wide and 240 high. Select Document Setup from the File menu, then the Standard option, then the 1:0.50 ratio.

Name each image file according to the following template:

point[XX].[1200/0300/0600/0900].jpg

So the 12:00 view from position 1 generates a JPEG called point01.1200.jpg.

Actually you may use any naming convention you like so long as it is consistent.

Step 4: Generate a Web page for each view. In the vWorldsShared folder on Cow you will find a folder called noPano, and within this folder there is an HTML file called noPanoTemplate.htm. Use this file as your production template. For each JPEG, generate a corresponding Web page whose name is identical to the JPEG's name except for the file extension, which will be .htm instead of .jpg.

Study the structure of the template file carefully. I've inserted HTML comments to indicate where you should insert changes and additional content. Basically you will make four changes to the template in order to generate your page:

1. Fill in the destination information in the first <SCRIPT> container. Destination codes are explained in the note below.
   
   
2. Insert the name of the appropriate JPEG (e.g., point01.1200.jpg).
   
   
3. Insert the text you want to appear next to your navigation graphic in the second table cell.
   
   
4. Add <AREA> tags to the <MAP> container if you want to create any hot-spot links.

NOTE: DETERMINING DESTINATION VALUES

Suppose I have a system with these three viewpoints:

Assuming my current location is 01 and my angle of view is 12:00 (that is, I am editing the file point01.1200.htm), what destinations should I assign to the four navigation variables used in the page template: topDest, rightDest, bottomDest, and leftDest? Each of these variables corresponds to one of the four navigation buttons that surround the viewpoint image: top, right, bottom, and left.

So far all our options are used to turn the camera around a single point, but we want to be able to move as well. This is where the top option comes in. TopDest indicates the next destination available along the current line of sight -- or if more than one destination is possible, one you have chosen as a default. In the illustration above, the value for topDest is point03.1200.htm. When we click on this option we jump ahead to the next viewpoint but maintain the 12:00 viewing angle.

Nothing says, of course, that the 12:00 angle at point 03 must be perfectly aligned with the 12:00 at point 01. You can probably introduce up to 45 degrees of variation before viewers get too disoriented, but generally try to keep lines of travel reasonably straight.

Now let's consider the navigation options from the 6:00 angle at position 02, i.e. on the lefthand side of the map but turned to face rightward. The top or straight-ahead option from this point is point01.0300.htm. Don't be confused into thinking it's the 0900 view, which would leave the viewer looking right back where she'd come from! The top/ahead option moves us along the line but leaves us looking in the same direction, which means toward the right side of the map. The view in that direction at point 01 is the 3:00 angle.

The bottom option from point 02 is obviously point02.1200.htm, since it represents a 180-degree shift in angle.

There are no left and right options, since point 02 has only two viewing angles. Leave leftDest and rightDest set to "" (technically known as the empty or null value). The scripts associated with this page will gray out the navigation buttons associated with these options.

Step 5: Create the appropriate directory structures. The no-pano page template looks for its navigation button graphics in a directory called controls, which you will also find in the noPanos folder within vWorldsShared. Move this directory to your project folder. The template looks for current view graphics in a directory called views. Create this directory in your project folder and move all your JPEGs into it.

The component HTML pages should be stored at the top level of your project folder, outside any subfolders. Remember to create an index.htm page to serve as arrival point.