Augmented Reality for the Web

This blog post briefly describes how to build Augmented reality applications for the Web. We are talking of pure HTML, CSS and Javascript apps as well as hybrid solutions.

Hybrid AR Applications

Probably the easiest solution is to build AR applications on a hybrid basis with Cordova. It is an Open Source solution from Apache to create mobile apps with HTML, CSS and Javascript. It is possible to create and test hybrid Wikitude AR projects within Adobe Phonegap Deskop and the Phonegap app on Android or iOS. Adobe states, «the PhoneGap Desktop App is the easiest way to get started with Phonegap. It’s an alternative to the Phonegap [or Cordova] CLI [command line interface] yet uses the same libraries behind the scenes with no complicated installation». The programming is possible with pure Javascript.

As you can see on the screenshot, the Phonegap desktop App for Windows or Mac supports Wikitude AR

To deploy the application as an app for Android or iOS it is necessary to buy a license from Wikitude.

Pure Web based solution with AR.js

AR.js by Jerome Etienne provides both an A-Frame and a three.js extension that allows building marker-based AR scenes. AR.js was built with WebGL and WebRTC, so it is the only solution that works with almost every smartphone, regardless of its OS version.

Working with Google ARCore and Apple ARKit

Google as well as Apple offer solutions to create native AR apps. While Apple only allows to create apps for iOS, Google offers  WebARonARCore (Android) and WebARonARKit (iOS). Both are apps for iOS and Android that let developers create AR experiences using web technologies.

To make things easier, helper libraries for three.js and A-Frame make the development process easier. Unfortunately only a handful of Android smartphones are supported by WebARonARCore, WebARonARKit supports iPhone 6S and 6S Plus and higher.

Other solutions

Source

  • JSARToolKit uses WebGL & Three.js to render 3D models over real world objects. The last update was two years ago.
  • Argon.js framework provides a set of abstractions and utilities for adding an AR view to your web application in a platform- and technology-independent way. The last update was a year ago.
  • Awe.js provides a few other types of AR experiences such as augmented reality markers, location-based, and leap motion sensor AR. The last update was two years ago.

Contact

Martin Vollenweider, HTW Chur (Switzerland)