How To Create your Own Marker ?

3 easy steps to create a marker in 5min

Alexandra Etienne
Jun 7, 2017 · 2 min read

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.
Image for post
Image for post
Screenshot of AR.js marker training

It is very simple! Let’s get started.

Step 1 — Upload Your Image

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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.

Image for post
Image for post

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 😉

ARjs

Efficient Augmented Reality for the Web

Alexandra Etienne

Written by

AR/VR evangelist, digital marketing pro & woman in tech! Salsa dancer, horror film lover and fan of super mario.

ARjs

ARjs

Efficient Augmented Reality for the Web

Alexandra Etienne

Written by

AR/VR evangelist, digital marketing pro & woman in tech! Salsa dancer, horror film lover and fan of super mario.

ARjs

ARjs

Efficient Augmented Reality for the Web

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store