Kickstarting your VR development career with A-Frame!
Tags: vr, html, webdev, aframe
Published: 2019-12-29 15:10:28

---
title: Kickstarting your VR development career with A-Frame!
published: true
description: A quick setup guide for VR webframework A-Frame 
tags: #vr #html #webdev #aframe
cover_image: https://thepracticaldev.s3.amazonaws.com/i/mj2uncvbkmrxmgxlym71.jpg
---

Holidays make you think. All this time away from the oh-so-agile work environment lets your mind soar and leaves room for plenty of ideas left untouched. And so it happened that after I watched the touchingly beautiful _Frozen 2_ twice, I wondered: "What happened to my dream of working in Computer Vision from quite a while ago? Could I use the skills required in Web Development for CGI projects?"

## VR meets HTML

That's when I stumbled across [A-Frame](https://aframe.io/docs/1.0.0/introduction/#what-is-a-frame). It is a web framework to create experiences in virtual reality. Coming from a web developer background, it is exciting to hear that you can start right off by embedding it into your HTML files. Moreover, you have full access to DOM APIs and JavaScript. This way, you do not have to dive into game engines like _Unity_ or cope with the intricacies of C# / C++. 

More hot news: They released the stable [v1.0.0](https://aframe.io/blog/aframe-v1.0.0/) just two weeks ago!

But why develop 3D content, only to look at it in your 2D browser? Why not use that VR headset you got for Christmas to enhance your developer experience? That's what *WebVR* was established for! This JavaScript API lets you access your VR device from your web browser. And A-Frame is basically just a library that incoporates and simplifies WebVR.

That virtual and augmented reality for web browsers is still in its infancy can be seen in the rather patchy support of WebVR for different operating systems and headsets across the browser landscape. Having tried out _Brave_ for the last couple of weeks, I now notice that it does not render the output in the same browser tab of online HTML editors. _Google Chrome_ on the other hand would not let me enter VR mode with my Oculus Quest. [WebVR Rocks](https://webvr.rocks/) lists all currently supported combinations. Thus, _Mozilla Firefox_ became the chosen one! Luckily, that allows me to have it working on MacOS as well (where I use _Firefox Nightly_).

As VR/AR for the Web should not head [Into the Unknown](https://www.youtube.com/watch?v=gIOyB9ZXn8s), it is good to know that the next-generation standard is about to be the lawful heir of everything immersive and is already in the making: [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)! Where _X_ will include all the buzzwords you can put in front of _Reality_.

## How to setup your Oculus Quest for WebVR

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fqdkkwqws23gm4q6wvse.jpg)

What you'll need:

* Oculus VR headset - here: Oculus Quest
* Potent video card - My Windows machine provides a _GeForce RTX 2070_
* Oculus Link cable - I used *Anker Powerline+ 1.8m USB C to USB 3.0 A, Nylon*
* [Oculus software](https://www.oculus.com/setup/)

Oculus Link is still in Beta. To use it, make sure that you updated to the latest version on your headset. Hint: It only started to update after the device was fully charged and restarted afterwards.

When you are using an Nvidia graphics card, it is recommended to have the latest version of _GeForce Experience_ as well.

Connect the Quest with a compatible cable to your PC and complete the setup. Put on the Oculus Quest and head to

```
Settings -> See All -> Enable Oculus Link (Beta)
```

This should throw you into Oculus Home. At the bottom, there should be a _Virtual Desktop_ button. From there a window pops up and you can access your desktop browser from within your headset. Now, you can click the _Enter VR_ button (usually located at the bottom right corner of your content). You are ready to watch your newly created content on your headset!

## How to start your A-Frame project

```
<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  </body>
</html>
```
This is actually all you need to start developing using A-Frame. Plain HTML. The `<script>` tag above imports the library. Inside the `<a-scene>`, you can drop any entities of your liking. 

The A-Frame community makes it really easy to directly play around with what the framework has to offer. I recommend the compact (and visually appealing) [tutorial](aframe.io/aframe-school) that introduces you to the core concepts. It makes use of the [Glitch](https://glitch.com/) online editor which lets you modify sample implementations.

What about existing applications? Of course, you can install A-Frame via npm. And if you do not want to abandon your front-end frameworks, there is even an introduction how to use [A-Frame with React](https://www.viget.com/articles/creating-your-first-webvr-app/)! But be careful, some features could get in the way of each other. So, for example, A-Frame's hotreloading feature will interfere with Vue's hot loaders.

But this is just a first step to a note-worthy journey into browser based virtual reality!

## Show Yourself

We are all set! Grab your XR headset and develop the next Killer VR/AR/MR application. I think having a shortcut from front-end development to creating VR content via A-Frame is worth a look - although web development contains much more than just the presentation and the whole industry won't jump on the AR waggon all of a sudden. 

What do you think about the recent evolutions in virtual reality and web browsers?