Panoramic Technique

Monument Valley 360 Basic Tutorial (From Start to Finish)

While on a road trip from Albuquerque to San Francisco I arrived at Monument Valley Tribal Park late in the day. I took several shots from the overlook inside the Park but the overlook was crowded with photographers and so I decided to travel down the dirt road into the valley before sunset. I found a secluded spot and thought it would be a good place to take several photos including a quick panorama. I took the shots with my Sony V1 set on a tripod. I had a lightweight tripod with me and it did not have a vertical mount. I had to take the images in the horizontal direction. I spun my camera on the tripod and took several test shots to pick the best shutter speeds and aperture for the 360 degree photo.

Source Images:

9 images

As you can see above there is a overlap of adjoining images once I decided upon the proper exposure for the entire scene. Overlap should be 15-20 % of the previous image.

Vertical images would require 12-14 images but also would show more of the scene on the top and bottom.

The tripod should be level. If the camera is not level it may cause a wave in the horizon in the final output image. Many camera retailers sell level bubbles that fit in the hot shoe of the camera. The proceeding link shows such a product- Kaiser 2-Axis Bubble Level with Hot Shoe Connection

However for this scene I used my best judgment as to when the tripod was level.

Source Image Details:

The exif data shows that the source images were taken in under 5 minutes.

Advanced Tip: It is also possible to bracket each source photo to obtain more dynamic range in the final panoramic image.

Combining\ Stitching the Photos:

The program I originally used to stitch the images was the Panorama Factory.  For this example we will use a free program called AutoStitch. It can be downloaded at autostitch.net.

Brief Autostitch Instructions:

Open the program. Go to Edit- change Jpeg Quality to 90 or higher for better output quality. (I personally prefer 100 as I can change the quality later in a photo editor.)

Depending on what you will use the final image for: computer viewing, web, or printing- you have a choice of the final Output Size of the image. The larger the output the longer it will take to stitch. You can always downsize the image with a photo editor later on. Now 'input' the Source Images and let program take control.

These images stitched together fairly well because everything was in the distance. If objects were closer to the camera than there may be ghost images in the final output. For further reading about Nodal Point see this external link.

Photoshop: crop, mid-levels increase, Velvia Vision plug-in (for increased dynamic range)

Note: Crop is only top and bottom of image- not left and right sides if you wish to embed it into a webpage as a QTVR

Embedding the Image as a 360 VR with PT Viewer:

We will use a java enabled free web viewer called PT Viewer so visitors can use their mouse to control the view of the 360 degree scene. Download the PT Viewer applet (ptviewer.jar) and place it in the web folder directory of the image and the HTML page. For the Monument Valley example I saved the width of the image to 2000 pixels at a quality that was suitable for the web. The final image size is approximately 200kb.

Download the PTViewer Applet at: http://www.fsoft.it/panorama/ptviewer.htm

This webpage is located at: yellowecho.com/panoramic6.htm

ptviewer.jar is placed at: yellowecho.com/ptviewer.jar

The Monument Valley photograph is named: pano1.jpg

Here is the Javascript/ HTML that needs to be embedded into the webpage. If you do not wish for the 360 degree image to auto rotate when the web page loads delete this line:

<param name="auto" value=".1">

Height and width is also adjustable. Please note that you will need to put the proper web address of where your photo is located--- as written below in the code value="http://www.websiteaddress.com/360/pano1.jpg">

<param name="auto" value=".1"> is an optional component and the value can be changed as well.

360 QTVR

View Fullscreen

Creating a QuickTime Movie

Pano2QTVR is a free program and will allow you to input 360 flat photos. The program helps creates QuickTime movies of the scene. This is a very good program and highly recommended.

Creating a User Friendly Webpage

Overtime I have come to like a certain format and try and keep my website theme consistent. This I believe helps the web surfer in several ways. On my panoramic links page I have included many photographers personal sites and you can adjust your personal page according to your taste.

With my 360 degree VR webpages I like to show the flat image on top of the page. Because many of visitors to my site use a screen resolution of 800x600 I try and keep my tables to 767 pixels. The width of the flat image is also 767 pixels. Yahoo uses a very similar size on their main page. 767 pixels will fill the width of the screen when it has a resolution of 800x600.

Then under the flat image I will use either PT Viewer or QuickTime. I try and keep the VR file under 500kb. With a few scenes I offer full screen versions where I try and warn people of the file size. The full screen scenes can have file sizes between 1 MB and 2 MB- not ideal for modems or slower DSL lines but perfectly fine for cable modems. Under the VR scene I give basic directions on how to properly view the scene. Also sometimes I like to add information of the scene and a link to a Google Map of that particular location.

I also like to add certain META data to the webpage:

The line below will not add the Internet Explorer toolbar when someone hovers their mouse over an image for a few seconds.

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

On my larger full screen panoramas I add the META information below. This is so search engines will not index the very large file and web visitors will come to the smaller version. They will have a choice if they wish to load the large file. This helps control bandwidth and also does not surprise 'surfers' with a large download.

<META NAME="ROBOTS" CONTENT="NOINDEX">

View Sample Page: (Use the browser's back button to come back to this page)

Fulton Ferry Landing Pier- Brooklyn, NY  This page uses QuickTime and has an option for full screen viewing.

Page 6- Monument Valley 360 Example

Photography by Charles Peifer