Is it possible to use bespoke markers that do not resemble the "Hiro" marker like below. Could I potentially use a random shape (a solid red oval for example) as a marker?

If this is not currently supported, could someone point me into the right direction to where I might start building this functionality?

Is it possible to use bespoke markers that do not resemble the "Hiro" marker like below. Could I potentially use a random shape (a solid red oval for example) as a marker?

If this is not currently supported, could someone point me into the right direction to where I might start building this functionality?

• javascript
• three.js
• augmented-reality
• aframe

• Ensure that your marker PNG file does not contains any transparency. The .patt generated file won't be OK & your printed marker won't be detected. – Maxime Pacary Commented Oct 22, 2018 at 11:01

3 Answers 3

AR.js supports custom markers. Make any silly image with the marker generator.

Let ar.js know that you want to use your marker:

<a-marker type="pattern" url="patterns/mypattern.patt">
      <a-entity myobject></a-entity>
</a-marker>

and voila. You can check it out in this glitch using this image.

1. preset="pattern"

Firstly, if you look at the raw js script: https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js, you'll notice there is no preset="custom" in the else if. For example, search else if( _this.data.preset === 'kanji' ){.

There is however a preset="pattern". So ignore the documentation and set preset="pattern" For example:

<a-marker preset="pattern" type="pattern" url="img/pattern-marker.patt"> <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box> </a-marker>

2. Upload .patt to your GitHub so it can resolve the file

Secondly, my .patt wasn't being picked up locally, so url="img/pattern-marker.patt" may not work. Push this .patt file up to GitHub and then reference it using the raw.githubusercontent.

Example

You can test this using my pattern. https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt.

The image of the marker is below: https://github.com/lbelfield/augmented-reality/blob/master/src/components/trainTicket/train-ticket.png

React-Web-AR: This won't be applicable for you, but if anyone is using React-Web-AR like myself, use this:

<Marker parameters={{ preset: 'pattern', type: 'pattern', patternUrl: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt', url: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt' }}>

Step 1: First, make a custom marker by visiting this page

Step 2: Place the downloaded pattern ( from the above link ) to your root directory or upload it to your server

Step 3: Copy-paste the below code

 <a-scene embedded arjs='sourceType: webcam;'>
    <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
    <a-marker-camera preset='custom' type='pattern' url='PATH_TO_DOWNLOADED_PATTERN'></a-marker-camera>
    <a-entity myobject></a-entity>
    </a-marker>
</a-scene>