360 Photos on the Open Web

One of my hobbies is photography. So as I begin dabbling in VR, I find myself quite curious about 360 photos. A 360 photo is the “bare minimum” of a VR experience.

A flattened Equirectangular Image (an unwrapped 360 image) of a little girl sitting on a jetty at the beach
How can we make this 360 photo fully immersive and available to everyone on the Open Web?

What is a 360 photo?

A 360 photo goes by many names, but each describes a photograph that completely surrounds the camera. It shows what is in front – in back – off to the sides – and above and below. ALL of it. You can look all around, and everywhere you look has been captured in the photo.

My phone – which I purchased because it supports GearVR, which supports WebVR, comes with a camera app. There is an add-on for that camera app called “Surround Shot.” That’s a decent description, with a little alliteration. The “shot” completely surrounds you.

(Here’s a good article explaining how to catch 360 photos with your smartphone)

Some people refer to 360 photos as a “photosphere“. Again, this is a pretty decent description. If you were to imagine that your environment is a giant sphere, with you in the centre – the visual of that giant sphere can be captured photographically – as a 360 photo, or a Surround Shot – and then re-projected on any sphere you may inhabit, recreating the visual experience of the place where the “photosphere” was taken.

I understand the pixels in a regular photo – how does this work in a 360 photo?

To understand this, we’re going to learn one more name for this type of photograph – an equirectangular image.

Here’s what a photosphere looks like, if you peel it off the sphere and save it as a rectangle:

A flattened Equirectangular Image (an unwrapped 360 image) of a little girl sitting on a jetty at the beach

It looks a little odd – and it’s not a whole lot of fun, when it’s not being projected onto a sphere. But that’s how the jpeg is saved – it’s got height and it’s got width, just like a regular photo.

“Equirectangular” is most of a description of how these images “map” onto the very big sphere that is your sphere of perception. Every pixel in an equirectangular image occupies an equal amount of surface area on the sphere. If you map it this way – it looks “normal” or “correct” on the sphere.

Which, in part, explains why the image does not look “normal” or “correct” when viewed as a rectangle. The top and bottom of the image look all stretched and distorted. To understand this, let’s look at how each row of pixels can take up an equal amount of surface area on that sphere.

Unwrapping a 360 photo

Take the row of pixels across the middle of the photo. It will be mapped around the “equator” of the sphere, with each pixel taking up the same amount of space on the surface of the sphere. Next we’ll consider the bottom row of pixels. This will be mapped onto the bottom of the sphere – which will be the spot where you are standing. There are as many pixels on this row, as there are in the middle row – but somehow, each pixel from the bottom row has to occupy as much of the surface of the sphere as each of the pixels from the middle two.

The bottom row of pixels fills in the space around the bottom “pole” of the sphere. Each pixel, then, occupies a skinny little “pie slice” around the pole. There have to be as many of these little “pie slices” as there are pixels in a row. As you move away from the pole, the space each pixel occupies rapidly becomes less of a weird shape.

This allows us to edit and save our photographs in a conventional 2-dimensional way – rows and columns of pixels – while supporting the projection of the image as a seamless photosphere.

Sharing 360 Photos on the Open Web

Now that we’ve looked at what 360 photos are, let’s take a moment to talk about how we share these with our friends, family, and strangers on the web. Just like we’re all very very used to doing with old-school flat photos.

After I’d successfully captured a few 360 photos, I shared them with my Facebook Friends. Facebook had been supporting this for a month or two by the time I had one to share. Though, I must say, Facebook’s way of displaying them is pretty limiting. You look at the photo through a square-shaped viewer – and you can drag on the image with your mouse to look around. If you’re on mobile – you can look around by moving your phone around, and it serves as a “window” into the sphere of perception of the photographer.

This is fun – but it’s not really the point of 360 photos. Going back to what my phone camera calls them – Surround Shots – the idea behind 360 photos is that they can surround you.

And that’s where VR goggles come in.

360 photos are a ton of fun, in VR goggles. It’s like you’re there. It’s like standing inside of a photograph, rather than looking AT a photograph. It’s pretty darn “immersive”, for something that doesn’t even move.

The Web and VR

I’m sure someday soon, the Facebook version of sharing 360 photos will support the use of VR goggles. At the moment, though – that doesn’t seem to be the case. At least not with the hardware I’m using. And as a big fan of “write once, run everywhere” – that counts as “not working”.

So, if what I want is to put my 360 photo on the web, so I can post or send a link to anyone, and they can experience it through their VR goggles, Facebook isn’t quite the answer. I am going to look at two easy ways to do this.

With A-Frame

I’ve written about how A-Frame is the easiest darn way to put VR content on the Open Web. And while a 360 photo isn’t exactly “VR” (it lacks stereoscopy), using VR hardware to view one is really the only way to achieve the immersion of being completely surrounded by the photograph.

The creators of A-Frame brag that you can create a VR experience on the web with just one line of code. And it’s true! In this case, the single line of code I used was this:

<a-sky src="beach360-040-proc3.jpg" rotation="0 270 0"></a-sky>

Only thing complicated about that is the filename of my photo.

This approach offers several serious advantages to sharing on Facebook.

  • The viewer is much larger
  • I can re-touch the photo (fix the stitching glitches from the Surround Shot software) (Facebook doesn’t recognize files I’ve retouched as 360)
  • There is a simple “Goggles” icon that anyone and everyone knows to hit if they want to experience with their VR headset.
  • My audience is not restricted to people who have joined Facebook.
  • The photo itself is not a gateway to a bunch of other information about me personally.

(The above example is an iFrame – to pop it out for your VR goggles, click here)

Without A-Frame

Now it’s easy for me to enjoy sharing photos like this with A-Frame. I have a webserver. I have a text editor, and I’m not afraid to use it. I like the way anyone can experience my 360 photos when I use this technique – but not everybody has a webserver. Or a text editor. Or the moxie to spin up one line of code.

And that’s where 360.vizor.io/ comes in. Here’s a tweet that went by my Twitter just as I was getting into the groove of setting up semi-trivial A-Frames to share this stuff on the Open Web:

Oh, ho! “Without Joining a Social Network”. That to me says, “Open Web”, in no uncertain terms. So I gave it a try!

(This is in an iFrame – to pop it out for your VR goggles, click here)

And I gotta say – that does the job. That does what was promised. That is indeed Simple 360 VR photo sharing.

The Very Open Web

I didn’t need to log in. I didn’t need to sign up. I just dragged and dropped the photo, and there it was. With a link that I can use anywhere to share it.

Though, unlike my A-Frame version above – I’m no longer in control of this photograph. It lives on the Vizor.io site, which is cool – but I get the impression that unless I sign up, I no longer have any control over this. It does not link to me. I cannot take it down. It’s there – which is what I wanted – though now, it is no longer under my control. Oh, well, give and take, six of one, a half dozen of the other, the early worm, and all that…

Anyway, thanks for reading this far. This is probably my longest blog post ever, and I didn’t even address how to capture such photos, except to provide a link to a pretty good resource. This was all about what they are, and how to post them on the Open Web for maximal enjoyment. Hope you got what you needed – thanks for reading!


Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Author: Pete

Editor-in-Chief, Lead Software Developer and Artistic Director @ 3dspace.com

One thought on “360 Photos on the Open Web”

Comments are closed.