Nowadays, a lot of devices allow the user to create very interesting panorama images but not with only 180 degrees, but 360. Unlike cylindrical views, spherical panoramas incorporate a 180° vertical viewing angle and a 360° horizontal viewing angle. They contain light data originating from all directions, and therefore can be visualized as comprising the points on a sphere. This format has become popular in social media and marketing and has found application in 3D graphics programs, simulations of interiors, immersive panoramic movies, and computer and video games. An equirectangular panorama consists of a single rectangular image whose width and height correlate as 2:1.
If you are willing to display that kind of images in the web, you will need a special piece of code to make it work. In this article, we'll share with you 7 libraries that will allow you to embed equirectangular images in the browser so the user can interact with theme easily.
7. Three.js Equirectangular Demo
Unlike Panolens.js that is based on Three.js too, this basic demo contains the base code to implement your own 360 image viewer with only Three.js.
6. 360-image-viewer
360-image-viewer is a standalone panorama WebGL image viewer for desktop and mobile. This uses regl as the WebGL wrapper, and comes in at a total of 140kb uglified, or 46kb gzipped. This is useful if you need a panorama viewer but don't want to embed all of ThreeJS (which is around 500kb uglified).
5. Kaleidoscope
Kaleidoscope is an embeddable, lightweight, dependency-free 360º video/image viewer. 360 videos doesn't work in Safari, IE 11, Microsoft Edge, Android and iOS if the video is served from a different domain, due some CORS implementation bugs.
4. Panolens.js
Panolens.js is based on Three.JS (a 3D framework) with specific interest area in panorama, virtual reality, and potentially augmented reality. To start using panolens.js, download minified three.js and minified panolens.js and include these two files in your project. The plugin features:
- Support equirectangular image
- Support cubemap images
- Support google streetview with panoId (How to get Panorama ID)
- Support 360 equirectangular video (like youtube/facebook 360 video) even on iOS!
- Support text/image/domElement annotations (Infospot)
- Built-in Orbit / DeviceOrientation camera controls
- Built-in fullscreen and video control widgets
- Convert equirectangular image into little planet (Stereographic projection)
3. Panellum
Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. Pannellum is built using WebGL and JavaScript, with a sprinkling of HTML5 and CSS3. It can run standalone or can be embedded using either an <iframe> or a JavaScript API. The standalone method, which is used for <iframe> embedding, is the easiest and simplest to use, but the JavaScript API is more powerful and provides tighter integration. Internally, the standalone viewer parses URL parameters to build a JSON-based configuration and then instantiates the viewer using the JavaScript API. The standalone viewer accepts a subset of configuration parameters as URL parameters; the rest of the parameters can be set using a JSON configuration file specified using the special config URL parameter. Additional features of Pannellum include hot spots for displaying information, linking of multiple panoramas into virtual tours, and video support.
2. Photo Sphere Viewer
Photo Sphere Viewer is a JavaScript library which renders 360° panoramas shots with Photo Sphere, the new camera mode of Android 4.2 Jelly Bean and above. It also supports cube panoramas. Photo Sphere Viewer is pure JS and based on Three.js, allowing very good performances on WebGL enabled systems (most recent browsers) and reasonably good performances on other systems supporting HTML Canvas. The library works with touch screens as well.
1. Marzipano
Marzipano is a 360° media viewer for the modern web that supports all major desktop browsers and mobile devices. It embraces standard web technologies and provides a powerful Javascript API. The tool generates a virtual tour from a set of panoramas and allows you to export it as web application that can be deployed as-is or used as a boilerplate for more advanced projects. Requires Firefox or Chrome. Designed to work with web standards. Control the viewer with a powerful Javascript API and create interfaces using standard HTML and CSS. Marzipano provides a simple API for the most common use cases, but it is designed to give the user a lot of control over how it works. The demos showcase some of the possibilities that Marzipano allows and how to implement them. Their source code is available on GitHub.
The tool processes your panoramas on the browser. Both sphere (equirectangular) and cubeface formats are supported. After processing you can export a virtual tour application that can be deployed to any web hosting platform. This application may also be used as a boilerplate for further customization using standard Javascript, HTML and CSS. The Marzipano tool requires the latest version of Firefox or Chrome.
If you know another awesome JavaScript based library to display equirectangular (360 degrees) images in the browser, please share it with the community in the comment box.
