Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

Question

I'm really new to A-Frame and Ar.js, literally found out about this and started working on this today. It's for a project I'm doing and I'm using this tutorial https://aframe.io/blog/arjs3/#creating-image-descriptors I followed the instructions and uploaded the 'dinosaur' image into an NFT creator. It said I would get three images downloaded, I did and they end with fset3, fset and iset. I tried clicking on the downloaded images and got a message saying 'There is no application set to open the document and with what looks like the image link.(I'm using a mac by the way). Here is the code:

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Image based tracking AR.js demo</title>
    <!-- import aframe and then ar.js with image tracking / location based features -->
    <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-nft.js"></script>

    <!-- style for the loader -->
    <style>
      .arjs-loader {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .arjs-loader div {
        text-align: center;
        font-size: 1.25em;
        color: white;
      }
    </style>
  </head>

  <body style="margin : 0px; overflow: hidden;">
    <!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
    <div class="arjs-loader">
      <div>Loading, please wait...</div>
    </div>

    <!-- a-frame scene -->
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
      <!-- a-nft is the anchor that defines an Image Tracking entity -->
      <!-- on 'url' use the path to the Image Descriptors created before. -->
      <!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
      <a-nft
        type="nft"
        url="<path-to-your-image-descriptors>"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5">
          <!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
          <a-entity
          gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
              scale="5 5 5"
              position="100 100 0"
          >
          </a-entity>
      </a-nft>
      <!-- static camera that moves according to the device movemenents -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>```

I understand that I need to input the image descriptor in "url="<path-to-your-image-descriptors>" but I'm stuck on getting to that point.

Serve your file with a web server. Browsers don't have access to the local file system. https://www.npmjs.com/package/http-server — Diego Marcos, Apr 17 '20 at 01:11

score 1 · Answer 1 · answered Apr 19 '20 at 03:02

If you serve it on web server the <path-yo-your-image-descriptors> will be like

https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex

focus on the URL second last, the trex-image/trex

The trex-image is folder containing trex.fset, trex.fset3, trex.iset. Hence /trex at the end of URL

trex-image
   | -- trex.fset
   | -- trex.fset3
   | -- trex.iset

Or you can use localhost like XAMPP. See: https://stackoverflow.com/a/61083435/12958413

More info: AR.js Image Tracking

kalwalt · Answer 2 · 2020-05-02T11:15:16.007

1

How to deploy your WebAR app with NFT Markers

First, create your code (HTML, javascript, css...)
Second, create your NFT descriptors with NFT-Marker-Creator read this other stackoverflow article
Third, set the correct path of the folder/location of the descriptors(NFT markers)

if your descriptors, three files with extension .fset .iset .fset3 named trex are in a folder trex-descriptors:

<a-nft
   type="nft"
   url="./trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

Note that there is not extension in the files path. Do NOT put the extension !!!

Testing

At the end if you want to test in localhost (on your device) run a server.

For a python server ( you need to install python) run:

// Python 2.x
python -m SimpleHTTPServer

// Python 3.x
python -m http.server

your page will be served at this address in the browser:

http://localhost:8000/

If you prefer run a nodejs server, install the node server module:

npm install http-server -g

then run:

http-server . -p 8000

in this way your page will be served at:

http://localhost:8000/

Hosting on a WebServer (Github pages)

If your code is hosted on Github you probably need

to modify the url. this is related to how github treat the path urls. If you are owner of a profile on github, and your profile name is myprofile :

https://github.com/myprofile

and you are owner of a repository myrepository on your profile:

https://github.com/myprofile/myrepository

you should add myrepository to the nft url:

<a-nft
   type="nft"
   url="./myrepository/trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

or if you want:

<a-nft
   type="nft"
   url="https://github.com/myprofile/myrepository/trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

but this won't work on localhost. You can set up a gh-pages branch on your repository and modify the url in order to have in master branch a version that works on localhost and and another for gh-pages served as website.

EXAMPLE:

https://github.com/kalwalt/kalwalt-interactivity-AR/blob/master/arjs/basic-nft-aframe.html master branch

https://github.com/kalwalt/kalwalt-interactivity-AR/blob/gh-pages/arjs/basic-nft-aframe.html gh-pages branch

Testing example: https://kalwalt.github.io/kalwalt-interactivity-AR/arjs/basic-nft-aframe.html

edited May 02 '20 at 11:15

answered Apr 21 '20 at 17:02

kalwalt

460
4
12

This looks like a really nice library, so I tried to get this example working to add to some reduced-test-cases. This resulted in the console throwing: `ARToolKitJS(): Unable to set up NFT marker.` after: `https://ar-js-org.github.io/AR.js/three.js/../data/data/camera_para.dat`. Is this something you could help with? Demo: [https://inspiredlabs.co.uk/ar/f.html](https://inspiredlabs.co.uk/ar/f.html) – Scott Phillips Apr 30 '20 at 18:57
For sure It's a problem with the path, i can't look at you code in detail now, have you hosted on github this code? – kalwalt Apr 30 '20 at 19:14
Yes. I've renamed the page to [https://inspiredlabs.github.io/ar.js/orchid.html](https://inspiredlabs.github.io/ar.js/orchid.html) and the NFT markers are: [https://github.com/inspiredlabs/ar.js/tree/master/orchid](https://github.com/inspiredlabs/ar.js/tree/master/orchid). – Scott Phillips Apr 30 '20 at 20:47
@ScottPhillips your code works on localhost but fails on github host. The problem with github is that the start of the path is https://inspiredlabs.github.io/ and not https://inspiredlabs.github.io/ar.js/ as one can think, so you should add an extra arjs to your files path. Of course this will fails if you run on localhost. One solution is to serve the pages on another branch like for example gh-pages. Hope that this will help you. – kalwalt Apr 30 '20 at 22:07
this is wrong https://github.com/inspiredlabs/ar.js/blob/3ddc94ec2dc9bc1ecf8c0909eac92ceaf85e802c/orchid.html#L55 should be 'https://inspiredlabs.github.io/ar.js/orchid/nft' or even './ar.js/orchid/nft' – kalwalt May 01 '20 at 08:55
Thanks for pointing me in the right direction. https://inspiredlabs.github.io/ar.js/orchid.html works. A few takeaways: `aframe.min.js` and `aframe-ar-nft.js` have required dependencies. NFT markers, such as: `orchid/nft` must be explicit (eg: `https://inspiredlabs.github.io/ar.js/orchid/nft`), and paths to `glTF` scenes are more forgiving. – Scott Phillips May 01 '20 at 09:16
Happy that this helped you, aframe.min.js and aframe-ar-nft.js of course are needed, I will update my answer with the github case. Note that there is also the offcial documentation https://ar-js-org.github.io/AR.js-Docs/ – kalwalt May 01 '20 at 14:43
That'd be useful. Whilst writing [reduced-test-cases](https://github.com/inspiredlabs/ar.js/#arjs-reduced-test-cases-for-web-augmented-reality), the issue popped up a few times: https://stackoverflow.com/questions/61078518/image-tracking-using-ar-js-problem-with-custom-image-descriptors – Scott Phillips May 01 '20 at 15:30

Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

2 Answers2

How to deploy your WebAR app with NFT Markers

Testing

Hosting on a WebServer (Github pages)

Linked