BT

InfoQ Homepage News A-Frame 1.0 Release Adds WebXR and AR Mode

A-Frame 1.0 Release Adds WebXR and AR Mode

Bookmarks

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>

AFrame Example Shapes

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 Object Inspection

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.

A-Frame Game Example

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.

AFrame Ocean Physics example

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.