AR.js

AR.js

by Michael Colonna

Description

AR.js is an open-source library built on top of A-Frame, three.js, and ARToolKit. It leverages the power of WebGL and WebVR to create augmented reality experiences that run directly in the browser, with surprisingly smooth results. It is marker-based, with entities attached to physical markers in the user's environment (rather than attached to a generated surface of points).

The library and associated resources can be found here:

Download

No download required! Simply add the A-Frame and AR.js script tags into your HTML file:

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>


<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>


<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

Tutorial for Hello World

Estimated Time for Hello World:

  • Mac: <10 min.

  • Windows: <10 min.

  • Linux: <10 min.

Recommended System Requirements

When developing with A-Frame, I highly recommend using Glitch to develop web apps. It automatically deploys and hosts your code each time you make a change, so you can access your web app from any device!

iOS > 12:

  • Safari (use https:// when accessing site)

Android 4.4.2:

  • Chrome

Metrics

Accessibility: The estimated time for someone to create Hello World in VR

  • Beginner: No coding or graphics experience | 20 minutes

  • Intermediate: Some coding or graphics experience | 10 minutes

  • Advanced: Both coding and graphics experience | <10 minutes

  • Expert: A lot of experience with computer graphics, specifically with this software | <5 minutes

Power: The engine's power - i.e. how much one can do with this

  • High: By utilizing three.js, AR.js is capable of the full suite of complex object interactions that three.js enables. Being built on top of A-Frame allows for an inherent flexibility and ease-of-use in development. The most limiting factor of AR.js is its marker-based design – however, even this could be used in creative ways to enable complex AR interactions.

Usage: Evaluation of software's use for the following purposes

  • Game Design - AR.js is great for building AR games. With multi-markers and entity manipulation enabled by three.js, AR games like this can be made.

  • Education - a marker-based AR development system like AR.js is great for displaying educational information in places like museums and classrooms. Marker-based AR also allows participants in the environment to physically shift the AR display by moving the markers.

  • Science - AR.js combined with aframe-extras can display various types of 3D models in an environment. However, anything beyond visualization of pre-rendered data models is outside the scope of AR.js (although it can definitely be augmented on top of AR.js).

Summary

AR.js is a great library for those looking to try to break into web AR. It is a complex library that enables various complex interactions. Being built off of A-Frame allows even novice HTML coders to build AR applications that run smoothly and are effective.