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.
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).
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.
2. A-Frame Libraries to Create AR Scenes
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.
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.