This is the year of virtual reality headsets being released to the public, with Oculus Rift and HTC Vive being some of the most anticipated hardware. The good news for web developers is that we already have WebVR, a JavaScript API for that. And with the new framework called A-Frame building virtual, 3D environments got easier than ever.
Virtual reality is the new frontier for web development, and we’re at the cutting edge. It’s still an experimental technology, so remember that it might get buggy at some edge cases, but the good news is we can already play with browser-based VR, create demos and experiments, and shape the way millions of people will use it in the next years.
A-Frame is a framework delivering the familiar approach to front-end developers. Instead of building 3D environments with raw WebGL, Three.js or game-specific PlayCanvas, you can do that with HTML. See this basic example and think how many lines of code you’d need to create it using other tools:
It’s a simple cube, but a developer knows that 3D scene needs a renderer, camera, lights, the shape needs a geometry and material, there are also extra things to consider such as mouse and keyboard controls to look around. Can you imagine this whole scene could be created in a few lines of HTML?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MDN Games: A-Frame demo - cube</title>
<script src="js/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#DDDDDD"></a-sky>
<a-cube
color="#0095DD"
position="0 1 0"
rotation="10 20 0">
</a-cube>
</a-scene>
</body>
</html>That’s everything you need to have a cube on your screen that can be viewed in virtual reality - a simple markup with a couple of properties. It’s a perfect tool for rapid prototyping as you can build working demos in minutes. You don’t have to fight with browser specific bugs as the framework is taking care of all that. There’s a powerful API behind it though, so if you feel you’re an advanced developer you can unleash the full power of A-Frame building rich virtual environments too.
You don’t have to limit yourself to the markup alone - as a web developer you probably know JavaScript, and the good news is you can use it along with A-Frame. The framework is based on WebGL, so you can extend it if you feel like doing so.
Read the WebVR article for a bit of VR theory, the A-Frame tutorial for the instructions on how to build your first 3D VR project and check out the A-Frame demo on GitHub for the source code used in the tutorial. Start building your own WebVR experiments right away!