How to create spherical panoramas

22 January 2017

Overview

This is a traditional process to create 360 degrees panoramas. It uses a regular camera, optional but highly recommended panoramic bracket, and stitching of separate photos into a single image covering 360x180 degrees - i.e. full sphere. Such image can be then shared on-line. My own panoramas are available here.

This article will briefly cover following topics:

Shooting 360 panorama
Processing raw shots
Stitching photos into the panorama
Presentation on Facebook
Presentation on your own website

Shooting 360 panorama

There is a number of ways how to approach this. I use a DSLR camera with full frame fish-eye lens, tripod, and panoramic bracket. My process is very similar to what this video describes, though I don't bracket my shots. I am however shooting in raw to keep a decent dynamic range. This way I end up with 6 portrait photos covering 360 degrees with a good overlap, one shot above, and one hand-held shot of the ground.

Here is an example of scaled down photos for this panorama, Jpeg files out of the camera (click for larger version):

Processing raw shots

My favourite program to process raw photos is Darktable. I develop one of the photos and copy/paste all settings onto the rest. Then make sure than all photos have portrait orientation before final export in Jpeg format.

Here is how my processed photos for the same panorama look like (click for larger version):

Stitching photos into the panorama

There is a number of options available to stitch photos into a panorama. My favourite is free-libre program Hugin. First of all I needed to calibrate my lens. This is a one-time effort.

I start with stitching 6 photos covering 360 degrees. Usually Hugin's CPFind algorithm finds reasonable control points for a good stitch. If it doesn't I remove unsuitable control points and add manually more for better coverage. I do a test stitch with lower resolution once the geometric and photometric optimizations are done (click for larger version):

In the next step I add the shot above. I like to save the Hugin project file using a new name, just in case I decide to go back a step. Since most of my panoramas are outdoors and contain hardly any recognizable features in the sky in most cases, I need to often create control points manually. I tend to create only a few (for example middle of the sun). Then set pitch to 90 degrees and optimize only for yaw of the shot above (you need to use custom parameters for geometric optimization). Since the shot was taken still on a tripod, the stitch tends to be acceptable. One issue that often shows up is that clouds moved during the shooting by a bit.

If I am happy with the above shot, then I save project as a new file again and add the hand-held ground shot. Since the camera wasn't exactly in the same place as for the rest of the shots, I tend to create a new lens for the ground shot. If automatic feature matching doesn't work, add control points manually. Try covering the photo reasonably well as we need to optimize not only the position of the shot but also its lens parameters.

Once done and optimized (only position of the last shot plus horizontal field of view and distortion of its lens), do another test stitch. If you notice any parts of the tripod, tripod shadow, etc. in the output, find these parts in the original photos and create exclusion masks for them. Just make sure that you have still enough coverage for every spot of the sphere, i.e. don't create any holes.

When you are happy with the results, set maximum output resolution and do the final stitch. Make sure projection is set to equirectangular. This takes considerable amount of time with my 24 mega-pixel images. You should end up with a very large image in TIFF format. In my case it was 17464x8732 pixels, i.e. more than 150 mega-pixels. See smaller version below or download the large version from my photogallery (download button is in upper-right corner of that page).

Presentation on Facebook

Facebook recently introduced 360 panorama viewer functionality. In order to make it recognize our photo as a full sphere panorama, we need to trick it by setting camera maker and model that it knows about in the image EXIF tags. There is also a limit on the image size, currently 80,000,000 pixels.

Open your TIFF panorama image in a photo editor, for example Gimp. Check its size and scale it down to 128 million pixels or less if needed (i.e. 16,000x8,000 pixels - limit as of September 2017). Then save it in Jpeg format.

Now let's set the EXIF tags. I do it with a standard command line tool exiftool, but you can read more about it for example here.

$ exiftool -overwrite_original -Make='RICOH' -Model='RICOH THETA S' \
> -ProjectionType='equirectangular' my-panorama-image.jpg

Now simply upload this Jpeg file onto Facebook. It should be recognized as 360 panorama and you can set the initial view.

Presentation on your own website

If you want to give your audience similar experience as standing in that place and looking around on your own website, you will need some software for that. The good news is that it can be done in a modern browser with only JavaScript enabled. One I use is called Pannellum and it's free-libre software.

1. Generate multiRes tiles

Pannellum works with various image formats. The best choice for large panoramas is to convert the image into multi-resolution tiles format. This way your audience needs to download only tiles for the zoom level they are currently viewing. For that download and install Pannellum somewhere on your PC. Here is my example, including cleaning up previous runs:

cd ~/etc/Pannellum/pannellum-2.5.6/utils/multires
rm -r output/
python3 generate.py /full/path/to/my-panorama.jpg

2. Copy output onto your webserver

The output folder will contain a number of subfolders (1, 2, 3, etc.), one for each zoom level. There will be also subfolder fallback and a text file config.json. Subfolders for more precise zoom levels contain higher numbers of image tiles:

3. Create a webpage to present your panorama

For a full example, have a look at the source of any of my panoramas. Here is the core of the code:

<div id="panorama">
<div id="music-toggle" class="pnlm-controls pnlm-control"></div>
<noscript>
    <div class="pnlm-info-box">
      <p>Javascript is required to view this panorama.<br>
         (It could be worse; you could need a plugin.)</p>
    </div>
</noscript>
</div>

<script>
var panoViewer = pannellum.viewer('panorama', {
    "type": "multires",
    "multiRes": {
        "basePath": "/panoramas/my-panorama-main-folder",
        "path": "/%l/%s%y_%x",
        "fallbackPath": "/fallback/%s",
        "extension": "jpg",
        "tileResolution": 512,
        "maxLevel": 5,
        "cubeResolution": 5496
    },
    "autoRotate": -5,
    "pitch": 0,
    "yaw": 250,
    "hfov": 100,
    "minHfov": 30,
    "maxHfov": 130,
    "autoLoad": true,
    "autoRotateInactivityDelay": 5000
});

document.getElementById('music-toggle').addEventListener('mousedown', function(e) {
    var musicControl = document.getElementById('MusicPlayer');
    if(musicControl.paused) {
        document.getElementById('music-toggle').classList.remove('music-toggle-inactive');
        musicControl.play();
    } else {
        document.getElementById('music-toggle').classList.add('music-toggle-inactive');
        musicControl.pause();
    }
    e.stopPropagation();
}, true);
</script>

<audio id="MusicPlayer" autoplay loop>
  <source src="/panoramas/music/my-music-track.mp3" type="audio/mpeg">
</audio>

Some of the parameters are copied from the generated config.json file:

"path": "/%l/%s%y_%x",
"fallbackPath": "/fallback/%s",
"extension": "jpg",
"tileResolution": 512,
"maxLevel": 5,
"cubeResolution": 5496

Other parameters need to be adjusted as per your requirements (see documentation). One bonus feature you can see in the code above is background music with an on/off button added to the panorama itself - check out this article if you need any free music for your projects. And the final result is here.

Please let me know if you notice any issues in this article.

Article How to create spherical panoramas by Tomas Sobek is licensed under a Creative Commons Attribution 4.0 International License.

Tomas Sobek Photography

Free high resolution images