How To Create your Own Marker ?

3 easy steps to create a marker in 5min

Most of AR.js demos use the Hiro marker. It is nice but people often want to personalise the marker. For example, they may want to use their avatar or their logo. They want to make it more suitable for their own usage. So I wrote a tool to create new markers in 3 easy steps.

1. Upload your image — the one that appears inside the black boundary.
2. Download the trained marker — and use it in your AR experience.
3. Download the marker image — to print it.

Click here to start training a marker

Screenshot of AR.js marker training

It is very simple! Let’s get started.

Step 1 — Upload Your Image

Upload your own image

First you upload an inner image. This is the image that you want to appear inside the black square of the marker.

Step 2— Download the Trained Marker

Click here to download the trained marker

Then you download the trained marker by clicking on the download button. You will need to add it to your code, thus it is aware of this new marker.

Step 3— Get The Marker Image

Getting the marker image

Finally, you can either right click the marker image and “save image as” to your computer, or you can export it to PDF and print it on paper. Your call ;)

Step 4— Include it in your Code

This file contains the encoded marker that you should reuse in your code. You specify you want a pattern marker and you provide the url to your own marker. So just replace this in your code.

The End 😄

That was easy right?

For further details on what are the characteristics of a good marker, read more here.

Thanks for reading, and if you like this post, don’t forget to share 😉