2

I'm using A-Frame and AR.js sample to create custom marker.

Link for Glitch example page : https://opposite-bike.glitch.me/testMarker.html

Link for Glitch project: https://glitch.com/edit/#!/opposite-bike

I have added two markers with .patt files, one is hiro which is available on AR.js site and other one is the custom one created using, https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Path for the image files are,

Hiro pattern (working)

Kitten pattern (not working)

.patt files for both patterns are stored in markers folder for access.

Hiro pattern is working fine but the custom one is not.

Can anyone help, find what's missing?

Here is code

HTML

<html>
  <head>
    <title>Multiple Markers - A-Frame School</title>
    <meta name="description" content="Multiple Markers - A-Frame School">
    <script src="https://aframe.io/releases/0.7.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>

  </head>
<body style="margin : 0px; overflow: hidden;">
  <a-scene embedded arjs="sourceType: webcam;">
    <!-- handle marker with your own pattern -->
    <a-marker type="pattern" patternurl="markers/hiro-m.patt">
      <a-sphere position="0 0.5 0" radius="0.25" rotation="0 10 0" color="#EF2D5E"></a-sphere>
    </a-marker>
    <a-marker type="pattern" patternurl="kmarkers/kitten.patt">
      <a-sphere position="0 0.5 0" radius="0.25" rotation="0 10 0" color="#ffccff"></a-sphere>
    </a-marker>
    <!-- handle marker with hiro preset -->
    <a-marker preset="hiro">
      <a-box position="0 0.5 0" material="color: green;"></a-box>
    </a-marker>
    <!-- handle barcode marker -->
    <a-marker type="barcode" value="5">
      <a-box position="0 0.5 0" material="color: blue;"></a-box>
    </a-marker>
    <!-- add a simple camera -->
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>
Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
pravid
  • 719
  • 9
  • 27

1 Answers1

3

Is it because the image of the kitten is very complexed.

If you will see and open the insides of the PATT file that is being provided by AR.js once you trained a marker, you can see like this.

PATT file with the image included

The pattern trainer just creates a file full of only 0's and 255's and it is the one that serves as the guide for the camera to identify the user.

In your case, the trainer will not recognize the image of the cat because it has very complex sides and edges.

In my case here, I tried to train a marker (which is the roundel of the Philippine Air Force), the marker trainer just generated a bunch of 0's in the PATT file because for AR.js, my image here is very complex.

enter image description here

In your case, the trainer maybe generated a PATT file containing bunch of 0's as well.

Angelo Joseph Salvador
  • 352
  • 5
  • 19
  • Thanks for the reply @Angelo8828. I'll try with the simpler drawings now. – pravid Nov 16 '17 at 07:27
  • 1
    @pravid, I am actually working right now on an issue same like this (except that my PATT file is alright). In my searching in Google and the Github repository of AR.js, I've seen this. Maybe my answer is wrong and if it is actually wrong, please refer to this issue https://github.com/jeromeetienne/AR.js/issues/164 – Angelo Joseph Salvador Nov 16 '17 at 08:31
  • Sorry for the newbie question but I have tried different solutions provided in the github link you have given but nothing seems to be working for me. Another thing I didn't get is there is one link (https://github.com/wimvdc/AR.js/commit/950e82db6d0c3851647d429282c5ade52ee95891) which suggest changes in 'aframe/src/component-anchor.js' file but I'm using only 'aframe-ar.js' and 'aframe.min' files. Do I need to add this file separately in the project to make it work? – pravid Nov 17 '17 at 12:53
  • 1
    Sorry for the late reply @pravid, if you are using Linux or Mac (or if your Windows supports "make"), download/clone the whole AR.js from Github, then go to the "aframe" subdirectory. – Angelo Joseph Salvador Nov 20 '17 at 01:10
  • 1
    Once you are inside the "aframe" folder/directory, run "make build" and "make minify" in your terminal/shell/command prompt and a new version of "aframe-ar.js" and "aframe-ar.min.js" will be generated inside the build folder. – Angelo Joseph Salvador Nov 20 '17 at 01:16
  • 1
    Please take note also that you will need to install uglifyjs before you can run the "make minify" command. Please see the MakeFile file for the details – Angelo Joseph Salvador Nov 20 '17 at 01:17
  • 1
    If you're using Windows: https://stackoverflow.com/questions/2532234/how-to-run-a-makefile-in-windows – Angelo Joseph Salvador Nov 20 '17 at 01:24