Tuesday, July 15, 2008

360 degree Panorama tutorial

I've been asked how I made the pictures for the PanoCube, so I've thrown together a short tutorial.

For the example image in the panocube demo I used a tripod and a normal digital camera on which I could lock the exposure time.

This is important because ground and air, or if you’re inside, the walls and windows/lights, differ quite a lot there.

If your camera automatically adjusts the exposure, the stitcher tool will have a hard time understanding this. (Autostitch doesn't handle this too well, autopanopro is more powerful in this respect, but if you can use the same exposure for every picture, you'll get better results)

Take pictures, rotating the camera a little after each one, make sure you have about 1/3 or 1/4 overlap with the previous picture. It takes me about 30 pictures to make 1 rotation.

When you’ve done a 360 degree turn, tilt the camera up a little (again 1/3 or 1/4 overlap), make pictures all around and repeat until you’re pointing all the way up.
Go back to the very first position and repeat that again, but this time tilting the camera down every round.

After you’re done, stitch them together with autostitch (free http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html ) or autopano pro (better than autostitch, but not free http://www.autopano.net/) this will save the file as pano.jpg.
Be sure to set the rendering options (resolution etc) before you load the pictures, because autostitch will start rendering immediately)

When the stitcher has finished, you’re got yourself a nice 360 degree panorama image. (Autostitch doesn't ask for a filename to render to, it will just create 'pano.jpg' in the same folder as where your original pictures are)
You can use this picture as-is in most panorama viewers (like PTViewer) but for our Silverlight Panocube, we need cubic projection images.

Don’t worry too much if you’ve got ‘holes’ in your picture right now, they’re hard to fix in this format.

As said, we need to convert it to a cubic projection format. I did this using Bixorama, you can download a trial here http://www.outerspace-software.com/bixorama.html

In bixorama, import the pano.jpg file as a ‘latitude longtitude’ file.
Press f6, or ‘view – single files’ and you should see the 6 sides of the cube.
Export these as ‘single files’ and you’re done.
The exported files are easier to fix if you have holes because now there’s no spherical distortion.

You can use these images in the example provided in the panocube post.

Have fun, and let me know what you think.
I'd love to see some examples of what you guys are doing with PanoCube :)

12 comments:

  1. That's awesome Martijn! Thanks mate. I'm gonna give it a whirl :)

    ReplyDelete
  2. Hi Martijn,

    Would it be difficult to create a cylindrical version of the control where a single photo could be fed?

    Thanks,

    Pyt

    ReplyDelete
  3. I don't think it would be easy to convert the panocube viewer to a cylindrical panorama viewer. The way the images are rendered is different.

    You'd have to alter the distortimage class so an image offset can be easily used, and also you need to render a cylinder instead of a cube.

    You could also fake it by providing enough fake imagery (empty pixels) above and below your panorama image, and run it through bixorama, so it would create an empty ceiling and bottom for the cube, and have your 180 degree panorama image wrapped on the front, right, back and left image. that way you can use the panocube as-is.

    ReplyDelete
  4. Alternatively you could use a 'flat' panorama viewer like Michiel Post has made.

    Click here

    It scrolls the panorama image, it doesnt do image distortion like PanoCube.

    ReplyDelete
  5. Dear Martijn,

    Your work on DistortImage is really helpful for me. But If the image is not in square, the height of distorted image will be only half of the desired height. Please give me some advice. Thanks for your help.

    James@lcnet.com.tw

    ReplyDelete
  6. Hi Martijn,

    I downloaded your source code but wasn't able to successfully achieve the same effect that you did in your PanoCube. I've stitched the photos, run them through the Bixorama and when I tried replacing the original images with mine, there is whitespace in between the images.

    You can see a screenshot If it's any information at all, instead of AutoStitch, I used Microsoft Image Composite Editor to stitch the image up.

    ReplyDelete
  7. Sorry, the link didn't work.

    http://img22.imageshack.us/img22/8331/whitespace.jpg

    ReplyDelete
  8. @Molly Are the images the same size as the images in the example?

    ReplyDelete
  9. *face!palm!* That worked! How could I have missed that! Thanks so much for your help, Martijn!

    ReplyDelete
  10. Hehe, Good to know it works for you :)
    If you're going to use this in a website somewhere i'd love to see it when its done :)

    regards,

    ReplyDelete
  11. Hi Martijn,

    Is it possible to integrate Deep Zoom Effect together with panocube?

    Thanks,

    Aki.

    ReplyDelete
  12. You might be able to integrate a panorama view into a deepzoom, but not the other way around.

    ReplyDelete