A-Frame, a web framework for building Virtual and Augmented Reality experiences on the web, recently reached the A-Frame 1.0 release with support for the WebXR specification and an AR mode for browsers which support ARCore and ARKit.
Under development for the past few years, WebXR is a web specification for both virtual and augmented reality on the web. As is the case with many new web standards, HTTPS is required to leverage WebXR.
To get started with A-Frame, developers add a <script> tag and the <a-scene> custom element. A-Frame handles 3D boilerplate, VR setup, and default controls. Designed to be approachable to all web developers as well as VR fans, designers, artists, kids, and more, A-Frame primary works through an HTML API leveraging custom elements. A-Frame builds on top of three.js, WebXR, and WebGL. A simple A-Frame example:
<html>
<head>
<script src="https://aframe.io/releases/1.0.2/aframe.min.js"></script>
</head>
<body>
<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" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
While A-Frame uses the HTML DOM, its elements don’t touch the browser layout engine. Instead, 3D object updates occur in memory with little garbage and overhead, preserving smooth 90fps for even very complex 3D renderings. A-Frame provides a visual 3D inspector to debug and understand scenes.
A-Frame provides a series of core components, including geometries, materials, lights, animations, models, raycasters, shadows, positional audio, text, and controls for most major headsets. Beyond the included components, the A-Frame community provides hundreds of components including environment, state, particle systems, physics, multiuser, oceans, teleportation, super hands, and augmented reality.
The A-Frame community provides a wide variety of examples that are available as interactive demos on Glitch. For example, the a-frame-registry shows how to access a physics system and ocean particles.
A-Frame is a three.js framework with an entity-component-system (ECS) architecture, a common pattern in 3D and game development. A-Frame follows the composition over inheritance and hierarchy principle. The A-Frame team describes the benefits of ECS:
- Greater flexibility when defining objects by mixing and matching reusable parts.
- Eliminates the problems of long inheritance chains with complex interwoven functionality.
- Promotes clean design via decoupling, encapsulation, modularization, reusability.
- Most scalable way to build a VR application in terms of complexity.
- Proven architecture for 3D and VR development.
- Allows for extending new features (possibly sharing them as community components).
A-Frame is open source software and is available under the MIT license. Started by the Mozilla VR team in 2015, A-Frame is now maintained by developers from Supermedium and Google. Microsoft, Oculus, Samsung, and more than 300 others have also made contributions to A-Frame. Contributions are welcome and should follow the A-Frame contribution guidelines.
