Virtual reality (VR) is a paradox. Donning a headset can transport the senses to other worlds, while the body remains firmly planted on the ground (well, most of the time). VR affords us the ability to fly, teleport, and transform the virtual world around us, but has also achieved notoriety for its less desirable tendency to induce vertigo, fatigue, or even negative psychological states. Even the language surrounding the world of VR is replete with contradictions, oftentimes fluctuating between rapturous techno-positivism for its seemingly limitless future potential and alarmist repudiation of the technology as a result of marketing hype gone awry and other unmet expectations. For all of its innovations and setbacks, the virtual reality experience simultaneously supersedes reality and lags behind it.
In spite of the flaws, improvements to technology coupled with lowering costs have the potential to positively impact the VR narrative. Perhaps most importantly, open-source web frameworks have become an important contribution to the world of VR development. One such framework is called A-Frame, a JavaScript library that allows developers to create virtual reality environments with just a few lines of code embedded within a HyperText Markup Language (HTML) structure. A-Frame is free, open-source, and draws on the powerful Three.js library, a JavaScript application programming interface (API) that harnesses web browsers’ native Web Graphics Library (WebGL) capabilities to create interactive 3D objects. In plain English, this means that A-Frame helps you build 3D environments by simplifying the communication between you and your web browser, allowing you to make use of already built-in technology without having to think too much about what goes on “under the hood”.
Let’s take a look at a simple A-Frame virtual reality environment:
<!DOCTYPE html>
<html>
<head>
<script src=”https://aframe.io/releases/0.9.0/aframe.min.js”></script>
</head>
<body>
<a-scene>
<a-sphere position=”0 1.25 -1″ radius=”1.25″ color=”#EF2D5E”></a-sphere>
<a-box position=”-1 0.5 1″ rotation=”0 45 0″ width=”1″ height=”1″ depth=”1″ color=”#4CC3D9″></a-box>
<a-cylinder position=”1 0.75 1″ radius=”0.5″ height=”1.5″ color=”#FFC65D”></a-cylinder>
<a-plane rotation=”-90 0 0″ width=”4″ height=”4″ color=”#7BC8A4″></a-plane>
<a-sky color=”#ECECEC”></a-sky>
<a-entity position=”0 0 3.8″>
<a-camera></a-camera>
</a-entity>
</a-scene>
</body>
</html>
This simple HTML document will create the following scene. Notice that the body of the document consists of the following hierarchy of elements:
- a-scene
- a-sphere
- a-box
- a-cylinder
- a-plane
- a-sky
- a-entity
- a-camera
In other words, we create a scene where all of our interactivity will take place. In creating this scene, A-Frame automatically appends the VR goggles logo in the bottom right corner of the page. Clicking this logo starts the VR experience.
Within the scene, there are series of shapes: sphere, box, cylinder, plane, sky, and entity. These shapes are represented as HTML entities with additional Cascading Style Sheet (CSS) properties (e.g. colour, position, etc.) that determine how they are rendered. Entity is an abstract element that serves as a simple container. In this case we place our camera within that entity in order to define the perspective of the viewer. The camera can be linked to the player character if your scene will be in first-person.
A-Frame also has built-in support for most major commercial VR products. If you have additional hardware such as controllers, you can easily import them as HTML elements.
Much like virtual reality itself, A-Frame has its drawbacks. Perhaps its most important challenge is the output of its community. The software contains a number of modules designed by community members, and as such faces the same obstacle of maintenance and obsolescence that many developers encounter as technology advances.
A-Frame is nevertheless a fantastic tool for creating a proof of concept, or to create scenes that do not require extremely high complexity. It offers a portable, web-based alternative to many of the competing products that occupy memory on your hard drive and, occasionally, have expensive licenses. Thanks in part to the increasing usability of open-source products and services, VR technology may one day achieve the level of greatness that its early adopters have longed for all these years.