How to Share 360 Panorama Photos with WebVR and A-Frame

In recent times we've been seeing a surge in the popularity and technical capability of virtual reality. Typically, when we think VR we think gaming and dedicated desktop software. However this is not the only space in which virtual reality is growing.

Through the ever strengthening power of WebGL, virtual reality is now also making its way into browsers in the form of WebVR, and along with it comes new ways to share photography in ever more immersive ways.

With a photo in the right format and a VR device such as Google Cardboard, HTC Vive or the like, a person can be made to feel they're standing in the exact place the camera was at the time the photo was taken, with the ability to look all around the environment, peering into the depth of simulated 3D space.

And even without a VR device, people browsing the web can still pan all around a spherical panoramic image using a mouse, also an experience bringing enhanced .

Creating your Own 360 Panorama

In this tutorial we'll be setting up WebVR powered 360 degree panoramas in three different ways, using tools that aim to make WebVR accessible and straight forward to use:

• WebVR Starter Kit


• Aframe


• GuriVR, an Aframe Editor
  

To see what we're working towards, check out demos from each of the above tools, showing the type of 360 image we'll be making:

• WebVR demo


• Aframe demo


• GuriVR demo

Ways to View 360 Images

There are two ways a 360 degree panorama can be interacted with and viewed.

Stereoscopic VR

When a person is viewing a WebVR 360 degree photo through an appropriate VR ready device, such as a Google Cardboard or HTC Vive, for example, the image will be split into two images and processed in such a way that the headset can use them to generate the illusion of depth.

In this case the person looks around the scene simply by turning on the spot and looking up and down. The device's accelerometer will update the image display to track with the direction the user is looking.

Click & Drag (Fallback)

When a person is viewing through a device that is not VR capable the 360 degree image will fall back to displaying as a single image that can be panned around by clicking and dragging.

Browser Support

WebVR is still somewhat bleeding edge so some aspects of it are not
widely supported. However: 360 degree panoramas only require a small
subset of WebVR capabilities so support for at least fallback level display is
actually pretty widespread.

Desktop Browser

As long as a browser supports WebGL a viewer will see "click and drag" fallback for a 360 photo. WebGL is now fully functional in all major browsers.

To check if a browser you're using supports WebGL visit get.webgl.org. If you see a rotating cube WebGL is up and running.

Phone Based VR

Several phones support WebVR when combined with a headset like a Google Cardboard or Daydream. Given Google's recent push on WebVR it's no surprise that its iOS and Android versions of Chrome support WebVR out of the box.

If you have a Samsung Gear VR headset on the other hand you'll need to use Samsung's own browser.

Full Head Mounted Display

The way to go about getting setup to view WebVR via a full desktop powered head mounted display will depend on the unit in question.

For the Oculus Rift or HTC Vive/SteamVR you can use either an experimental build of Chromium or Firefox Nightly. The Chromium WebVR build is available only for Windows, while Firefox Nightly is also available for MacOS and Linux.

Currently Oculus Rift only support Windows with no reported plans for cross platform support so either browser is suitable. However cross platform support for HTC Vice / SteamVR is reportedly coming very soon so if you have this device and think you may prefer to create your panoramas on MacOS or Linux at that time you might wish to choose Firefox Nightly as your main testing browser now.

For full instructions on setting up either of these browsers for WebVR visit: https://mozvr.com/

Getting Started

The first thing you'll need is a photograph in a format suitable for WebVR panoramas, which you may see interchangeably referred to as a spherical, equirectangular or 360 degree photo. You can take your own by:

• Using a 360 degree camera.


• Using an app that allows your phone camera to create spherical images.


• Stitching multiple images together using software after the fact.
  
  

We have some great articles covering some of the techniques you can use:

• Create a Photo Sphere With Your DSLR Camera


• 
  Gettin' Round: How to Make a Spherical Image with Google Camera
  
  

Alternatively you can source equirectangular images via Flickr. We'll be using an image from the Kaibab National Forest for this tutorial. 

Create a directory to house the panoramas you'll be creating, download the above file into it, then rename the image to "fire.jpg".

If you're planning to view your panorama in full WebVR rather than just as a click and drag image in a desktop browser, you'll probably want to download the "Original Size" version at 10240 x 5120 for maximum visual fidelity. Be aware, however, users may see a blank white screen while this large image loads, depending on their internet connection. If this will potentially be a problem choose one of the smaller sizes instead.

NB: later on if you see a black hole at the bottom of the panoramas you create with this image it means the file is incomplete and you'll need to re-download it.

Remote Previewing

If you wish to test your panoramas on a remote/secondary device, such as on a Cardboard capable phone, you'll also want a way to view your files through your local network. You can do this however you'd prefer, but two possible options you might like to use are:

• 
  Prepros
  
  


• 
  Browsersync
  
  

Basic HTML

Each example will sit in its own webpage so you'll just need a very basic HTML document to get started with each example:

<!DOCTYPE html>
<html>
  <head>
    <title>360 Panorama Photos</title>
  </head>
  <body>

  </body>
</html>

In the directory for your project create three HTML files:

• webvrstarterkit.html


• aframe.html


• gurivr.html

Then paste the starter code into each file, changing the content of the <title>...</title> tag if you desire.

WebVR Starter Kit 360 Image

If you were creating a WebVR panorama from scratch it would be quite complex, requiring fairly extensive coding. However with excellent frameworks like the WebVR Starter Kit the process is boiled down to two steps.

All the VR experiences you can create with the WebVR Starter Kit are powered by a single JavaScript file. So to get started you just need to load that JS file into the <head>...</head> section of your "webvrstarterkit.html" file by pasting in the following snippet:

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

If you'd prefer not to load this JS file from an external source you can download the WebVR project from its repository at https://github.com/povdocs/webvr-starter-kit. You'll find the "vr.js" file inside the "build" directory.

With the WebVR JavaScript loaded the page is now ready to have VR elements added to it. To create a 360 degree panorama insert the following code in the <body>...</body> section:

<script type="text/javascript">
  VR.panorama('fire.jpg');
</script>

And that's it! Your 360 degree panorama is now ready to go.

Note that the value in between the brackets is the path to our equirectangular image. This can also be set to load an external image by inserting a URL instead.

When you preview your "webvrstarterkit.html" file now it should look like this: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html

A-Frame 360 Image

A-Frame is a different WebVR framework, but the means of creating a 360 panorama are very similar to what you completed above. As with the WebVR Starter Kit, A-Frame is powered by a single JavaScript file. Load that file into the <head>...</head> section of your "aframe.html" file with this code:

<script src="//aframe.io/releases/0.4.0/aframe.min.js"></script>

If you'd prefer not to load the JS file from an external source you can download the Aframe repository from https://github.com/aframevr/aframe/. From the "dist" folder, you should use the minified version of the script for the current version of the project, e.g. "aframe-v0.4.0.min.js".

Instead of using a script tag in the page body, A-Frame uses its own custom HTML elements. The first element to be added is always <a-scene> in order to create a context for VR elements to be inserted into.

The <a-sky> element is used to simulate a sky in certain scenarios, but it does so by surrounding the viewer with a spherical image, which makes it perfect for 360 panoramas.

Then to add your 360 degree image insert the following code in the <body>...</body> section:

<a-scene>
  <a-sky src="fire.jpg"></a-sky>
</a-scene>

Your results should look like this: https://tutsplus.github.io/VR_Panoramas/aframe.html

GuriVR 360 Image

Under the hood, GuriVR is actually the A-Frame library. What it seeks to do is give an intuitive, straight forward way to setup VR experiences through an editor interface.

To use GuriVR head to: https://gurivr.com/stories/create

In the editing interface you can just enter the word panorama followed by the URL to a spherical image and GuriVR will take care of the rest for you.

Once you've done that, click "Save" at the bottom of the screen, then click the "Share Link" button and you'll be provided with a link you can give to others to show off your panorama.

Alternatively, you can embed the panorama into a webpage using an iframe element. Update your "gurivr.html" file with the following code, being sure to add your own GuriVR URL into the iframe's src attribute:

<!DOCTYPE html>
<html>
  <head>
    <title> GuriVR 360 Image Demo</title>
    <style>
      html {height:100%}
      body {height:100%; margin:0}
      iframe {height:100%; width:100%; border:0}
    </style>
  </head>
  <body>
    <iframe src="https://s3.amazonaws.com/gurivr/s/5878958fc01dc09b02494b46.html" frameborder="none"></iframe>
  </body>
</html>

When you've done the above, you should get a 360 panorama like this:

https://tutsplus.github.io/VR_Panoramas/gurivr.html

Wrapping Up

You now have three different ways to create WebVR-based panoramas and allow people to connect with your photography in a whole new way. Let's quickly recap what we covered:

• WebVR Starter Kit - load the framework's JS file, add a script tag, then inside it use VR.panorama() to create your 360 image.
  
  


• Aframe - load the framework's JS file, add an <a-scene> element, then inside it use <a-sky> to create your 360 image.


• GuriVR - head to the web based editor, add the word panorama then the URL of your photo to create your 360 image. Optionally embed the provided URL into a webpage via an iframe.

Now that you've seen how quickly you can create a WebVR experience from a photo sphere, I hope you're inspired to get out there and capture the world in three dimensions!