AR.js: Augmented Reality on the web with JavaScript

AR.js: Augmented Reality on the web with JavaScript

Augmented Reality is for sure on the coolest technology nowadays. Google, Apple, Mozilla and other tech company are pushing more and more to this technology and the web is also evolving in this direction.

Today I want to introduce you the best friend of AR technology for the web: AR.js, a powerful JavaScript library to create beautiful Augmented Reality web applications. Here is the official GitHub page: go there and download it!

Why AR.js?

But why write a simple introducing post about a JavaScript library? Because I love it. I just tried it in a couple of nights and I found it very simple and extremly fast: pure web technology. Like written on the official GutHub page, those are the best point of AR.js:

  • It's ridicoulus fast: also on old phones it will runs at 60fps;
  • It's pure web based: no installation needed but let's use the new API from browsers;
  • Open source FTW: the code is open and free of charge;
  • It work on any browser with WebGL and WebRTC.

How it works?

In simple words, it creates an augmented reality instance by taking advantage of the camera of your device and projecting your 3D composition written with three.js on a marker placed in you real world, powered by ARToolKit SDK. Based on you three.js skills you can create whatever you want: the totally AR stuff is managed by AR.js projecting by default on an Hiro marker (but it also supports other markers too). It works on the latest browser in the market, but if you are an iOS user, you need iOS 11 to get the library works.

If you want to check out a simple example, print this Hiro marker and visit this demo page that I've code for you.

If you want to try something different from a full-three.js approach, the library supports also a-frame, an amazing framework for building WebVR stuff. Check out this super simple tutorial to discover how to create Augmented Reality in 10 Lines of HTML.

Ar.js is for sure one the greatest project out today. I will post some tutorials about creating simple Augmented Reality composition using this library, so follow me and stay tuned! Cheeeeeeers!

Daniele Petrarolo

Daniele Petrarolo

In love with #JavaScript, #PHP and #Python / Web Developer / There's no place like

View Comments