International Peace Gardens: VR Edition
Documenting the process of creating an in-depth VR tour
Over the last few months, I’ve learned how to photograph, stitch, and create virtual tours for Google Views and stand-alone, responsive websites. Although the process of shooting the images, organizing the assets, processing the images from RAW to HDR, removing the tripod (as well as shadows), stitching the images, and creating virtual tours are all very tedious tasks, the end product is well worth it because you have something that you can share with people.
The Challenge
Document a historical place as if your tour will be the last remaining record of that space.
With this challenge, I first asked myself the following question:
- What historical location had a minimum of 12 locations that I could document?
Research
I looked through several resources like Utah’s “Historical Preservation — Building Information” site, the “State Register of Historic Sites”, and “National Park Service National Register of Historic Places”, but was unsuccessful in finding a place that was interesting to me or near me. Instead of picking a place that was on these sites, I decided to propose my own location — the International Peace Gardens in Salt Lake City, Utah.
Just to give you a little history about this garden, it was conceived in 1939 and dedicated in 1952 by Mrs. Otto (Ruey) Wiesley. There are a total of 28 Peace Gardens and each one represents a different country from either the Americas, Europe, Africa, or Asia. Out of the 28 Peace Gardens, I documented 15 of my favorite ones.
Equipment
For this project, I used the following equipment:
- Nodal Ninja 3 VR Arm
- Canon Rebel XS
- 8mm Fisheye Lens
- 18–55mm Standard Lens
- Manfrotto Tripod
Software
After capturing all of my photographs, I then used the following software to create my tours:
- Adobe Bridge — for image organization
- Adobe Photoshop — for photo editing and tripod/shadow removal
- Photomatix Pro — for processing the images from RAW to HDR
- PTGui — for stitching the images
- Panotour Pro — for creating the VR tours
Goal
Seamlessly connect separate VR tours into one entire tour on my website
Since I decided to document various locations at the International Peace Gardens, my ultimate goal was to create a single tour that connected all of the individual garden tours (while giving people the option to view gardens separately without having to walk through the entire park).
Strategy
1. Photograph Images
One of the most time consuming tasks of creating a VR tour is shooting the images. With any panoramic image, you have to set up the camera a certain way and capture all angles of that location. Whenever the camera takes a photo at a certain angle, it takes three different types of pictures: an underexposed, normal, and overexposed photo (so that you can make it into an HDR photo later on). For every node or location, I took a total of 21 images. Since I chose to document 15 different locations, each with multiple nodes, as you can imagine, it took a while (a few hours, maybe three).
2. Organize Assets
Once I captured enough content for my project, I then began organizing them. I was dealing with a lot of assets so I had to come up with a good file management system so that I could work efficiently.
When you initially upload your images to your computer, the file names are a mess. In order to fix that, I used Adobe Bridge to rename my images properly so that I could easily group photos and put them in individual folders, according to the country.
I used the following file naming convention:
Location_GardenName_Node_SequenceNumber.CR2
Since I shot a total of 21 photos per node, each one ends with a sequence number of 21. In the example above, you can see how I named the images for the China Peace Garden.
Note: “IPG” stands for the International Peace Gardens
3. Process Images to HDR
After going through all of my images and organizing them, I then merged all 21 images (per node) to HDR. Instead of converting my images from RAW to HDR through Photoshop, I used Photomatix Pro to work more efficiently. With this software, I was able to batch process my photos so that saved me a lot of time. After merging my images, I was left with 7 HDR photos per node, instead of 21.
4. Tripod & Shadow Removal
With any 360-photo, you have to take several down shots as well. Since my photos were all taken on the Manfrotto tripod, my down shots looked something like this:
I didn’t want people to have to look at tripod whenever they looked down in a tour so I went into photoshop and edited it out.
In some of my shots, the shadow of the tripod, my own shadow, and sometimes a combination of both, were visible. Instead of leaving the shadows, I decided to photoshop those out as well.
5. Stitch the Images Together
Using PTGui, I stitched together the HDR images to create a single spherical image. Once I exported the first panorama, I then resized it to 4096 x 2048 so that I could create a VR tour in the next step.
6. Create a Virtual Tour
I had a difficult time planning out an entire tour of all the gardens in my head so I wrote it all out on my whiteboard to help me:
This is probably confusing to anyone who sees this, but it makes sense to me… I assigned each location with a number that corresponded with the order in which someone would see that garden if they were to go counterclockwise from the entrance. I also mapped out the locations of each garden so that I had some type of guide to refer to when I was creating the actual map for this project.
Once I imported all of my stitched images for all of the Peace Gardens, my workspace in Panotour Pro looked something like this:
After connecting everything, my workspace turned into this:
Once all of my nodes were connected, I then had to figure out how to achieve my ultimate goal — seamlessly connect separate VR tours into one entire tour. I had already connected all of the Peace Gardens together but I had to find a way to not make people have to walk through the entire park to view one specific garden.
In a previous project that I had worked on, I included a floor plan with hotspots so that people were able to click on a certain hotspot and directly go to that location without having to go through every single node to get there. So I did just that; I created a floor plan in Panotour Pro with hotspots to all 15 Peace Gardens. To access the floor plan, all you have to do is click on the floor plan icon in the control bar (on the bottom of the screen) and it would slide in from the left. In order to close the floor plan, all you do is click on the map and it would disappear.
To create the website for this project, I used a template that I already had on hand:
For this project, I decided to go with more earthy colors to complement the Peace Gardens in the tour. After messing with the code and customizing the website, my final website ended up like this:
Final Project
To see how my final project turned out on my website, take a look at my demo or, better yet, go view it yourself by going here.
As always, thank you for reading!
/Ellie
