After a year of on and off development, Pannellum, a free and open source panorama viewer for the web, is ready for release. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. The lightweight viewer, just 18kB gzipped, can be deployed using a single file and displays full equirectangular panoramas. One can easily embed panoramas in web pages as an <iframe>, using code generated by the included configuration utility.
Almost all previous web panorama viewers have been plug-in based, be it Java, Flash, QuickTime, et cetera. With growing browser support for WebGL, this is no longer necessary. As of writing, approximately half of the browsers currently in use support WebGL. With proper graphics drivers, recent versions of Firefox and Chrome support WebGL by default. In addition, recent versions of Safari and preview versions of Opera have WebGL support, although it is turned off by default. The notable exception to WebGL support is Internet Explorer, with no versions, including the preview release of IE 10, having support. Although large swaths of Internet users run browsers that do not support WebGL, support is steadily growing. Plug-in based solutions may have better support today, but WebGL and standards based development is the future.
One last feature that gave Flash an advantage over HTML5, was full screen support, but in the past few months this has changed. While still an early draft, the Full Screen API allows for web applications to programmatically enter full screen much in the way Flash does, allowing for a more immersive experience. When development on Pannellum started, this was not the case, and I originally implemented more limited full window support by opening a larger popup window. This original method is still supported for older browsers that support WebGL but do not support the Full Screen API.
Pannellum was started as I could not find a good plug-in free panorama viewer. The closest I could find was a three.js demo that displayed an equirectangular panorama. While it worked for the one image, everything was hard-coded, it lacked user friendly controls, and was missing basic features. In addition, it relied on a large, 64kB gzipped, JavaScript library. Pannellum displays a panorama using the same method as this demo, but the similarities end there. Although featuring a much improved user interface; embedding support; configuration using URL parameters; title, author, and license information; and full screen support among other things, Pannellum is still much smaller and easier to deploy. This is in large part due to work to carefully strip the three.js library down to the bare minimum needed using a JavaScript profiler. A Python build system is used to first minify the JavaScript using the Closure Compiler and the CSS using the YUI Compressor, then insert these along with data URIs of the images into the HTML file before finally running it through an HTML Compressor to produce the final viewer.
The initial release of Pannellum can be downloaded here, or one can see the project on Github.
