Searching free and/or opensource ways to display spherical panos in html5 browser

 

Introduction

Today viewing spherical panos ( also known as equirectangular panos due to the projection type, showing 360° horizontal field of view, or hfov and 180° vertical field of view, or vfov ) seems a quite simple and current thing, since tablets, phones and computers are able to display Virtual tour views through browsers, like Google street view does( the most known I think).

This types of panos are also used in 3D softwares (as Blender3D , 3DSmax, etc…) to create simple backgrounds or environment maps- if they have been done with bracketed shots, and have an hdr extension ( as .exr for example) , providing better lighted scenes for realistic renderings.
They can also be viewed through headsets like the Oculus rift.

So when it’s easy to visualize such things today, it’s not as easy to make and post yours, moreover if you want to produce something with a good quality;  the leader for it is krpano ( if you maintain a site and dispose of your server ): html5 viewer +flash fallback; and I’m sure that at the time you read this you already know it and are searching a free or simplest alternative.

REMEMBER : if you just want to post panos you can use google photosphere – leaving your rights on it , and lots of other sites exists in alternative to make it : « 360Cities’-dot-‘net », « viewAT’-dot’org » ….( just google it ^^); if you use WordPress , a plugin also exists : PanoPress

Opensource panorama viewers

Well, things are not as easy as downloading the krpano free version, and refering to its users community, but if you just want to post your personal ones on an isolated html5 page and don’t want to make advertizing for krpano you don’t need today to be a professional, requiring licensing to be able to post hundreds of panos, with your own watermark.

In fact Opensource AND free solutions are few today :

1. Pannellum 2 [by M.Petroff] : HTML5 viewer using WebGL
2. PanoSalado 2 : flash 10 based viewer
   

I don’t have tested Panosalado, since using Flash cannot be considered as a FLOSS channel and require a browser plugin to work (don’t you want to eradicate it from modern browsing ?), just stays PANNELLUM 2,  as far as I know (tell me if you know an alternative).

It’s been a year since I’ve been using the first version , and today I’ll give my feedback to the improved second version (august 2014)

1. « SIMPLE » or « One piece » equirectangular panos :

2.  « Multitiled » Panos , panoramas in cube:

3.  Searching a Fallback solution using  Blender :
   

« SIMPLE » or « One piece » equirectangular panos :

First of all, I don’t personnaly know M.Petroff, and just appreciate and consider his work to make Pannellum.
My first two examples were done with my  » hand made panoramic head  » for my old lumix fz18, consisting of an ikea square for wall tablets, a cheap plastic tripod, 2 or 3 screws , no plans to make it- I just had to know nodal point of this camera.

REMEMBER:  you don’t need to have professional cams, or the latest phonecam with 1400MPx to make high resolution spherical panos … you can make it with a compact cam with at least a manual mode and wide angle  (<=  28mm is enough ), and a…. plumb-line : just look at the philopod. Moreover: all those medium to make automatic panos dont permit you to control the final resolution – photos are just quickly stitched using openCV.

The one used for multitiled example was done using a nodal ninja panoramic head and a nikon D90.
Photos were uploaded to Hugin , quickly postreated in GIMP, not taking care of shadows , no bracketing at all;
resulting panos were more than 16000px wide due to the focal lengths used ( more than 35 mm ); the bigger the focal length is , the more you have to take pictures, the bigger the resulting pano resolution is…
Due to Pannellum limitation I had to change their size to 4096px wide. 
Let’s get a look at them:

1. Localisation: St Cado, France , view on Nichtarguer, Beg-en-Trech street

    

2. Localisation: St Gereon , les Pierres Meslières,France

    

 

Those panos are showed through an Iframe beacon, you can see them if javascript is activated in your browser, and If it supports webGL;
Else you should see a black screen with a message…

There’s actually no fallback to this, nothing should display if your browser doesn’t read iframes; and that’s not SEO optimized, unless you put metas and HTML5 beacons in the pannellum.htm file, and make it accessible ; in that case it should open in full windows but no pano would charged… but opensource model make it possible to change that ( if you do so, tell it to its author, he should be interested with improvements )

You can put hotspots with infos, links using a .json file.

 

 « Multitiled » Panos , panoramas in cube:

 

With this new version of Pannellum you can make virtual tours,  and – that’s what it was lacking to my point of view- MultiRes panos;
While before you had to downsize your equirectangular pano to 4096 px, you can now cut it in tiles which will be called while zooming. The display type is different since it now appears as mapped in a cube ( like the older viewers ), and I find it more distorted while looking it at zoom level 1;
This seems to be the matter to work on for all others viewers : you have to map rectilinear images in the cube to give the illusion of a continued and spherical view, but when you unzoom you increase the hfov : rectilinear distorsions appears approaching 90° hfov, showing straight perspective lines.

I had to face a problem using the python script to generate the tiles: it has been writed with python 3.2 , using the module called Pillow – a fork of PIL (python image library). PIL just works with python 2.7 , that’s why he had to make it like that; but I never succeeded in installing easily python3-pip on my linux-based computer ( broken packages that I didn’t want to get rid of now…), so I decided to change a few things in it to make it python 2.7 .

REMEMBER:  To use his script Hugin must have been installed on your computer, to give a link to NONA , which cut your pano in 6 faces showing 90° horizontal and vertical fov.

I won’t explain too technical things concerning this process, but I had two solutions to cut it well and get a good display :

• Make your pano size a multiple of 4096px ( 8192px, or 16384 or higher )
• Change the cubeSize value in the script to 4096  ( cubeSize = 4096 )

Tiles are 512px sides in this test, generating 4 folders with respectively : 1: 6 images , 2: 24 images, 3: 96 images, 4 : 384 images  in jpg format. Plus a fallback folder containing 6 faces , and a .json file to pass to the iframe beacon.

Pannellum 2 Multitiles , 512 px tiles test:

 

Legend:
It seems there that we need to give to the generate.py script 4096 px original tiles – done by nona – to get a good display of the multitiled pano

Pannellum 2 Multitiles , 256 px tiles test:

Tiles are 256px sides in this test, generating 5 folders with respectively : 1: 6 images , 2: 24 images, 3: 96 images, 4 : 384 images  and 5: 1536 images (!) . Plus a fallback folder containing 6 faces , and a .json file to pass to the iframe beacon.

It seems to have less focus than the 512px one.

 

Searching a Fallback solution using  Blender :

 

That’s wonderful, all seems to work as it should, but I got an error while I wanted to look at them on my android phone : chrome tells me that WebGl is not activated ; I can do it  ,  if I know how to do it .

But people who don’t want to « modify » their browser won’t see your fantastic new pano . We have to search for a fallback solution : flash could be used ( as with krpano) and you could place an alternate panosalado viewer in case of non webGL ready browsers in the js code… But I have chosen another solution by hosting my panos on another website which don’t have the same goal  : sketchfab .

It’s html5 , using webGL too BUT their fallback works on my phone ( pretty slowly but it works). You can also add hotspots on it
So why do I bother with pannellum if I could just use this ?

Simple : the process with posting panos with sketchfab is not as easy as it seems if you never have done it ( made with Blender3D ) and they won’t let you personalize ( html, css etc…) your pano for free, but if you want to gain visibility and to touch another category of users, you should give it a try .

I will post soon there my .blend files to create simple spherical, and cubic multi texture panos.

[Edit 11/16/2014 ]

I’ve found a way to post 6* 3000px images as a cube in sketchfab, resulting in a 12000px wide pano  :

Opensource panoviewer: Panocube 2 by FabKzo on Sketchfab

Seams are visible on this test , I have to find a way to avoid them.
The tiles are those made by nona, using the cubic.pto intermediate file generated by the generate.py script, I just had to downsize them to 3000px; I’ve to try it with 4096px*4096px textures. Note that you keep full access to controls over the cube.

 

 

[EDIT 11/25/2015 ]: This is a little tour test with 2 high res panos : 32768px width to 16384 square faces , splitted in 6 folders of 512px tiles, jpg 92%.

Those are made with a nikon d5200 mounted on a nodal ninja III panoramic head , with a manfrotto tripod ; using my basic 18-55 lens ==> 27-82mm 24×36 equ. (note: using free and opensource software doesn’t significate using bad or cheap material ); Raw processing with Rawtherapee then stiching with Hugin.

Photosimulation on 360 background