Ar.js: Hiro working great but custom markers not working

[javismiles]

Hi,
I'm trying all the examples of AR.js+Aframe, all works great with Hiro marker, but i can't manage to make them work with any custom marker, simple, not simple, detailed, not detailed, any kind, won't be recognized, Hiro works great, custom markers just don't work for me, what am I missing? I'm using the simple code available on your pages and loading custom markers with "a-marker type='pattern' patternUrl='jmarker.patt'" etc,
thank you and congrats for this great project

[enesser]

@javismiles Going to try this myself - but what format are the markers in? How do you create them?

[javismiles]

hey enesser, thank you, its very simple:

a) I design the marker with Photoshop, following similar markers out there, making any changes i want
b) I then submit the generated .PNG file to an online app like this one:
https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
c) which generates a .patt file which is what I then link to in the code

[MatkOJ]

as in https://github.com/jeromeetienne/AR.js/issues/164

• Modify the code in aframe.js (aframe-ar.js) following this

• Use this code in html:
  <a-marker-camera preset='custom' url='your-marker.patt'>...</a-marker-camera>

[javismiles]

did the changes, but so far its not working
I changed the lines suggested in #164
and then used

<a-marker preset='custom' url='rocket.patt'> <a-box position='0 0.5 0' material='color: red;'></a-box> </a-marker>

im using for example a rocket marker suggested in other places,
created with your online app. the .patt

but nothing, not being recognized

Console:

A-Frame Version: 0.6.0 (Date 30-06-2017, Commit #34d1988)
index.js:87 three Version: ^0.84.0
index.js:88 WebVR Polyfill Version: ^0.9.35
browser.js:111 extras:primitives:warn Mapping keys should be specified in lower case. The mapping key minConfidence may not be recognized
browser.js:111 extras:primitives:warn Mapping keys should be specified in lower case. The mapping key hit-testing-renderDebug may not be recognized
three.js:19802 THREE.WebGLRenderer 84
aframe-ar.js:6993 AR.js 1.5.1 - trackingBackend: artoolkit
aframe-ar.js:6472 ARjs.Anchor - changeMatrixMode: modelViewMatrix / markersAreaEnabled: false
aframe-ar.js:4751 THREEx.ArMarkerControls: 'markersAreaEnabled' is not a property of this material.
setParameters @ aframe-ar.js:4751
THREEx.ArMarkerControls @ aframe-ar.js:4737
ARjs.Anchor @ aframe-ar.js:6485
(anonymous) @ aframe-ar.js:8214
setInterval (async)
init @ aframe-ar.js:8173
updateProperties @ component.js:263
module.exports.Component @ component.js:50
i @ component.js:450
value @ a-entity.js:377
value @ a-entity.js:544
e @ a-entity.js:513
value @ a-entity.js:495
(anonymous) @ a-entity.js:306
(anonymous) @ a-node.js:117
Promise resolved (async)
value @ a-node.js:115
value @ a-entity.js:302
value @ a-entity.js:94
value @ a-register-element.js:150
value @ a-register-element.js:150
aframe-ar.js:2 Allocated videoFrameSize 1228800
aframe-ar.js:2 Pattern detection mode set to 1.

[javismiles]

I finally made it work, it works now ;)

however, just to let you know, on my Nexus 5X , the tracking using a simple basic box, is really not goody, can't follow it with precision, it's all over the place

[cypri1]

@javismiles how did you make it work? I have the same problem

[javismiles]

hey Cypri, im still not sure if the problem is the marker itself, but I made it work with a very simple marker i built and processed through https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

and this is the code that works for me:

<a-scene embedded arjs='sourceType: webcam;'> <!-- handle marker with your own pattern --> <a-marker preset='custom' url='n2.patt'> <a-image src="myimg.jpg" position="0 0 0" rotation="90 180 0 "> </a-marker> <!-- add a simple camera --> <a-entity camera></a-entity> </a-scene>

the only pity so far is that in my nexus 5x, the tracking speed is not good enough yet, when I move the camera, the figure or image etc attached doesn't quite follow in real time, that's the only pity,

[cypri1]

It's good thanks for your help @javismiles you save my day =)

[fofaria]

hey @javismiles, i made the changes suggested on #164 and i've added your code snippet but still nothing :/.
Does your marker follow any conventions or it's just and image you've uploaded to the generator?

Thank you in advance.

[javismiles]

hey friends, no conventions, i created it with photoshop, simple stuff, exported as png then uploaded to generator, it should work,
I'm a big fan of ar.js, this is wonderful work by Jerome, but still, and normal, quite a bit of chaos with documentation and also a-frame and ar.js many interconnection issues (like the issues with cursor), so it's early days, i wish i could help in any way, with documentation etc, this is wonderful work and we all support it, I hope it will become more and more stable, great job

[MWalid]

Ah still doesn't work,
From the chrome inspector I see that pattern-marker.patt is not loaded at all,
No luck till now!
I used the mentioned code <a-marker preset='custom' url='pattern-marker.patt'>
Can u help? @javismiles

[javismiles]

hey, for me it always works now MWalid,
Im using <a-marker preset='custom' url='n2.patt'>
and a very simple marker,
try to use the Hiro standard marker but as a custom marker to make sure, get a Hiro marker online, save it, upload it to Jerome tool, generate the .patt file, then put it in the right folder, upload it,
and try with that, as a test

[gayatrihimthani]

@javismiles
I tried your solution mentioned above, I am still not able to work with custom marker.
My marker has a single word text, still it does not work. Here is my code.

Can you please share your code with patt file, it will be very useful for a quick try. Thanks

I tried this link https://github.com/u4bi/simple-ar.js and this works fine with custom marker.

[WhiteRick]

@javismiles Can you post how you did your marker step by step?
I'm also trying with custom marker and it doesn't works, only Hiro marker works :(
I did an image with gip, nothing complicated just the word "ter" uploaded the image on https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
Downloaded the .patt file and printed the image
On my html page y use your code

But it doesn't recognizes my marker it just recognizes hiro marker :( any idea??

[kvanderd]

@WhiteRick

Here are the steps.

1. Add to ar.js:

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

1. Create your marker with a background color 240, 240, 240. Upload to: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html:

You can try this one - I am currently using this in one of my projects and it works: https://katharine.org/wp-content/uploads/2017/11/MASTER-marker-for-.patt-file-for-PYTHON.jpg

1. Add it to your code:
   <a-marker-camera preset='custom' type='pattern' url='assets/python.patt'></a-marker-camera>

[WhiteRick]

Hi @kvanderd !!

Thanks a lot by your reply I did the steps you wrote but it still doesn't works
I added the code to AR.jsaframebuldaframe-ar.js
My main directory where I compiled the library is AR.js, I have the http-server running

The code in aframe-ar.js modified is:
// honor this.data.preset
if( _this.data.preset === 'hiro' ){
arProfile.defaultMarkerParameters.type = 'pattern'
arProfile.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
arProfile.defaultMarkerParameters.markersAreaEnabled = false
}else if( _this.data.preset === 'kanji' ){
arProfile.defaultMarkerParameters.type = 'pattern'
arProfile.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
arProfile.defaultMarkerParameters.markersAreaEnabled = false
}else if( _this.data.preset === 'area' ){
arProfile.defaultMarkerParameters.type = 'barcode'
arProfile.defaultMarkerParameters.barcodeValue = 1001
arProfile.defaultMarkerParameters.markersAreaEnabled = true
else if( _this.data.preset === 'custom' ){
arProfile.defaultMarkerParameters.type = 'pattern'
arProfile.defaultMarkerParameters.patternUrl = _this.data.patternUrl;
arProfile.defaultMarkerParameters.markersAreaEnabled = false
}else {
// console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset)
}

Then I downloaded your marker and uploaded to https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

I downloaded the pdf, printed it, downloaded the .patt file and named it as your code in directory assets/python.patt

My html code is this:

Any idea where the failure is?

PS: now the hiro marker doesn't works with these changes on my demo page

Best Regards
Ricardo

[kvanderd]

@WhiteRick sounds like you followed the steps correctly. If you post a link to your repo I can take a look.

[WhiteRick]

Thanks a lot by your reply @kvanderd at this moment I don't have a repo, in fact I'm new with AR =) let me upload my code it and I'll send you the link

Best Regards
Ricardo

[WhiteRick]

@kvanderd Thanks a lot by your time, I've found my mistake, when I copied the code to fix the library I erased a close bracket } on the else if sentence.

Now I've added it and the custom marker works =)

Best Regards
Ricardo

[kvanderd]

@WhiteRick Great news. Glad I could help.

[cweise]

Hi, I have also problems to get my marker running:

<a-scene light="defaultLightsEnabled: true" embedded arjs> <a-assets> <a-asset-item id="santa" src="/assets/data/santa.gltf"></a-asset-item> </a-assets> <a-marker type="pattern" url="btc.patt"> <a-entity animation-mixer gltf-model="#santa" rotation="-90 0 0" scale="0.3 0.3 0.3"></a-entity> </a-marker> <a-entity camera></a-entity> </a-scene>

It only loads hiro pattern but not my custom one. Do you have any ideas?

[ultradyran]

Hi, @kvanderd i changed the code and it seemed only work with but not , any fix? I recently read from other threads trying to get an event call when the maker got detected and it only works with .
Also, how do I prevent the 3D object from blocking the camera view at initial start up?

[Vamoss]

This is the solution:
https://github.com/jeromeetienne/AR.js/issues/216#issuecomment-346906569

[polyzer]

Hello! I made as wrote in #216 , But it doesn't work. Anybody can provide an archive with working code? (aframe-ar).

[mattGraphics]

The solution offered by @kvanderd in https://github.com/jeromeetienne/AR.js/issues/216#issuecomment-346906569 isn't working for me either. Would love to know if there's a bug or if it's something i'm doing wrong.

[kvanderd]

@mattGraphics @polyzer

I wrote up a blog post about how to get this working - hopefully it will provide more context:
https://katharine.org/tutorials/custom-markers-ar-js/

[mattGraphics]

Hi @kvanderd thanks for your message.

As a result of your blog post I have found out where I was going wrong - the custom marker doesn't work for me unless it is stored somewhere on web server (in my case my github repository), not referenced locally on my computer. Once I had uploaded the custom marker to github and changed the 'url' accordingly it worked fine. Many thanks!

[stevehadley]

@mattGraphics I'm still having issues with this even after putting my custom .patt file on a remote server, following https://katharine.org/tutorials/custom-markers-ar-js/ and trying different markers etc, could you please post a working code example? I've been trying to get this to work all day

[mattGraphics]

Hi @Sevrex you can try my test site here: https://github.com/mattGraphics/mattGraphics.github.io
this uses the custom marker: https://github.com/mattGraphics/mattGraphics.github.io/blob/master/assets/big-m.pdf

I noticed @jeromeetienne has made some changes to ar.js in the last few days, so the issues may have been resolved.

[tomtomtong]

yes just change the reference script to the 1.5.5 version. Then all solve

[vettorazi]

hey! i made work, deleting the camera-static tag and putting a-marker-camera tag in the bottom of the worked fine!
idk if this helps but i uploaded the .patt to my github (might help, idk)

here's the code if helps anyone:


position="0 0.5 0"
scale="0.005 0.005 0.005"
gltf-model=”url(prebussola/scene.gltf);”>

  </a-entity>

</a-anchor>
<a-marker-camera preset='custom' type='pattern' url='https://raw.githubusercontent.com/vettorazi/aframe-gltf-models/master/marker.patt'>

[stevehadley]

@mattGraphics finally got this working! Thanks to your example I was able to rule out code and found that it was the marker itself that was causing issues, cheers

[jhonyxf]

@mattGraphics how do I display the gif by moving?
or display video? in your example code did not work

[mattGraphics]

Hi @jhonyxf When you say 'display the gif' do you mean display an animated gif? I haven't tried ar.js with an animated gif. I might try it myself later.

I just tested my .mov video example again ( https://mattgraphics.github.io/index-video.html ) and it worked fine. Make sure you're using the same pattern file: https://github.com/mattGraphics/mattGraphics.github.io/blob/master/assets/big-m.pdf

I wonder whether my video file may not work on some operating systems perhaps?

[jhonyxf]

Hello @mattGraphics. I'm Brazilian, I'm sorry, my English. Yesterday when I tested the video it was displaying a blue screen in place of the video. I'm using android lollipop 5.1, thanks for the feedback

[mattGraphics]

Hi @jhonyxf I'm not sure, I think it may be the video format I've used may not work on your Operating System? I'm not an expert - perhaps try the code with a video file you know works on your OS?

[jhonyxf]

Hello @mattGraphics , thanks. I'm going to do a test with a video that runs on my smartphone and will return if it worked. Did you test with the gif?

[mattGraphics]

Hi @jhonyxf Yes I did try it with an animated gif - it didn't work for me unfortunately.

[dlemm]

Because I stumbled over where to put it in order to make it work I just would like to add just where to put the code from @kvanderd
as she mentioned in her blog.post search in the aframe/build/aframe-ar.js (somewhere around line 2899) file for:

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

at the end of this if else put her code snippet:

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

in your html file put

<a-marker preset='custom' type="pattern" url='path/to/your/pattern.patt'>

then it should work. It does for me.

[nicolocarpignoli]

can someone please make a PR for this?

[abhinav22rana]

hey, i have made rotate globe demo on AR.js using hero marker, it is working fine... I wanted to add some touch event like zoom in zoom out on screen tab...can u tell any solution ??

[IgorDePaula]

This not work for me too =/

[nicolocarpignoli]

closing as now answer from author for a long time

[IgorDePaula]

What? Anyone not answered me.

[nicolocarpignoli]

Sorry, close that for mistake. I have done a clean to all stale issues. This one was not to be closed. Sorry again :)

[commentatorboy]

@IgorDePaula What is the problem exactly?
Can you share some code? or the marker?

[iggykov]

I tried to follow all steps and comments in this thread and so far it is not working for me.
What am I doing wrong?

Below is my code and the custom marker is also attached. Sorry for the size of this. I went to the Trainer and created this patt file as well as printed this.

Basics:
I set the project-folder on my desktop. Inside the Index.html and the pattern_IK.ptt file.
I am opening my code in Firefox (found this to work best for Nicolo's Demo with yellow cube) and writing in SublimeText.

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js">

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

</script>

  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='debugUIEnabled: false; sourceType=webcam;'>

        <a-marker preset="custom" type="pattern" patternUrl="/assets/pattern-IK.patt">
            <a-box position='0 0.5 0' material='color: yellow;' opacity='0.5'>
            </a-box>
            </a-marker>

        <a-marker-camera preset="custom" type="pattern" patternUrl="/assets/pattern-IK.patt">
            </a-marker-camera>

      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

[mattGraphics]

@iggykov When I couldn't get it to work, I used an external url to the marker instead of it being local to the html file. So instead of it being:

<a-marker-camera preset="custom" type="pattern" patternUrl="/assets/my-patt.patt">
            </a-marker-camera>

i changed it to:

<a-marker-camera preset='custom' type='pattern' url='https://raw.githubusercontent.com/mattsGithub/randomfiles/master/my-patt.patt'></a-marker-camera>

That resolved the problem for me - maybe give that a go?

https://github.com/jeromeetienne/AR.js/issues/216#issuecomment-371060214

[clubfrills]

Is this deprecated? Having similar issues using custom markers. On desktop chrome, I'm getting "markersAreaEnabled :false" on my window.

I've tried setting to a custom URL from within my Glitch.com assets with no luck. My .patt files are uploaded there.

[commentatorboy]

@clubfrills Can you share the glitch? Or the code? Kind of hard to know why it is like that.

[clubfrills]

This was solved, it was actually the same issue as an above commenter -- some of the AR marker examples on github and webpages are not the same color layout as the marker generator provided. The generator markers worked perfectly.

Matthew Pietrucha
Adjunct Professor of Music, Worcester Polytechnic Institute
IMGD Graduate Student

---

From: Hamun [e-mail]
Sent: Thursday, July 18, 2019 4:00 PM
To: jeromeetienne/AR.js [e-mail]
Cc: Pietrucha, Matthew [e-mail]; Mention [e-mail]
Subject: Re: [jeromeetienne/AR.js] Hiro working great but custom markers not working (#216)

@clubfrillshttps://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fclubfrills&data=02%7C01%7Cmpietrucha%40wpi.edu%7C74548aae480646c2dfb308d70bba8b6a%7C589c76f5ca1541f9884b55ec15a0672a%7C0%7C0%7C636990768144214667&sdata=7G4DuiZMxQHcTNowtyvuGJmzghNx2FuMLbc9QoxmG68%3D&reserved=0 Can you share the glitch? Or the code? Kind of hard to know why it is like that.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjeromeetienne%2FAR.js%2Fissues%2F216%3Femail_source%3Dnotifications%26email_token%3DAHPO75JYP7ZCOLLZOVGADALQADDUZA5CNFSM4D6EAU3KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2JTTLY%23issuecomment-512965039&data=02%7C01%7Cmpietrucha%40wpi.edu%7C74548aae480646c2dfb308d70bba8b6a%7C589c76f5ca1541f9884b55ec15a0672a%7C0%7C0%7C636990768144214667&sdata=9E6mIM%2FyGtwkgAUAQ12rhHTVRinScFDT6Vk7ts5jboA%3D&reserved=0, or mute the threadhttps://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAHPO75JQ5FGTSPFZ2FIGQ5TQADDUZANCNFSM4D6EAU3A&data=02%7C01%7Cmpietrucha%40wpi.edu%7C74548aae480646c2dfb308d70bba8b6a%7C589c76f5ca1541f9884b55ec15a0672a%7C0%7C0%7C636990768144224666&sdata=C62iT6JmQZP0fE6Jxak24Zz59IQQZS3ZFQhrA7nxcp8%3D&reserved=0.

[Beelzenef]

hello there!

all good with 'Hiro' marker, but with custom marker... I'm facing some problems. I guess the marker is not recognised, nothing is showing

this is my code:

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

<body style='margin: 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-marker preset='custom' type='pattern' url='pattern.patt'>
            <a-entity obj-model="obj: url(model.obj); 
                                 mtl: url(model.mtl)">
            </a-entity>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
</body>

My marker is as simple as this one.

All I get is aframe-ar.js:4797 THREEx.ArMarkerControls: 'markersAreaEnabled' is not a property of this material. message through browser console and markersAreaEnabled:false in the result page... what can I do? any ideas?

[nicolocarpignoli]

if you put a simple instead of it will show it?

[nicolocarpignoli]

also use version 1.7.5 at least for ar.js and 0.9.0 for aframe

[Beelzenef]

hello, @nicolocarpignoli, thanks for the quick answer! updated versions, using a simple box, same result

showing the code again just in case:

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.5/aframe/build/aframe-ar.js"></script>

<body style='margin: 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-marker preset='custom' type='pattern' url='pattern.patt'>
            <!-- <a-entity obj-model="obj: url(model.obj); mtl: url(model.mtl)"></a-entity> -->
            <a-box position='0 0.5 0' material='color: yellow;'></a-box>
        </a-marker>

        <a-entity camera></a-entity>
    </a-scene>
</body>

[Beelzenef]

I'm back!

I started reading again about markers... and it seems that my marker wasn't that simple as I thought... maybe the vertices of the 'w' letter? I don't know, but I tried with a simpler marker, just an 'I' letter, just horizonal and vertical lines, and that's it!

thanks for your time and help 😄

[commentatorboy]

@Beelzenef I would recommend that you used a "pixelated" font, since that is more likely to work due to how .patt is setup.
https://github.com/jeromeetienne/AR.js/issues/437#issuecomment-446974868

If it works then we should properly close this issue?

I can not reference @1155077754 but he/she should try and do that as well instead of plain white marker.

[Beelzenef]

I will try with pixelated font then, thanks a lot!

[droid001]

Isn't it recommended to use a 16x16 grid? What I saw in .patt files is the matrix was of this size and one can speculate that detection would be best thereof.

[commentatorboy]

That I do not know. But I know that Nicolo created this to show what types of barcodes worked.
https://github.com/nicolocarpignoli/artoolkit-barcode-markers-collection

[Beelzenef]

Working with pixelated fonts and designs works fine, thanks for the advice, @commentatorboy! 🤘

[GregLMcDonald]

I found that the marker training tool (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html) sometimes downloaded a .patt file full of zeroes. If your custom marker is not working, be sure to take a look in the .patt file and see whether the contents makes sense and reflect the pattern you want.

In my implementation, the Hiro marker preset was working correctly. To check whether it might be the.patt file that was the problem (rather than the syntax of my code), I fetched a copy of the Hiro pattern file (https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/marker-training/examples/pattern-files/pattern-hiro.patt) and used that as my "custom marker". It worked great. That's what prompted me to look inside these files.

I refreshed the marker training page, uploaded my image file again and downloaded the marker once again and this time there were not just a bunch of zeroes. Hope that helps!

[kkaung]

I found that the marker training tool (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html) sometimes downloaded a .patt file full of zeroes. If your custom marker is not working, be sure to take a look in the .patt file and see whether the contents makes sense and reflect the pattern you want.

How I got around the .patt file full of zeroes was to make the white parts slightly gray, put it through the training tool, and it generated a good .patt file. I was able to use it on my marker which has the white background instead of gray.

Does anyone know if there's a lib for the training tool? I need to be able to make custom patterns on the fly.

[nickvaras]

Just to confirm the comment by kkaung, the custom markers not working is probably caused by a poorly chosen marker, and the THREEx.ArMarkerControls: 'markersAreaEnabled' is not a property of this material. message does not mean that the library is not working. In the contrary, a well chosen custom marker will work fine, even while displaying that message.

[JamesBotterill]

It took me about 10 attempts to nail it and here's what I found.

1. Don't use dark background, grey worked best
2. Don't use transparent background, make sure it's solid.

[nicolocarpignoli]

“10 tips to enhance your AR.js app.”  https://link.medium.com/OfHzdKvX73

[GaryTimeless]

hey Cypri, im still not sure if the problem is the marker itself, but I made it work with a very simple marker i built and processed through https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

and this is the code that works for me:

<a-scene embedded arjs='sourceType: webcam;'> <!-- handle marker with your own pattern --> <a-marker preset='custom' url='n2.patt'> <a-image src="myimg.jpg" position="0 0 0" rotation="90 180 0 "> </a-marker> <!-- add a simple camera --> <a-entity camera></a-entity> </a-scene>

the only pity so far is that in my nexus 5x, the tracking speed is not good enough yet, when I move the camera, the figure or image etc attached doesn't quite follow in real time, that's the only pity,

is it possible to add multiple markers- so the camera can recognize two images/marker?

[PedroNan]

Someone can fix error with custom markers??
I'm trying to get a custom marker work but still can't. I considered using a gray background and type = "pattern" preset = "custom" but still not work. I'm using Glitch to host the code online. I would appreciate some help! thanks.