Augmented Reality Part 2: How to get started with AR as a JavaScript developer
Nowadays a lot of AR (Augmented Reality) development goes on the web and this is where JavaScript reigns. Whether you want to create a new AR application or add an AR view to an existing web application, JavaScript provides a set of functions and utilities to your web application.
At first, if you are a JavaScript developer looking to get into the AR you could possibly feel weighed down while discovering the usually required skill set of Machine Learning or Internet of Things. However, it actually works in your favor considering JavaScript is the language is persistently stated as the one you should know.
In this blog, we will take a look at how a JavaScript developer can enter the AR world rapidly and easily.
Know the AR web app development in JavaScript
AR is an enhanced version of reality created by adding digital information on your real-life reality. AR is are likely to have an enormous impact on businesses through a variety of commercial, consumer, and enterprise applications.
Before you begin, you must have a look at numerous AR platforms such as Mozilla - aframe, Google - ArCode, Facebook - AR Studio & React 360, and MS - ChakraCore, Apple’s - ArKit. Subsequently, knowing all these options, you can begin with the development of an AR project in a relatively easy manner. After having a quick look at the options, starting a JavaScript AR project is relatively easy. Whether you want to create a new AR application or add an AR view to an existing web application, JavaScript provides a set of functions and utilities to your web application.
You can begin by taking any web or app dev framework like Ionic, Cordova, React Native or Vue Native to embed the AR framework of your choice to deploy 3D assets.
If you want to deploy on the web using mostly marker-based AR, you can use GitHub repository with AR.js (free), argon.js (free but limited) or awe.js (paid PaaS but with an old GitHub repository still available).
If you are able to port the available SDKs by AR-related companies, there are many APIs that render as AR on browser for example, Mapbox and it is developed on JavaScript.
You must undeniably know at least one 3D JavaScript package, and THREE.js the most prevalent to master design and animation in JavaScript.
Develop your own AR web app
1. Render 3D Graphics to your AR App
With a basic understanding of AR platforms, you can look at deploying 3D assets to your web app. The main framework of 3D development is A-Frame (supported by Mozilla) that enables rendering of 3D rich content in the browser without using plug-ins.
It is not just for adding 3D content, but it is also a powerful framework to develop AR content that supports features such as Windows mixed reality, Cardboard, Oculus Go, and is used for AR.
The A-Frame aims to define and go beyond the concept of 3D content and to make full use of picture motion tracking and controllers. It is a brilliant choice for building rich 3D experiences on the web. It’s built on top of three.js, advanced 3D JavaScript library that makes working with web apps extremely easy and fun.
2. A-Frame Libraries to Create AR Scenes
You can use AR.js for building marker-based AR scenes. This tool comes with A-Frame and the Three.js extension that works with any smartphone, irrespective of its OS version. The best way to build mobile AR application is to use ARCore for Android and ARKit for iOS. In order to use these SDK’s capabilities on the web, you can use two experimental apps released by Google including WebARonARCore and WebARonARKit that let a JavaScript API to work on the aforesaid capabilities.
Google also released Three.ar.js library with Three.js helper functions that support you building AR scenes. Aframe-ar was created to use A-Frame wrapper, it is simple to change your A-Frame scene tag from
Aframe-xr is built on three.xr.js and they both are created by Mozilla. It supports the WebXR Device API by using the webxr-polyfill. The main use of aframe-xr is that it permits you to build advanced experiences.
3. Adding content to your AR Web App
Almost everyone knows the value of high-quality content on the internet. This is important in the process of creating web apps with XR and 3D experiences too. While there is a lot of free and easy to use 3D app creation tools available, most of us started using existing content instead of creating the new content for the app. You can utilize two main tools for adding 3D assets to your AR app.
Sketchfab is a famous website to look for the latest 3D models that have over 2 million models to offer. Thousands of free models are available and that are of usually high quality, and best suited for a commercial purpose.
Google Poly also has thousands of options to offer you for 3D models for building your AR applications. Even for a commercial purpose, you can use this tool for free.
Both the options support multiple 3D formats, including glTF. You can choose the required format for your business needs accordingly.
Conclusion
Initially, for web developers, the AR world often seems somewhat distant. The truth is that the required tools to enter and create in this world already exist. Libraries like Three.js and A-Frame allow to use our existing web development skills to build rich AR scenes. In addition, complementary libraries add capabilities that aid the creation of AR scenes, and even advanced experiences that adapt to the capabilities of the device on which they run.
We have covered some basic aspects to get started with AR web app building on JavaScript, but there is still lots to learn and optimize. Today, companies are looking to start adding AR to their work. If you are interested in web AR you can have a deeper look at the A-Frame library and you will see you can build more custom components or even components you can interact with.