6

Making It Interactive: Panorama Viewers

This article is Part 6 of the ‘How To Make a 360° Panorama?‘ tutorial series. If you missed them, here are the links to Part 1Part 2Part 3,  Part 4 and Part 5.

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 a 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.

 

  • 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 HTML5 that support most panoramas online.

 

  • Flash Panoramas

Adobe Flash has become 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, it is still advisable to 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 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:

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 represent some clouds or blue sky, or some soil or paved ground, etc. It is OK to have a 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.

MultiresolutionExample: Adding automatic resolution levels in the Pano2VR software.

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 along 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!

2 Comments
  1. Sherrelle Leckie 2 years ago

    Thank you for your wonderful tutorial. I’m self taught all the way using Microsoft ICE and Photosynth but always had a lot of questions and this tutorial has helped me fill in so many blanks!! I really appreciate it.

    • Author
      Julien 2 years ago

      Thanks for your kind words Sherrelle, glad this was useful to you!

Leave a reply

Your email address will not be published. Required fields are marked *

*

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

©2017 ExplorationJunkie

Log in with your credentials

Forgot your details?