Area Learning with Multi-Markers in AR.js

For a Larger & More Stable Augmented Reality

Alexandra Etienne
Jun 13, 2017 · 3 min read

Multi-markers are an interesting way of displaying Augmented Reality. They increase tracking performance and enhance the stability of the 3d. There are many advantages of using multi-markers. In this post, we will go through the basic concept, and a step by step to try it yourself. It has a sweet workflow.

Multi-markers for large-scale AR

Multi-Markers are Great!

The term multi-marker means using more than one marker at a time. Before, we used only one square marker e.g Hiro marker. This is nice but we can go much further. With multi-markers, we have multiple markers acting as one larger marker.

So a multi-marker is basically a group of markers acting as one.

Advantages of Multi-Markers

Multi-markers have useful features that provide significant advantages when developing AR.

More Stable: AR is less shaky and has a higher quality.

More Robust: The 3d displayed in AR won’t disappear. It will remain visible even if you move far away from the multi-marker.

So you end with much larger augmented reality, like in this video:

Another important advantage is that since all the markers act as one, even if only one marker is visible, the multi-marker position will still be tracked properly! Pretty cool, right?

Multi-Marker Sweet Workflow

There are two modes in this workflow: the player and the learner.
The player is the one using the multi-marker to display an augmented reality experience on top of it. Obviously before this, you need to learn the area where all your markers are placed.

Let’s see how its done, step by step.

Step 1: Launching The Learner Mode

Learning the area is very simple. You start by launching the learner mode. To do this, you click the green button that you see on the bottom right corner of the screen.

Step 1: Launch the Learner Mode by clicking the green button

Step 2: Learning The Area

Then you move the camera of your device around the area to start learning. The goal here is to detect the exact position of the markers and the distance between them.

You will see a UI in the bottom left corner of the screen with a list of the markers being learned. When a green check appears next to each of them, that means the learning process is done.

Learner UI: a green check next to each marker means the learning process is done!

Note: It is very important that you don’t move the markers once you have learned them, their position is considered stable, and must remain like this.

Step 3: Displaying your AR content

Once you have finished learning the markers, you need to return to player mode. To do this, you simply click again on the green button.

Step 3: See AR displayed on Player Mode

Now you will be able to display the 3d on top of the multi-marker!

Here is a short video to summarize all the steps and show you the result:

I hope you guys enjoyed learning about multi-markers. Now go out there and create amazing AR experiences yourselves! Don’t forget to share them with us via Twitter, and thumbs up if you liked this post ;)


Efficient Augmented Reality for the Web

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store