)
)
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. It’s open-source and with nearly 16,000 stars on the AR.js GitHub repository being used by developers of all kinds to create innovative digital experiences.
It works by wrapping a few different libraries: Three.js, A-frame and ARToolKit into a single package. ARToolkit is notably made by the same people as AR.js and is the underlying technology that powers it. AR.js is designed to make it incredibly simple to implement and prototype bringing AR features into a web app.
The AR.js framework is surprisingly fast on mobile devices, like Android and iPhone. It does this by making use of native web technologies such as WebGL and WebRTC in order to take advantage of the device’s hardware. This allows it to be performant, whilst ensuring cross-device compatibility.
AR.js Features:
Web-based with no installation required
Open Source and accessible free of charge
High compatibility across devices
Works across all mobile devices with WebGL and WebRTC
No need for additional or uncommon hardware
It works just off a simple camera feed, so even a cheap webcam or phone camera will work
High performance up to 60fps
By leveraging native web APIs it’s able to achieve high performance even on slower devices
Can be done with <10 lines of HTML.
It’s incredibly terse, able to create a 3d scene with just a tiny bit of HTML
2 days to bring AR to web
With 2 days to prove the concept that AR can be quickly implemented in a project, I set up a simple prototype to show off the technology.
The prototype needed to be a simple AR platform that utilised AR.js, with a little Cube personalisation that would give me the knowledge and experience needed to implement augmented reality in websites.
Choosing your Tracking Method
AR.js supports 3 different tracking methods: image, marker, or location based.
Image & Marker
Image and marker base work in similar ways, you have a physical object or screen with an image on it and you’re able to scan that with your phone. However, the difference between the two is that the marker requires your image to have a black outline and is more reliable. Whereas, image tracking is a bit slower and less reliable but you’re able to use any image.
Location
The third method is location based, this uses the physical location of your phone to place items into the world (think Pokémon Go). This allows you to describe multiple objects,such as collectables or geocaches and require users to visit that position to see it.
For this project, I chose to use marker tracking.
)
How to develop your own augmented reality web app using AR.js
1. Create your marker image
A marker image works kinda like a QR code, you scan the marker image and the web application will display the 3D model on top of it. AR.js makes it possible to customise the marker image though by uploading an image of your choice to the marker training website.
My experience during the couple days was that AR.js is best to use simple, monochrome, and asymmetrical images such as logos or letters as it makes it easier to detect; in this instance, I used a 3 Sided Cube branded marker.
)
2. Choosing your model
For a basic setup, AR.js lets you project a 3D model above your tracker, this must be a GLTF file, which is a model file that includes references to all its textures and other required files for it to work. For my demo, we cooked up a simple 3D version of the 3 Sided Cube logo.
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.
)
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:
Here is an example code that will use the default marker image to display a 3D model:
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…
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!
If you want to try it out you can go to https://arjs-blog-post.vercel.app. When you look at the demo page, it should access your camera. If you point the camera at the marker image, it should display our logo.
You can host it yourself locally as well!
Just to note, 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.
Limitations, benefits and alternatives to AR.js
The main limitation of using AR.js is that the framework is hard to integrate with other products. It’s a very different way of working compared to the other tools out there. If you use this in a larger project, I’d recommend using ARtoolkit instead. This is the underlying technology that powers AR.js and by using it directly you get much more freedom at the cost of implementation difficulty.
If you're using image tracking, as of 2021, AR.js recommends using MindAR, it makes use of Tensorflow in order to provide better image tracking as well as support for face tracking. Although it doesn’t have support for location or marker tracking, so it’s not for all use cases.
Additionally, for location based tracking, they now recommend using LocAR.js instead. This is a forked version of AR.js that is specifically focused on location based tracking, dropping the other features.
Another platform that caught my attention was the WEB3 WebXR Device API; which accommodates markerless AR and supports a range of different hardware including sensors and head-mounted displays. This is likely to be the future of AR experiences on the web.
While these new alternatives are more powerful than AR.js this comes at the expense of being more difficult to implement. AR.js still has the upper hand in terms of versatility. If your project only needs location or image tracking, we’d recommend using these other libraries though.
With more modern libraries making more heavy use of computationally expensive AI, AR.js still remains a strong choice for more mobile device support. As the average user’s device gets more powerful and gets support for WebXR, it’ll be interesting to see what people are able to make with these powerful technologies and tools.
Published on 2 May 2019, last updated on 19 May 2023
)
)
)
