Tokyo waterfront panorama – the making of

In my previous post I shared a panorama photograph of the Tokyo waterfront taken from Rainbow Bridge1. It was not particularly difficult to do, and there were no ground-breaking techniques involved, but I thought I would write up how it was done as a small tutorial for anyone who might be interested in trying the same. The basic steps were:

  1. Take a series of photos,
  2. stitch them together,
  3. edit the photo, including altering the colours,
  4. upload and present the finished panorama online.

In the following I will go through each step.

Shooting

I brought a tripod to the bridge, intending to use it for a few time-lapse recordings, but it also proved useful for shooting the photos for the panorama in the twilight. If there is enough light, a tripod is not really needed, but in any case it helps with keeping all the photos level.

I took a total of 9 shots, turning from left to right, making sure to get a good overlap between each subsequent pair of photos. This Google Earth image of the bridge shows roughly the direction and viewing angle of each of the 9 photos (click for large version):

Angles of each photo in the Rainbow Bridge panorama

Notice the large overlaps, necessary to get a good stitching later. Each single photo had a field of view2 of 31°, but the final combined panorama is only 190°.

This is what the photos looked like:

The western sky is bright from the setting sun, while the northern sky is darkened by the heavy rain-shower that just half an hour earlier had forced us to seek cover for a while. This stark difference in lighting helps to give the dramatic colours of the final panorama — and that brings me to the camera settings: All manual! Had I used automatic exposure control, the contrast would have been much lower — the photos near the edges would have been darker and those in the middle would have been brighter. To get a good seamless stitching, I believe it is important to get consistent exposures across the whole scene. In some situations that would give problems with the dynamic range, but in this case it worked with the same settings for all frames3.

So I set the camera on M, manual mode, and dialled in an aperture and shutter speed that seemed to give a good exposure (as confirmed by the LCD live view): f/7.1 and 1/25 sec. ISO was at 800 — a little on the high side. Considering I was shooting on a tripod, I should have been able to use lower ISO and a slower shutter speed. However, if you open the 7th photo you will see that, unfortunately, it is rather blurred in spite of the tripod — I guess this was due to the heavy shaking of the bridge when trucks passed by. Next time I should be more careful and check each shot in detail on the LCD!

I also used manual focus and kept it fixed, just to be sure that buildings at the same distance would be equally sharp. Of course that didn’t help much against the truck… I shot RAW, but had I shot JPG, I would also have fixed the white balance setting.

Stitching

After exporting the 9 photos to full-size (18 megapixels) JPG files, I opened them in Hugin, a great open source program mainly for panorama stitching. It has tons of options and possibilities for tweaking of detailed settings, but fortunately there is also a fairly robust automatic mode that does basically all the stitching for you — at least for simple panorama types such as this one. I have yet to try it out on more complex compositions such as a full spherical panorama, but Hugin should also be quite capable of that, as well as many other types of stitching operations.

After loading the images (the Load images button in the Assistant tab), Hugin automatically extracts the lens’ focal length and the camera’s focal length multiplier4 from the EXIF data. It uses this information to correctly align the images and calculate the projections:

Hugin screenshot - importing images

The next step is to align the photos to each other. This is done by selecting pairs of corresponding pixels in two overlapping images. These pixel pairs are called control points. The control points can be added manually — and sometimes it may be necessary — but, although the interface makes it a reasonably snappy process, it is quite a drag to align 9 images to each other. For each overlap several control points are needed for good alignment. Luckily, Hugin’s automagic control point finder works really well. Simply click Align on the Assistant tab, and Hugin starts crunching through all the images. If everything goes well, it will pop up the Fast Panorama Preview which gives an overview of what the aligned panorama will look like:

Hugin screenshot - Fast Panorama Preview

You can clearly see the seams between the individual images — colours and tones are not consistent. No need to worry about that — exposures, white balance etc. will be blended in the final output image, but Fast Preview does not show all that. Its functions is more to assist in adjusting the projection and cropping of the panorama, as well as for checking whether the alignment went well. It is a good idea to play around with the various functions and settings under the five tabs. All I had to do in this case was to adjust the crop, since I didn’t want to include the small parts of the bridge visible in the right-hand side:

Hugin screenshot - cropping

The final step in this almost fully automated panorama creation process is to close the preview window, switch to the Stitcher tab, select the type of output image and press Stitch now. For this simple panorama, I selected the most basic panorama output, Exposure corrected, low dynamic range, and chose to save the output as an LZW-compressed TIFF file to keep all the information in the image — compression to JPG will come later:

Hugin screenshot - stitcher

After choosing the file name, the stitching process runs for a while and saves a giant image file to the disk. We are now done with step 2 of this tutorial.

There are loads of options and ways of tweaking Hugin, and it can do many more advanced kinds of image combination, including HDR. I am still just figuring out the basics of the program. To learn more about how to use Hugin, check the manual, and to get an overview of the many possibilities and to learn how to use them, there are a number of good tutorials. They often refer to old software versions, but mostly it is straight-forward to apply them to the most recent version.

Editing

This step is not really related to panoramas as such, so I will make it brief. I mainly did a few colour corrections on the TIFF file in GIMP to get from this:

stitched_panorama

to this:

Tokyo_Bay-mini

The blues and yellows are perhaps a bit over the top, but I thought it gave an interesting feel.

Presentation

As you can see above, it is not easy to show a wide panorama on a website – it becomes tiny if the whole picture should fit on the page. It is therefore usual to use some kind of panning mechanism for showing just parts of the image, controlled by the mouse. There are many ways of doing this, most of them definitely more advanced than what I implemented here. A very good example is the great 360° panoramas at 360cities – especially their amazing Gigapixel-ones.

Since my panorama here was not a full 360° view, there was no need for anything fancy like attempted perspective. I just wanted to create the impression of moving across a very large wall-hanged picture at close distance. For that, I found a neat little jQuery-based script, jQuery image panning by Manos.

The panning image can then be added to a page in WordPress (like here) or anywhere else with the code

<div id="outer_container" style="height:420px; margin:20px 0; padding:2px; border:3px solid #dadada;">
    <div id="imagePan" style="height:420px; width:100%; position:relative; overflow:hidden; cursor:crosshair;">
        <div class="container" style="position:relative; left:0;">
            <img src="http://turningmirrors.com/media/panoramas/Tokyo_Bay.jpg" class="panning" style="max-width: inherit !important;" />
        </div>
    </div>
</div>

The libraries also need to be included, including the jQuery script for easing: the smooth motion seen when panning around:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://turningmirrors.com/resources/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://turningmirrors.com/resources/scripts/imagepan.js"></script>

This is the result. Move the mouse from corner to corner to scan around the view:

The various parameters can of course be adjusted for different view sizes, as in this full-screen version.

Wrapping up

While the methods and techniques mentioned here are neither novel nor very advanced, I hope that the detailed walk-through may be helpful to some. And while 360° panoramas are all the rage these days, you might find that a certain scenery gains from being photographed and displayed as a wall painting, rather than as a “photo sphere”.

Have fun!

PS. Here are a couple other panoramas I took:


  1. As it happens, that previous post was almost 2 years ago! And the 80% finished draft of this post has been sitting around since about the same time. Don’t tell me I’ve been neglecting the blog… 

  2. Calculated with Howard’s Field of View Calculator for 40 mm focal length on an EOS 7D body. 

  3. Hugin can actually do automatic exposure adjustment, so it should be possible to correct for a certain amount of difference in exposure between frames. I haven’t tested it thoroughly, though, so I don’t know how well the output looks. 

  4. A full-frame camera sensor has focal length multiplier 1. For crop sensors, such as the one on my EOS 7D, the focal length should be multiplied by this factor to get the equivalent full-frame focal length.