Locomotive

Digital-First Design

Play hard Back to work

Play hard

Back to all

Augmented reality on web browsers, wut?

Augmented reality (AR) has always interested us at Locomotive. Creative freedom and concept ideas using this technology are numerous, but is it possible to exploit augmented reality more on the web without using a native or Unity application? The main idea being to use our skills with threeJS to develop augmented reality features.

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.

Play

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.

So yes, we managed to integrate AR on a web page, but not without compromise. Quentin Hocdé, Creative developer

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.

Back to all
Augmented reality on web browsers, wut? Locomotive storms the IGA stadium and wins honors in the Idéa competition The Revolution Of The Workspace As We Know It Can I say bravo? Locomotive crowned Agency of the Year for a second year Image analysis and machine learning with Google Vision API The Evolution of Scrolling at Locomotive Relive Locomotive's Parté of the Year Our monthly Loco breakfast Pet therapy at the office Locomotive is crowned Agency of the Year Snow day and cross-country skiing Locomotive in flight mode How to build and maintain the best team in town? An office full of seasonal colours Summer friday's under the hot sun A dream team for Locomotive
About Locomotive About Locomotive
C H O O C H O O