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>`

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-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>

`

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

2. 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

3. 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.js\aframe\buld\aframe-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-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

[tokarev-i-v]

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!

[vectris-dev]

@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:

[vectris-dev]

@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.