Introduction to AR.js: Bringing Augmented Reality to the Web

6 min readSep 3, 2024

What Is Augmented Reality (AR)?

Augmented reality (AR) embeds the real world with computer-generated digital information like visuals and sounds. AR uses computer hardware and software, such as apps, consoles, screens, or projections, to combine digital information with the real-world environment.

AR is a growing trend among companies developing metaverse solutions, particularly in mobile computing and business applications.

Augmented Reality (AR) offers great experiences that bring the virtual and physical world together. Initially though AR development was limited to native mobile apps, with the advent of AR.js, we can now create AR experiences directly in the browser within minutes. In this article, we’ll see about AR.js, a simple library for augmented reality on the web, and let’s also walk through a basic example to get you started!

About AR.js

AR.js is an open-source library that allows developers to create AR applications that run efficiently in web browsers. AR.js is built on top of three.js. One of the key advantages of AR.js is its performance, which is capable of running AR experiences at 60 frames per second on smartphones. It supports marker-based AR, location-based AR, and even markerless AR. In this article we will learn to work with marker-based AR.

AR types

AR.js features the following types of Augmented Reality, on the Web:

Image Tracking, when a 2D image is found by the camera, it’s possible to show some kind of content on top of it, or near it. The content can be a 2D image, a GIF, a 3D model (also animated) and a 2D video too. Cases of use: Augmented Art, learning (Augmented books), Augmented flyers, advertising, etc.
Location Based AR, this kind of AR uses real-world places in order to show Augmented Reality content, on the user device. The experiences that can be built with this library are those that use a user’s position in the real world. The user can move (ideally outdoor) and through their smartphones they can see AR content where places are in the real world. Moving around and rotating the phone will make the AR content change according to users position and rotation (so places are ‘anchored’ in their real position, and appear bigger/smaller according to their distance from the user). With this solution it’s possible to build experiences like interactive support for tourist guides, assistance when exploring a new city, finding places of interest like buildings, museums, restaurants, hotels and so on. It’s also possible to build learning experiences like treasure hunts, and biology or history learning games, or use this technology for situated art (visual art experiences bound to specific real world coordinates).
Marker Tracking, When a marker is found by the camera, it’s possible to show some content (same as Image Tracking). Markers are very stable but limited in shape, color and size. It is suggested for those experiences where it requires a lot of different markers with different content. Examples of use: (Augmented books), Augmented flyers, advertising.

Why Choose AR.js?

Cross-Platform: Works on both desktop and mobile browsers.
No App Installation: Users can access AR experiences directly through a URL.
Lightweight and Fast: Optimized for high performance.
Open Source: Community-driven with plenty of examples and support.

Considerations

WebRTC: AR.js relies on the WebRTC API for accessing the device camera. Ensure the browser supports WebRTC.
HTTPS: Most modern browsers require HTTPS for accessing camera and sensor data. Ensure your website is served over HTTPS.
Permissions: Users must grant camera access permissions. Ensure your website correctly handles permission requests.
WebGL: AR.js uses WebGL for rendering 3D graphics. Ensure the browser supports WebGL.

The below script helps you check for the WebRTC and WebGl support of your browser.

In this article we use AR.js with A-Frame, a web framework for building virtual reality (VR) experiences. It provides an easy-to-use declarative HTML API to create 3D and VR scenes. Here we use A-frame to build a 3D model AR.

Let’s get into the example, all you need is a bit of HTML knowledge, a web browser and a text editor (I have used VS code). The below short script gives you the basic AR webpage.

In the above,

<script src=”https://aframe.io/releases/1.2.0/aframe.min.js"></script>

includes the A-Frame library.

<script src=”https://cdn.rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.js"></script>

includes the AR.js library for A-Frame.

<a-scene embedded arjs>:

<a-scene> is the main container for an A-Frame scene.
embedded makes the scene take up the full size of its parent container without adding default UI controls.
arjs enables AR.js functionality within the scene, allowing AR capabilities.

<a-marker preset=”hiro”>:

<a-marker> defines a marker that AR.js will track.
preset=”hiro” specifies the Hiro marker, a default marker pattern provided by AR.js.

<a-box position=”0 0.5 0" material=”color: red;”></a-box>:

<a-box> adds a 3D box object within the marker.
position=”0 0.5 0" places the box at coordinates (0, 0.5, 0) relative to the marker’s position.
material=”color: red” sets the color of the box to red.

<a-entity camera></a-entity>:

<a-entity> is a generic entity in A-Frame.
camera specifies that this entity is the camera through which the scene is viewed. It automatically gets configured to work with AR.js.

AR web with default Hiro marker

We can also use custom markers. For creating custom markers upload your desired image in the website, https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html and download your marker in .patt format.

Now just replace <a-marker preset=”hiro”> in the above example to <a-marker type=”pattern” url=”your-pattern.patt”>

AR web with custom AR marker

Let us now try adding a gif instead of the 3D box object. All we need is to download the gif we wanted and Replace <a-box> with <a-plane>:

<a-plane> is a flat, 2D plane that can display an image or video texture, making it ideal for showing a GIF.

In the a-plane material specify the path of your gif like given below:

<a-plane position=”0 0.5 0" width=”1" height=”1" rotation=”-90 0 0" material=”src: url(your-gif.gif);”></a-plane>

AR web with custom AR marker and gif:

About the Author

Apoorva K M S is a passionate Software Development Engineer at Codestax.ai, currently honing her skills in JavaScript, Dart, and frameworks such as Flutter, while also gaining experience with Node.js. She is always eager to learn, adapt to new technologies, and stay up-to-date with the latest trends in software engineering.

About CodeStax.Ai

At CodeStax.AI, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But what is the real magic? It’s our tech tribe behind the scenes. If you have a knack for innovation and a passion for redefining the norm, we have the perfect tech playground for you. CodeStax. Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us and be part of the revolution that’s redefining the enterprise tech landscape.