Embedding 360 Degree Panorama Images with Pannellum
Recently, I wanted to embed a 360-degree panoramic image inside an HTML page. Many third-party viewers are available, but I wanted a simple, self-hosted version. This quest led me down a research rabbit hole, where I spent more time than necessary. This is what I learned, in simple words.
I figured there are multiple types of panorama images. The standard one is a wide-angle view photo created by capturing numerous overlapping frames, then stitched together either automatically or manually.
Then, there are 360-degree panorama images where you capture all sides. We use projections to display them. In an equirectangular projection type image, the viewer can imagine themselves at the center of a virtual sphere, with the surroundings mapped onto the inner surface of that sphere. The viewer can then look in any direction by panning horizontally or tilting vertically within the image, effectively exploring the entire spherical environment from the central point of view.
In Cubemaps, a viewer is positioned at the cube's center; their point of view (PoV) is effectively at the cube's center. As the viewer rotates or looks around, the appropriate face of the cubemap ( one of the six faces of the inside of a cube) is displayed to simulate the view from that direction.
So, my panorama images will be either equirectangular projection type or Cubemaps type. Since they have multiple sides, you can't show them directly in the browser using an IMG tag. They need a proper viewer. So, I started looking for one that is FOSS, self-hosted, and simple. There were many options, but finally, I was left with A-Frame or Pannellum.
A-Frame is a full-fledged web framework for building 3D/AR/VR experiences, whereas Pannellum is a purpose-built lightweight web panorama viewer. Also, since A-Frame is a framework, it's much bigger than Pannellum, has many features, and is an overkill for this functionality. And since Pannellum is purpose-built, they have made it easy to self-host and configure.
They have built a standalone HTML called pannellum.htm that can be self-hosted. It takes an image as the parameter and displays it in the viewer. You can just embed that as an IFRAME. Easy peasy. Thank you, Matthew Petroff.
Here is the embed code to embed this image from NOIRLab available on WikiCommons. I have downloaded a lower resolution version and hosted it locally.
<iframe width="980" height="450" allowfullscreen
style="border-style:none;"
src="/visuals/pannellum.htm#panorama=../wp-content/uploads/2024/03/Imiloa_grounds.jpg&hfov=150&autoLoad=true&yaw=65&pitch=0">
</iframe>
Below is the embedded image viewer you can explore using a keyboard or mouse.
One more with auto load set to false
Now that I can display 360-degree panoramas, I just need to capture some images :)
Image credits:
- A 360 degree panoramic view of the grounds of the ‘Imiloa Astronomy Center and planetarium, near the Gemini North Hilo Base facility on a cloudy day. By NOIRLab available on WikiCommons under CC BY 4.0.
- A 360 degree street view from panoramax by cquest - 29 July 2023, CC-BY-SA-4.0
