AR.js — The Simplest Way to get Cross-Browser Augmented Reality on the Web

How to deliver Augmented Reality contents on the web, in an open-source, easy and cross-browser way.


Just another AR library?

For those who don’t know it yet, AR.js is a great project with over 10k stars on Github, that makes easy and fun to develop augmented reality apps with web technologies. With a few simple lines of Javascript and some 3D modelling, it’s almost immediate to develop an augmented reality web-app.

  • Compatibility, it is cross-browser, it works on every phone browser (and obviously desktop) supporting webgl and webrtc (so basically every Android phone and iPhones above iOS 11)
  • Simplicity, it is a wrapper of different frameworks that makes web AR developing very easy. It is built on top of a-frame and three.js.
A default marker containing a qr-code on the left and AR.js magic on the right— image from this Jerome Etienne’s story.

Markers

Markers are a sort of simplified qr-codes. On AR.js we define specific 3D scenes for specific markers, so when the camera recognizes a marker, the web-app shows the 3D model on top of it. Also, markers may contain qr-codes.

Pattern Markers

An important feature of AR.js is the possibility to use custom markers, the default type is ‘pattern’. I did some research on pattern markers’ limitations, on their size and shape. I learned that:

  • They must be square in shape
  • They cannot have white/transparent areas, only light grey (e.g. #F0F0F0)
  • They cannot contain colors, only black and light grey
  • They have to contain simple text, like one letter, a number, or a symbol.

Barcode Markers

Markers can also be barcodes. They represent a number as a symbol, created with calculus on a matrix. It is suggested to generate markers based on a matrix with an high “hamming distance” (see this table), so the camera can recognize them better. A matrix defines also the maximum number of possible markers (for example the “AR_MATRIX_CODE_3x3_PARITY65” matrix can generate 32 different barcode markers).

  • Tell AR.js to recognize barcode patterns that are generated with a 3x3 matrix (line 12)
  • Define two <a-marker> tags, each one identified by two different barcode values (18 and 22)
  • Define a static camera entity (line 30).
<a-marker type="barcode" value="6" (...)
<a-marker type="pattern" preset="custom" url="...." (...)

Patterns in detail

To simplify the detection of markers by the camera, it’s useful to keep in mind some simple rules for create barcode/pattern markers.

“Red” marker on the left and the correspondent pattern used by AR.js on the right.
“Blue” marker on the left and the correspondent pattern used by AR.js on the right.

So, is AR.js worth it?

I answer “absolutely”. Its simplicity is stunning. An approach based on markers is not a real limitation, but rather a paradigm that suits well for an incredible range of use cases. Markers can be showed on mobile and desktop displays or printed and hanged up on walls or boards.

Screenshot taken from my AR.js demo app, while the marker is shown on another display. The yellow 3D box pops up when the camera recognizes the correspondent pattern.


Chialab Open Source

Chialab is a design company. By developing strategy, design, software and content, we generate exciting relationships between brands and people.

Nicolò Carpignoli

Written by

Web Software Engineer http://nicolo-carpignoli.herokuapp.com // Lead maintainer of AR.js // Working @ https://chialab.it

Chialab Open Source

Chialab is a design company. By developing strategy, design, software and content, we generate exciting relationships between brands and people.