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?"
More hot news: They released the stable v1.0.0 just two weeks ago!
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.
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!
<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!
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?