AR.js: Custom pattern is not being recognized

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>

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 48

Most upvoted comments

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

+31

WaveF on Sep 26, 2017

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?

sloschi on Sep 12, 2017

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.

Rolthar on Oct 12, 2017

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

nicolocarpignoli on May 11, 2018

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.

makeratl on May 9, 2018

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.

mattGraphics on Mar 7, 2018

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

kvanderd on Oct 4, 2017

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

nicolocarpignoli on Feb 20, 2019

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

leeprobert on Jun 26, 2018

See #127

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

mrmookie on Aug 18, 2017