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.
Let’s take a look at a simple A-Frame virtual reality environment:
<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-entity position=”0 0 3.8″>
This simple HTML document will create the following scene. Notice that the body of the document consists of the following hierarchy of elements:
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.