Find out how you can make WebAR happen with JavaScript.
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 (for more on AR, see our feature on what's next for augmented reality.)
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.
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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.
