AR.js help/trouble using custom AR markers

Question

I need some help with using custom AR markers with AR.js. We have been running into some problems getting objects to initialize over the markers, after downloading the .patt file from the custom markers generator page. Everything is being tested client side on a Node.js server, but every time the webcam turns on nothing appears over an image of a python logo.

Code below:

<html>
  <head>
  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!--   <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script> -->
  <script src="aframe-ar.js"></script>

  </head>  
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs="sourceType: webcam;">
<a-marker preset="custom" type="pattern" url="pattern-marker.patt">
<a-box position="0 0.5 0" material="opacity: 0.5;"></a-box>
</a-marker>
</a-scene>
</body>
</html>

This conditional is in that aframe-ar.js file that is local to add the custom preset for the python image marker. We are using Google Chrome.

else if( _this.data.preset === 'custom' ){
  markerParameters.type = 'pattern'
  markerParameters.patternUrl = _this.data.patternUrl;
  markerParameters.markersAreaEnabled = false
}

I have just been using a local Node.js server to test, also I should mention that the default Hiro marker works but the custom image markers don't.

If anyone can point me in the right direction there is a reward! Contact me for details. Cheers.

Possible duplicate of [Is it possible to use bespoke markers?](https://stackoverflow.com/questions/45820170/is-it-possible-to-use-bespoke-markers) — Piotr Adam Milewski, May 20 '18 at 08:28
as far as i know it's not working properly right now, check out the question above — Piotr Adam Milewski, May 20 '18 at 08:32

Piotr Adam Milewski · Answer 1 · 2018-10-22T17:42:00.963

AR.js supports custom markers. You just need to :
1) create your own marker using this generator.
2) Let ar.js know that you want to use your marker:

<a-marker type="pattern" url="mypattern.patt">
  <a-entity myobject></a-entity>
</a-marker>

Glitch here.

Original anwser (outdated)
The current ar.js builds don't manage properly custom markers.

There are multiple github issues, and fixes, but as far as i know none of them was accepted to the official master branch.

I've managed to get custom markers working with this build, made by wimvdc.

You can try to make yourself a working build by modyfing the anchor-component.js file, (or the arjs-anchor component in the master build) by adding a special case for custom markers in the init function:

if( _this.data.preset === 'hiro' ) {

(...)

} else if ( _this.data.type === 'pattern' ) {
        arProfile.defaultMarkerParameters.type = 'pattern'
        arProfile.defaultMarkerParameters.patternUrl = _this.data.patternUrl;
        arProfile.defaultMarkerParameters.markersAreaEnabled = false
}

and then use it like this:

<a-marker type='pattern' url='patterns/w.patt'>
</a-marker>

This is exaclty what wimvdc did, check it out in his commit + refactor.

score 0 · Answer 2 · answered Oct 22 '18 at 10:58

When using AR.js without AFrame (like in this basic example), I've succeeded using custom markers using the custom marker generator page and following this procedure.

Ensure that the PNG file you upload to the generator does not contains any transparent pixels, or the .patt generated file will contain wrong values and your marker won't be recognized.

AR.js help/trouble using custom AR markers

2 Answers2