How to deliver AR on the web only with a QR Code

With latest web technologies you can deliver cross-browser AR experiences just with a simple QR Code, in few steps. I’m going to show you how.

Also available in Italian.

This is part of a series of articles about AR.js. The following is the list of the articles written so far:

• AR.js — The Simplest Way to get Cross-Browser Augmented Reality on the Web
• How to deliver AR on the web only with a QR Code
• How to handle click events on AR.js

For the latest news about AR.js and Web AR, you can follow me!

Disclaimer: AR.js v3 is out, with a new Documentation that can be found at: https://ar-js-org.github.io/AR.js-Docs/. Learn more there if you found problems with this tutorial.

In this article I introduced AR.js, an amazing open-source project that lets us create cross-browser AR web-apps with just few lines of HTML. I’m not going to write again about AR.js in detail, but this time I will focus on how we can deliver an AR experience to the users in the fastest possible way.

It’s important to state that this concept is suitable for every AR technology based on markers. AR.js is the one used for this article and the easiest around, thanks to its high level of abstraction (in fact, AR.js is relaying on a-frame and artoolkit5 projects).

Let’s start this journey with a story

A guy (our user) walks into a museum, and he is welcomed by a huge disclaimer that states that beside every artifact, he can find a marker to scan in order to visualize a 3D animation. Before that, he has to download an application on the store (and probably, also to register an account).

At this point, most of the users will renounce to the experience. Every user is lazy, and probably not everyone has enough space on the phone for another app. So, the AR experience will probably not take place at all.

But what happens if we can make the user open our web app without even typing the URL on the browser? I bet some user will give our AR app at least a try.

Marker inside QR Codes

The main idea is to create a single QR Code that will both redirect the user to our AR web app and that also contains the marker for AR.js. The user will only has to:

• Scan the QR Code
• Open the url embedded in the QR Code
• Continue to scan the same QR Code and see the 3D model/animation appear on top of it.

Keep in mind that with latest iPhones (iOS 11 and later) and also some Android phones (like Samsungs’) QR Code scanners are built-in in the camera, so users don’t even need to download an app for it!

First, we need an AR.js application (or similar). You can build one following the steps listed in this article or use this application, the one showed on the following screenshots.

The marker used by this application is the following barcode marker:

Barcode marker representing number 6.

When the camera will recognize this marker, the app will render a CesiumMan endessly walking on top of it. We have to create a QR Code that contains the marker.

An important thing to remember is to use a border on the marker image with an high contrast to the black of the marker background. In this case I wrap the barcode marker with a thin white border.

I used an online free tool in order to generate custom QR Code. Using this one, you can upload an image (the marker) as logo image on ‘ADD LOGO IMAGE’ and specify the content (on ‘ENTER CONTENT’) as our web app url (type https://nicolocarpignoli.github.io/ar-playground/index.html).

QRCodeMonkey free online tool for custom QR Code generation.

Now we have our QR Code with built-in marker! Our media used to deliver the AR content is ready. The only thing left to do is to scan it and start enjoying the experience!

Tip: if you’re very very lazy or simply you don’t believe that this is really working, try to scan the QR Code in the image above (or in the image of QR Code editor for a better quality): you will redirect, as expected, to our AR web app!

Further reading:

• AR.js — The Simplest Way to get Cross-Browser Augmented Reality on the Web also available in Italian
• AR.js web app source code used in this article
• AR.js basic tutorial from AR.js authors.

Chialab is a design company. By developing strategy, design, software and content, we generate exciting relationships between brands and people. https://www.chialab.it.