AR-Code:a Fast Path to Augmented Reality

From qrcode to AR.js content

Jerome Etienne
ARjs
Published in
5 min readApr 4, 2017

--

We just found a fast path for augmented reality, by using qrcodes to reach augmented reality content. We call them “AR-Code”. It makes it even easier to reach augmented reality content. This changes things quite a bit, so I wanted to tell you about it.

Show don’t tell

Let’s get directly into it. Below on the left, you have a marker with a qrcode inside. On the right, you can see the 3d content displayed on top of it.

First, you read the qrcode with your phone. It will open a url to some AR.js content. Then your phone will use the camera to find out the position of the marker and display 3d content on top of it, as you can see on the right.

It is that simple!

AR-Code on the left — On the right, the 3d which appears on it

AR.js and qrcode flow well together

So we all know qrcode, right ? They are those black and white square images that you can see printed everywhere. You scan them with your phone, and that will redirect you to a url. This is a nice way to avoid typing the url on the phone, always a painful exercise.

AR.js is efficient Augmented Reality for the web. It is all in javascript and runs in any browser with WebGL and WebRTC. It is very fast too, reaching 60fps even on 2 year-old phone.

I think AR.js and qrcode can work well together. They both need to have images printed. They are both used on phones. They have the same flow, you point your phone at it and something happens. Both are related to location. AR.js and qrcodes definitely flow well together.

AR-Code User Flow

AR-Code provides a nice user flow. It is all about how the user feels when reaching this augmented reality content. There are 2 steps: first the user gets close to the image to scan the qr-code with the phone, and then the user moves the phone back a little to experience the augmented reality.

The ‘going-back’ aspect has a nice psychological connotation, the user does it to see more, to have a wider point of view on the whole thing. It goes back because something magical will popup from this maker. This reinforces him/her in the feeling that his/her reality is going to be augmented.

Generate your Own AR-Code

I wanted it to be easy to build your own AR-Code, thus more people could use it. I wrote a little webpage where you just paste your url and it build the AR-Code. Then you can easily download it and use it as you like.

Screenshot of AR-Code Generator

Some AR-Code Features

Ok so now, we are able to display AR on current phones, even 2 year-old ones. And thanks to AR-Code, we can easily reach augmented reality content without installating apps. This is nice for sure, but how to use it?

One important feature is that AR-Code are trans-media links — “from paper print to augmented reality”. They give a new dimension to the printed message (figuratively and literally). Before, you were telling your audience something on a printed page, now you can tell them more in augmented reality. It is more dynamic, more shiny, less anonymous than an inanimate printed page.

Another thing is that a marker is fully passive. It is just a printed thing. They don’t need electrical power. They don’t break down all of a sudden, like electronic stuff. They don’t need somebody to attend to them.

AR-Code ’s Possible Usages

I though a bit about how it could be used. So here are some examples of possible use cases:

Advertisement

People pay to publish ads, they may pay more for augmented reality ads. It is a differentiator. It can become a competitive advantage for businesses. It allows a more personal, more dynamic message. It has a definitive wow effect.

Just imagine that you are bored waiting for your flight at the airport, or that you are in the waiting room for your doctor’s appointment. Wouldn’t you rather spend that time looking, not at normal magazines, but at new generation magazines enhanced with augmented reality. These magazines would have markers printed on them, and through your phone, you would be able to experience live 3d action of the products that interest you. Or give them to your kids to play with.

Also, another idea is to to print the markers in yellow-pages book, to give that modern technological touch to a way of advertising that has become moot.

Education books

A wonderful application to AR-Code is in the education system. How to increase student engagement in the classroom? Well, give them something new and exciting! Lessons don’t have to be boring. Let’s evolve! Markers can be printed in their school books, or even directly in the assignment. And voilà, the kid will never again look at his homework in the same way.

Comic book

We can’t put a marker on every page obviously, but maybe at the last pages, the ones which usually remain blank. There we put some markers which display content related to the comic book, e.g. an animated model of the hero and other characters.

Tourism

I walk into a museum and close to the painting there is a marker linking to an AR experience about Van Gogh and his cut off ear. Here the fact that the marker is passive is key. We put a markers close to an exhibition and leave them there. Visitors can use them all by themselves. It is cheap for the museum and the visitor can enjoy the exhibition quietly.

City Informations

For example, we could use it in a bus stop. It provides me with the bus schedule in AR. The information is dynamic. The audience is captive. People wait for their bus, they aren’t going anywhere (pun intended 😉). It works for subway stations, or other kind of public transport too.

THE END

PS: Why not a marker in a qrcode ?

So we did a qrcode in a marker, but why ? We could do a marker in a qr-code, instead right ? Yes, it can be done, it has been done in fact, but globally, it isn’t a good idea. :)

Marker inside a qr-code

Let me explain why. When doing augmented reality, the marker needs to be large, thus AR.js can estimate its position with more accuracy. If it is too small on the camera, it won’t cover enough pixels and the 3d will start shaking.

On the other hand, qrcodes doesn’t have to be large, the user can easily get close to the image when scanning it. So it makes sense to put the qrcode inside the marker and not the other way around.

Thanks for reading and share if you like. You can contact me anytime @jerome_etienne

--

--

Jerome Etienne
ARjs
Editor for

Making WebAR a reality! 8th most active user on github - Write @learningthreejs - Ex @daqri