BT

InfoQ Homepage News Building AR/VR Applications in the Browser

Building AR/VR Applications in the Browser

Bookmarks

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.

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.