Web Augmented Reality (WebAR) Hands-On
Web Augmented Reality (WebAR) or if you’re feeling fancy, Mixed Reality, is a young and state-of-art technology. In this paper I will discuss entry points to provide Augmented Reality (AR) experience to 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, but unfortunately is not widely supported yet.
Open Source Libraries
Currently there are a few major open-source libraries to be used to build AR experience.
non-WebXR
Non-WebXR libraries are supported by most of the current web browsers, but are quite fragile. The WebXR libraries are more robust but are not widely supported yet.
Don’t Worry It’s Less Than 10 Lines of HTML
It is very rare that cheap decisions will make a 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 a standard project because it doesn’t even allow you to install and use it as a npm module. You have to <script> it into your web app. Moreover, even easy adjustments such as is changing the marker are almost impossible because there is no documentation and what worked in the previous version doesn’t necessarily work in the current version. Here are a few issues that document the stat of this repo very well:
Although this library has quite big traction I would not recommend it.
Jeeliz Library includes both options for a standard browser and also WebXR. Although the core code is obfuscated it still seems to be a decent choice for standard web projects.
This is a (9 years old library) JavaScript port of FLARToolKit, operating on canvas images and video element contents, and hopefully one day on device elements with webcam input.
WebXR
WebXR Device API is a working draft, that is not ready yet for production usage, but allows for really cool features in supported browsers. Here are some cool examples https://examples.webxrexperiments.com/
Three.ar.js is a library from google-ar team. This library helps to create an 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. Again, you need a supported browser (WebARonARKit/Core browsers, as well asWebXR Viewer).
This library adds basic A-Frame support for the browser-based AR, supporting the new three.ar.js library and WebXR. By adding the ar component to the A-Frame scene declaration, aframe-ar will use a supported browser to take over the scene camera using information from ARKit / ARCore. You can read more here.
Model Viewer
If you don’t need to control your model with, let’s say, buttons, you can use iOS and Android Model viewers to embed it in your UI. These viewers are native Applications, that are opened for specific models. All you have to do is provide a link. It looks very good and if your use case is just to place model in a scene, you can rotate and scale it. You are good to go with this option.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar> <script type="module" src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js"> </script> <script nomodule src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js"> </script>
When you click the AR button it will be opened in the AR viewer as is seen below for iOS and Android.
Here is a list of supported devices.
Proprietary Libraries
8th Wall runs in a standard web browser on compatible mobile devices or tablets. It relies on the 8th Wall AR engine. To use this library you need to obtain a developer key and for production, a license as well. The pricing table can be found here.
Awe.js is a library for creating web-based Immersive experiences (Augmented Reality, Virtual Reality, Interactive 360° Scenes, Mixed Reality, etc.) using awe.js on the the awe.media platform.
Proof of Concept
Let’s get our hands dirty. As AR.js library was the first one we mentioned, we’ll use it now as an example. This is what we were able to create in few hours. Just point your smartphone at the QR code to open the webpage then point it again at the marker.
Web browser-based augmented reality (AR)
You should go through a similar process on any platform as is below.
AR delivery experience
Where To Get Free 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 know of 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 an aframe-extras library.
Notes
Here are some other libraries that look interesting, but we didn’t have time to test them:
Summary
After playing with WebAR for a while, it’s obvious that it’s not mature yet (8thwall is actually really cool). However, even today, it is possible to build a decent AR experience.
References
- https://aframe.io/
- https://www.w3.org/TR/webxr/
- https://mixedreality.mozilla.org/
- https://ieeexplore.ieee.org/document/8643424
- https://github.com/jeeliz/jeelizAR
- https://siliconangle.com/2018/09/11/8th-wall-web-makes-augmented-reality-websites-reality-mobile-devices/
- https://medium.com/@urish/web-powered-augmented-reality-a-hands-on-tutorial-9e6a882e323e
- https://developers.google.com/web/updates/2018/06/ar-for-the-web
- https://github.com/JamesMilnerUK/THREEAR
