Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Fundamentals of Developing Augmented Reality for Web With AR.js

DZone's Guide to

The Fundamentals of Developing Augmented Reality for Web With AR.js

Learn how the AR.js framework is making augmented reality applications possible for the web, and get some sample code to get started.

· Web Dev Zone ·
Free Resource

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

Augmented Reality (AR), which promises a whole new world of immersive experiences, ranks top in investment priorities of every major brand. In fact, Nike, Coca-Cola, and Apple have already set aside insane budgets to use AR in their marketing and product upgrade plans.

In its initial days, AR graphics used to render at 4 fps and only on specific devices with high-end configuration. It either required specific, designated hardware or users had to download native mobile apps on Android or iOS devices to experience AR. The Pokemon game is a good example of a successful AR app.

But, scaling AR to all devices proved to be a challenge. The immersive reality technology demanded user devices have hefty resources that can do some serious data weight-lifting. In other words, the awesomeness of AR was restricted to a minority of users who had high-end phones like the iPhone or had downloaded AR apps that were bulky and functioned only on the latest operating systems.

And, AR was not designed for the web. It remained an experience that was attainable only within the few inches of a mobile screen. The biggest chunk of users, those who use a desktop or the web, were left out of the AR experience.

AR.js is all set to change that. It is bringing AR to all devices with few lines of code.

Enter, AR.js - Augmented Reality for All, Made Possible

AR.js is a brainchild of Jerome Etienne - a Javascript and WebGL guru who also happens to be the 8th most active user on GitHub. The beauty of AR.js is that it is many times faster than its predecessors. It is said to clock 60fps second on a 2-year-old phone. 

It is a WebGL and WebRTC based tool which makes AR accessible everywhere, even on your 4.5-inch smartphone or your 22-inch desktop monitor and every other device in between. Plus, it is open-source. The open-source status will enable the entire programmer community to create new marvels using the immersive experience of AR. Jerome has written a well-detailed post on Github about AR.js and its technical nitty-gritty. You can read the post here.

Under the Hood Mechanism of AR.js

Until now developers have been relying on AR libraries like the ARToolkit or JSARToolkit which helps them put images and markers on top on real-life things or spaces. The ARToolkit has been around for almost 2 decades and has undergone 6 iterations. 

AR.js will further extend AR’s reach to all devices without demanding high system requirements. What makes the JavaScript a pure gem is its simplicity. You can create an entire AR experience with just 10 lines of HTML code. Alexandra Etienne shows how it can be done in this well-detailed Medium post

The ten lines of HTML code makes use of A-frame, a web framework used for building virtual reality experiences. A-frame works on all types of mobile devices, VR gear, and desktops. 

Here is the code that makes AR on the web possible.

<!-- include A-Frame obviously -->

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

<!-- include ar.js for A-Frame -->

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden;'>

<a-scene embeddedarjs>

   <!-- create your content here. just a box for now -->

   <a-box position='0 0.5 0'material='opacity: 0.5;'></a-box>

   <!-- define a camera which will move according to the marker position -->

   <a-marker-camera preset='hiro'></a-marker-camera>

</a-scene>

</body>

The hiro marker in front of the camera is used as the tracker for your object. You can add elements or objects to your AR by inserting them before the <a-box>. You can also customize your marker to have your own personalized text, logo, or avatar. 

Here is how to do it.

  • Upload your image to the Marker Generator.

  • Download the trainer marker.

  • Save the image as a PDF or print it in hard copy.

  • Replace the marker code to start using it.

Customizing AR Objects

AR.js controls the displacement of the camera. The A-frame is the actual control that helps customize the object or text in Augmented Reality. You can add your own choice of objects to the A-scene. You can find pre-built GLTF models for AR from Khronos.

Final Thoughts

AR.js will bring about a sea change in how developers build and launch AR apps for the web. It will blur the lines of distinction that separate mobile and web users from experiencing AR in real life. AR.js will create an equal playing field where all users will be able to experience the immersive nature of AR on all devices. These few lines of code should help you get started.

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

Topics:
web dev ,augmented reality ,ar.js ,ar apps

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}