Creating An Augmented Reality Website With AR.js

One of the most exciting new ways to bring experiences to users is Augmented Reality. AR has already been adopted in various fields, such as the automotive industry to provide augmented navigation, the education field to provide interactive learning experiences, and manufacturing to aid design and planning.

Augmented Reality has also expanded to the internet with websites offering AR experiences. In this article, we’ll create a website with Augmented Reality using the AR.JS JavaScript framework.

What is AR.js?

AR.JS is a lightweight JavaScript library that allows users to integrate Augmented Reality into web applications. This open-source library is a pure web solution utilizing three.js, A-Frame, and jsartoolkit. It works on any device with webgl and webrtc support. AR.JS supports the following AR types;

• Image Tracking - Identify 2D images and display related AR content
• Location-based AR - Display AR content based on the location
• Marker Tracking - Using markers like QR codes to display related AR content.
  

In this post, we will focus on creating an AR experience using the Image Tracking method.

Creating An Image-Tracking Based Augmented Reality Website

To create the AR experience, we need an image to act as the trigger and the AR content that will be displayed. Then they can be integrated into the web page alongside the AR.JS library to facilitate the AR experience.

Create Image Descriptors and 3D Model

Natural Feature Tracking is the technology that enables users to use images as AR triggers. When an NFT maker processes an image, it identifies interesting points of the image, which are known as Image Descriptors. These points allow you to determine the position of the camera. NFT markers can be created using the NFT Marker Creator tool, which comes as a web version and a Node.Js version.

Simply visit the web version, select the image and generate the NFT. It will create three files with .fset, .fset3, and .iset extensions. For instance, suppose you use an image named toy-car-image. In that case, the descriptor name will be the toy-car-image, and it will create the following files.

• toy-car-image.fset
• toy-car-image.fset3
• toy-car-image.iset

We will use a 3D model in glTF (GL Transmission Format) for the AR content. glTF allows for efficient transmission and loading of 3D scenes and models. It minimizes the size of 3D assets and reduces the runtime processing required to use these 3D assets. We will use a sample model in the gLTF GitHub repository for the purpose of this article.

Integrating the AR to a Web Page

Now we have our assets. The next step is integrating them into a web page and creating the AR experience. Since AR.JS supports both A-Frame and three.js to display augmented content, we must ensure that the correct library for the framework used in the web application is imported. Here, we should import the AR.js image tracking library for A-Frame as we will be using A-Frame.

The following code block demonstrates how to integrate AR.JS with the created assets to facilitate the AR experience on a web page.

index.html

Now the user can visit the website. It will create the AR experience and present the user with the asset loading screen, as shown below.

Once it is completed, point to the image, and you will be presented with the AR content specified in the code block.

That's it! You’ve successfully created an Augmented Reality Experience using AR.JS.

When you’re ready to deploy your AR site, check out Codesphere, the most intuitive cloud provider on the market!

Happy Coding!