PhotoSphere images as interactive 360° by 180° panoramas

TL;DR

360° by 180° panoramas made real easy

Here’s the result of putting my first full 360° by 180° PhotoSphere photo online as an interactive panorama. Heavy lifting is done by Google Camera (panorama stitching), Jérémy Heleine’s Photo-Sphere-Viewer and Three.js.

Try grabbing the panorama below and moving left/right/up/down. Also notice that you can animate the view by clicking on the icon at bottom-left:

The panorama is a view from outside the Linnanmäki amusement park’s southern entrance in Helsinki, Finland. See the location on Google Maps.

The above is a panorama view of the same image that’s used on the header of this article!

Please notice that the image was not actually shot all the way around (so the source is not a full 360° by 180° panorama) and hence it looks stretched and in general a bit off/“wrong”.

Try it yourself with your photos

In case you wanna give it a shot yourself, using your own panorama photos, scroll to the bottom of the article.

Longer story

Linnanmäki with niece and nephew

The last time I went to Linnanmäki to actually go to the amusement rides was exactly two weeks ago. My niece (7y) and nephew (5y) were also there and were thrilled, except for the occasional dissapointments the younger had to face when being too short for some of the rides he would’ve wanted to catch.

“Could you get me some Linnanmäki photos?”

I live very close to the amusement park and on a semi-regular basis walk through the area for example before or after going jogging.

A few days ago my niece asked me if I could go and get some photos from Linnanmäki for her so she could use them for example as wallpaper photos on her smartphone. I had forgotten about it and today she asked me about the photos and so I went specifically to take and send photos for her :)

No panorama?

First off snapping some normal portrait oriented photos and sending them to her as I snapped along; then wanting to take a panorama shot I realized my resently-rooted OnePlus One currently running CyanogenMod 12.1 (Android 5.1 Lollipop) didn’t support panorama…I was a bit confused since previously when running CyanogenMod 11 panoramas were no problem.

Solution and epiphany

Quick online search later I realized and app called Google Camera existed that I hadn’t even heard of even though apparently it’s been around for a while already!

On some article I quickly skimmed about the app the writer mentioned the PhotoSphere feature of the app. Having played with manual panorama stitching and creating 360° by 180° panoramas (“full around” panoramas) around the early 2000s I immediately guessed what PhotoSphere would most likely do for me and was more than eager to try it out!

First go on Google Camera’s PhotoSphere

Stitching spherical panoramas back in the day was a whole lot of work. I think I used Paint Shop Pro 4 or something like that at the time. Fast-forward to today and using the PhotoSphere feature I was able to create better-looking panoramas in a matter of minutes while on the go!

Quickly getting the hang of how the PhotoSphere feature of the app worked I walked around the amusement park taking a few more shots, though none of them being full 360° by 180° as that requires almost a few dozen still shots and I didn’t wanna stand in one place that long just taking photos.

Making the panoramas interactive

Right after taking a few of the panoramas with PhotoSphere I thought there’s gotta be a JavaScript based interactive viewer for them already, probably on GitHub. A quick online search and guess confirmed.

I used Jérémy Heleine’s Photo-Sphere-Viewer which is based on Three.js to create the interactive panorama view you saw at the beginning of the article.

Want to try with your own images right now?

Install Google Camera on your smartphone, create a PhotoSphere image and then load it here either directly from your phone (if your phone’s browser supports WebGL) or alternatively load the created image from your phone to your computer and then here.

That’s all for now :)