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).
Here’s the code you end up with:
<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>
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.
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).