Copyright © 2006 David E. Bodenstab
Version 1. Initial release.
Version 2. Added PhotoStitch info.
Version 3. Added note about IE problem with QuickTime.
Version 4. Added PanoWizard and Pano2QTVR info.
Version 5. Added description of CSS-only panoramic image scroller.
Last updated
Sun Aug 6 22:03:37 CDT 2006
Last Fall I picked up a cheap Dell inkjet printer. On the CD packaged with the printer, there were a couple of mostly crippled demo versions of some software that Dell apparently felt would allow them to sell more ink if only people would buy and use the programs. One of the software packages was some sort of image viewer and/or paint program. It had a tool that allowed one to create a panoramic photo from a series of overlapping photos. I gave it a try with some vacation photos I had online, some of which happened to be overlapping views. The software seemed to work OK for my handfull of test images, however since the demo was crippled and time-limited, and I had exhausted my source of potential panoramic photos, I deleted the software.
The other day, while riding my bicycle through Green Valley Forest Preserve, I recalled those experiments. Having a digital camera, it is trivial and costs nothing to acquire a set of overlapping photos. So I wondered if I could find some free software that could be used instead of commercial software that would create panoramic images. A means of presenting them via the internet would also be desirable; perhaps even using the QuickTime viewer.
I spent a day googling for solutions, and found a vast number of tutorials, samples, and software for panoramic imaging:
Most of the software to do what I want is either commercial or shareware. Since I was looking for free software, I did not investigate any of the try before you buy trial downloads. However, I did find a few free solutions, and one inexpensive solution. On this page I present the results of my search and I put the pieces together to create and display some sample panoramic images.
The first step, obviously, is to acquire a set of individual photos that will be used to make the panorama. The Google search (above) will get you loads of information, so I will just briefly touch on the technique I used.
Using a digital camera makes things easy (and cheap—photons are free). Stand in one spot. Beginning at any point, take a series of photos in a clockwise direction. You want each photo to overlap the previous photo by about 30 to 50%. In addition, keep the camera as level as you can and at the same height. If you wind up doing a lot of this in the future, you will be using a tripod to help with this requirement. If possible, turn off your camera's automatic exposure setting and take all the photos using the same exposure. Since the panorama will be much wider than it is high, take the photos such that each image is higher than it is wide (portrait orientation in printer terms). When you finish turning completely around to your starting direction, you have obtained your set of images.
Here are thumbnails of two sets of raw photos I used for the following panoramas. As you can see, my digital camera does not allow me to turn off its automatic exposure so the images have differing exposures depending on the orientation of the sun and what the meter happened to read.
| Forest Trail |
|
|
| DuPage River Bridge |
|
I found five solutions for stitching the photos together into a single panoramic image. For each solution, my goal was to produce a panorama by stitching my series of photos as easily as possible. Because of this, I did not take the time it would take to thoroughly master each program. I'm sure that more practice would make each program easier to use, and produce better results.
The first solution is Pandora: a GIMP plugin for making panoramas. I used pandora to stitch together several photos from NASA's Mars rover site (this was before I took my own image sequences). Perhaps it was the characteristics of the images taken by the Mars Rovers (wide-angle? distortion?), but I found it difficult to get the images to align properly. I am not that familiar using gimp (which, I gather, rivals Photo Shop in capability and complexity) and the learning curve necessary to produce acceptable panoramas seemed to be rather high. I decided that I would continue my search looking for a more automated solution.
Here is the result (2.6MB):
The second solution uses hugin and optionally, Autopano-SIFT. The hugin program is a GUI for Panorama Tools, some very powerful image manipulation tools. The download for hugin includes all that is necessary to run, however you may be interested in various sources for Panorama Tools: a mirror of the author's (Helmut Dersch) original site, panotools, and it's sourceforge site.
The documentation for hugin is very sparse. Reading the tutorials are necessary to figure out how to use the programs. While I managed to create a panorama, I have just touched the surface; learning to use this program effectively would certainly pay off with better results. [I found this tutorial, an excellent coverage of the technical aspects of panoramic photography—it also contains a detailed explanation of the script files used by the Panorama Tools suite.]
I used my Forest Trail series of photos for this test. The most difficult task is to properly align and overlap the individual photos. Therefore I spent a good deal of time assigning additional control points. If I had used a series of photos that had more recognizable elements than just forest greenery, I suspect that finding the control points would have been easier.
Following one of the tutorials, I used Autopano-SIFT to find the initial control points. I then manually assigned additional points—identifying horizontal and vertical elements was very important to get the photos to align horizontally. It did not help that some of the foliage moved between images due to the breeze.
Here is the result (4.2MB):
The third solution is Autostitch. This program seems to be a demo illustrating technology that is available for licence for commercial products. The web site states:
Individuals or companies are free to use images that they generate using the demo version of Autostitch without restriction or royalties so long as they acknowledge the use of Autostitch in such works.
The answer to a question from the FAQ implies that the demo is timed and will stop working at some point (at which time a more recent version of the demo should be fetched). Thus, there is the possibility that the software will cease working and the demo may no longer be available.
This program could not be easier to use—just open the collection of individual photos. It will stitch the photos together in whatever orientation they belong. Since stitching begins at the time the photos are added, click on edit->options before doing the open.
Here is the result using my DuPage River Bridge series of photos (2.6MB):
The fourth solution was Canon's software PhotoStitch. It is bundled with the software provided with some (all?) Canon digital cameras. The comments I found were generally favorable, so I contacted Canon's Sales and Accessories Department at 1-800-828-4040 and inquired about purchasing their Canon Digital Camera Solutions CD. The cost is $19.95 plus shipping.
The program will stitch horizontally, vertically, and in a grid pattern. Horizontal stitching has an option for a 360° panorama. I used the horizontal and 360° options. When I attempted to use the grid option, I found that the program apparently requires an exact N × M matrix. Acquiring a set of photos meeting that requirement would necessitate the use of a tripod and very careful attention. It appears that this option was meant for stitching together portions of a larger image where each piece was obtained via a digital scanner.
Here is a result (4.2MB):
The seams are very visible, especially where the exposure differed between the individual photos. While the stitching is automatic, it is possible to adjust a junction between two photos manually.
A nice touch is the ability to save the panorama in QuickTime format—no additional utilities are necessary. Refer to the QuickTime topic below.
| Here is the result make by PhotoStitch (3.7MB). Clicking on the graphic to the right will open a new window which displays this example. |
|
|
The final solution is PanoWizard.
Like hugin above, PanoWizard is another GUI for Panorama
Tools.
Perhaps I spent a little more time familiarizing myself with PanoWizard, but I think
the it is somewhat easier to use than hugin.
I needed a new set of images for a test, so I took a small mosaic (19 images)
off my front porch. As you can see, these are not an ideal set of images—they
suffer from
exposure differences due to my inadequate camera and due to the time the pictures were
taken (late-afternoon):
PanoWizard has an option to automatically find control-points. I found that it failed to find the relationships between several of the images in the vertical direction. This is mitigated since one can run the control-point search between a pair of images—although it's time-consuming to identify which images actually overlap. In addition, the images are referenced by the letters A, B, … (in the order in which the images are added) so one would typically need a hand-written cross-reference while doing the control-point assignments. Again, like hugin, the documentation is sparce. Pressing the "Help" button brings up the online documentation (which, of course, requires an active internet connection). [As mentioned in the discussion of hugin above, I found this tutorial, an excellent coverage of the technical aspects of panoramic photography—it also contains a detailed explanation of the script files used by the Panorama Tools suite.] I used both Autostitch and PanoWizard with these 19 images. There is quite a difference in aspect ratio. Perhaps this is due to the ability to provide PanoWizard the approximate field of view; Autostitch has no provision for this information. However, if you carefully examine PanoWizard's result, you will notice that the tree is not truly vertical. I suspect that this could be corrected with more practice. It seems to me that (at least in this instance) Autostitch produced a better result even though I believe the aspect ratio of PanoWizard's image is more accurate.
Here is the side-by-side comparison (1MB):
|
|
Just as there are many solutions for making a panorama, there are equally many options for publishing the result on the Internet. I found two solutions that are very easy and are likely to be usable by most browser clients (I tested IE and Firefox).
Helmut Dersch is the author of the Panorama Tools. His Java applet, ptviewer.jar (current version 3.1.2) was the first viewer I found. A Google search returns over 90,000 hits. A disadvantage would be that Java must be enabled in a client browser, but it is also an advantage that Java enjoys cross-platform support.
Get both the Basic PTViewer Documentation for version 2.5 and the Readme for PTViewer 3.1.2 which describes the changes for version 3. Everything can be fetched from Mr. Dersch's site. While there are a great many options, I will describe the most simple use of PTViewer.
To publish a panoramic image on the internet, create a .html document and insert the following:
<center>
<applet archive="ptviewer.jar" code="ptviewer.class" height="240" width="600">
<param name="file" value="panorama.png">
</applet>
</center>
Place both ptviewer.jar and the image file (panorama.png in this case) where they can be referenced by the .html page.
| Here is my result, a 3551 × 364 PNG (2.6MB). I used my DuPage River Bridge panorama for this example. |
|
We have all seen examples of Apple's QuickTime viewer being used to explore a virtual landscape. NASA's Mars rover site has some examples. If you do a search for QTVR, one of the first links is to Apple's QuickTime VR Authoring site. Using QuickTime has the disadvantage that the browser plugin might not be available for a particular client platform.
The rectangular panoramic image to be displayed must be converted into the format required by the QuickTime plugin or viewer. I found a free converter for this task.
The PanoCUBE utility is, quoting from its web page, a:
utility for creating of QuickTime cubic movies from equirectangular panoramas.
You also need the PTStitcher program (from the Panorama Tools package) and pano12.dll (I used the MinGW version) from Jim Watters site.
Installing this is a little goofy… PanoCUBE has problems with paths containing spaces (I thought that path and file names containing spaces was the primary reason one used the windoze operating system). I just installed everything into C:\PanoCube\ and created a shortcut to C:\PanoCUBE\PanoCUBE.exe on my desktop.
The image to be converted must also have an aspect ratio of 2:1 width to height (a horizontal field of 360° and a vertical field of 180°). My image was 14522 × 1125. This seemed a bit large for my experiment, so I used irfanview to reduce the height to 250 pixels. This gave me an image 3227 × 250. Therefore I needed to vertically center this image into a black image with a size as near as possible to 3227 × (3227 ÷ 2), or 3227 × 1613.5. I chose to add equal sized black strips to the top and bottom to increase the height, so doing the math, I used netpbm to remove three pixels from the left edge of my image giving me a 3224 × 250 image. To this image, I added a black strip 3224 × 681 to the top and bottom. The final size of my image was now 3224 × 1612, a 2:1 ratio. Now I was ready to use PanoCUBE.
As an alternative to netpbm, one could use a paint program to create a black image 3226 × 1613 and then paste the 3227 × 250 image into the center.
Using PanoCUBE is extremely easy: just drag the image file (.jpg or .bmp) and drop it onto the desktop shortcut. Be careful that the path to the image file does not contain spaces or you will get a series of rather confusing error messages—I typically copy everything to C:\WINDOWS\Temp and work from there. A few minutes later you have a panorama.mov file. On windoze, if you click on the .mov file, the QuickTime viewer will start and you will see your glorious panorama. I found, though, that the default parameters used by PanoCUBE resulted in a QuickTime file in which the black stripes on the top and bottom were very irritating. Fortunately, PanoCUBE will use custom values if provided in a file named script.txt.
Simply copy the default script.txt file from C:\PanoCUBE\ (or wherever PanoCUBE was installed) to the folder containing the panoramic image. Use an editor to change the default values as necessary. Since the vertical height of my image was only 250 pixels out of 1612, I changed the initial field of view to 30 and the min and max pitch angles to -15 and 15. I also changed the JPEG quality to 100 and the viewer window width and height to 600 and 250.
To publish the result on the internet, create a .html document and insert the following:
<center> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="600" height="250" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="SRC" value="panorama.mov"> <param name="AUTOPLAY" value="true"> <param name="CONTROLLER" value="false"> <embed src="panorama.mov" width="600" height="250" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </center>
| Here is my result, a 3224 × 1612 JPG converted via PanoCUBE (1MB). I used my Forest Trail panorama for this example. |
|
Note that microsoft has now prevented the above from working seamlessly. In particular:
After a recent update, Microsoft Internet Explorer users can no longer directly interact with Microsoft ActiveX controls loaded by the APPLET, EMBED, or OBJECT elements.
This article by microsoft expains the change and gives some information on how to work around the issue. An article from Apple also describes the problem and supplies a work-around. In summary, the above html snippet should actually be created with some sort of dynamic html rather than being hard-coded. I actually use the following in my example pages:
<!-- Needed once per document -->
<script type="text/javascript" src="fixIE.js"></script>
<!-- For every panorama -->
<center>
<script type="text/javascript">
InsertMovie('panorama.mov',width,height);
</script>
</center>
The three parameters are:
The contents of fixIE.js are:
//
// Function to undo m$'s breaking of QuickTime, etc.
//
function InsertMovie(mov,width,height)
{
document.write( '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="' +
width + '" height="' +
height + '" codebase="http://www.apple.com/qtactivex/qtplugin.cab">\n' );
document.write( ' <param name="SRC" value="' + mov + '">\n' );
document.write( ' <param name="AUTOPLAY" value="true">\n' );
document.write( ' <param name="CONTROLLER" value="false">\n' );
document.write( ' <embed src="' + mov + '" width="' + width + '" height="' + height +
'" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">\n' );
document.write( ' </embed>\n' );
document.write( '</object>\n' );
}
I found Pano2QTVR after finding and using PanoCUBE. This program is free for non-commercial use. It provides a nice GUI and there is no requirement that the panoramic image have a 2:1 width-to-height aspect ratio. The parameters provided by PanoCUBE's Script.txt file—and more—are easily entered via the GUI. The min and max pitch angles can be calculated as described above for PanoCUBE.
If pano12.dll (from Panorama Tools) is found, Pano2QTVR will use it. As I did for PanoCUBE, I copied the MinGW version of pano12.dll from Jim Watters site into the install folder.
I spent another day searching for a JavaScript viewer. Using JavaScript would avoid the requirement for either the QuickTime plugin or Java. What I found is that JavaScript is very fragile. I can personally test with IE, Firefox, Opera and an old Mozilla 1.5. I could not find a JavaScript viewer that worked with my four browsers—and who knows about other browsers? It seems that microsoft succeeded in thwarting a promising cross-browser application.
I took a long look at the viewer here. I got it to work with IE, Firefox and Mozilla. Unfortunately, as soon as I tried to make a few changes such as increasing the size of the viewing window, I found out how difficult JavaScript can be to work with when supporting multiple browsers. I finally gave up. It's too bad… someone spent a lot of time getting this viewer working.
I then located the IE HTML Panorama Viewer which directly displays and scrolls the panoramic image. I found that it worked with IE and Firefox, and it sort of worked with Mozilla (the horizontal scroll bar is visible and operational, but it is not supposed to be present). I think that using JavaScript for a panoramic viewer is much too likely to fail to work for particular browsers… and who knows how compatible future versions of the current browsers will fare? If Java or QuickTime are not viable, then a thumbnail with a link to the full-sized image would be adequate (as I do above).
To publish a panoramic image on the internet, create a .html document and insert the following:
<!-- Needed once per document -->
<script type="text/javascript" src="Panorama.js"></script>
<!-- For every panorama -->
<center>
<a href="JavaScript:View360('panorama.jpg',height,width,ratio);">View panorama"</a>
</center>
The four parameters are:
| I used my DuPage River Bridge panorama (converted to JPG) for this example. |
;){kind=small}
|
An extremely clever method that uses only Cascading Style Sheets can be found at Stu Nicholls' CSSplay site. The panoramic image scroller is implemented directly with CSS—no JavaScript, Java or plugins. It, of course, requires a browser client that supports CSS. Mr. Nicholls explains the method used:
This method uses two background images. One is the compressed image and the other is the full size panoramic image.
The compressed image is held as the background image for the outer div. The inner list holds a 32 x 1 grid of links which in turn hold the full size panoramic image as the background of ems which are normally hidden from view.
When your mouse is hovered over any of these links, indicated by the dark green bar at the bottom of the compressed image, the ems are displayed at an absolute position and the background position adjusted to make it look as though the image is being scrolled.
I found that this technique works well with Firefox, Opera and Mozilla. Unfortunately, with IE there is an annoying flash as the image is scrolled (Mr. Nicholls states that IE has a smooth transition but this was not so when I used IE on windoze XP). I also noticed that IE is re-fetching the image each time it is scrolled (this may be the reason for the flashing); the other three browsers use their cached image so there is no additional network traffic.
Mr. Nicholls used a panoramic photo of Stonehenge for his example. The background picture is the panoramic photo "squished" horizontally. It works rather well because the full-sized image is not a 360° panorama. I use the same technique for my panorama and you can see that the "squished" image is not particularly informative or appealing. Were I not duplicating the effect for this example, I would either crop a representative portion of the panorama for the background, or display usage instructions.
To accomplish this effect, a series of calculations are necessary. This cries out for JavaScript really—whoops… just the CSS Ma'am*. I will explain the calculations involved, and provide a form that will do the calculations and generate the html fragment.
We start with a panoramic image with dimensions
Px × Py, and desire to
display this image in a window of width Wx.
Notice that when the mouse is moved over the dark-green horizontal strip (call it
the scroll bar) at the bottom of
the panorama above, the image "jumps" to a specific offset
(O0, O1, …, On-1)
depending on where the
mouse is positioned, and a rectangular region of the scroll bar under the mouse is highlighted..
The scroll bar contains n rectangular regions of
Jx × Jy pixels.
The width Wx is calculated by:
Wx = n × Jx
where Jx should be wide enough to be visible as the mouse moves over the
scroll bar, and n large enough that the image is scrolled relatively smoothly.
$ convert -quality 75 -resize 600x364! panorama.jpg squished.jpg
<style type="text/css">
#picture {border:1px solid #000; width:Wxpx; height:(Py + Jy)px; background:#fff url(squished.jpg) no-repeat; margin:0 auto;}
#picture img {display:none;}
#picture ul {margin:0; padding:0; width:Wxpx; height:Jypx; list-style-type:none; background:#040 url(panorama.jpg) no-repeat 0 200px; margin-top:Pypx;}
#picture ul li {display:block; width:Jxpx; height:Jypx; float:left; position:relative;}
#picture ul li a, #picture ul li a:visited {display:block; width:Jxpx; height:Jypx; text-decoration:none; cursor:default;}
#picture ul li a em {display:none;}
#picture ul li a:hover {background:#080;}
For the first of the n rectangular regions in the scroll bar:
#picture ul li a:hover em {display:block; position:absolute; left:0; top:-Pypx; width:Wxpx; height:Pypx; background:#eee url(panorama.jpg) 0 0;}
For the remaining i = 1 to (n - 1) rectangular
regions in the scroll bar and corresponding offsets:
#picture ul li a:hover em#a(i + 1) {left:-(i × Jx)px; background-position: -Oipx 0;}
:
:
</style>
<div id="picture">
<img alt="Description - for visitors with css off" title="Title - for visitors with css off" src="panorama.jpg">
<ul>
For each of the i = 0 to (n - 1) offsets:
<li><a href="#nogo"><em id="a(i + 1)"></em></a></li>
:
:
</ul>
</div>
Since Autostitch will stitch an entire mosaic of images, I went back and took more photos. This time, in addition to a horizontal strip, I took four additional strips—two above and two below the usual horizontal strip. I used a landscape orientation for the ground and sky strips. Since the parallax errors would be larger, I took two narrower height-wise strips instead of one. I found it was quite easy to miss a section when shooting the ground/sky sequences. It is easier to follow the horizon for visual points to overlap. When shooting towards the sky it is too easy to lose track or to pan too far.
These were the 111 individual photos:
Here is the resulting panorama (6.5MB):
Clearly, more is better… if the subject matter is appropriate.
Obviously, a panorama of a very wide building may not benefit from
a large expanse of empty sky above. Compare the above to the
panorama created from the single center strip of photos (3MB):
| If the panoramas are converted to QuickTime format, the same considerations apply. Here are both panoramas converted to QuickTime (3.5MB and 1.5MB). |
|
You will notice artifacts of the stitching process. This is probably unavoidable to some extent. When I began experimenting, I was concerned with the size of the resulting images and files. My solution was to reduce the size of my original photos before I began making the panoramas. This was a mistake—all of the programs work better using the full-sized photos. When complete, the result can be rescaled if necessary.
I experimented with a set of photos that had a prominent view of high-voltage power transmission towers and lines. After reducing the size of all the photos, I ran Autostitch. There were many instances where the power lines did not line up in the result. Additionally, I noticed problems with my bicycle and the section where I was faced towards the sun. The bicycle was parked directly beside me and appeared at the bottom of the panorama. My guess is that the parallax errors in the photos (the camera was pointed down towards the ground) caused this problem. The photos facing the sun had a lot of lens flare. This resulted in blurry patches in the result.
I reran Autostitch using the original full-sized photos (1600 × 1200). It took a long time—the resulting panorama is a 15167 × 3600 PNG (92MB)! The results are definitely worth it. The most obvious artifact, the power lines, were much more correctly stitched. There are still some problems, but they are not noticable unless the lines are examined closely. Unfortunately, even the full-sized photos could not make up for the problems with the photos themselves. The blur from the photos with lens flare, and the blurring/artifacts with the bicycle remain. Overall though, I am much more pleased with this result than when I started with smaller photos.
| I rescaled the panorama to one-third and converted to QuickTime format. Here is the result (3.5MB). |
|
If you examine the panoramic images closely, you will see various artifacts of the stitching process. Some are due to the software, but others are directly related to the individual photos used to build the panorama. My images suffered from exposure discrepancies, inexact horizontal panning, inexact vertical alignment, and varying element locations due to the wind moving foliage. Clearly, starting with a good set of images is the key to an excellent panorama.
I rate the stitching programs in this order by the combination of ease of use and quality of the result: Autostitch, PanoWizard/hugin, PhotoStitch, Pandora. For making QTVR files: Pano2QTVR, PanoCUBE.
My thoughts about each of these programs is:
 Home
|
Hit counter: |
|