Can I use A-Frame for AR?

While A-frame WebVR was fun and certainly easier to code than I expected, my ultimate aim is to create an augmented reality or AR experience. Could A-Frame help with this?

After a few false starts I stumbled upon this Github repo with a JS file promising to turn my A-Frame experiment into augmented reality with just “10 lines of code”. Surely too good to be true? In addition to the basic A-frame code, you need to reference the aframe-ar.js file and change the scene tag to specify ARToolkit (an open-source library which I presume targets your phone’s camera?). Lastly you need to add a hiro marker which acts as a real-world ‘marker’ on which your AR creation will appear.

Below is the standard Hiro marker but you can apparently design your own and ‘train’ ARToolKit to recognise it. Super cool! Hiro markers have specific criteria like they must be flat and have a certain amount of contrast (the first one I experimented with was cut out too small and it didn’t work).

Standard issue Hiro card

Standard issue Hiro marker

Here’s the code you end up with:

<script src=””></script>
<script src=””></script>
<body style=’margin : 0px; overflow: hidden;’>
<a-scene embedded artoolkit=’sourceType: webcam;’>
<a-box position=’0 0 0.5′ color=”#whatever colour you fancy” material=’opacity: 0.5;’></a-box>
<a-marker-camera preset=’hiro’></a-marker-camera>

I was amazed it worked first time, a magical 3D cube appeared on the Hiro marker. Small children gathered to look, impresed with my bogus AR wizardry. Connect to your iPhone (as in previous post), pop your phone into a Google cardboard and you have a 3D cube balanced in your hand. I revisited my file, played with the colour and opacity then got different shapes working.

A-frame AR - magical!

A-frame AR – magical!

Still not much closer to working out how to make my AR prototype but certainly learning lots along the way. Appreciating this process will be more about the journey than the destination (and I’m cool with that).