Using A-Frame for WebVR and AR

Using A-Frame for WebVR and AR

posted in: AR, Social VR, Tutorials, webVR | 0

I’ve been enjoying using the Vive to experiment with social VR experiences.  However, the Vive is not yet very accessible, nor is it portable, so I’ve been more and more interested in the possibilities of WebVR.  I am new to building WebVR apps and am not very familiar with three.js and WebGL scripting.  However, a little over a year ago, Mozilla released an easy-to-use framework for building WebVR apps called A-Frame.  A-Frame is an HTML-based markup language (with three.js under-the-hood) that lets you create WebVR apps quickly.  These apps come ready for stereo viewing in VR headsets, and with WASD/arrow movement and camera panning/rotation support, and they even include a built-in inspector for the components.  That means that all you need to do is write some HTML to place, scale and rotate the components of your scene, and you’re good to go.  To add interactivity, you can include regular Javascript and refer to the components.

A-Frame has gained some popularity lately, and third-party developers have made libraries to make adding new VR features (and even AR!) easily to A-Frame apps.  In the span of a few days, I’ve been able to create and play with regular VR scenes, networked/social VR apps, and even some AR apps.  Hopefully, this will let me experiment more quickly with ideas for our Virtual Office and Virtual Art Studio projects.  In this post, I will briefly introduce how to create your own A-Frame apps, and then I will link to some of the recent apps I’ve made if you’d like to explore them yourself!

Getting Started with A-Frame

A simple A-Frame app only needs this HTML code:

<html>
  <head>
    <title>Simple AFrame</title>
      <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
   </head>
   <body>
     <a-scene>
       <a-box position="-1 0.5 -3" rotation="0 45 4" color="#4CC3D9"></a-box>
       <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
       <a-sphere position="0 2.1 -5" radius="1" color="#EF2D5E"></a-sphere>
       <a-sphere position="0 2.7 -5" radius="0.8" color="#EF2D5E"></a-sphere>
       <a-ring color="teal" radius-inner="1.8" radius-outer="2" position="-1 5 -7"></a-ring>
       <a-ring color="teal" radius-inner="1.8" radius-outer="2" position="1 5 -7"></a-ring>
       <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
       <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
       <a-sky src="http://s3.amazonaws.com/ev-imgs/sky.jpg" rotation="0 0 0"></a-sky>
    </a-scene>
  </body>
</html>

Line 4 includes the A-Frame library. The A-Frame code is on lines 7-17.  A-Frame scenes are delineated with <a-scene> tags, and populated with primitive geometric entities such as <a-box>, <a-sphere>, <a-cylinder> etc.  The <a-sky> entity will convert equirectangular images into a skybox in the scene.

The generated WebVR app looks like this:

(click thumbnail to load in a new tab)

Screen Shot 2017-04-04 at 11.18.12 AM

 

A-Frame also has a built-in inspector, similar to the browser’s console, that lets you inspect the details of your A-Frame scene.

To launch the inspector, press  <ctrl> + <alt> + i .

You will see some menus pop up around your scene that let you explore and even directly manipulate the components:

The inspector is a great way to reconfigure and place your scene manually, showing you the corresponding numerical values on the right that you can then plug into your code.

To learn more about the component and features in A-Frame, I would recommend checking out the following links:

  • aframe.io – The main A-Frame website, with example projects to explore
  • aframe.io/docs/0.5.0/primitives – The official list of built-in A-Frame primitive entities to place in your scene
  • aframe.io/aframe-school – An interactive school for learning A-Frame (click the red arrow on the bottom right)
  • cdn.aframe.io – A free-to-use file hosting service for quickly linking to image and file URLs in your A-Frame projects

To take A-Frame even further:

 

Example WebVR and AR Projects in A-Frame

Below are some A-Frame WebVR and AR projects I have created recently, including a networked Elevr office, and the beginnings of a recreation of my studio from Banff.

  • Click the thumbnails to view them in your browser on your computer, laptop or smartphone (WebVR support required)
  • Inspect them with <ctrl> + <alt> + i to directly manipulate the objects and move them around
  • Remix them on glitch.com to make your own versions
    • Separate out the code and resulting page into two tabs so you can see the page refreshing in realtime
  • If you need to host your own .obj/.mtl/.png files
    • Try hosting your A-Frame app on neocities.org instead
    • Try hosting your .obj/.mtl/.png files on a service like S3 from Amazon

 

Simple A-Frame App

A simple A-Frame app with geometric primitives and a skybox.

  • Use the WASD or arrow keys to move around
  • Click and drag to rotate the camera view
  • Use <ctrl> + <alt> + i to inspect elements

Screen Shot 2017-04-04 at 11.18.12 AM

Click to Launch

Remix on Glitch

 

Elevr Office

The Elevr office in WebVR!

  • You start in the corner where the door is, use the WASD or arrow keys to move in the office or through the walls to go outside!
  • Click and drag to rotate the camera view
  • Use <ctrl> + <alt> + i to inspect the elements

Screen Shot 2017-04-04 at 1.07.30 PM

Click to Launch

Remix on Glitch

 

A Networked Elevr Office (With Avatars!)

The Elevr office, for multi-user use!  Try inviting a friend to visit the same URL, or load the URL on two different devices.

  • Click ‘Allow’ (or equivalent) to allow microphone use to hear other avatars
  • If you start outside the office, use the WASD or arrow keys to move inside
  • Click in the image and drag to rotate the camera view
  • Use <ctrl> + <alt> + i to inspect elements

Screen Shot 2017-04-04 at 1.10.50 PM

Click to Launch

Remix on Glitch

 

My Banff Studio

My Banff studio in WebVR, with some of the artworks I made there in 3D.

  • Wait 1-2 minutes for the entire studio to load
  • Use the WASD or arrow keys to move around
  • Click in the image and drag to rotate around to find more art objects
  • Use <ctrl> + <alt> + i to inspect elements and move them around

Click to Launch

Remix on Glitch

 

AR for Sculptural Experiments

An AR app that makes a digital sculpture appear in a camera view using codified markers. (iOS not supported)

  • Load the HIRO marker image on a screen, or print it, and place somewhere (e.g. on a table).
  • Launch the app on your webcam-enabled device (e.g. a smartphone or tablet)
  • Click ‘Allow’ (or equivalent) to allow the app to use the device’s camera
  • Point the device’s camera at the HIRO marker, and you should see a 3D model overlayed onto your camera view

Screen Shot 2017-04-04 at 1.07.10 PM

Click to Launch

Remix on Glitch

 

Stay tuned for more A-Frame explorations!

– Evelyn