Where do I find markers for JSARToolkit or awe.js augmented reality apps?

One incredibly common question I receive from developers who’ve begun experimenting with AR in the browser is — how do I generate new AR markers for an awe.js or JSARToolkit app? Here’s how.

Need some more markers? Here’s how to get plenty of them!

You can only use ID-style markers

At the moment with JSARToolkit/awe.js based augmented reality web apps, you are limited to ID based markers that will look a bit like so:

Marker with an ID of 0

Each marker represents an ID. In my own AR tutorial on Augmented Reality in the Browser with Awe.js, I used a marker that represented an ID of 64. If you are working with the JSARToolkit, it is the exact same concept! Awe.js leverages the functionality of the JSARToolkit which uses the same ID system.

How do I generate those markers if I don’t want 0 or 64?

The Short Method

I’ve got a ready to go zip file with 100 markers (from 0 – 99) all ready as PNG files to be used with awe.js or the JSARToolkit.

Download the zip file with 100 AR markers here

There’s a longer method, which is where I derived those markers from — the JSARToolkit repo.

The Long Method

There’s a whole range of markers available in the JSARToolkit repo in the demos/markers folder. That’s what I used to create the download above. If you want to download it directly from the JSARToolkit, just download the ones you want from the demos/markers folder and rename them to include the filename of .png:

Downloading compatible ARTag ID based markers from JSARToolkit

Using them in awe.js

In the older version of awe.js which I used in my earlier example at SitePoint, the code which defines the marker we were looking for was this bit:

handler: function(event) {
  if (event.detail) {
    if (event.detail['64']) {
      ...
    }

You’d just change ['64'] to the ID of the marker you want to detect.

Using them in the newer version of awe.js

In the latest version of the awe.js framework, they still map the markers using IDs, but they name them in a different way. Here’s their latest example of using markers on GitHub. The marker ID section looks like so:

awe.pois.add({id:'jsartoolkit_marker_64', position: {x: 0, y: 0, z: 0}, visible: false});

awe.projections.add({ 
  id:'marker_projection', 
  geometry: {shape: 'cube', x: 50, y: 50, z: 50},
  position: {x: 0, y: 0, z: 0},
  rotation: {x: 0, y: 0, z: 180},
  material: {type: 'phong', color: 0xFFFFFF}, 
  texture: {path: 'awe_orange_square.png'},
  visible: false,
},
{poi_id: 'jsartoolkit_marker_64'});

Here, you would change the two mentions of 'jsartoolkit_marker_64' to 'jsartoolkit_marker_X', where X is the ID of the marker you want to detect.

Using a different AR system?

If you aren’t using awe.js or the JSARToolkit, these markers aren’t likely to work. If you are working with the Meta 1 Developer Kit — it uses its own range of markers which are in the Meta\Docs folder in your SDK download. Same concept but you’ll need different markers to represent the ID you’re looking for.

Can I use images rather than the ID grid things?

Sadly, at the moment I only know of it working with these ID style markers. If you know of a way to use actual images in JSARToolkit or awe.js style AR web apps, let me know!

Want to learn more?

• Marker Detection for Augmented Reality Applications – A greatly detailed technical report that looks at a range of different AR markers and how they work.