Menu
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
664
What is the A-Frame? The A-Frame is used to identify points at the same level or elevation. These points can be joined to form an imaginery line joining points at the same elevation above sea level.
A-Frame still works on standard desktop and smartphones. Performance: A-Frame is optimized from the ground up for WebVR. While A-Frame uses the DOM, its elements don't touch the browser layout engine.
A-Frame is an entity component system framework for Three. js where developers can create 3D and WebVR scenes using HTML. HTML provides a familiar authoring tool for web developers and designers while incorporating a popular game development pattern used by engines such as Unity.
HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.
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:
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.
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.
125
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
