In 12 Lines of Code, Learn How to Create Augmented Reality
AR.js is an augmented reality development library. It is paired with the A-Frame framework, which is intended for web-based VR development. The key advantage of AR.js is the ease with which AR apps can be created. It is sufficient to import the library and add items that the user will view when certain circumstances are satisfied, such as pointing the camera at a marker or being in a certain place.
All documentation links will be included at the conclusion of the article.
How to Make an Augmented Reality App in Minutes
Import A-Frame and AR.js into HTML code as follows:
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>Then, within <body>, we'll construct a scene that has all of the necessary elements: a marker, a camera, and an AR item.
<a-scene embedded arjs></a-scene>The following step is to add a marker. For the time being, we're utilising the Hiro preset. This is the default AR.js marker.
<a-marker preset='hiro'></a-marker>Let's put an augmented reality item within <a-marker>. Let's look at one of the A-Frame framework's primitives:
<a-sphere position="0 0 0" radius="0.8" color="#2AA29F"></a-sphere>Finally, insert the camera. One must be outside the boundary. This is required so that the AR item appears only when the camera is hovered over the marker. Additional material is not displayed on the screen if there is no marker in the lens.
<a-entity camera></a-entity>Here is the complete code:
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-marker preset='hiro'>
<a-sphere position="0 0 0" radius="0.8" color="#2AA29F"></a-sphere>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>To check if it works:
- Open this application on the CodePen in the browser on your smartphone.
- Allow access to the camera.
- Point your camera at the Hiro marker.
We direct the camera - an object of augmented reality appears. We remove the camera - the object disappears.
You can substitute another 3D model for the geometric figure. glTF is the preferred format. Here is the entire code:
<head>
 <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
 <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
 <a-scene embedded arjs>
  <a-marker preset="hiro">
   <a-entityÂ
   rotation="-90 0 0"
   scale="0.1 0.1 0.1"
   gltf-model="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf">
   </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
 </a-scene>
</body>The browser supports augmented reality.
Another intriguing aspect is the incorporation of AR text in English. The characteristics specified in the documentation can be used to control its properties. Complete code:
<head>
 <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
 <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
 <a-scene embedded arjs>
  <a-marker preset="hiro">
   <a-entity
   position="0 -3 0"
   rotation="-60 0 0"
   text="align: center; width: 10; color: #2AA29F; font: roboto; value: Hello, Anurag">
   </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
 </a-scene>
</body>How to create your own marker for an AR object
The examples above use the standard Hiro marker. But we can create another image with AR.js Marker Training online tool . True, it must meet a number of requirements.
- maximum marker resolution — 16*16 pixels;
- square shape;
- only black or light gray color is used (for example, #F0F0F0);
- no transparent areas;
- contains plain text, either a letter or a number.
You also need to be mindful of contrast. If the marker has a black background, then the environment should be light. Otherwise, recognition will not work.
You can also use a barcode as a marker. You can read more about this in an article by AR.js developer Nicolo Carpignoli.
What else can you do with AR.js
Augmented reality is not limited to marker tracking. The library can also be used to develop the interactives listed below:
- Image tracking - when the camera is aimed at a 2D image, the user sees AR content on top of it or next to it. It can be another 2D image, GIF, 3D model, video.
- Augmented reality based on location. The user sees AR content in the given locations.
A detailed usage description and code examples can be found in the AR.js and A-Frame documentation .
Thanks!
