‘Imperfect VR’ with A-Frame

VR face

Amid the Animoji and face recognition fanfare of the iPhone X launch, the announcement that got me really excited was the augmented reality engine baked into iOS11. With 400 million iOS users worldwide, this gives Apple an instant mass-market AR-ready customer base overnight.

I’m excited to learn to design for VR, more specifically augmented reality (where a computer-generated image displays over a user’s view of the real world).

But where to start?

  • Do I need to buy new kit, or can I experiment using my regular MacBook and iPhone?
  • Proper headset or Google cardboard?
  • What platform should I use?
  • What is Mozilla A-Frame? Daydream VR? Unity VR? Can I access these tools with my limited coding knowledge? Help!
  • What input methods can I rely on?
  • Can my regular UI design tools like Sketch help me?
  • What is my canvas size? Can I even assign 360 degrees a pixel value? Am I really stupid for asking?

I decided to begin my journey into the VR unknown with A-Frame. A-Frame is an open-source web framework for building VR experiences, maintained by Mozilla and the WebVR Community.

With my current skillset this seemed to offer the lowest barrier to entry as A-Frame can be developed from plain HTML files without having to install anything. I can code basic front-end so this seemed a logical first step; the WebVR community also seemed a kind and welcoming place for a clueless newb.

To kick-start my making I did a short workshop called Imperfect VR, an A-Frame course by games designer and creative coder Michael Straeubig. The session offered the chance to make “a small, quirky VR experience with A-Frame and Google Cardboard” aimed at complete beginners. Perfect! The most valuable part for me was the setup and how to get started; downloading sample code, viewing this on a live server and the magical bit – getting it to work on your phone to experience through Google cardboard. Michael provided a basic HTML setup which we quickly transformed into our first ‘hello VR world’ experience.

I thought I’d document the process here before I forget all the steps. Not sure if anyone else actually cares, after a sunny afternoon spent inside a dark gallery space even I feel like I’ve hit peak geek.

1. Install and set up:

  • Download some sample code like this ‘hello world’ boilerplate from Github.
  • Install a code editor if you don’t have one already. We used Atom.io which is free and easy to use.
  • Drag your boilerplate folder into Atom and open the index.html file.
  • Next you need to add live server functionality to Atom by installing a package. Stay with me, it only sounds technical. Go to:
    Atom > Preferences > + Install and search for live-server.
    Select atom-live-server from the list. Then in the top nav choose
    Packages > atom-live-server > Start server. This will open your index.html file in your browser.
atom-install-live-server

Installing live server with Atom

atom start live server

Start live server to view your experience in the browser

2. Get tinkering:

If you know some HTML then A-Frame is fairly muppet-proof. Here’s the basic setup –

<a-scene>

<a-sphere></a-sphere> Gives you a sphere
<a-box></a-box> You guessed it: a box
<a-cylinder></a-cylinder> Righto
<a-plane></a-plane> The ground objects sit on
<a-sky></a-sky> The background that wraps around the whole 360.
<a-entity position=” “><a-camera></a-camera></a-entity> Where you (the camera) are initially viewing the scene from.

</a-scene>

A-Frame elements

A-Frame elements. Source: aframe.io

You then build this out with various attributes as you would with HTML. For eg –
<a-cylinder position=”1 0.7 1″ radius=”0.5″ height=”1.5″ color=”#FFC65D”></a-cylinder>

You can also add images which wrap around your 3D objects or background. To add a background to the whole piece, download an image into the same folder and add an src like you would a regular image –
<a-sky src=”clouds.jpg”></a-sky>

basic code to started

Basic code to started

3. View it on your phone:

  • Ensure both your phone and computer are on the same wifi network.
  • Find your IP address. On a mac hold down Alt and click the wifi icon in your mac’s menu bar, your IP address will display in the wifi dropdown.
  • Type your IP address into your phone’s browser, followed by :3000. The 3000 needs to correspond to the port number in your browser’s address bar. If the number is different change accordingly.
  • Hang around for a bit, this can take a few minutes to work.
View on your phone

Our objective was ‘VR face’ like the dude at the bottom

Et voila, VR on your phone! Pop into a Google cardboard and admire your handiwork.

View on Google cardboard

Feel like a real coder (rather than a shabby VR imposter).

A brilliant workshop, would highly recommend. Now to get experimenting. Onwards!