jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.78k stars 2.22k forks source link

Hiro working great but custom markers not working #216

Closed javismiles closed 4 years ago

javismiles commented 6 years ago

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

clubfrills commented 5 years ago

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 notifications@github.com Sent: Thursday, July 18, 2019 4:00 PM To: jeromeetienne/AR.js AR.js@noreply.github.com Cc: Pietrucha, Matthew mpietrucha@wpi.edu; Mention mention@noreply.github.com 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.

1155077754 commented 5 years ago

hello, I have the problem as title. I just use plain white marker but it is not working. But work perfectly for the "hiro" marker. Here is my html code: < a-scene stat embedded arjs='trackingMethod: best; debugUIEnabled: false;'>< a-marker preset='custom' type='pattern' url='pattern/pattern-demoPatt.patt'><a -box position='0 0.5 0' material='color: green;'></ a-box></ a-marker>< a-entity camera></ a-entity>

and I have modified the aframe-ar.js: ... 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 ...

can you guys give me some help and give step by step instruction? Thank you very much.

P.S. my marker pattern-demoPatt

Beelzenef commented 5 years ago

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 commented 5 years ago

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

nicolocarpignoli commented 5 years ago

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

Beelzenef commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

droid001 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

GregLMcDonald commented 4 years ago

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!

kaunglvlv commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

GaryTimeless commented 4 years ago

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 commented 4 years ago

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.

ReshiWiz commented 2 years ago
  • ...

in url what to mention ..? path is not showing

M4RC0N3 commented 1 year ago

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

This work for me. Thanks man!!!! You are my hero