Any ar js multimarkers learning tutorial?

Question

I have been searching for ar.js multimarkers tutorial or anything that explains about it. But all I can find is 2 examples, but no tutorials or explanations.

So far, I understand that it requires to learn the pattern or order of the markers, then it stores it in localStorage. This data is used later to display the image.

What I don't understand, is how this "learner" is implemented. Also, the learning process is only used once by the "creator", right? The output file should be stored and then served later when needed, not created from scratch at each person's phone or computer.

Any help is appreciated.

Check [this](https://stackoverflow.com/questions/51850930/a-frame-ar-js-multiple-markers-boxes) out. Feel free to let me know how the anwser can be improved. — Piotr Adam Milewski, Jan 21 '20 at 10:32
hey @Piotr Adam Milewski, I already checked that post before. But I don't understand how the learner is implemented. I don't understand what toggle marker helper does, or reset marker area does. Also I tried using the learner directly, but it does not detect all markers (I have ABCDGF, and it detects ADGF). — Max, Jan 21 '20 at 12:35
I'll try to compile an anwser later if this will be still unanwsered. Or think of a tutorial, because there is much going on with multimarkers :P — Piotr Adam Milewski, Jan 21 '20 at 12:39
@PiotrAdamMilewski, great! I really appreciate it. Thank you. — Max, Jan 21 '20 at 13:03
This is all i can do for now, but it's hell of a complex topic. — Piotr Adam Milewski, Jan 21 '20 at 19:16

Piotr Adam Milewski · Accepted Answer · 2020-01-22T17:35:14.633

Since the question is mostly about the learner page, I'll try to break it down as much as i can:

1) You need to have an array of {type, URL} objects.

A sample of creating the default array is shown below (source code):

var markersControlsParameters = [
        {
            type : 'pattern',
            patternUrl : 'examples/marker-training/examples/pattern-files/pattern-hiro.patt',
        },
        {
            type : 'pattern',
            patternUrl : 'examples/marker-training/examples/pattern-files/pattern-kanji.patt',
        }]

2) You need to feed this to the 'learner' object.

By default the above object is being encoded into the url (source) and then decoded by the learner site. What is important, happens on the site: for each object in the array, an ArMarkerControls object is created and stored:

// array.forEach(function(markerParams){
var markerRoot = new THREE.Group()
scene.add(markerRoot)
// create markerControls for our markerRoot
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, markerParams)
subMarkersControls.push(markerControls)

The subMarkersControls is used to create the object used to do the learning. At long last:

var multiMarkerLearning = new THREEx.ArMultiMakersLearning(arToolkitContext, subMarkersControls)

The example learner site has multiple utility functions, but as far as i know, the most important here are the ArMultiMakersLearning members which can be used in the following order (or any other):

// this method resets previously collected statistics
multiMarkerLearning.resetStats()

// this member flag enables data collection
multiMarkerLearning.enabled = true 

// this member flag stops data collection
multiMarkerLearning.enabled = false

// To obtain the 'learned' data, simply call .toJSON()
var jsonString = multiMarkerLearning.toJSON()

Thats all. If you store the jsonString as

localStorage.setItem('ARjsMultiMarkerFile', jsonString);

then it will be used as the default multimarker file later on. If you want a custom name or more areas - then you'll have to modify the name in the source code.

3) 2.1.4 debugUI

It seems that the debug UI is broken - the UI buttons do exist but are nowhere to be seen. A hot fix would be using the 'markersAreaEnabled' span style for the div
containing the buttons (see this source bit).

It's all in this glitch, you can find it under the phrase 'CHANGES HERE' in the arjs code.

Thank you very much, I will get into it and come back to you whether it solves or not. Thanks! — Max, Jan 22 '20 at 10:12
in your [link](https://glitch.com/edit/#!/aframe-ar-area?path=index.html:18:0) you are using ar.js.02.07.js. I have checked the content and it's basically the same as ar.js file from current builds. But when I substitute it with ar.js it wouldn't work. Basically I have the same as you glitch, an index and an learner.html. But when I open my index it won't show anything other that the scene, it does not display any button. I'm pretty confused right now. — Max, Jan 22 '20 at 11:36
I just uploaded it. Never used glitch before, so hope this is ok: [link](https://glitch.com/edit/#!/join/09c14e38-c922-45d8-a2cb-25b57bad2eb2) — Max, Jan 22 '20 at 16:30
if you inspect the UI, You'll see that the buttons exist, but the style is all messed up. Check out my updated anwser and [this glitch](https://stack-59838820.glitch.me/) — Piotr Adam Milewski, Jan 22 '20 at 17:34
I appreciate your help a lot. I was not expecting the code to be broken. — Max, Jan 23 '20 at 07:51

Any ar js multimarkers learning tutorial?

1 Answers1