Ar.js: problem with custom marker

Created on 15 Jun 2018 · 17Comments · Source: jeromeetienne/AR.js

Do you want to request a feature or report a bug?
bug

UPDATE There is a solution in the last comment.

What is the current behavior?
I tried to follow your tutorials on using a custom marker. Since it didn't work for me I decided to merge the examples from AR.js/aframe/examples/ to check if it is running here with a pattern from your repo. Apparently, it is not.

I even tried to use the same hiro pattern, but with <a-marker-camera> and it still didn't work.

If the current behavior is a bug, please provide the steps to reproduce.
This is the code from marker-camera.html example, but with pattern replaced to pattern-arjs.patt from default-thinner-border.html.

<!DOCTYPE html>
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
    <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - example for a-frame
    <br/>
    Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
    <!-- <a-scene embedded arjs='sourceType: image; sourceUrl:../../data/images/armchair.jpg;'> -->
    <a-scene embedded arjs='sourceType: webcam;'>

        <a-sphere position="0 0.5 0" radius="0.5" color="#EF2D5E"></a-sphere>
        <a-plane position="0 0 0" rotation="-90 0 0" width="1" height="1" color="#7BC8A4"></a-plane>

        <a-marker-camera
                type='pattern'
                url='../../three.js/examples/marker-training/examples/pattern-files/pattern-arjs.patt'> </a-marker-camera>
    </a-scene>
</body>
</html>

What is the expected behavior?
Sphere displayed when the new pattern (ARJS) on the screen.

Please mention other relevant information such as the browser version, Operating System and Device Name
macOS,chrome Version 67.0.3396.79 (Official Build) (64-bit)

Am I missing something?

Source

dokato

Most helpful comment

Cool, it works! Thank you again @nicolocarpignoli.

Step by step solution for others:

Use most recent version of aframe-ar.js : https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js
Make sure that your pattern is good (non-transparent background, sharp edges, no colors).
Use a-marker instead of a-marker-camera and include entities inside it as in the following example:

<head>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

  <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='trackingMethod: best; debugUIEnabled:false'>
        <a-assets>
            <a-asset-item id="tree-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/Tree.dae" crossOrigin="anonymous"></a-asset-item>
            <a-asset-item id="text-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/MerryChristmas.dae" crossOrigin="anonymous"></a-asset-item>
       </a-assets>
        <a-marker preset='custom' type='pattern' url='https://raw.githubusercontent.com/TimVanMourik/Armadillo/master/app/armadillo/static/img/patt/pattern-marker.patt'>
<---display first model     --->
<a-entity collada-model="#tree-model"></a-entity>

         </a-marker>
         <a-entity camera></a-entity>
    </a-scene>
</body>

dokato on 4 Jul 2018

❤7 🎉2

All 17 comments

Try using remote urls in url attriutes instead of relatives. Also check my examples here https://github.com/nicolocarpignoli/nicolocarpignoli.github.io/tree/master/ar-playground

If you don't have luck with the examples, maybe the problem is with your marker. For detail about custom marker I wrote this article: 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

nicolocarpignoli on 15 Jun 2018

Thanks @nicolocarpignoli for a quick reply. Actually, I even tried with Hiro marker with absolute path and it still didn't work. Do you have any full example, which works for you?

It looks like this one https://github.com/nicolocarpignoli/nicolocarpignoli.github.io/blob/master/ar-playground/index.html uses barcode rather than custom marker.

dokato on 16 Jun 2018

👍1

I tried also to run your example from https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462 with a red marker, but still no success.

dokato on 16 Jun 2018

@dokato about 'red marker' example, how do you use marker? Try with print it and place the marker on a surface with high contrast (i.e. if the marker has white background, place it on a very dark surface)

nicolocarpignoli on 18 Jun 2018

@nicolocarpignoli sorry, but didn't have access to a printer before. Now I followed exactly steps from your medium article. I copied a code from index.html and printed out the red marker on A4 paper in the middle of a page (to make sure that contrast is all right). Still doesn't work for me, whereas with HIRO marker it's exactly fine.

I checked also this code of yours: https://github.com/nicolocarpignoli/nicolocarpignoli.github.io/blob/master/ar-playground/index.html
and noticed that you use different version of aframe than in medium blogpost. Do you think it matters here?

BTW:
the pattern I want to use looks like this:
https://github.com/TimVanMourik/Armadillo/blob/master/app/armadillo/static/img/patt/marker.png
and is generated here: https://github.com/TimVanMourik/Armadillo/blob/master/app/armadillo/static/img/patt/pattern-marker.patt

I'm open to any suggestion on how to change it to make detection more robust, but it looks for me like sth is wrong within the code as I cannot make it work with any custom marker (and it's fine with HIRO).

dokato on 29 Jun 2018

@dokato Any luck? I'm working through the same tutorials as you and experiencing the same issues.

Tried calling the custom image on a CDN, github, and local server. Used the

Printed out the image and tried just on screens. Hiro logo/image works great, but no luck on the custom image. I tried 3 kinds of custom images - QRcode-ish, simple illustration w/white background, and stock photo.

Have you kept trying or got it to work for you?

UPDATE

Perhaps this is how it is supposed to function, but I notice that even when I declare a custom marker and have no mention of the Hiro image in my code, if I put my camera over a Hiro image it will still render the object. Could this be the issue somewhere in the source code?

jwebking on 1 Jul 2018

@dokato Can you please provide me your full html example or link to repo, so I can try myself? The fact that despite all you can always see objects when camera recognizes HIRO pattern, is not good, there's something wrong for sure.

nicolocarpignoli on 2 Jul 2018

@jwebking We're on the same page, I actually tried exactly same things... Still no success. I also checked some hacks suggested in different threads (eg https://github.com/jeromeetienne/AR.js/pull/168 ) but nothing seems working for me :/

dokato on 2 Jul 2018

@nicolocarpignoli Thanks for help! So as an example you can take a look at this attempt:
https://github.com/TimVanMourik/ChristmasAR
where in index.html in line 16 I insert this code bit:

    <a-marker-camera preset='custom' type='pattern' url='https://raw.githubusercontent.com/TimVanMourik/Armadillo/master/app/armadillo/static/img/patt/pattern-marker.patt'></a-marker-camera>

in order to get the following marker: https://bit.ly/2lMYCSE
Tried both to show it on a phone screen and printed.

dokato on 2 Jul 2018

@dokato first of all, let's try with base AR.js code. So try with an index.html like the following:

<script src="vendor/aframe/aframe.min.js"></script>
<script src="vendor/aframe/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best; debugUIEnabled:false'>
        <a-assets>
            <a-asset-item id="tree-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/Tree.dae" crossOrigin="anonymous"></a-asset-item>
            <a-asset-item id="text-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/MerryChristmas.dae" crossOrigin="anonymous"></a-asset-item>
       </a-assets>
        <a-marker preset='custom' type='pattern' url='https://raw.githubusercontent.com/TimVanMourik/Armadillo/master/app/armadillo/static/img/patt/pattern-marker.patt'>
            <a-box position='0 0.5 0' color="red"></a-box>
         </a-marker>
         <a-entity camera></a-entity>
    </a-scene>
</body>

I remember some users has also problems with a-marker-camera recently, so please try with 'a-marker' instead. let me know if it works this way

nicolocarpignoli on 2 Jul 2018

@nicolocarpignoli so now I'm getting the following behaviour. Custom marker (brain) still doesn't work, but Hiro displays red cube. Crap, it's hard to debug, when it doesn't throw any exceptions or anything...

dokato on 2 Jul 2018

@dokato ok I will try myself your example, can you please give your complete .html file ONLINE, the one that you are using, so that i can access it from phone and debug it if there are problems?

thanks

nicolocarpignoli on 3 Jul 2018

Thanks @nicolocarpignoli for offering help. I uploaded temporary website on https://dokato.github.io/tree-online/ . Code is here: https://github.com/dokato/tree-online/blob/gh-pages/index.html

BUT finally I got some progress! I changed links to js files from static to hosted ones and now indeed I can see the cube with custom marker! :1st_place_medal: Now the only question remains how to make it work with my own collada object? (to display the tree)

dokato on 3 Jul 2018

@dokato great!

in order to display COLLADA object, try with this index.html:

<head>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

  <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='trackingMethod: best; debugUIEnabled:false'>
        <a-assets>
            <a-asset-item id="tree-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/Tree.dae" crossOrigin="anonymous"></a-asset-item>
            <a-asset-item id="text-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/MerryChristmas.dae" crossOrigin="anonymous"></a-asset-item>
       </a-assets>
        <a-marker preset='custom' type='pattern' url='https://raw.githubusercontent.com/TimVanMourik/Armadillo/master/app/armadillo/static/img/patt/pattern-marker.patt'>
<---display first model     --->
<a-entity collada-model="#tree-model"></a-entity>

         </a-marker>
         <a-entity camera></a-entity>
    </a-scene>
</body>

to embed different object model depending on their format, take a look to a-frame doc (i.e. collada models https://github.com/aframevr/aframe/blob/master/docs/components/collada-model.md)

nicolocarpignoli on 3 Jul 2018

👍1

Cool, it works! Thank you again @nicolocarpignoli.

Step by step solution for others:

Use most recent version of aframe-ar.js : https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js
Make sure that your pattern is good (non-transparent background, sharp edges, no colors).
Use a-marker instead of a-marker-camera and include entities inside it as in the following example:

<head>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

  <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='trackingMethod: best; debugUIEnabled:false'>
        <a-assets>
            <a-asset-item id="tree-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/Tree.dae" crossOrigin="anonymous"></a-asset-item>
            <a-asset-item id="text-model" src="https://raw.githubusercontent.com/TimVanMourik/ChristmasAR/master/data/MerryChristmas.dae" crossOrigin="anonymous"></a-asset-item>
       </a-assets>
        <a-marker preset='custom' type='pattern' url='https://raw.githubusercontent.com/TimVanMourik/Armadillo/master/app/armadillo/static/img/patt/pattern-marker.patt'>
<---display first model     --->
<a-entity collada-model="#tree-model"></a-entity>

         </a-marker>
         <a-entity camera></a-entity>
    </a-scene>
</body>

dokato on 4 Jul 2018

❤7 🎉2

Hey, so I'm using a .patt of the hiro pattern and it's still not working - this is just from the codepen listed in the github readme...

https://codepen.io/yosunchang/pen/rNVampj

yosun on 8 Feb 2020

I don't understand what is the problem with custom markers. Using the example of the attached code it works perfectly, with the native marker. But trying to use a custom markers doesn't work. Please help.

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
    <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
    <script>
      AFRAME.registerComponent("videohandler", {
        init: function() {
          var marker = this.el;
          this.vid = document.querySelector("#vid");

          marker.addEventListener(
            "markerFound",
            function() {
              this.toggle = true;
              this.vid.play();
            }.bind(this)
          );

          marker.addEventListener(
            "markerLost",
            function() {
              this.toggle = false;
              this.vid.pause();
            }.bind(this)
          );
        }
      });
    </script>
  </head>

  <body style="margin: 0; overflow: hidden;">
    <a-scene
      vr-mode-ui="enabled: false"
      loading-screen="enabled: false;"
      arjs="sourceType: webcam; debugUIEnabled: false;"
      id="scene"
      embedded
      gesture-detector
    >
      <a-assets>
        <video
          id="vid"
          src="https://cdn.glitch.com/b5f96dca-fbbc-4c81-8091-19fbaf01c314%2Fasset.mp4?v=1599009994056"
          preload="auto"
          response-type="arraybuffer"
          loop
          crossorigin
          webkit-playsinline
          autoplay
          muted
          playsinline
        ></video>
      </a-assets>

      <a-marker
        type="pattern"
        preset="custom"
        url="https://cdn.glitch.com/b5f96dca-fbbc-4c81-8091-19fbaf01c314%2Fmarker.patt?v=1599009800978"
        videohandler
        smooth="true"
        smoothcount="10"
        smoothtolerance="0.01"
        smooththreshold="5"
        raycaster="objects: .clickable"
        emitevents="true"
        cursor="fuse: false; rayOrigin: mouse;"
        id="markerA"
      >
        <a-video
          src="#vid"
          scale="1 1 1"
          position="0 0.1 0"
          rotation="-90 0 0"
          class="clickable"
          gesture-handler
        ></a-video>
      </a-marker>

      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>