Technology is moving fast on the web, and one of the more interesting fields of technology for the web has to deal with Augmented Reality. All the big players are getting into this space from Apple, Google, and Microsoft. In this introduction we are going to talk about how you can integrate basic AR on a website using a single marker.
In this tutorial we are going to be working with AR.js which is based on the Artoolkit software and A-Frame. Because of this software it is marker based.
What is a marker?
Markers are a simple form of QR codes that a camera will recognize and place the 3D model on top of it. You can use a predefined one (such as the Hiro or Kanji marker or custom design your own marker.
If you do design your own you have to keep a few things in mind.
The max resolution for the marker is 16x16 pixels/grid
Must be square in shape
Must only be black and light gray (#F0F0F0) with no transparency
Can contain simple text
You can use a simple generator here: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
AR.js also supports another kind of marker called barcode.
For now let’s simple download and print (yes using a ink printer) a simple Hiro marker.
https://github.com/jeromeetienne/AR.js/blob/master/data/images/hiro.png
What is A-Frame
A-Frame is a web framework for building VR experiences. Wait... I thought this tutorial was about AR, not VR. That is correct. But A-Frame provides us the building blocks and APIs we need to build out our AR website.
AR is Simple
With how advanced AR seems, it is actually quite easy to integrate AR into a site. Scary easy in fact.
Let’s get started.
To get started with this project we have to include a few libraries. The first being of course A-Frame
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
Next we need to include a project that using A-Frame with AR. This can be found at https://github.com/jeromeetienne/AR.js/
Include this into the project:
<script src="https://raw.githack.com/jeromeetienne/AR.js/1.7.1/aframe/build/aframe-ar.js"></script>
Let’s prepare the website with some simple CSS
body {
margin: 0;
overflow: hidden;
}
Next we need to start the AR code by setting up a Scene. This is done with the <a-scene> tags.
<a-scene embedded arjs='sourceType: webcam;'>
<!-- AR code here -->
</a-scene>
We need to define what marker we are using. This is done inside the <a-scene> tags. We will be using the Hiro marker.
<a-marker-camera preset=“hiro”></a-marker-camera>
For this example we are just going to create. A simple box and a sphere to show.
<a-sphere position="0 0.5 0" radius="0.5" color="#EF2D5E"></a-sphere>
<a-plane position="0 0 0" rotation="-90 0 0" width="1" height="1" color="#7BC8A4"></a-plane>
Load it up
Save this code and visit it on a device that has a camera. Point it at the freshly printed marker and you should see a free floating box.
Or you can check out the example at https://codepen.io/cibgraphics/full/ydboZB or can the QR code on your phone. Some people's version of Chrome can not run this. It is best to view on your phone, or Firefox/Safari.
Special Note
The one gotcha with dealing with AR is that it must be over a secure connection (https) because it does require access to a user's camera.