Panorama Tutorial: Interactive Panorama Viewers & Multiresolution

This is the final step of creating your panorama! You have your panoramic image ready, perfectly stitched, with a straight horizon, and beautiful colors. But it’s still nothing but a picture. It’s time to give it some life and make it interactive! In order to do so, you will need to use software to convert your image and create a viewer for it. It is about deciding what format to use to display your panoramic images and make them appear as immersive images.

This article was not created with the goal of listing every existing possibility. It goes straight to the point of what modern formats are used in today’s VR (virtual reality) photography, to view panoramas on your computer or publish them online.

Panorama Viewers

About QTVR

First of all, a few words about QTVR – QuickTime Virtual Reality. This is the original format in which panoramas were viewed. This technology was developed by Apple and uses the QuickTime player, and the QuickTime plugin on Internet browsers. The panoramas are converted to a .mov file.

This format has now become quite obsolete. Nowadays, it is Flash and above all HTML5 that support most panoramas online.

Flash Panoramas

Adobe Flash has been a very popular way to showcase panoramas online. When you choose a Flash output in your software, your panorama will be converted to an .swf file.

You can quite easily incorporate this Flash object in your web page using HTML such as the <embed> tags.

However, the most convenient is to ask your software to create an HTML page for you, with your panorama already embedded in it. If you wish, you can decide the panorama to be displayed full screen on the webpage. This way, it is easy to link to this page from your site and show a full screen panorama, which is more impressive than a panorama shown in a small window.

HTML5 Panoramas

Adobe Flash is really good at displaying panoramas, but it has a flaw: it is not supported on mobile devices such as tablets and smartphones.

If you want your panos to be able to be viewed on such devices, you will have to use the HTML5 format. Your panorama will be converted to an .xml file. Just like with Flash, it can be embedded in an HTML webpage that is easier to work with and include directly to your website.

Even if you create an HTML5 panorama to target mobile devices, you can create a fallback Flash .swf version of your panorama. Like this, if the browser does not support Flash, the HTML panorama will be played, and if the browser doesn’t support HTML5, the Flash panorama will be played.

Loading Time and Multiresolution

Loading time has always been a major issue with panorama display and it is not always easy to balance loading time and panorama quality. As you can guess, the better quality, the longest the loading time.

Technology keeps improving but there are a few things you can do to avoid having the visitor waiting 30 seconds for your awesome panorama to load (he won’t wait, anyway):

The first one is decreasing the size of the original image file you are using. If you have read the previous parts of this tutorial, you might remember that I mentioned that a 6000-8000 pixel wide image is enough for an enjoyable full-screen display. Of course, a 20,000-pixel panorama will be super sharp and detailed and beautiful, but no one will look at it because it will take ages to load. The idea is to find a compromise.

If you use the cubic projection during your editing process, you can perfectly reduce the quality of the zenith (top) and nadir (bottom) tiles. Very often, these tiles are just showing some clouds or blue sky, or some soil or paved ground, etc. It is OK to have slightly lower quality for these parts as they are not crucial, they are not what will grab our attention in the panorama.

You can also use multiresolution. Multiresolution consists in creating several versions of your panoramic image in different resolutions. The lower resolution will be loaded first (and quickly), and then the higher resolutions will be loaded one after another.

The result is that instead of having a high-quality panorama loading bit by bit over a black background, you will very quickly see a low-quality image that will gradually become less and less blurred until it reaches the highest resolution. It is a more enjoyable experience for the viewers.

Conclusion

Congratulations for making it to the end of this tutorial! But that’s not completely over yet. You noticed that I mentioned panorama software throughout this tutorial series without giving it much explanation. I am sorry if that made you confused. I just wanted to avoid mixing theory and software reviews, this is a part of this website that will be developed soon.

I hope you enjoyed reading this tutorial and that it will help you create your first panos!