OpenSource Panorama viewer and HTML5 Pannellum by Matthew Petroff [deprecated]

[ Edit 11/16/2014] : I let it there for memo , but if you want fresh news go to panoramics page; the pannellum version used there is 2.0+ now.

 

I’ve been working hard since 6 months with image stitching, and I’m quite good now at it. I use Hugin panorama stitcher to make and control them ; coupled with gimp that’s a great process , whenever they does 10Mo or 1Go..

The hardest to find -as opensource and free software- is a non-flash viewer proposing wide screen and tiling for spherical panos ( you now: photos are made at 360° horizontally and vertically around you), showing it with the good angle of view ( field of view, or « hfov » -horizontal field of view) to avoid ugly deformations. The goal is to obtain a « google-street-view-like » but with great pictures, not « automatic-stitched ,parallax-full,and cylindrical ones », and to be capable to display informations while viewing it.

I’ve been searching it for a while , knowing that HTML5 canvas should do it and I’ve been making a sphere in Blender , mapping the equirectangular pano in it, posting it to Sketchfab.com:

Opensource 360° Pano viewer
by FabKzo
on Sketchfab

Opensource 360° Pano viewer from FabKzo on Sketchfab.

 There your pano size is limited to  almost 4000px as I remember, allowing quick access to the picture; but losing in quality , moreover when you would show people a great panorama; then you have to tile your pano in order not load the entire picture each time you open it (and for a Gigapano that’s a matter).

But I’ve also found Matthew Petroff’s work : Pannellum

And I give it a try there:

Reactive, more easy to practice if you have a server to host your panos and pannellum. Image quality is better there for almost the same speed; and since it’s opensource you have access to the code if you want to modify it to your needs.

For the moment spherical panos are limited to 4096 px width due to WebGl texture system as explained by Matthew:

« > Since Pannellum currently loads the image as one texture, the WebGL texture
> size limits limit the maximum image resolution. I recommend a maximum image
> dimension of 4096 pixels on the largest side, as it is supported by >90% of
> WebGL enabled browsers. If you need higher resolution, a maximum image
> dimension of 8192 pixels is supported by >60% of WebGL enabled browsers. A
> maximum image dimension of 16384 pixels is supported by ~14% of WebGL enabled
> browsers, and anything larger, e.g. your image dimension of 29542 pixels,
> isn’t supported by any browsers.
> I’m currently working on adding support for larger images using a
> multiresolution, image pyramid based scheme, but it’s currently in an alpha
> state. Once done, it will allow for arbitrarily large images, but for now one
> is in practice limited to a maximum image dimension of 4096 pixels, a
> resolution of about 8 megapixels for a full equirectangular panorama.

-Matthew »

source: https://groups.google.com/forum/#!topic/hugin-ptx/6wdLOt2TPEg

7 commentaires

  1. Piergi dit

    Hi.

    I am interested on how did you embed the pannellum panorama on a WordPress site.

    I can do it on a regular HTML page, using the ‘iframe’ container, but when I try the same on a WP page, it shows «Your browser does not have the necessary WebGL support to display this panorama».

    Are you using a plugin? Which one?

    Thanks for the help

    • FabKzo dit

      Hi,
      No plugin to display it as far as I remember ( I’ll refresh it soon ), just put your pannellum.htm at the right place and call it with the iframe…; Well: the message seems clear, which browser do you use? I have the same problem with my android phone, but works well with latests firefox and chrome on my computer. Nevertheless I’ll investigate to remember if I’ve done something special for it on wordpress.

    • FabKzo dit

      Hi, be sure to have a recent firefox ( 10+ ) ; then ensure to have webGL activated on it :

      Type about:config in Firefox’s address bar and make the following changes:

      To enable WebGL, set webgl.force-enabled to true.
      To enable Layers Acceleration, set layers.acceleration.force-enabled to true

      I Have tested it on chrome 37, firefox 31 : test ok.

      best regards.

    • Andrea dit

      Hi, I have the same problem, I have not been able to place pannellum on my wordpress, I think that i don’t known where to put it, I make a tour with pannellum, modify the example and when i upload to a server it works, but if I try to put in my wordpress does not work… i don’t know in whitch folder place it, if I put all folders or how to make it work… you could tell me how you changed it
      Thank you

      • FabKzo dit

        Hi, I’ve created an access protected folder (restricted rights) called « panos » next to wordpress where I put all the files needed ; I call it through the iframe, edited in text mode in the wysiwyg.
        Hoping to help you;
        tell me back if it works ! .

        bye

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

AntiBot * Time limit is exhausted. Please reload CAPTCHA.