A Hands-On Guide to Creating a Virtual Tour of Today's College Union |
||||||
|
Ben Lewis Webmaster, University Life Centers |
Chris Zhou Student Web Designer |
|
Student Affairs Online: Fall 2002 • Vol. 3, No. 4 | ||
Before Web sites, customers had to do extensive work when they wanted to discover information about a business or institution. When planning an important event, customers had to travel to view spaces, call during normal business hours and meet with staff members. Of course, customers still learn about businesses and institutions this way, but the Web has given them other options. With a virtual tour, customers now have the opportunity to learn about the facility's policies, prices and spaces from anywhere, at any time.
At the Iowa Memorial Union (www.imuis.uiowa.edu/tour), the staff chose to develop a virtual tour to make the customers' and students' event planning experience more convenient. Now that the tour is online, customers can view the union's space in depth and learn about what the union has to offer. The staff frequently refers customers to the site for information when they call or write.
Other college union staffs have developed virtual tours to meet customers' needs and to educate and invite prospective students to the facility. The University of Minnesota recently completed a video-based tour of the new Coffman Student Center (www.coffman.umn.edu/renovation/tour.php). The Coffman staff created a tour that used artists' renderings of the new building as a backdrop. The current student government co-presidents lead the viewer through the new space, highlighting areas of student interest.
A virtual tour is, quite simply, a tour of the building that does not require visitors to physically be in the building. If you consider how much staff time and resources it would take to give every one of your customers a personal tour of the building, a virtual tour is a very valuable and cost-effective tool. Virtual tours can be developed using a variety of software and can be distributed over the Web, on a CD-ROM, presented to an audience, or at a digital information kiosk in your building. When implemented correctly, a virtual tour can give a large number of customers the knowledge they desire.
This article specifically describes the Iowa Memorial Union staff's method for creating its virtual tour, lists equipment and software needed, and offers tips to help an institution that may be considering virtual tour development.
THE BASICS
A virtual tour is not limited to one approach. An effective tour can be created using something as simple as descriptive text and photographs of a space, or it can be as complicated as a three-dimensional model with integrated sound and video. For this article, the authors will explain what went into Iowa's virtual tour.
Iowa's tour uses QuickTime VR technology. QuickTime VR is a protocol supported by Apple's QuickTime software, available for free from Apple's Web site (www.apple.com/quicktime). QuickTime VR allows developers to take a series of photos in a space and stitch them together to form what is called a node or panorama.
The photos that go into making a panorama are taken from a center point or nodal point in a room or space. Each photo is taken adjacent to the previous photo, allowing you to combine them and form one continuous 360-degree presentation.
Iowa's tour uses several of these panoramas in a multinode presentation of the space. In this approach, users are able to view a space in 3-D, and then click on doors or hallways to move to adjacent spaces. Each viewable space is created using the same photographic process and then linked together using VR (virtual reality) software.
Stage 1: Planning Your Tour
When developing a virtual tour, the first thing to consider is what to include. A college union staff would want to highlight areas of the building that students use and that will impress prospective students. A college union staff can choose to create a comprehensive tour, which is what Iowa did, or the staff can select some spaces in the building that are more important and create a showcase.
A comprehensive tour should include a panorama of every space available for rent or public use, including common areas in the building. If every space in the building is covered, other Web sites will be able to link to a specific space from their sites. For example, when a conference is held in the college union, the organization's Web site can link directly to a space on the virtual tour. The tour will be seen as more reliable if the tour is inclusive of all spaces. The down side to creating a comprehensive tour is that it takes a considerable amount of time. The Iowa Memorial Union tour was developed over eight months.
Another way to create a tour would be to showcase the student center selectively. If you choose to create a showcase tour, you will want to be thorough about the spaces you include. For example, you might include at least one panorama of each type of space in the building without including each specific meeting room. For example, the IMU tour includes one panorama for each type of hotel room but does not include each specific room as a point on the tour.
Once the tour's scope is decided, the staff members can begin to plan for staffing and equipment needs. They can address other questions such as: how many spaces will be photographed and how those spaces will appear on the tour.
Stage 2: Software, Equipment and Staffing
Virtual Reality (VR) software and equipment are quickly advancing and gaining popularity and declining in price. A sample shopping list shows what supplies and equipment will be needed.
Mac or Windows-based machines will work; however, Apple's new iPhoto software for the Mac makes organizing and importing photos quick and foolproof. Chances are that an existing computer will work for the project.
Iowa's budget for additional equipment, software, and staffing was approximately $6,000. Approximately $2,000 of that went for equipment and software while the remaining $4,000 was dedicated to staffing. The staff used existing computers to develop the tour and some existing software.
It is possible, though not advisable, to create panoramas with a disposable camera and a scanner. However, a disposable camera will affect the Web sites' and photos' overall quality, efficiency and consistency. The equipment needed for a virtual tour, except for the tripod head, is standard equipment you might find in a graphic design or Web design department. If your campus audio-visual department has equipment for rental or checkout, this may be a way to save money without sacrificing quality or efficiency.
If the college union does not own a digital camera, the staff or Web site designer should plan to purchase one. (A Canon PowerShot G2 or a Nikon Coolpix series camera is a good choice.) The camera should have the following features: full automatic and manual controls, wide range of light control, auto focus and a large storage capacity. While manual focus adds more control, it takes more time than it is worth. Removable media cards are convenient because they allow the operator to carry an empty card and change cards while shooting. Compact Flash or Sony's Memory Stick are acceptable technologies. SmartMedia is reliable but tends to wear out quickly if an external media reader is used. Floppy disks as camera media are widely compatible but lack the large capacity and speed needed for a virtual tour.
Once you have your camera, purchase an extra battery and media card. You will want to get in the habit of unloading your images from the camera after every shoot. This will help prevent you from accidentally erasing images from the camera before they have been saved. Furthermore, having an extra battery available is convenient. If you want to save money, it is possible to power the camera by using an extension cord during shooting, but in the long run, you will save time by having a charged battery handy.
Unless the building has a very bright lighting system, the photographer will need to use halogen photographic lights. In conjunction with a well-adjusted camera, lights will dramatically improve the clarity and quality of indoor panoramas. Lights will brighten dark spaces to make photos consistent and allow for more accurate color. For example, without photographic lighting, fluorescent lights will add a greenish tint to digital photos. Even in a room with sufficient lighting, it is still a smart idea to use lights.
Halogen photographic lights are helpful particularly when taking photos with windows in the background. When the camera is pointed away from a window, the picture will turn out; however, when the camera is pointed directly toward a window, the picture will be dark. In this case, lights should be focused on the walls next to the windows.
The Iowa Memorial Union used a pair of Tota lights by a company called Lowel that were purchased at a local camera store. The lights, stands and umbrellas ran less than $600. If you already own lights, they may be just as effective.
The tripod and tripod head can be a complicated purchase. A company called Kaidan (www.kaidan.com) specializes in VR equipment. Kaidan manufactures a variety of tripod heads, supports and systems ranging from affordable to very expensive. Iowa used a product called the QuickPan Magnum from Kaidan. This product attaches to a tripod and allows the camera to move 360 degrees in planned intervals. By using a specialized tripod head, the user is able to position the camera at the correct nodal point. The nodal point is the true center point of the camera, and the point at which the camera should rotate to produce the correct perspective for a panorama.
Some mechanized systems and specialized lenses exist that claim to cut photography time substantially. Be sure to read reviews on any products before purchasing.
Software can be just as important, if not more important, than the hardware. A good place to start software research is Kaidan's Web site. If you have more time, join Apple's QuickTime VR mailing list at www.lists.apple.com/mailman/listinfo/quicktime-vr where you can learn from experts as well as current users.
Iowa created its panoramas using several pieces of software. Central to the project was VR Worx from a company called VR Toolbox (www.vrtoolbox.com). VR Worx imports, modifies and stitches the photos together to form panoramas. The software also enables users to create multinode panoramas that include hot spots, which will be explained later in the article.
VR Worx can stitch photos together and export panoramas. However, if you experience poor lighting conditions, you can use Adobe Photoshop or a comparable program to manipulate the images and stitch them together. Photoshop, Macromedia Fireworks or a similar product is good to have on hand.
Two additional products Iowa used came from Squamish Media Group (www.smgvr.com). MapSaVR is a software product allowing the user to include maps, moving pointers and clickable nodes as part of the tour. The Iowa tour includes all these features generated from the MapSaVR product.
The second product used from Squamish Media Group is called NodeSaVR. NodeSaVR allows the user to split a large multinode panoramic movie (like the ones exported from VR Worx) into individual movies that are linked together. NodeSaVR generates customized HTML pages to accompany the individual movie files that allow for the addition of text, titles and other information. The individual movies make the tour viewable for people on lower-speed network connections.
When shopping for software, don't make any hasty decisions and look for trial versions of software before you purchase. All software titles mentioned in this article offer trial versions of their software available on their Web sites.
Staffing is probably the most difficult and costly element in creating a virtual tour. To create the tour, a staff should plan on finding a talented student or full-time Web designer who can dedicate full attention to the tour. The project coordinator will need to have photography skills, good Web design skills and a knack for troubleshooting. The amount of time the staff members spend on the project will largely depend on the scope of the tour, size of the building, the features requested and their own skill level.
Stage 3: Developing the Process:
Consistency is vital when creating a virtual tour. Before shooting and stitching begin, the coordinator will want to develop a process. The process will include moving the equipment to the space, setting up the equipment, adjusting lighting and environmental conditions, adjusting the camera settings, downloading the photos from the camera, storing the photos, etc.
The first step in developing a process is to run through the steps and see what questions need to be addressed. Pack up your equipment and take it to a space in the building. Make sure you have the lights, camera manual, tripod, cables, etc.
First, assemble the tripod head as instructed by the manufacturer. A VR tripod head will rotate 360 degrees, stopping at each necessary degree setting to gather the correct photos for a panorama. Once the head is assembled, attach the head to the tripod. Take a look at the adjustments on the tripod head to get a feel for how they operate. A good VR tripod head will include a level, degree markings and adjustments for different numbers of photos.
Next, attach the camera to the tripod head as instructed in the manufacturer's manual. Usually the manual will describe how to find the nodal point on the camera. The nodal point is the point inside of a camera at which light is transformed into data. Many digital cameras include a marker on the body for the nodal point. You can also make adjustments to level the tripod head as directed by the manual. As you turn the camera, the leveler probably will show that the camera is not exactly leveled. Don't panic. It is better to not adjust the tripod. The camera will always turn back to the starting point's level at the end. No matter how well you have adjusted your tripod, pictures will always be mismatched a little. VR Worx will help to correct the mismatches.
After the camera is properly mounted and properly adjusted, assess the need for light. If you're indoors, make sure all available light sources are on at full capacity for best results. If you can, turn off all flourescent lights. This may also be a good time to look around the space for any unwanted articles like trash or graffiti. If you opted to purchase photographic lights, set them up right next to the camera tripod. The lights and light stands will have to be moved for almost every shot you take; however, when stitched together, the effect of the lights should be uniform. For an example of this effect, see the "second floor ballroom" in our tour (www.imuis.uiowa.edu/tour/SF/S03.html).
Before shooting begins, it is imperative that you keep thorough records for future reference. Mark the height of the tripod legs on the tripod with a piece of tape. Measure the height of the camera lens and record it. If your lights have multiple settings, record those as part of your process. Lastly, but most importantly, record your camera settings. Write down settings including your camera resolution, camera mode, focus mode, white balance, exposure settings, zoom level, etc. It is important to incorporate this information into the process so that the final tour is consistent.
Once the equipment is set, choose a starting point on the tripod head for the first shot. Because the head has notches to keep the camera from moving freely, you can choose any notch to begin. Press the shutter key to take the first shot. With most cameras, you will hear a beep or a shutter sound. Once that sound is heard, you can move the head to the next notch and get ready for the next shot. At this step, one realizes the value of having a camera that can store many images and record them quickly. Remember that outdoors, the shutter speed will automatically be quicker, allowing you to shoot faster. Indoors, you may have to wait for the shutter to finish before moving the tripod head or you will end up with blurry shots.
As you continue moving through the notches on the tripod head, continue moving the lights to illuminate the area you are shooting. Be careful that you do not bump or move the tripod legs, as this will throw the images off-center making them more difficult to stitch. By the same token, remember that the images will probably not be perfectly aligned directly from the camera. Photoshop can do wonders for poorly matched panorama photos.
Taking the photos for one panorama may take anywhere from 10 minutes to an hour, depending on how many shots you're using for each panorama and how picky you are. Iowa's staff chose to use 12 shots per space, which is the minimum setting with the tripod head. It is always good to position the camera so the long end of the image is vertical. This allows users in the panorama to have more room to "look" up and down. An important part of the photography process is downloading and organizing the photos. The more media cards or capacity the camera has, the longer you will be able to shoot without downloading the images to a computer. As the photo library starts to grow, it is important to organize the photos by the space they are associated with. This will make stitching, creating panoramas and HTML pages much easier.
After following these steps a few times and writing down settings and measurements, you can develop your process. Create a document to give your staff, especially if more than one person will be working on the photography. The photography is the most time-consuming component of creating a virtual tour. This is a good incentive to research some of the newer time-saving technologies, or consider creating a video-based tour. These each have their own unique costs.
Once you have taken a full set of photos for one panorama, you are ready to start stitching, the process by which images are lined up and merged together to form one panoramic image. This part of the process takes more than an hour for some spaces. The amount of time depends on lighting conditions and the complexity of the space. For example, if there are details in the space like a painted mural or rows of chairs, it will take more time to line up those pieces correctly.
Two terms to become familiar with are "node" and "movie." A node is a point on the map that contains a panorama. Nodes are displayed on the map and are essentially panoramas that are linked together. A movie, for these purposes, refers to a QuickTime movie file. When using the QuickTime format, refer to panoramas as movies (".mov" is the file extension).
Stitching can be done in the VR software or Photoshop. If the images appear to line up and have little lighting variations, using the VR software for stitching is a better choice. VR software can also give a more accurate perspective while stitching. VR Worx offers a fairly basic stitching tool while Photoshop gives an array of tools to adjust color, contrast, position and other factors. Either method can give good results, but more experience is needed to successfully use Photoshop.
Refer to the VR Worx manual for the best way to generate a panorama using your specific equipment. Here are some helpful hints to get started:
Name the source photos with numbers, the first being the starting point, the last being the ending point. Many digital cameras will automatically do this. It is important that VR Worx reads the images in clockwise order so it can place them in the right spot for stitching.
If you do not need a very large final product, use smaller source images. We used 600x800 source images. By the same token, if you want a large final product, be sure to take large enough source images. Previous versions of VR Worx for the Mac had trouble acquiring images larger than 600x800.
If you are going to create a multinode movie, you can wait until that point to add hot spots. Hot spots are places in the panorama that allow the user to click and move to a different panorama. You'll be able to link movies together easily at that stage.
When choosing compression, you can change the quality by clicking the "set" button. We found that the "low" setting creates smaller file sizes and is suitable for online browsing. It is always good to experiment here to be sure what you want.
Again, when moving through each stage, be sure to record the settings and actions so that the staff can follow if needed.
Once you have individual movies created from VR Worx, you're ready to create a multinode movie. A multinode movie is one that combines several individual movies to form one large movie file.
Each multinode movie should cover one map area. For example, the first floor of your building will have a certain set of individual movies associated with it. The multinode movie created will eventually be associated with one map. Because most (though not all) maps generally cover one floor, you want to create a multinode movie for each floor or area.
Before you start creating a multi-node movie, you will want to group the individual movies by which map they are associated with. You will also want to find a good map which you will add to the multinode movie using MapSaVR later.
Open VR Worx and choose "new scene." VR Worx uses tabs to easily move the user through creating a scene. We have roughly outlined how each tab works in creating a multinode movie:
For this step, leave most default settings unchanged. Choose the panorama size. You might want to experiment with different sizes to find which one you like best. The map will be added later by MapSaVR, which will make the QuickTime movie size larger.
This feature allows the user to import a copy of the map and use it to position the individual panoramas. Once you have imported a background map, you can add nodes, links, multiple direction entry and exit points.
Add nodes and position them first. Then you can use tools to make links. One trick here is to double click any node, and then a node browser window will appear. The node browser lets you add "hot spots." By default, hot spots are not in the correct position so they will need to be edited. Double click any hot spot and the Hot Spot Properties window will pop up. You can change the hot spot name (the name will be shown on the Quick Time player menu bar). After you have repositioned and renamed each hot spot, you can click the "preview" button to check your work.
This tab allows you to choose different compression options. Experiment with these to find the best fit for your project.
You can preview the movie and then export.
Once you have a multinode movie from VR Worx, you can add maps to it. This is where it becomes advantageous to have separated the panoramas by floor. Iowa used MapSaVR to add maps and clickable nodes to the tour. The first step is to create a gif or jpeg image of the map.
Open MapSaVR and choose the multinode movie you want exported from VR Worx. The next screen will allow you to change the marker set. If you like, use the default set, or learn how to create your own custom marker set on the Squamish Media Group's website (www.smgvr.com). Next, choose a background color and set the dimensions for the QTVR file. These dimensions need to be larger than the dimensions set for the panorama to make room for the map. Click "OK" to continue.
The next screen will give you the option to add a map. You should see a list of all the nodes you created in VR Worx on the left. From here, you can click on the node you want to place, and position a marker on the map. Be sure to refer to the documentation at this point. When you are finished placing the nodes and markers, choose "save as" and you will save a multinode movie, this time including the map and markers you have added.
At this point, you are almost finished. The multinode movie you have created needs an interface to help the user along. The interface is generally an HTML template. This template is used by NodeSaVR, which will split up the multinode movie into individual movies and automatically generate corresponding HTML pages.
Start by creating an HTML page. Write the HTML or use one of the many products like Macromedia Dreamweaver or Adobe GoLive to create the template. Include any images, links, text and other features you would like to see in the interface. The multinode movie can be placed on the page to see what the final product will look like. To learn how to properly embed the movie, see the NodeSaVR documentation.
The key to developing an interface is to keep it simple. Do not overwhelm the user with too many moving objects or flashy text. The focus of the tour should be just that - the tour. If you do add video, photos or other heavy content, consider making them links off-site so as not to overwhelm the user or their computer.
There are several ways to implement the panoramas you have created. You may want to create a set of still images with text, include a map and make the panorama an optional pop-up window. You may just want to have the panoramas as added content to existing pages you have on your site.
Iowa's interface includes short descriptive text for each area and some links to related information. The map allows users to navigate to different spaces, and the floor links allow the user to navigate between floors on the map.
NodeSaVR will take the multinode movie and split it into individual movies once again. The difference at this point is that the movies will be linked together and the maps and markers will be added. Choose "custom HTML template" to use your own customized HTML interface for the tour. This can be developed independently of the process we have described. Click the "process movie" button to begin this process.
Once you are finished, you may need to edit the HTML pages to add specific text or content that relates to each space.
Because NodeSaVR exports the same HTML code for each multi-node movie, it is best to edit content specific to each area after this has occurred. If you take a look at the HTML files associated with the tour, you will see that each node may have several HTML files. This is due to the different directional entry and exit angles set in VR Worx.
At this stage, you may want to open each HTML file and add some text or links specific to each area. There is no quick and easy way around this, that is, unless you want to develop a database to dynamically serve up the content. Use an HTML editor to open each page and add any content. Be sure to catch each incarnation of each node - some have several HTML pages that need to be edited.
CLOSING
This article touched only briefly on the various techniques and technologies available when developing a virtual tour. A virtual tour can help a college union reach more people more cost-effectively. When implemented correctly, a virtual tour can give a large number of customers the knowledge they need about the college union.
Virtual tours: