All Blog Posts

AR.js: A Guide To Developing An Augmented Reality Web App

As the AR.js framework brings augmented reality to web; I wanted to spend my week of Innovation Time developing an AR web app to make the tech more accessible and bring digital objects off the screen and into the real world.

Development

Augmented Reality Website

What is AR.js & what is it used for?

AR.js is a JavaScript library that allows developers to introduce AR features and functionality to any website using a few lines of HTML.

The project is open-source and with nearly 13,000 stars on the AR.js GitHub repository, it’s being used by developers of all kinds to create more innovative digital experiences.

The AR.js framework includes cross-browser compatibility and supports both WebGL and WebRTC, meaning it’s functional across Android and iPhone devices above iOS 11.

Wrapping a number of different AR frameworks including three.js, a-frame and ARToolKit, AR.js makes it incredibly simple and easy to bring AR to web apps.

 

Features:

  • Cross-browser compatibility
  • High performance up to 60fps even on older devices
  • Web-based with no installation required
  • Open Source and accessible free of charge
  • Works across all mobile devices with WebGL and WebRTC
  • No need for additional or uncommon hardware
  • Can be done with <10 lines of HTML.

5 days to bring AR to web

With five days to prove the concept that augmented reality can be used across website and PWA (progressive web app) development, I decided to set my goals from the get-go.

This meant breaking up my week into achievable outputs and aiming to have a working prototype by the end of Friday, getting myself used to the software and creating a scalable framework that could be used for both Cube and our clients.

The prototype needed to be a simple AR platform that utilised the AR.js language, with a little Cube personalisation that would give me the knowledge and experience needed to implement augmented reality in websites and PWAs.

Augmented Reality for Websites

How to develop your own augmented reality web app

1. Create your marker image

One of the limitations of using AR.js is that you have to use a marker image.

They work kinda like a QR code, you scan the marker image and the web application will display the 3D model on top of it. It is possible to customise the marker image though by uploading an image of your choice to the marker training website

My experience during this week is that is it’s best to use simple, monochrome images such as logos or letters as it makes it easier to detect; in this instance, I used the 3 Sided Cube logo.

AR Marker Image

2. Design your model

I’d recommend keeping this simple for your first attempt and stick to the <a-box> shown in the sample code. You can customise it by changing things such as the colour and opacity.

Once you have got to grips with implementing AR, you can come back and change this model. You could do this by either downloading a pre-made model from a website such as Sketchfab or if you are feeling creative, try creating your own 3D model.

Augmented Reality 3D Model

3. Implement your project

It is surprisingly simple to get the example code up and running. You just to include the libraries and add the sample code.

Here are the scripts that you will need to include:

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

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

Here is an example code that will use the default marker image to display a pink cube:

<a-scene embedded arjs=’sourceType: webcam; debugUIEnabled: false;’>

<a-marker preset=’hiro’’>

<a-box position=’0 1 0′ material=’opacity: 0.5; color: #F70087;’></a-box>

</a-marker>

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

</a-scene>

If you have chosen to use a custom marker, you will need to edit the above code a bit so that it is using a custom preset rather than the hiro one, give it a type of pattern and add a URL with points to the marker .patt file created above, like so…

<a-marker preset=’custom’ type=’pattern’ url=’/PATH/TO/YOUR/MARKER.patt’>

One thing to bear in mind is that the <a-scene> code must be added straight after the body tag – it will not work if it is added inside any other elements such as a <div>.

4. Try it out!

This works best over https, so you will either need to use a service like ngrok to create a tunnel to test your local code, deploy your code somewhere or even use CodePen. When you look at the frontend, it should access your camera. If you point the camera at the marker image, it should display the cube.

Limitations, benefits and alternatives to AR.js

The main limitation of using AR.js is that the framework functions around marker images; meaning that any image you want to bring into the real world with augmented reality needs to first be created and included in your code.

There are alternatives that look promising in this area, such as the markerless AR platform Argon.js, the limitation here being that it only works through the Argon browser (a much larger drawback).

The platform that caught my attention the most, however, is the WebXR Device API; which accommodates for markerless AR and even utilises a range of different hardware including sensors and head-mounted displays.

In my future weeks of Innovation Time, I’ll definitely be exploring this platform more and seeing the different kinds of AR platform I’m able to develop with it.

How could you use an AR web app?

Think augmented reality and web apps are a match made in heaven? Get in touch with our team to discuss your ideas and discover the best way to bring them to life.

Published on May 2, 2019, last updated on May 2, 2019

Give us the seal of approval!

Like what you read? Let us know.

7

Tags

Explore Tech of the Future

We dedicate 15% of our team's time to explore emerging technology and work on projects they're passionate about. So far we've developed a Jenga game in augmented reality, an app that mimics the human eyes and an interactive map that tacks natural disasters in real-time.

Read more

Latest from the blog

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
Up Next
Projects