Custom pattern is not being recognized #164

sonalranjit · 2017-08-18T19:11:48Z

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 `<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>

The text was updated successfully, but these errors were encountered:

mrmookie · 2017-08-18T21:02:18Z

See #127

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

sonalranjit · 2017-08-18T21:38:40Z

@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 · 2017-08-21T15:49:47Z

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 · 2017-08-21T16:01:32Z

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 · 2017-08-23T13:27:05Z

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:

sloschi · 2017-09-12T11:58:05Z

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 · 2017-09-19T20:27:19Z

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 · 2017-09-26T02:12:26Z

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

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
Modify the code in aframe.js following this
Use this code in html:
<a-marker preset='custom' type='pattern' url='your-marker.patt'>...</a-marker>

then it will work.

kvanderd · 2017-10-04T01:26:02Z

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

Rolthar · 2017-10-12T19:49:50Z

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 · 2017-10-20T10:23:55Z

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

ClementTrois · 2017-12-03T19:16:11Z

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 · 2018-02-23T09:10:57Z

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 · 2018-03-03T16:43:01Z

Any Luck ?

mattGraphics · 2018-03-05T07:58:32Z

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: #236 (comment)

mattGraphics · 2018-03-07T15:09:41Z

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 · 2018-04-12T18:32:22Z

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 · 2018-04-13T08:13:44Z

Hi @vettorazi You posted in this thread #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 · 2018-04-18T12:17:56Z

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 · 2018-04-18T16:11:22Z

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 · 2018-05-09T16:00:39Z

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

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 · 2018-05-09T16:37:40Z

@befungle try this for the custom marker:
<a-anchor preset="custom" type="pattern" url="marker.patt" hit-testing-enabled='false'> <a-box></a-box> </a-anchor>
Also try to make the interior of the marker HEX #ddd that helps tracking

makeratl · 2018-05-09T17:18:18Z

@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 · 2018-05-09T17:24:50Z

@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 · 2018-05-09T17:43:04Z

@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 · 2018-05-09T17:46:55Z

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:

rdub80 · 2018-05-09T18:42:17Z

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

makeratl · 2018-05-09T18:52:21Z

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 · 2018-05-09T19:37:55Z

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 · 2018-05-10T17:34:23Z

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 · 2018-05-11T07:38:58Z

@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 · 2018-06-26T12:00:22Z

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

nicolocarpignoli · 2018-07-17T08:54:33Z

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

lewisdonovan · 2018-10-09T12:45:22Z

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 · 2018-10-19T14:14:51Z

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 · 2018-12-12T19:57:19Z

@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 · 2019-02-20T08:10:18Z

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 · 2019-02-20T08:51:41Z

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

s3c7a · 2019-03-04T18:44:11Z

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

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

Modify the code in aframe.js following this

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 · 2019-03-05T00:07:26Z

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 · 2019-03-05T08:01:27Z

@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 · 2019-03-05T17:23:46Z

@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 · 2019-03-06T21:47:35Z

@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 · 2019-11-08T22:18:36Z

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 · 2020-04-08T10:09:15Z

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

    <a-box color="green"></a-box>


    <a-marker-camera  preset="custom" type="pattern"
        url="....patt">
    </a-marker-camera>



    <a-box color="red"></a-box>
    <a-marker-camera preset="custom" type="pattern"
        url="...patt">
    </a-marker-camera>
</a-scene>

GaT11 · 2020-04-08T10:52:37Z

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 · 2020-09-30T01:01:22Z

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 · 2020-10-13T14:51:09Z

@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 · 2024-08-13T01:35:47Z

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

This was referenced Aug 21, 2017

Fix for custom marker problem (issue #164) #168

Closed

Custom Marker Training - Downloaded Pattern not working #127

Closed

sloschi mentioned this issue Aug 28, 2017

Unable to scan custom markers #172

Closed

LoganArnett mentioned this issue Sep 25, 2017

Custom Pattern Requires Hiro Pattern #202

Closed

MatkOJ mentioned this issue Oct 11, 2017

Hiro working great but custom markers not working #216

Closed

vin-ni mentioned this issue Oct 20, 2017

Custom Marker #144

Closed

nicolocarpignoli closed this as completed Jul 17, 2018

CharisisLalopoulos mentioned this issue May 7, 2022

Deliverable 2 merkourisa/Augmented-Reality#2

Open

3 tasks

Custom pattern is not being recognized #164

Custom pattern is not being recognized #164

Comments

sonalranjit commented Aug 18, 2017

mrmookie commented Aug 18, 2017 • edited Loading

sonalranjit commented Aug 18, 2017

wimvdc commented Aug 21, 2017

shapetraceAdmin commented Aug 21, 2017

sloschi commented Aug 23, 2017 • edited Loading

sloschi commented Sep 12, 2017

LoganArnett commented Sep 19, 2017 • edited Loading

WaveF commented Sep 26, 2017 • edited Loading

kvanderd commented Oct 4, 2017

Rolthar commented Oct 12, 2017

vin-ni commented Oct 20, 2017

ClementTrois commented Dec 3, 2017 • edited Loading

mattGraphics commented Feb 23, 2018

syamishere commented Mar 3, 2018

mattGraphics commented Mar 5, 2018

mattGraphics commented Mar 7, 2018 • edited Loading

vettorazi commented Apr 12, 2018 • edited Loading

mattGraphics commented Apr 13, 2018

alexxss commented Apr 18, 2018 • edited Loading

alexxss commented Apr 18, 2018

makeratl commented May 9, 2018

rdub80 commented May 9, 2018 • edited Loading

makeratl commented May 9, 2018

makeratl commented May 9, 2018

rdub80 commented May 9, 2018

makeratl commented May 9, 2018

rdub80 commented May 9, 2018

makeratl commented May 9, 2018

makeratl commented May 9, 2018

marcomarsala commented May 10, 2018 • edited Loading

nicolocarpignoli commented May 11, 2018

leeprobert commented Jun 26, 2018

nicolocarpignoli commented Jul 17, 2018

lewisdonovan commented Oct 9, 2018

CML-ecraft commented Oct 19, 2018

willyci commented Dec 12, 2018

kaunglvlv commented Feb 20, 2019

nicolocarpignoli commented Feb 20, 2019

s3c7a commented Mar 4, 2019

kaunglvlv commented Mar 5, 2019

nicolocarpignoli commented Mar 5, 2019 • edited Loading

juansho01 commented Mar 5, 2019

nicolocarpignoli commented Mar 6, 2019 • edited Loading

NicolasPerl commented Nov 8, 2019

GaT11 commented Apr 8, 2020 • edited Loading

GaT11 commented Apr 8, 2020 • edited Loading

PedroNan commented Sep 30, 2020

vadermemo commented Oct 13, 2020

yalegria commented Aug 13, 2024

mrmookie commented Aug 18, 2017 •

edited

Loading

sloschi commented Aug 23, 2017 •

edited

Loading

LoganArnett commented Sep 19, 2017 •

edited

Loading

WaveF commented Sep 26, 2017 •

edited

Loading

ClementTrois commented Dec 3, 2017 •

edited

Loading

mattGraphics commented Mar 7, 2018 •

edited

Loading

vettorazi commented Apr 12, 2018 •

edited

Loading

alexxss commented Apr 18, 2018 •

edited

Loading

rdub80 commented May 9, 2018 •

edited

Loading

marcomarsala commented May 10, 2018 •

edited

Loading

nicolocarpignoli commented Mar 5, 2019 •

edited

Loading

nicolocarpignoli commented Mar 6, 2019 •

edited

Loading

GaT11 commented Apr 8, 2020 •

edited

Loading

GaT11 commented Apr 8, 2020 •

edited

Loading