Augmented reality on web browsers, wut?

AR.js

There are many articles on augmented reality on the web. Our research on the subject quietly led us to AR.js by Jerome Etienne. The library is clear, flexible, optimized and maintained according to the evolutions of webgl by Jérôme, a very active developer.

AR.js is based on a markup language (A-Frame magic) to create the different objects, camera, marker (everything you need to make augmented reality, you might say). But as we like working with our boilerplate we rather looked at how the integration of artoolkit with threejs worked without using the A-Frame magic language.

The main limitation of augmented reality on the web is the mandatory use of a visual and physical marker.

Thanks to several tests carried out, we were able to better define best practices for the creation of the marker in question. It must be fairly contrasted and must include precise details for its detection. It must also be fully visible.

For example, a damaged printed marker could cause detection problems. The user will also require good lighting, and depending on your camera, the marker may be more difficult to detect. It will probably be necessary to test several markers and iterations before reaching an optimal or sufficient detection. Finally, to generate our marker, we used this tool: AR.js Marker Training.

R&D

The advantage of having developed this prototype with AR.js is that it already felt comfortable to set up a classic threejs scene. The creation of basic geometry was part of our first test.

We then wanted to test imports of .glb objects, the addition of animated .fbx and videoTextures. A fairly simple prototype to develop: an AR scene to create and the addition of our Mesh, as in a classic project. The result was satisfactory since each type of content integrated into the AR scene (3D object, animation, video, image, etc.) proved to be a success in terms of display and performance.

Note that if you work locally, you will need a small https server to use your phone's webcam or camera. We used the http-server package, an efficient and relatively simple tool to set up.

The limits of augmented reality on the web

So yes, we managed to integrate augmented reality into a web page. We feel that this technology is more and more open and simple to implement thanks to different tools, but it is still very limited. The marker detection time is sometimes a bit long, if we move the phone too much and the marker is no longer visible, it will take a few seconds to re-display the scene.

Safari and Google Chrome now also allow you to display 3D objects in augmented reality thanks to the .usdz format and a link with a rel = "ar". Again, this is quite limited because it will only display the object according to the camera, but nothing else is possible like adding other objects, simple meshs or changing materials with a shader by example. (source: Clément Pavageau article)

The field of possibilities is wide in terms of creativity but technically limited.

Unlike ARKit of iOS there is no spatialization of the environment, and doing something really complete like the IKEA Place application for example, unfortunately will not be possible yet.