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.

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

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 come 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.

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 straightforward to use:

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:

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 set up 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 supports 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 Mozilla VR.

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

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:

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, and 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, that 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 download it again.

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:

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 GitHub repository. 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 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 A-Frame repository from GitHub. 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, straightforward way to set up VR experiences through an editor interface.

To use GuriVR, head to the GuriVR editor. 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, and 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, and then inside it use VR.panorama() to create your 360 image.
  • A-Frame: load the framework’s JS file, add an <a-scene> element, and then inside it use <a-sky> to create your 360 image.
  • GuriVR: head to the web-based editor, and add the word panorama and 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!