Web AR is young, state-of-art technology. In this paper I will discuss entry to provide Augmented Reality (AR) experience to the users. Recently, the Web-based AR implementation method has also received focused attention from the W3C group, and the Web XR Editor’s draft was released in March 2018. This technology looks very promising unfortunately is not widely supported yet.
Currently there are few major open-source libraries to be used to build AR experience. First one is supported by most of the current web browsers, but is quite fragile. The another two are more robust but are not widely supported yet.
Don’t Worry It’s Less Than 10 Lines of HTML
This is title from aframe.io and you know, it is very rare that cheap decisions will make great impact. You are able to create AR app with 10 lines of code. 10 lines of this perverse html markup, that works, but to be honest – that’s all.
From this point all that will follow is blood, sweat, and tears. This AR.js is total garbage that is not usable in standart project because it doesn’t even allow you to install and use it as npm module. You have to <script> it into you web app. More over even easy adjustments as is changing the marker are almost impossible because there is no documentation and what worked in previous version doesn’t work in current version. Here are few issues that document stat of this repo very well:
Although this library have quite big traction I would not recommend it.
Jeeliz Library includes both options for standart browser and also WebXR. Although the core code is obfuscated it still seems as a decent choice for standart web projects.
Three.ar.js is library from google-ar team. This library helps to create AR experience with helper classes and utilities on top of the three.js 3D library, which interfaces with the WebVR Extension for AR exposed by WebARonARKit and WebARonARCore.
To play with three.ar aside from Chrome Canary, you’ll also need:
- A compatible smartphone running Android O or later.
- To install ARCore.
- Two Chrome flags (chrome://flags): WebXRDevice API (#webxr) and WebXR Hit Test (#webxr-hit-test)
See three.ar.js API documentation for details.
System & components by Mozilla team to build WebXR experiences with A-frame. You can check the examples here URL with all the examples. Again you need supported browser (WebARonARKit/Core browsers, as well asWebXR Viewer).
This library add basic A-Frame support for browser-based AR, supporting the new three.ar.js library and WebXR. By adding the
ar component to A-Frame scene declaration, aframe-ar will, when using a supported browser, take over the scene camera using information from ARKit / ARCore. You can read more here.
8th Wall runs in a standard web browser on mobile or tablet. It relies on 8th Wall AR engine. To use this library you need to obtain developer key and for production also a licence. The pricing table can be found here.
Proof of Concept
Let’s get our hands dirty. As AR.js library was the first one we have been playing with this example is made in it. This is what we were able to create in few hours. Just point your smartphone to the QR code to open the webpage then point it again to the marker.
You should go through similar process on any platform as is below.
Where To Get 3D Models
GlTF, OBJ and COLLADA are already supported on A-Frame and have good documentation available on the A-Frame docs, but if you can multiple options, I would go with gLTF. A lot of great models can be downloaded from these two pages:
To enable animations you have to include aframe-extras library.
After playing with WebAR for a while, it’s obvious that it’s not mature yet (except 8thwall). However, even today, it is possible to build decent AR experience.