by Michael Colonna
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:
No download required! Simply add the A-Frame and AR.js script tags into your HTML file:
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)
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).
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.