Skip to main content

How to build an AR app

When creating your own AR experience, you will probably want the marker that you are using to either be branded to a client logo or customised in some way to reflect the nature of what your user is doing with the AR application. This is very easy to do.

The main part to make this work is downloading the pattern file, placing this within your project folder structure and referencing this in your JavaScript code. Here's a quick step-by-step guide.

01. Make the pattern

First create your marker's design

In your image editing application make a square image and ensure the background is set to white. Now create a custom shape on the screen. Make sure this is black as this is the easiest to be read. Save the file as a PNG as this will be uploaded to a website to convert into the pattern code.

02. Upload and download

ar.js marker training

Upload the design into AR.js

Go to the pattern marker training page and click the upload button. Your marker will appear on the screen. Click the download marker button to get the marker file for your code. Click the appropriate download PDF button to get a printable marker.

03. Place it in the code

Add the file to the data folder

Place the downloaded pattern-marker.patt in the data folder. You can name it anything you like. Look in your code and change the line shown below to be the name of the pattern that you have downloaded. Now hold the PDF up to the camera to trigger the AR content to appear.

THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
  type: 'pattern',
  patternUrl: THREEx.ArToolkitContext.baseURL + 'data/pattern-marker.patt',

This article was originally published in creative web design magazine Web Designer. Buy issue 274 or subscribe.

Read more:

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada.