AR.JS: Web-AR enabled Invitation Cards
AR.js is great library with over 13K stars on Github. AR.js makes easy to develop augmented reality apps. It is based on web technologies. AR.js is built on the top of A-frame. Using AR.js we can display augmented reality content in our app using markers.
Markers can pattern type or bar code type. In this project, we are using markers which are of pattern based. You can read more about A-frame and AR.js in their documentation.
A-frame — https://aframe.io/docs/0.9.0/introduction/
AR.js — https://github.com/jeromeetienne/AR.js/blob/master/README.md
Now directly skipping into the motto of the use case. Every occasion in one’s life involves inviting well wishers for the treat. Ever thought of inviting our buddies using invitation cards which are augmented reality enabled, so that they can view can view the content in more realistic way rather than normal printed card pattern. Web AR has made it more feasible since no need of application for it, we can directly go in the web app which we can deploy it any of the available free hosting site and view and enjoy the ar content.
Final version of the app can be viewed here
For my use case, there should be three sections in the invitation card. One should deal with the invitation video, other should deal with the count down time for the event and last one should deal with the map location.
For these three sections, I have trained three markers by using the marker training site provided by the developers of AR.js
Pattern markers can be trained using this site — https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
Therefore using three images, I have got three marker images and three *.patt files. These *.patt files are used to detect the specific marker which we will be using in our app to display the content.
For every web app, the start point will be the basic html file. The basic html gist is as follows:
Now start including the latest A-frame build and AR.js , that we will be using in our project. The following gist is as follows:
Now define the body of our document, and create an aframe scene and define that we would like to use AR.js to create an ar scene and also initialize debugUIEnabled to false, if you don’t want to console out logs on the main screen. The following gist as follows:
Now we will add the camera to the ar scene we have created. This camera is used to detect the markers.
So, to display any media files as augmented content. We need to include all those files in a-assets. The following gist shows how to include the files in the app.
I will be using an video to play, when an specific marker is made visible and an image to use an texture for count down timer and image pointing the map location. So i’m including one video and two images in a-assets is as follows:
It’s time to add marker patterns to our project document. Using a-marker we will include all those *.patt files that are used by our app to detect markers. And we will also define the content we should display inside a-marker, while an specific marker is detected. And we can perform multiple actions and can modify the content during run time by defining components. The following gist is as follows:
Now to make our video to play when an marker is visible and pause the video when an marker is not visible, we defined the component near the video marker in the above gist i.e, video-vihandler. Now we will register that component and make it to perform necessary actions on the video. You can learn more about A-frame entities by going through their documentation. The following gist shows how video-vidhandler component is executed:
Similar to that, near count down timer marker clock-text component is defined. The component is registered and it will get the current time and target time and calculate the difference. The setInterval function will trigger for every one second and it update the value of a-text near countdown timer marker. The following gist shows how countdown timer is executed and updated a-text value in the document.
Now, we are near to the completion of the project. The one thing that is left out is mappoint component, which should redirect to the specified location when clicked on the image. Thus to perform the specified click event an click event listener is added and redirected when the image is clicked. The following gist shows how mappoint-handler is executed.
We need to push this entire code with all the assets to any free hosting sites. So that the app will be live and we can play with the ar content. In my case, i pushed all my project folder to a github repository and enabled github pages. Finally, AR-App is live.
Hurrah..!! We are near to the completion. Now we can include all those markers in any invitation template, which is good looking and start sharing to your buddies..!! You can also include the AR App live url using QR Code in the template. My template looks as follows:
I have hosted the entire project in a GitHub Repository. You can clone the project and try it out.
GitHub Repository — https://github.com/itzzmeakhi/Invitation-AR
Live URL — https://itzzmeakhi.github.io/Invitation-AR/
Let me know what you build and do share the article if you liked it :)
Know more about me — http://itzzmeakhi.me
