During the Fullstack London 2019 conference, Doug Sillars, a freelance software engineer, discussed the state of Virtual and Augmented Reality in JavaScript by demonstrating how to build a virtual art gallery.
Both Virtual Reality, which immerses the user in a fully 3D generated world, and Augmented Reality, which offers deep integration between the real world and digital objects, are relatively new technologies that are currently being integrated into the web using the WebXR API. The X in WebXR is a placeholder for any type of immersive technologies that might appear in the future.
The WebXR API is still under development with limited browser support and documentation. The WebXR GitHub repository includes a user-friendly introduction to the core concepts to get started with WebXR.
Even without the WebXR API, it is still possible to interact with AR/VR devices and create simple, cross-platform applications. Libraries such as A-Frame offer a simplified interface for application development with many interesting examples and implementations already available online.
The A-Frame library is based on three.js, a popular 3D rendering library for JavaScript. It offers a simple HTML-like syntax that is easy to master and allows developers to create both VR and AR applications with minimal knowledge of JavaScript.
To use A-Frame, developers describe the scene using HTML-like tags which are then turned into a WebGL view by A-Frame. In order to place the 3D objects in real space (AR), developers currently need to use special physical tags that can be generated on the A-Frame website. Placing these tags allows A-Frame to know where (and which) 3d objects should be placed.
Creating a simple VR scene requires only a handful of tags:
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25"></a-sphere>
</a-scene>
Another library that deserves a mention is React-360, which enables developers to create AR/VR user interfaces using a syntax that is similar to React.
Initially, AR/VR applications required expensive dedicated gear, which limited its consumer adaptation. Today developers can use smartphones to achieve a similar experience. While using AR/VR applications on a smartphone is possible, it is recommended to use a special set of glasses that wrap around the phone and enable users to enjoy a more immersive experience. The first such set of glasses was Google Cardboard, with many alternative solutions now available.
Doug Sillars' complete talk, Building an Art Gallery in the Browser, can be found on the FullStack website (free registration is required).
A-Frame is released under the MIT license and its source code is available via the A-Frame Github repository.