Sharing 360 Images on the Web

Immersive media is still in its infancy, but adoption is showing no signs of slowing and the technology is quickly adapting to produce a more high-fidelity experience.  Nowadays, you can get a LG 360 Cam for a couple hundred bucks, yet the pathways to distribute your captures are still under-developed.  Thankfully, web technologies have progressed to the point where I have 3 distinct options for sharing 360 images on my websites!

Methods

As aforementioned, there are three easy-to-use mechanisms for displaying 360 images on your websites:

They are all somewhat similar except for GuriVR, which has an entirely different interface but looks like it will be the easiest out of all of the options to implement.  However, I’m not looking for easy, I’m looking for consistent and forward-compatible, so I will rely on WebGL’s extension, WebVR, for my hosting situation.  Lets dive into the code!

WebVR 360 Images

The first thing you need is a 360 image.  There are a number of ways to get these, from downloading them from Flickr to creating them with Lightroom, or you can just get a 360 camera and snap a few shots.  Go grab a few pics then head back here to learn how to place them on your web pages!

All done?  Great, now we have to grab our WebVR Starter Kit!  The WebVR Starter Kit is a javascript library that will enable us to place our 360 images into our DOM.  Place this line of code into the document header:

<script src="//povdocs.github.io/webvr-starter-kit/build/vr.js"></script>

Now, with the script loaded onto the page, you can call your 360 image with the following command:

<script type="text/javascript">
  VR.panorama('[path to image]');
</script>
Lets see the WebVR Immersive Image in action!