search

jeromeetienne / AR.js

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

Custom pattern is not being recognized #164

Closed sonalranjit closed 6 years ago

sonalranjit commented 7 years ago

Hi I am following your tutorial here I have made a custom marker pattern and uploaded it, and using the <a-marker-camera type='pattern' patternUrl='[path_to_mypattern]'></a-marker-camera> But it is not working, I cannot debug this. It console i see no errors. The marker is not loading, and it for reason just defaults to the Hiro marker.

These are the libraries im loading `

`
mrmookie commented 7 years ago

See #127 

<a-marker-camera> is something like
<a-marker-camera type='pattern' url='your-url-here'></a-marker-camera>
(not patternURL)
sonalranjit commented 7 years ago

@mrmookie i did try that as well, for <a-marker-camera> doesn't seem to working for me. What version of aframe-ar.js and aframe are you using?

wimvdc commented 7 years ago

I'm facing the same issue. Everything seems to default to the hiro pattern. I'm using:

<html>
<head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
    <a-marker-camera type='pattern' url='https://wiim.xyz/w.patt'></a-marker-camera>
    </a-scene>
</body>
</html>
shapetraceAdmin commented 7 years ago

I look at the aframe-ar.js it seems like its in the backlog the a-marker and a-marker-camera is tagged as FIXME. Ive resorted to the threejs version, which is working with custom markers.

sloschi commented 7 years ago

i have a similar issue. i am training custom markers with the online tool but none of them is recognized. I have created a gist with on of the pattern files. Is anything wrong with it? I don't think that i am doing anything wrong in the code, but please have a look .

@shapetraceAdmin you seem to have it working with three.js. perhaps you could have a look?

This is the marker: santas_hat

sloschi commented 7 years ago

i was able to solve this. The online marker generator tool used 0 instead of 255 for the white areas (you can see this in the linked gist above), so i colored it in a very light grey (240) and generated a new .patt file. now the marker is recognized correctly. I am not sure if this is a bug with the online tool?

LoganArnett commented 7 years ago

So I am getting a custom pattern to be recognized but the asset I am trying to display does not appear on the custom marker, however when I show the hiro marker and my custom marker the asset will be displayed on the hiro marker.

Not sure what is going on here

As soon as I take away either marker the asset is no longer displayed

WaveF commented 7 years ago

@LoganArnett I've solve this problem by the following steps:

  1. As @sloschi mentioned, change the image white part to light grey with rgb(240,240,240) and upload to online marker generate tool, then download the .patt file

  2. Modify the code in aframe.js following this

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

then it will work.

kvanderd commented 7 years ago

This worked for me. I had to make one change: <a-marker>...</a-marker> to <a-marker-camera>...</a-marker-camera>

Rolthar commented 7 years ago

I am getting this issue as well:

added this:

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

Generated my pattern with the online tool and got my .patt file.

Here is my code:

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="/AR/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-assets>
            <a-asset-item id="LOGO" src="models/3d Logo.obj"></a-asset-item>
            <a-asset-item id="LOGO_MAT" src="models/3d Logo.mtl"></a-asset-item>
        </a-assets>

    <!-- define a camera which will move according to the marker position -->
    <a-marker preset='custom' type='pattern' url='LogoMarker.patt'>
        <a-obj-model src="#LOGO" mtl="#LOGO_MAT"></a-obj-model>
    </a-marker>
    <a-entity camera></a-entity>

    </a-scene>
</body>

For some reason, it still catches the hiro pattern, and not my pattern, even when i look at the Network tab in dev tools on load, it gets the hiro pattern and my pattern is not to be seen.

vin-ni commented 7 years ago

@WaveF Awesome. I've been searching for a solution for 2 hours. This worked! Thanks a lot!

ClementTrois commented 6 years ago

Hi

There is a fixed code for custom marker? I have modify the code in aframe.js and use this code

<a-marker-camera preset='custom' type='pattern' url='a.patt'> <a-image listener geometry="primitive: plane" rotation="-90 0 0" scale="3 3 3" src="http://78.media.tumblr.com/57442b11b3ffb734dc617ba8881d8a06/tumblr_ozefn0U8Kg1rb7ns9o1_1280.jpg"></a-image></a-marker-camera>

but it don't work

mattGraphics commented 6 years ago

Does anyone know if the custom marker issue is resolved?

I've been trying for a few weeks with the many solutions offered across the web, but have found some comments that say custom markers still don't work as of Feb 2018. I see this guy ( https://github.com/u4bi-git/simple-ar.js ) got it to work, but that was Sept '17 and the problem seems to be more recent.

Every video on youtube uses just the Hiro marker.

Shouldn't it work if I just add the custom marker code below to Jerome's codepen: https://codepen.io/jeromeetienne/pen/mRqqzb 

<a-marker preset='custom' type='pattern' url='pattern-marker.patt'>

<a-text anchor="align" position="0 0.1 0" rotation="270 0 0" side="double" width="5" color="red" value="hello world"></a-text>
    </a-marker>
syamishere commented 6 years ago

Any Luck ?

mattGraphics commented 6 years ago

Hi @syamishere, according to @rdub80 it looks like @jeromeetienne merged and ran the latest build but did not run a release, so we are still on 1.5.1 from August 2017 which doesn't contain the updated code.

Read more on this thread: https://github.com/jeromeetienne/AR.js/pull/236#issuecomment-370255444

mattGraphics commented 6 years ago

I've solved the issue I had with custom markers so in case this helps anyone else: the custom marker doesn't work for me unless it is on a server (in my case my github repository), it didn't work when referenced locally on my computer. Once I had uploaded the custom marker to github and changed the 'url' accordingly it worked fine.

vettorazi commented 6 years ago

i uploaded the marker to my github repository, but seems it's not working. @mattGraphics can you share your code to see if it's my code or my marker the problem here?

mattGraphics commented 6 years ago

Hi @vettorazi You posted in this thread https://github.com/jeromeetienne/AR.js/issues/216 that you have now resolved the issue, but you're welcome to take a look at my code: https://github.com/mattGraphics/mattGraphics.github.io

alexxss commented 6 years ago

Hi, I'm having similar issue with custom marker. I have made sure to use gray instead of white, I referenced v1.5.5, I link to .patt on github server, and it was working up until yesterday. It just says markersAreaEnabled :false at the bottom of the page, neither hiro nor my custom works. Can anyone tell me what I did wrong? Below is part of my code. Link to my repo here. Thanks!

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
  <a-scene embedded arjs="sourceType: webcam;">
    <a-box position="0 2 1"></a-box>
    <a-marker-camera preset="custom" type="pattern" url="https://raw.githubusercontent.com/alexxss/custom-marker/master/marker.patt"></a-marker-camera>       
  </a-scene>
</body>
alexxss commented 6 years ago

It is suddenly working now. I have no idea what is different. I changed a bit of other stuff but referenced the same scripts and used the same components for <a-marker-camera> but it's working now. Would still like to know what could be the possible cause?

makeratl commented 6 years ago

I've been reading through a number of these - trying to solve my own version of the same problem. I've gotten to everything happy in the console, but no custom pattern is seen and recognized for the interactions. Having to guess it's something with my pattern, but at a loss to figure out what or understand why. Seems like several people above "got it working", but what is the magic step was that I'm missing.

My marker marker_test

My test (no change other than the custom market on example files: https://openhouse.looklisten.com/AR/aframe/examples/marker-camera.html

If anyone has insight... please do!

rdub80 commented 6 years ago

@befungle try this for the custom marker: `

Also try to make the interior of the marker HEX#ddd` that helps tracking

makeratl commented 6 years ago

@rdub80 Changed to the tag you recommended and updated the marker with the grey scale. Still not recognized as a marker and not generating AR overlay. Struggled with a similar marker challenge with an Android based AR last year, though one advantage is the marker generation system "graded" the marker quality and helped narrow down what images worked and what did not.

makeratl commented 6 years ago

@rdub80 - the hacker in me wanted to remove questions.... so I literally downloaded the Hiro marker (that works as a preset), ran it through the Custom Marker Maker, downloaded and loaded it.... Nothing. Yet, if I return it to "preset" and "hiro", that same image works.

rdub80 commented 6 years ago

@befungle make sure you use aframe 0.8.0 and this build: <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

makeratl commented 6 years ago

One more update - If I take the code from the patt.hiro default pattern and copy it into the custom pattern I made from the Hiro image, it works calling the pattern file.

The pattern file generated by the Custom Marker trainer (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html) is VERY different than the one found in the default library.

So, the problem seems to be in the pattern file generated by the marker-trainer. Image attached shows the default HIRO pattern against the marker generated online from the same image: screen shot 2018-05-09 at 1 45 47 pm

rdub80 commented 6 years ago

I am not sure what happened to your pattern file but there needs to be a distinctive border around your marker visible in code: this is what my custom patt file looks like image

makeratl commented 6 years ago

Interesting.... My efforts were to run the online upload, clicked the download, copy file to directory. I really want to give this project a run for it's possibilities in ideation and proof of concepts. However, I'm starting to feel like I'm going down a rabbit hole. I reviewed the code for pattern generation though that's much deeper into a review than I can see continuing on.

makeratl commented 6 years ago

Everyone who gets this far in the thread.... there's one more thing that is pretty important. The image posted for recognition's size must be pretty small. I found a post (https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462) that got past my issue by indicating the marker image should only be 16x16px. That's a pretty small image, but when I used that to build a marker it worked.

So, such a small image marker creates limits, but at least I have been able to make it work.

marcomarsala commented 6 years ago

The custom marker can be any photo or I need a simple figure?

I’m trying to achieve what is shown in this video: https://m.youtube.com/watch?feature=youtu.be&v=lj3SsXs9Qgc

That is video overlay on printed paper

nicolocarpignoli commented 6 years ago

@befungle I wrote that article, I'm glad it helped you :) If you need other informations just ask.

@marcomarsala It HAS to be a very simple figure. In general you can either use pattern marker or barcode marker, but in this thread we are talking about pattern ones. If you want to use them (you upload an image, and generate a .patt file) the given image has to respect some constraint. Keep in mind that the generated .patt file is an ASCII text file that describes the image you give, so the image has to be very very simple.

I invite you to read my article on Medium https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462 in which I collected all constraints for the input image for generating a pattern marker. Let me know if it helps.

leeprobert commented 6 years ago

Update on this: I got it working with aframe-v0.6.1-three-r86.min.js

nicolocarpignoli commented 6 years ago

I consider this solved. Feel free to re-open if not.

lewisdonovan commented 6 years ago

I can't get my marker to work, have followed the instructions here but still no luck. My code is in this repo and can be seen below:

<a-scene embedded arjs>
    <a-box position='0 0.5 0' material='opacity: 1;'></a-box>
    <a-marker-camera preset='custom' type='pattern' url='https://raw.githubusercontent.com/lewisdonovan/ar-js-testing/master/pattern-marker.patt'></a-marker-camera>
</a-scene>
CML-ecraft commented 6 years ago

I think your issue may be related to the issue I posted yesterday (#424 ). It looks like the pattern generator is creating invalid patterns. Color values are off and the values change between the views/section of the pattern code.

willyci commented 5 years ago

@befungle I wrote that article, I'm glad it helped you :) If you need other informations just ask.

@marcomarsala It HAS to be a very simple figure. In general you can either use pattern marker or barcode marker, but in this thread we are talking about pattern ones. If you want to use them (you upload an image, and generate a .patt file) the given image has to respect some constraint. Keep in mind that the generated .patt file is an ASCII text file that describes the image you give, so the image has to be very very simple.

I invite you to read my article on Medium https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462 in which I collected all constraints for the input image for generating a pattern marker. Let me know if it helps.

Thanks, it fixed my problem.

kaunglvlv commented 5 years ago

Did anyone get this to work with a white background like Hiro? If not, does anyone know how to generate the pattern file without the Marker Trainer?

nicolocarpignoli commented 5 years ago

please follow https://github.com/artoolkit/jsartoolkit5 markers are not an AR.js thing.

s3c7a commented 5 years ago

@LoganArnett I've solve this problem by the following steps:

  1. As @sloschi mentioned, change the image white part to light grey with rgb(240,240,240) and upload to online marker generate tool, then download the .patt file
  2. Modify the code in aframe.js following this
  3. Use this code in html: <a-marker preset='custom' type='pattern' url='your-marker.patt'>...</a-marker>

then it will work.

Hi @WaveF quick question. On your solution, you link to a source that's not live anymore, do you happen to have alternate or more information on that?

kaunglvlv commented 5 years ago

FYI, I've also "solved" my problem. Like everyone else, I created my .patt file using light gray instead of the white background. I was able to use this .patt file on my white marker.

I wish the .patt generator was fixed but this will work for now.

nicolocarpignoli commented 5 years ago

@kkaung please open a specific issue for this problem about marker generator, we will look forward to it: if you can identify the bug / problem specifically I can even make a PR by myself when i got time

juansho01 commented 5 years ago

@nicolocarpignoli i had an issue and question: Right now, im trying to read, multiple different Markers. Each one show a different content. This pattern are Images, some ones works, and other doesn't. Exist some documentation about what kind of images or specs for images on patterns?. Thanks

nicolocarpignoli commented 5 years ago

@juansho01 Hi, in this article I collected all the informations I have found and tested about pattern and barcode markers for AR.js : https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462.

Let me know if it helps.

Again, @kkaung or anybody who has experienced problems with the online marker generator, please open an Issue with the specific problem. I will try to look to it

NicolasPerl commented 4 years ago

I was able to get it to work by hosting the image remotely (like digital ocean or github) and setting that path as the url.

GaT11 commented 4 years ago

Hello, can one of you help me? When I try to use two or more different pattern my code doesn't work because by both of the pattern the red cube appears and not by one of the pattern the green one and by the other the red one.

This is my code (without the right url):

GaT11 commented 4 years ago

And i have another issue. My gltf-modell isn't animating like it should but the 3D-Model appears on screen. Can you please help me an write another Code that works into this Chat?

Here my code:

           <a-entity 
           gltf-model="url(bilder_ar/steve-gltf/scene.gltf)"  
           animation-mixer="clip:Armature.001; loop:2; timeScale: 5; 
           crossFadeDuration: 1">
           </a-entity>
PedroNan commented 4 years ago

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.

vadermemo commented 4 years ago

@LoganArnett I've solve this problem by the following steps:

1. As @sloschi mentioned, change the image white part to light grey with rgb(240,240,240) and upload to [online marker generate tool](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html), then download the .patt file

2. Modify the code in aframe.js following [this](https://github.com/wimvdc/AR.js/commit/950e82db6d0c3851647d429282c5ade52ee95891)

3. Use this code in html:
   `<a-marker preset='custom' type='pattern'  url='your-marker.patt'>...</a-marker>`

then it will work.

the link is broke :( => https://github.com/wimvdc/AR.js/commit/950e82db6d0c3851647d429282c5ade52ee95891 Can you send to another url?

yalegria commented 2 months ago

It's 2024 and I started playing with AR.js, but frustrated the custom markers is not working. I just can't make it work. I tried everything posted here.

Is this project still supported? What is other people looking at as alternatives to ar.js (if any)?

ak3d3 commented 2 weeks ago

It's 2024 and I started playing with AR.js, but frustrated the custom markers is not working. I just can't make it work. I tried everything posted here.

Is this project still supported? What is other people looking at as alternatives to ar.js (if any)?

I am frustrated too, webxr solve problem to me but its not possible to open on Iphone....