0

I'm trying to set up AR.js for multimarkers as seen in the picture: barcode markers on wall The idea is to play one video in the space between the markers.

However, I'm confused as to how this can be done. I've tried to set up the multimarker player and learner, but many of the .js files they refer to are no longer found at the AR.js github. And I don't know how to tell them to look for these particular markers.

Would you be kind enough to guide me?

Thank you so much!

Tobin
  • 3
  • 1
  • 1
    Did you try doing stuff from [this](https://stackoverflow.com/questions/51850930/a-frame-ar-js-multiple-markers-boxes/52017472#52017472) and [this](https://stackoverflow.com/questions/58623059/any-way-to-handle-more-than-one-multimarker-area-in-ar-js-a-frame) thread ? – Piotr Adam Milewski Mar 18 '21 at 10:02
  • I've tried to piece it all together using what I can find online, including the threads you kindly linked to, but I think I'm missing something ... (I also realised I had accidentally used the outdated AR.js player and learner files, which explains the outdated .js references I mentioned above) 1. I now copied the entire AR.js-master files to my server 2. I accessed the player.html through my phone 3. The page opens up and the camera is working, but when I press the 'Stop' button, nothing happens What am I doing wrong so far? Thank you @PiotrAdamMilewski for your time and attention! – Tobin Mar 18 '21 at 11:01
  • I'll try to re-create it with the newest ar.js version. The whole process is quite convoluded, maybe creating a legit tutorial would be a good idea :| – Piotr Adam Milewski Mar 18 '21 at 13:44
  • @PiotrAdamMilewski That would be fantastic, thank you !! I look forward to checking out your re-creation :) – Tobin Mar 18 '21 at 14:32
  • @PiotrAdamMilewski Also fyi in case it’s helpful - the barcodes I used are four of these: https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%204x3%20(A4).pdf However I’m still clueless as to how they’re added as markers to be ”learned” :) – Tobin Mar 18 '21 at 15:30
  • tried to re-create my stuff, ended up making a primitive config generator. Feel free to share any thoughts about it – Piotr Adam Milewski Mar 19 '21 at 13:17
  • @PiotrAdamMilewski It works with the markers I have !!! Thank you !!! What a relief. It took me a while to figure out what I need to do with the generated .json (= replace the info in /data/hiro_0_multi.js for anyone as clueless as me!) I'm very grateful for your generosity and amazed at how quickly you developed this important improvement. Now I just need to replace the 3D object with my video- Do you think it's better to do it with three.js or is aframe sufficient? I'm making something for an event, so I need the AR experience to be the same on as many different devices as possible ... – Tobin Mar 19 '21 at 14:42
  • I'd go with threejs only if you feel that there are performance issues ( in my case mostly when I've experimented with NFT markers ). Otherwise `a-frame` is easier to set-up / experiment. If I managed to solve the case, feel free to mark the answer :) And if you think the generator is useful, you can star the repo ;) I'll think about simplifying the instructions there. – Piotr Adam Milewski Mar 19 '21 at 14:54
  • @PiotrAdamMilewski Done! Thank you once again - you're awesome! :) – Tobin Mar 19 '21 at 15:09
  • glad I could help :) – Piotr Adam Milewski Mar 19 '21 at 15:13

1 Answers1

1

Try out this multimarker config generator.
If You fill the inputs with <type, value/path> pairs, for example:

enter image description here

You should be able to use the generated config for creating as a marker area.

The above config creates an area consisting of a "0" barcode and "hiro" marker - If the barcode or marker is covered, the model still stays visible ( drone by Willy Decarpentrie).

enter image description here

DIY

Setting up ar.js for multimarkers works the same for patterns and barcodes.

You need to

  1. Provide an array of {type, path/value} pairs to a THREEx.ArMultiMakersLearning object. This is done in the learner example.

  2. Grab the config string using the THREEx.ArMultiMakersLearnings .toJSON() function.

  3. Save the file at the ARjsMultiMarkerFile localStorage item.

  4. Set the marker type to area at your website.

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42