Ar.js: Custom Marker Training - Downloaded Pattern not working

[markleeyw]

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Used the default AR.js image, downloaded the pattern.

Code:

</a-scene>

Marker not detected. Does anyone get the same problem?

[MrRaam]

@markleeyw I think the best option is to train that and include its path in the source code. I did that manually and its working.

[markleeyw]

@MrRaam Any sample on what you did?

[Dinkelborg]

I'm getting the same error
I tried to create a customer marker with the website and get:
"Pattern Data read error!!
aframe-ar.js:2843 loadMarker(): Error loading pattern file /marker_0.
aframe-ar.js:2843 ARToolKitJS(): Unable to set up AR marker.
aframe-ar.js:2843 Out of memory!!"

I'm also stuck on what to try as I already tried a smaller marker its now less than 400x400 px

[MrRaam]

Where are you storing the pattern ? & are you changing the path files in
the ar.js ?
On Jul 13, 2017 12:07 AM, "Dinkelborg" [e-mail] wrote:

I'm getting the same error
I tried to create a customer marker with the website and get:
"Pattern Data read error!!
aframe-ar.js:2843 loadMarker(): Error loading pattern file /marker_0.
aframe-ar.js:2843 ARToolKitJS(): Unable to set up AR marker.
aframe-ar.js:2843 Out of memory!!"

I'm also stuck on what to try as I already tried a smaller marker its now
less than 400x400 px

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jeromeetienne/AR.js/issues/127#issuecomment-314858853,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab0zlFzuJNIqxT9lRwVwk0QbMttEu1NLks5sNRJdgaJpZM4OShOm
.

[markleeyw]

@MrRaam could you share how to did yours. It would be helpful

[Dinkelborg]

I generated the pattern here where the pdf generation doesn't work btw... but whatever

I then stored that as "pattern-marker.patt" in the root folder of my site (next to index.html) and then changed the example maker from

to

I also tried

Both cause the above mentioned errors - the patt-file looks normal to me - exact same amount of lines as the hiro example pattern and I can clearly see my marker logo in the numbers.

I followed these steps but it's just not working

[markleeyw]

@Dinkelborg yup .. i think the code ... a-maker-camera.... does not work somehow. .. i used their default marker too.

[markleeyw]

@Dinkelborg Found this but not time to try ... if you get it to work do let me know https://github.com/jeromeetienne/AR.js/issues/61
Thank you!

[Dinkelborg]

@markleeyw
Awesome man! Thanks a lot, it took quite a while to dig into the aframe-ar.js file, but if you create your own preset, as descried in the post you linked, it does work!

Now I still hope that they fix the regular tag implementation using the "type='pattern'" and "patternUrl" parameters since that wouldn't require changing the source of the library every time you want to use a custom marker.

[Dinkelborg]

You don't have to create your own data folder btw I kept everything as it is, created a custom variable (line 865)
THREEx.ArToolkitContext.hostURL = './'
directly under (line 864) THREEx.ArToolkitContext.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'

then I changed the Reset paragraph (line 1195 to 1217) to:

//////////////////////////////////////////////////////////////////////////////
//      Code Separator
//////////////////////////////////////////////////////////////////////////////

/**
 * reset all parameters
 */
THREEx.ArToolkitProfile.prototype.reset = function () {
    this.sourceParameters = {
        // to read from the webcam 
        sourceType : 'webcam',
    }

    this.contextParameters = {
        cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
        detectionMode: 'mono',
    }
    this.defaultMarkerParameters = {
        type : 'pattern',
        patternUrl : THREEx.ArToolkitContext.hostURL + 'pattern-marker.patt'
    }
    return this
};

(basically only change is under "this.defaultMarkerParameters" where you change the patternUrl)

and then I created a new Marker under (line 1255 to 1280):

//////////////////////////////////////////////////////////////////////////////
//      Marker
//////////////////////////////////////////////////////////////////////////////
THREEx.ArToolkitProfile.prototype.kanjiMarker = function () {
    this.contextParameters.detectionMode = 'mono'

    this.defaultMarkerParameters.type = 'pattern'
    this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
    return this
}

THREEx.ArToolkitProfile.prototype.hiroMarker = function () {
    this.contextParameters.detectionMode = 'mono'

    this.defaultMarkerParameters.type = 'pattern'
    this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
    return this
}

THREEx.ArToolkitProfile.prototype.myCustomMarker= function () {
  this.contextParameters.detectionMode = 'mono'

  this.defaultMarkerParameters.type = 'pattern'
  this.defaultMarkerParameters.patternUrl = THREEx.ArToolKitContext.hostURL+ 'pattern-marker.patt'
  return this
}

(see the last marker was added the rest is default)

and the last step is to add your marker preset to the init function (line 2729) preset check (line 2737 to 2752):

        // honor this.data.preset
        if( this.data.preset === 'hiro' ){
            this.data.type = 'pattern'
            this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
        }else if( this.data.preset === 'kanji' ){
            this.data.type = 'pattern'
            this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
        }else if( this.data.preset === 'area' ){
            this.data.type = 'area'
            // fall through
        }else if( this.data.preset === 'myCustomMarker'){
      this.data.type = 'pattern'
      this.data.patternUrl = THREEx.ArToolkitContext.hostURL+'pattern-marker.patt'
    } else {
            console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset)
        }

(see the pre-last statement if(this.data.preset === 'myCustomMarker')... )

After all of that you can just use your custom preset like the hiro preset so in the html, in the just swap the 'preset' value from 'hiro' to 'myCustomMarker' (or whatever you called yours

When you try, make sure to clear cache if it doesn't work instantly - but that was all works like a charm for me now

//PS//
Btw the pattern-marker.patt I downloaded from the website is in my root folder, that's why "hostURL" for me is "./" if you store your pattern file somewhere else, change this to the according path

[MrRaam]

Sorry couldn't get back on time,

for people who are not able link the pattern url properly, try uploading
the pattern file in Github and then use that file link in the ar.js file.
On Jul 13, 2017 6:22 PM, "Dinkelborg" [e-mail] wrote:

You don't have to create your own data folder btw I kept everything as it
is, created a custom variable (line 865)
THREEx.ArToolkitContext.hostURL = './'
directly under (line 864) THREEx.ArToolkitContext.baseURL = '
https://jeromeetienne.github.io/AR.js/three.js/'

then I changed the Reset paragraph (line 1195 to 1217) to:

//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////

/**

• reset all parameters
  */
  THREEx.ArToolkitProfile.prototype.reset = function () {
  this.sourceParameters = {
  // to read from the webcam
  sourceType : 'webcam',
  }

this.contextParameters = {
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
detectionMode: 'mono',
}
this.defaultMarkerParameters = {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.hostURL + 'pattern-marker.patt'
}
return this
};

(basically only change is under "this.defaultMarkerParameters" where you
change the patternUrl)

and then I created a new Marker under (line 1255 to 1280):

//////////////////////////////////////////////////////////////////////////////
// Marker
//////////////////////////////////////////////////////////////////////////////
THREEx.ArToolkitProfile.prototype.kanjiMarker = function () {
this.contextParameters.detectionMode = 'mono'

this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
return this
}

THREEx.ArToolkitProfile.prototype.hiroMarker = function () {
this.contextParameters.detectionMode = 'mono'

this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
return this
}

THREEx.ArToolkitProfile.prototype.myCustomMarker= function () {
this.contextParameters.detectionMode = 'mono'

this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolKitContext.hostURL+ 'pattern-marker.patt'
return this
}

(see the last marker was added the rest is default)

and the last step is to add your marker preset to the init function (line
2729) preset check (line 2737 to 2752):

  // honor this.data.preset
  if( this.data.preset === 'hiro' ){
      this.data.type = 'pattern'
      this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
  }else if( this.data.preset === 'kanji' ){
      this.data.type = 'pattern'
      this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
  }else if( this.data.preset === 'area' ){
      this.data.type = 'area'
      // fall through
  }else if( this.data.preset === 'myCustomMarker'){
  this.data.type = 'pattern'
  this.data.patternUrl = THREEx.ArToolkitContext.hostURL+'pattern-marker.patt'
} else {
      console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset)
  }

(see the pre-last statement if(this.data.preset === 'myCustomMarker')... )

After all of that you can just use your custom preset like the hiro preset
so in the html, in the just swap the 'preset' value from 'hiro' to
'myCustomMarker' (or whatever you called yours

When you try, make sure to clear cache if it doesn't work instantly - but
that was all works like a charm for me now

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jeromeetienne/AR.js/issues/127#issuecomment-315068635,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab0zlKU92sN5FTAjMjHA1CpJ02xCM-Q3ks5sNhMkgaJpZM4OShOm
.

[imehrotra]

@MrRaam were you able to just upload the patt file and add this
<a-marker-camera type='pattern' patternUrl='https://raw.github.com/username/project/master/pattern-marker.patt'></a-marker-camera>
to your code and have it recognize it? As of now, I am just trying to get it to work with the provided new Ar.js marker and I get the console output:

"Pattern Data read error!!
aframe-ar.js:2843 loadMarker(): Error loading pattern file /marker_0.
aframe-ar.js:2843 ARToolKitJS(): Unable to set up AR marker.
aframe-ar.js:2843 Out of memory!!"

Any help would be appreciated. I also tried cloning the directory and changing the code myself as was suggested aboe to no avail, but will retry again with the provided Ar.js marker in case my marker was invalid for some reason.

[Dinkelborg]

@imehrotra
You are experiencing the same problem I had.
The steps I describe above should work for you, can you explain what went wrong when you tried changing the code?
I was going to try and find out where the tag recognition is broken in the aframe-ar.js file, but for once it's kinda huge and I didn't make it, besides that I didn't have the time yet.
I think that they expect the custom maker pattern files in a specific folder, but that isn't really stated clearly - it might as well be that it's just broken

[imehrotra]

When I change the code, I don't get any errors, but it just doesn't detect the marker. I think there might be something wrong with my script urls in the html ar.js file. What did you change the scripts too? Right now, mine are set as

  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="ar/aframe/build/aframe-ar.js"></script> // this is my local copy of the edited code

[Dinkelborg]

I went over the changes I made in the aframe-ar.js file step by step and pointed out what exactly I changed... I don't think I could make that any clearer ...
Your urls look fine these are in the head-section of my index.html:

<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="js/aframe-ar.js"></script>//My changed local copy
  <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/AR.js/master/three.js/'</script>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

[MrRaam]

@imehrotra https://github.com/imehrotra you are almost there, I didn't
use the pattern url like as you did instead i referenced a my own marker
variable by making changes in aframe-ar.js, you have to change in
aframe-ar.js just like @Dinkelborg did, i think it's almost the same which
i did with few variations. Let me know if you are still not able to get
that.

ᐧ

On Tue, Jul 18, 2017 at 1:53 AM, Dinkelborg [e-mail]
wrote:

I went over the changes I made in the aframe-ar.js file step by step and
pointed out what exactly I changed... I don't think I could make that any
clearer ...
Your urls look fine these are in the head-section of my index.html:
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script src="js/aframe-ar.js"></script>//My changed local copy <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/ jeromeetienne/AR.js/master/three.js/'</script>

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jeromeetienne/AR.js/issues/127#issuecomment-315871625,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab0zlBlnUV4jScIN0-NOh_EvZCf18Rw4ks5sO8KugaJpZM4OShOm
.

[imehrotra]

I'm not sure what the issue was originally, but I redid the steps and it works now - thanks for your help! @Dinkelborg @MrRaam

[machenmusik]

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

[khookeiwai]

@machenmusik it works for me! thanks!

[kumarahir]

@machenmusik following code works for me too !

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

[machenmusik]

Great! Perhaps this issue can be closed then.

[achatt89]

@Dinkelborg / @MrRaam
Hey..how is it going??
Just a quick question..
What version were you working in when you wrote the steps to add the custom marker to aframe-ar.js?

The latest version seems to have quite a few things missing based on your steps and also the line numbers are wayy out of place.. (well..don't care about the line numbers as such.. :D)
Also, from what I can understand, its possible to train only one customMarker, is it?

Regards..

[Dinkelborg]

Hi @achatt89 , I believe I worked with version 1.0.0 my files are from the 12th of July.
Yeah at least with my work-around only one marker could be trained, but seeing that several other users like @machenmusik report the a-marker-camera tag to be working I believe my fix should no longer be necessary

I didn't try their solution, does
Work for you? The docs say patternURL but apparently it's just url instead

[achatt89]

Hi..
Thanks for the reply mate :)
Nope patternUrl doesn't work.. Haven't tried just URL though...
Following your method, it does work fine for just one custom marker... But
the project I am trying to implement requires multiple custom markers to be
trained. I also noticed that the latest version of aframe-ar.js has Kanji
marker removed for some reason..

Anyways...thank you very much for the original assist with the custom
marker training.. it worked just fine..

Cheers.. :)
P.S. I will keep digging for multiple custom marker training and will keep
you posted if I am successful..

On 18 Aug 2017 19:52, "Dinkelborg" [e-mail] wrote:

Hi @achatt89 https://github.com/achatt89 , I believe I worked with
version 1.0.0 my files are from the 12th of July.
Yeah at least with my work-around only one marker could be trained, but
seeing that several other users like @machenmusik
https://github.com/machenmusik report the a-marker-camera tag to be
working I believe my fix should no longer be necessary

I didn't try their solution, does
Work for you? The docs say patternURL but apparently it's just url instead

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jeromeetienne/AR.js/issues/127#issuecomment-323433658,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGK-K_NqInqESz2zLFiDBwT3ODYfPPLuks5sZd2HgaJpZM4OShOm
.

[sonalranjit]

@kumarahir which version of the aframe-ar.js are you using, im following the latest 1.5.0 but using url for the marker is not working for me.

[achatt89]

@jeromeetienne / @Dinkelborg / @MrRaam:
the a-marker-camera tag doesn't seem to be working for using custom patterns. I have tried with both patternUrl & url.
I am using version 1.5.1.

@machenmusik : It seems to be working for you. Can you confirm on how you achieved it?

Regards..

[MrRaam]

@Abhijit can i see the error log if there is any?

On Mon, Aug 21, 2017 at 4:12 PM, Abhijit Chatterjee <
[email protected]> wrote:

@jeromeetienne https://github.com/jeromeetienne / @Dinkelborg
https://github.com/dinkelborg / @MrRaam https://github.com/mrraam:
the tag doesn't seem to be working for using custom patterns. I have tried
with both patternUrl & url.
I am using version 1.5.1.

@machenmusik https://github.com/machenmusik : It seems to be working
for you. Can you confirm on how you achieved it?

Regards..

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jeromeetienne/AR.js/issues/127#issuecomment-323711049,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab0zlL0C8zKZqLrK1IG_nI3LLt8UouO1ks5saV8TgaJpZM4OShOm
.

[achatt89]

@MrRaam / @jeromeetienne
Here's the code what I am using:

<a-scene embedded arjs='sourceType: webcam;'>
    <a-assets>
        <img id="building_info" src="./images/building_info.png">
    </a-assets>
    <a-image src="#building_info" position="0 0 0" scale="2.5 2.5 2.5" rotate="0 0 90"></a-image>

    <!--<a-marker-camera preset="greenTriangleMarker"></a-marker-camera>-->
    <a-marker-camera type='pattern' url='./patterns/green-triangle-marker.patt'></a-marker-camera>

</a-scene>

There's no console error.
The pattern doesn't even load nor is recognised while trying to scan.
Its not shown in the network/sources tab.

Regards..

[MrRaam]

Hi,

Please upload that .patt files in github and place that link in the url. it
should work. Cheers !

On Mon, Aug 21, 2017 at 7:46 PM, Abhijit Chatterjee <
[email protected]> wrote:

@MrRaam https://github.com/mrraam / @jeromeetienne
https://github.com/jeromeetienne
Here's the code what I am using:
`

http://./images/building_info.png

`

There's no console error.
The pattern doesn't even load nor is recognised while trying to scan.
Its not shown in the network/sources tab.

Regards..

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jeromeetienne/AR.js/issues/127#issuecomment-323753795,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab0zlJNc9YJRfvQBCcCDrnZ8KEjFdbHzks5saZFKgaJpZM4OShOm
.

[achatt89]

@MrRaam :
Hi..
That doesn't work. I have tried it before..
Here's the link to my patt file:

https://github.com/achatt89/abhijitchatterjee.com/blob/master/green-triangle-marker.patt
Cheers.. :)

[wimvdc]

Hi guys,

I think I solved the issue in #164 (check the PR).

[kumarahir]

@sonalranjit using latest 0.6.0 version of aframe and aframe-ar is directly being loaded from https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js

This is working perfectly

<script src="../lib/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs>
    <a-assets>
        <a-asset-item id='wolf' src='Wolf.obj'></a-asset-item>
    </a-assets>

    <!-- define a camera which will move according to the marker position -->
    <a-marker type='pattern' url='letterk.patt'>
        <a-obj-model src="#wolf" scale="0.01 0.01 0.01"></a-obj-model>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>

[sonalranjit]

@kumarahir i tired your way it is still only triggering for the default Hiro pattern.

`

<a-scene embedded arjs>
    <a-assets>
        <a-asset-item id="nike-waffle-obj" src="data/models/nike.obj"></a-asset-item>
        <a-asset-item id="nike-waffle-mtl" src="data/models/nike.mtl"></a-asset-item>
    </a-assets>
    <a-marker type='pattern' url='nike-pattern.patt' >
        <a-entity obj-model="obj: #nike-waffle-obj; mtl: #nike-waffle-mtl" scale="0.3 0.3 0.3" rotation="0 0 0" position="0 0 0">
        </a-entity>
    </a-marker>
    <a-entity camera></a-entity>

`

will checkout @wimvdc 's fix

[vin-ni]

I made it work with these instructions:
https://github.com/jeromeetienne/AR.js/issues/164#issuecomment-332065686

[machenmusik]

Looking at what @vin-ni used,

It seems as though the common mistake is trying to use a-marker when the correct primitive to use is a-marker-camera - I am pretty sure that I didn't need to change to light grey etc.

[IgorDePaula]

Nothing this work for me =/

[Kimara5]

You don't have to create your own data folder btw I kept everything as it is, created a custom variable (line 865)
THREEx.ArToolkitContext.hostURL = './'
directly under (line 864) THREEx.ArToolkitContext.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'

then I changed the Reset paragraph (line 1195 to 1217) to:

//////////////////////////////////////////////////////////////////////////////
//        Code Separator
//////////////////////////////////////////////////////////////////////////////

/**
 * reset all parameters
 */
THREEx.ArToolkitProfile.prototype.reset = function () {
  this.sourceParameters = {
      // to read from the webcam 
      sourceType : 'webcam',
  }

  this.contextParameters = {
      cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
      detectionMode: 'mono',
  }
  this.defaultMarkerParameters = {
      type : 'pattern',
      patternUrl : THREEx.ArToolkitContext.hostURL + 'pattern-marker.patt'
  }
  return this
};

(basically only change is under "this.defaultMarkerParameters" where you change the patternUrl)

and then I created a new Marker under (line 1255 to 1280):

//////////////////////////////////////////////////////////////////////////////
//        Marker
//////////////////////////////////////////////////////////////////////////////
THREEx.ArToolkitProfile.prototype.kanjiMarker = function () {
  this.contextParameters.detectionMode = 'mono'

  this.defaultMarkerParameters.type = 'pattern'
  this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
  return this
}

THREEx.ArToolkitProfile.prototype.hiroMarker = function () {
  this.contextParameters.detectionMode = 'mono'

  this.defaultMarkerParameters.type = 'pattern'
  this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
  return this
}

THREEx.ArToolkitProfile.prototype.myCustomMarker= function () {
  this.contextParameters.detectionMode = 'mono'

  this.defaultMarkerParameters.type = 'pattern'
  this.defaultMarkerParameters.patternUrl = THREEx.ArToolKitContext.hostURL+ 'pattern-marker.patt'
  return this
}

(see the last marker was added the rest is default)

and the last step is to add your marker preset to the init function (line 2729) preset check (line 2737 to 2752):

      // honor this.data.preset
      if( this.data.preset === 'hiro' ){
          this.data.type = 'pattern'
          this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
      }else if( this.data.preset === 'kanji' ){
          this.data.type = 'pattern'
          this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
      }else if( this.data.preset === 'area' ){
          this.data.type = 'area'
          // fall through
      }else if( this.data.preset === 'myCustomMarker'){
      this.data.type = 'pattern'
      this.data.patternUrl = THREEx.ArToolkitContext.hostURL+'pattern-marker.patt'
    } else {
          console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset)
      }

(see the pre-last statement if(this.data.preset === 'myCustomMarker')... )

After all of that you can just use your custom preset like the hiro preset so in the html, in the just swap the 'preset' value from 'hiro' to 'myCustomMarker' (or whatever you called yours

When you try, make sure to clear cache if it doesn't work instantly - but that was all works like a charm for me now

//PS//
Btw the pattern-marker.patt I downloaded from the website is in my root folder, that's why "hostURL" for me is "./" if you store your pattern file somewhere else, change this to the according path

Hi!! I'm facing the same issue, and tried to follow this steps, but it looks like the aframe-ar.js code has changed??
In my case, this exactly my error:

components:gltf-model:warn Failed to load glTF model browser.js:111:7
Pattern Data read error!! aframe-ar.js:2:23001
loadMarker(): Error loading pattern file /marker_0. aframe-ar.js:2:23001
ARToolKitJS(): Unable to set up AR marker. aframe-ar.js:2:23001
Out of memory!! aframe-ar.js:2:23001
ExitStatus: Program terminated with exit(1)

But sometimes the error is:

uncaught exception: abort("Cannot enlarge memory arrays. Either (1) compile with  -s TOTAL_MEMORY=X  with X higher than the current value 536870912, (2) compile with  -s ALLOW_MEMORY_GROWTH=1  which adjusts the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or if you want malloc to return NULL (0) instead of this abort, compile with  -s ABORTING_MALLOC=0 ") at jsStackTrace@http://.../libs/AR.js-master/aframe-ar.js:2:41099
stackTrace@http://.../libs/AR.js-master/aframe-ar.js:2:41282
abort@http://.../libs/AR.js-master/aframe-ar.js:19:4866
abortOnCannotGrowMemory@http://...r/libs/AR.js-master/aframe-ar.js:2:41642
enlargeMemory@http://.../libs/AR.js-master/aframe-ar.js:2:42087
dynamicAlloc@http://.../libs/AR.js-master/aframe-ar.js:2:26568
_sbrk@http://.../libs/AR.js-master/aframe-ar.js:2:195241
Uj@http://.../libs/AR.js-master/aframe-ar.js:9:1
Wj@http://.../libs/AR.js-master/aframe-ar.js:9:1
Ee@http://.../libs/AR.js-master/aframe-ar.js:10:1
De@http://.../libs/AR.js-master/aframe-ar.js:11:1
je@http://.../libs/AR.js-master/aframe-ar.js:11:1
de@http://.../libs/AR.js-master/aframe-ar.js:11:1
wg@http://.../libs/AR.js-master/aframe-ar.js:10:1
lh@http://.../libs/AR.js-master/aframe-ar.js:10:1
Gk@http://.../libs/AR.js-master/aframe-ar.js:12:1
dynCall_iii_10@http://.../libs/AR.js-master/aframe-ar.js line 2 > Function:4:12
detectMarker@http://.../libs/AR.js-master/aframe-ar.js line 2 > Function:8:10
ARController.prototype.detectMarker@http://.../libs/AR.js-master/aframe-ar.js:519:11
ARController.prototype.process@http://.../libs/AR.js-master/aframe-ar.js:139:3
ARjs.Context.prototype._updateArtoolkit@http://.../libs/AR.js-master/aframe-ar.js:5460:2
ARjs.Context.prototype.update@http://.../libs/AR.js-master/aframe-ar.js:5329:3
ARjs.Session/this.update@http://.../libs/AR.js-master/aframe-ar.js:7131:3
tick@http://.../libs/AR.js-master/aframe-ar.js:8815:3
value@http://.../libs/aframe-docs-v0.8.0/aframe-master.min.js:483:9129
value@http://.../libs/aframe-docs-v0.8.0/aframe-master.min.js:483:9527
[189]</module.exports/</<@http://.../libs/aframe-docs-v0.8.0/aframe-master.min.js:608:130
y@http://.../libs/aframe-docs-v0.8.0/aframe-master.min.js:100:15179

If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information.
I have a local server, and there is working perfect, even from a mobile accessing from network.
But when I upload it to my webServer and try to run it online, this happens... from android, iphone or computer (with Firefox 'cause of the https limitations).

Is there something to do with this? Please I'm stuck with this since 3 days ago.

Thanks!! :)