Kickstarting your VR development career with A-Frame!

#vr #html #webdev #aframe

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. 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 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 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, 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! Where X will include all the buzzwords you can put in front of Reality.

How to setup your Oculus Quest for WebVR

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

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 that introduces you to the core concepts. It makes use of the Glitch 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! 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?