Build your first Augmented Reality (AR) enabled webpage
in 5 minutes… 🤔
During the past few years, we see a huge proliferation of Augmented Reality (AR) in various domains. However, this technology was rooted in 1968 where a Harvard professor Ivan Sutherland invented a head mount display (HMD) called “The Sword of Damocles” with his student Bob Sproull. This is recognised as one of the earliest attempts to build an AR device. Nevertheless, the term ‘Augmented Reality’ was introduced by a Boeing researcher named Tom Caudell in 1990. After three decades…, Well, that is a little bit of history for you to know if someone says that AR is pretty new technology.
This article aims to help you to get some hands-on experience with AR if you haven't tried anything related to this technology. Without further ado, let's look at what are the prerequisites.
Prerequisites
- An internet connection, Google Chrome browser and a text editor. That's all :)
- Optionally, if you have any HTTP server, that will be handy but not necessary at all. Well, if you are using a macOS then do not worry about this, cuz you have python-based SimpleHTTPServer by default.
Before we start, I assume that you know about basic HTML. However, do not worry, you can still run the given code and get the AR experience and start learning from there onwards. :)
Alright! Let's get started!!
We are going to build a simple hologram as shown in Figure 1. Do not worry, if it looks too simple to you. "The beginning is the most important part of the work." — Plato. You can further develop it by adding custom 3D models, more animations etc. Let’s first see whether this will interest you. If it does, you can continue to build something like in Figure 2, which only needs a few more additional lines of code.
This is our end goal.
This is something you can try out afterwards.
In simple terms, what happens here is that the camera is looking for specific markers and then display the related holograms (virtual 2D/3D objects) on top of it. Let’s jump into the code.
First, you open your text editor and create an index.html file. Now you need to import a set of libraries as shown in Code_Sample_1 below. It is important to notice that in this article I am using a-frame version 0.9.2. This is important because based on the version there are slight differences in the HTML elements that you have to use. Further, you need to import ARjs. That is a web-framework for AR, that we will be using in this article. You can further read on AR.js here.
Next, you have to define the <body> element, as you normally do when creating a static web page. Once you created the body element, it is time to create a 3D scene. A scene is represented by the <a-scene> element. If you want to read further about a 'scene' refer here.
Afterwards, we embed and add AR.js attributes to the scene. Refer Code_Sample_2 below. If you want, you can change 'arjs' component as needed. For example, for a FullHD camera, you can use attributes and values such as this; <a-scene embedded arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth:1280; displayHeight:960; debugUIEnabled: false;'>. Further, <a-scene arjs='trackingMethod: best';> is another type of camera tracking you can use here instead of <a-scene embedded arjs='sourceType: webcam;. These are some basic ARjs configurations you can use.
In addition, you can use the attribute <a-scene stat> to displays stats about your application performance. These are for additional knowledge.
Once we have created the scene, we have to define a marker. Markers are similar to QR-codes. When we use AR.js, we have to define a specific marker for a specific 3D model. When the camera recognizes a marker, the webpage displays the 3D model on top of it (as in Figure 1). AR.js provides a set of preset markers (e.g. ‘hiro’, ‘kanji’), which you can directly use with the name of the marker along with the <a-marker> element. If you want to create your own custom markers, that is also possible with AR.js. We will look into that in a separate article (I will add the link here once I write it). Refer Code_Sample_3 and see how I have used an existing marker named 'hiro'.
Now we can start adding objects to the marker that we defined. For this, we are going to use an A-frame. This is built around a generic element named <a-entity>. In simple terms, keep in mind that A-Frame represents an entity via the <a-entity> element. By using this element we can add and modify the behaviour of 3D objects (holograms) as we want. However, for this article, we are not going to use any complex 3D models but to display a cube (as in Figure 1)). Good news is, this model (cube/box) is already exists/implemented in A-frame, thus we could use the element a-box out of the box. Refer Code_Sample_4 which shows how to add a simple box. There are many attributes such as position, color, opacity, which we can use to modify its colours, geometry(height, depth, width) to change the look of it.
5 minutes passed? Well, we are almost there. The only thing we need now is to add the camera component. The camera component defines from which perspective the user views the scene. However, you can still run Code_Sample_4 and see the holographic cube. The reason is, if we do not specify a camera component, A-Frame will inject a default camera. If you want to learn more about camera component refer here. Otherwise, add one more line <a-entity camera></a-entity> and see the difference when you run Code_Sample_4 and Code_Sample_5 below.
Well, that is it. Time to put the webpage into a browser and test it. Save your index.html and open it with Google Chrome (right-click on the index.html and select open with Google Chrome). The browser will ask you to give permission to access your webcam (See Figure 3), click 'Allow' and you will see your webcam is on and it is now waiting to see a marker.
Optional step: If you are using a mac, then go to the folder where you saved your index.html file using the terminal. Simply type python -m SimpleHTTPServer 8000 and press enter. Go to Safari or Google Chrome and type the address http://localhost:8000 and press enter. Again you will be asked to provide permission to access the camera. Once the permission is given, your webcam will be turned on and it will wait to see the 'hiro' marker.
How can you test this?
This is very easy. All you need is to get the following image (Figure 4) printed or take a photo of it from your phone (or save it to your phone). That is the 'hiro' marker. Now bring your printout or the photo taken from your phone towards your webcam. You will see the holographic cube appears as in Figure 1.
Congratulation!! 🤩 You created your first AR-enabled web page.
Now it is time to polish it a little bit and start building around this. There are a few things that you have to further research on. For example, how to add custom markers and how to add custom 3D models etc. I am hoping to write two more articles on these those two topics. Hopefully, I will be able to find some time to do it 🤞. As always, feel free to leave your thoughts and comments.
If you like this article and the content that I create, you can buy me a virtual coffee ️😊;
Cheers!
