A-Frame & ar.js: Multiple markers & boxes

Question

Is there any proof of concept of how to implement multiple AR markers w/ A-Frame?

Ex. Something like this: https://www.youtube.com/watch?v=Y8WEGGbLWlA

The first video in this post from Alexandra Etienne is the effect I’m aiming for (multiple distinct AR "markers" with distinct content): https://medium.com/arjs/area-learning-with-multi-markers-in-ar-js-1ff03a2f9fbe

I’m a bit unclear if when using multiple markers they need to be close to each-other/exist in the same camera view

This example from the ar.js repo uses multiple markers but they're all of different types (ie one is a Hiro marker, one is a Kanji marker, etc): https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/multiple-independent-markers.html

The multiple independent marker example that you linked to works fine.... so you want the Aframe scene to render on each of multiple copies of the same marker image? — mnutsch, Aug 20 '18 at 02:57
Should have been more clear-- I'd like to use the same marker type (ie qr code of some kind) but each has different content within them (ie a qr marker with data 123456789 and a qr marker with data 987654321) — Victor, Aug 20 '18 at 16:16
With that example, the number of unique tags appears to be limited by how many different tag types exist — Victor, Aug 20 '18 at 16:27
QR code example (scan and then use Hiro): https://medium.com/arjs/ar-code-a-fast-path-to-augmented-reality-60e51be3cbdf — Victor, Aug 20 '18 at 17:53
this would work, too: you could create QRcodes with links like example.com/ar.html?id=123 which create different models on the same AR marker like Hiro. The obvious limitation is that users need to rescan the QRcode on every marker. — dirkk0, Aug 20 '18 at 18:15
there is this multiple-independent-markers.html for A-Frame, is there an example for Three.js? — Suisse, Apr 07 '21 at 19:14

Piotr Adam Milewski · Answer 1 · 2019-10-30T21:32:15.250

tldr: working glitch here.
Learn the area (the image is in the assets), click the accept button, and toggle the marker helpers.

Now, a bit of details:

1) Loading saved area data

Upon initialisation, when ar.js detects, that you want to use the area marker preset, it tries to grab a localStorage reference:

localStorage.get("ARjsMultiMarkerFile")

The most important data there is an array of pairs {markerPreset, url.patt} which will be used to create the area.
Note: By default it's just the hiro marker.

2) Creating an area data file

When you have debugUIEnabled set to true:

<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true'>

There shows up a button "Learn-new-marker-area". At first glance it redirects you to a screen where you can save the area file. There is one but: by default the loaded learner site is on another domain.

Strictly speaking: ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/

Any data saved there won't be loaded on our website, for local storage is isolated per origin.

To save and use the marker area, you have to create your own learner.html. It can be identical to the original, just keep in mind you have to keep it on the same domain.

To make the debugUI button redirect the user to your learner html file, you need to set

ARjs.AnchorDebugUI.MarkersAreaLearnerURL = "myLearnerUrl.html"

before the <a-marker>s are initialized. Just do it in the <head>.

Once on the learner site, make sure the camera sees all the markers, and approve the learning.

It should look like this:

Once approved, you will be redirected back to your website, the area file will be loaded, and the data will be used.

my simple glitch [here](https://glitch.com/edit/#!/aframe-ar-area?path=index.html:18:0) — Piotr Adam Milewski, Aug 25 '18 at 12:49
Marker learner is working again. Check out: https://github.com/jeromeetienne/AR.js/issues/283#issuecomment-507312601 — droid001, Jul 02 '19 at 06:33
@droid001 Thanks for the info, i'll retry my steps and post the results ! — Piotr Adam Milewski, Jul 02 '19 at 07:27
@droid001 I've updated my anwser though the solution seems to be more suitable for a medium tutorial than SO answer :P — Piotr Adam Milewski, Jul 02 '19 at 21:49
Could you update the first link (`tldr: working glitch here.`) which only leads to a .png? — droid001, Jul 03 '19 at 12:10
@droid001 snap, it got mixed up when i was removing the old anwser. I've updated the link ! — Piotr Adam Milewski, Jul 03 '19 at 12:12

score 1 · Answer 2 · answered Aug 20 '18 at 09:26

As @mnutsch stated, AR.js does what you want.

You can display two different models on two different markers. If the camera doesn't see one of the markers the model vanishes (or stays where it was last, depending on your implementation.

The camera doesn't need to see both.

Screenshot: https://www.dropbox.com/s/i21xt76ijrsv1jh/Screenshot%202018-08-20%2011.25.22.png?dl=0

Project: https://curious-electric.com/w/experiments/aframe/ar-generic/

Also, unlike Vuforia, there is no 'extended tracking' - once the code is out of sight, you can't track anymore.

He wants to use multiple markers as one. You should be able to create the "area" with "area-learning". Its supposed to be more stable than a single marker. — Piotr Adam Milewski, Aug 20 '18 at 22:33

A-Frame & ar.js: Multiple markers & boxes

2 Answers2

1) Loading saved area data

2) Creating an area data file

Linked