So what is AR.js? AR.js was developed by Jerome Etienne with the idea of making AR available to everybody. It improved performance and made augmented reality run faster on mobile. Thanks to its optimisation, AR went from running at 4fps on high-end phones to 60fps on three-year-old phones.
The library was first built on projects like three.js, ARToolKit 5, emscripten and Chromium. It was, and still is, a pure web solution, based on standards. So it works on any phone with WebGL and WebRTC. And, as an added bonus it is open-source and completely free.
The beauty of AR.js is that it makes AR accessible without the need to install any applications and obtainable without having to buy specific and expensive devices. Everybody already has an AR enabled device in their pockets: their own phones.
How the code works
The success of AR.js is based on its performance and simplicity. With AR.js you can code AR in only 10 lines of HTML using Mozilla’s A-Frame. Check out the code.
This simplicity has triggered interest and experimentation, trial and error from people with and without a technical background and it is what has ultimately led to the adoption of the library by more and more designers and developers.
AR.js is ever-evolving and now includes workflow improvements with multi-markers. Check out ‘Augmenting The Web Page’, a way to display AR directly on the web-page by scanning a QR code (an idea that you can apply to e-commerce or advertisement). And of course, support for ARKit and ARCore. AR.js also provides the best tracking available on any device and it runs in all platforms. If you want to start building AR for the web make AR.js your first port of call.
Want to know more about WebAR?
Alexandra Etienne is an AR/VR evangelist who works with Lightform, a startup in California building the first computer for projected augmented reality. She is on a mission to share AR.js with the world.
In her talk at Generate London 2018 Alexandra will show the advantages that web-based AR can bring, what others have created with it in and what you can do with AR.js library.
You can experience efficient augmented reality for the web directly on your phone without installing any applications. But let’s go further and see how to produce your own augmented reality experience. The shortest example of AR.js is only 10lines of HTML thanks to the magic of a-frame. You can see it live on codepen:
AR.js example in 10 lines of HTML
Let’s break it down line by line.
Including the Libraries
First, you include a-frame, an effort started by MozillaVR to build VR experiences. A-frame contains three.js. Then you simply include AR.js for a-frame. AR.js will make the 3d displayed in AR run very fast on your phone, even if it’s a 2–3 year old phone!
Defining the Body
In this step, it’s all business as usual. You define the body, like you would in all HTML pages.
Creating a 3d Scene
Next, we are going to create our a-frame scene. We also need to add the ARToolkit component. ARToolKit is an open-source library that we use to localize it through the phone camera.
Adding Simple Content
Once we have created the 3d scene, we can start adding objects to it. In this line, we add a simple box. We then modify its material to make it transparent. We also change its position so it displays on top of the AR marker.
Adding the AR Camera
In this last step, we are going to add a camera. We include the preset ‘hiro’ (as in Hiro marker). Finally, we make it move as if it were your phone. Easy right?
Congratulations! You are done. You now have augmented reality, in only 10 lines of HTML, running fast on your phone and free of charge.
Check out this video version I made of the tutorial:
Thanks for reading, and if you like this post, don’t forget to share 😉