Area Learning with Multi-Markers in AR.js
For a Larger & More Stable Augmented Reality
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 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.
They have several key advantages which make your AR larger and more stable. They also provide a more robust detection. We have designed a UX with a sweet workflow to learn new areas of the markers.
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 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.
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.
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 ;)
