Location Based (GPS) Augmented Reality on the Web

GeoAR.js is a free, lightweight library which brings Location Based Augmented Reality on the Web, using your phone GPS sensors. Let’s see what you can do with it.

GeoAR.js used to show places and click to interact with them. Without installing any app.

Disclaimer: GeoAR.js has been merged into AR.js v3, with a new official Documentation. If you found problem with this tutorial, you can look for more updated tutorials at: https://ar-js-org.github.io/AR.js-Docs/location-based/.

Web AR — State of the ARt

Augmented Reality on the Web is living a great time. We first had marker based Augmented Reality, with Open Source projects like ARtoolkit and AR.js, that make possible to show AR content over ‘markers’ when the camera recognize them. Looking to the future, the WebXR API specification seems promising, we might have first browser implementations by December 2019/January 2020. I can’t wait to see first Web XR projects, this technologies will enable far more complex Augmented Reality than “marker based” one, from markerless to superimposition features.

We are so close to it: to have the technology to build Augmented Reality experiences on the Web like the ones we already have on Mobile apps.

But still, as for now (September 2019), for Open Source at least, a lot of developers still rely to AR.js to release good AR experiences on the web. Why?

• it’s free and Open Source
• it’s simple
• it’s marker based, and for a lot of business cases, it’s enough.

But something new recently caught my attention. And made me think of delivering a different Augmented Reality other than this.

Google Maps Live View

Recently Google released its Location Based AR experience on Google Maps app.

Basically, the phone recognizes its location on the world from GPS data, and shows AR content on the phone to highlight places, directions, and so on. The following GIF explains better than thousand words:

Google Maps “Live Street” feature.

This is very interesting, although it needs a bit of performances tuning and a better usage of the phone battery. But still, it is a great enhancement for an app like Google Maps.

Anyway, this helps me to introduce the notion of Location Based AR. It means to show AR content related to objects with specific coordinates on the real world (latitude and longitude most of the time).

Imagine now the same kind of AR, but delivered on the Web, reachable from every phone just opening the browser. Without installing any app on the phone.

This seems impossible, right? Let’s see why this is not totally true.

Actually, it’s quite the opposite.

Location Based AR on the Web: GeoAR.js

I started from an old project of Location Based AR that was posted somewhere on AR.js repo issues. It was very promising but left alone from some years. So I dig deep on on the code and enhanced it:

• refactoring it — to make it more maintainable
• updating its dependencies — to avoid integration problems
• adding a good documentation — to help developers
• adding examples — to help everybody understand what can be done with it
• doing other minor things (new options, more standard code practices, and so on).

The result is GeoAR.js. I choose this name because one of the aims is to merge this project on AR.js, thus making it multiple-AR for the first time!

This way, in the near future AR.js will have features like the well known Marker Based AR and now also Location Based. Some guy is looking forward also to add NFT (Natural Feature Tracking)… but this is another story, really.

Disclaimer: If you don’t know AR.js, you may want to read this article of mine. Anyway, you can still continue reading: GeoAR.js can be also used without knowing AR.js at all.

Coming back to GeoAR.js, let’s see what you can do with it and what’s under the hood. It’s very simple.

GeoAR.js use cases

First of all, I know what you’re asking for. Is a demo available? Of course it is!

Before giving you the URL, please keep this simple rules in mind:

• open it on a phone that has GPS sensors
• activate GPS sensors before open it, possibly
• try to open it while you’re outdoor, so you will have a more stable experience.

You will see some places around you, represented by a place icon. If you click on them, it will show you the place name. Here’s the Demo URL!

Edit: you can also check another demo by clicking here: on this, places name are immediately shown over the icon.

Now let’s try to explain it.

Basically GeoAR.js enables two features:

• to show AR content on the phone based on position of places in the real world, according to camera orientation/position
• to interact with AR content and with Web UX elements.

As you can see, these two enable a lot of possibilities. I am working on three different basic examples that you can find here, in order to show to the community the potential of it.

The only one available at the moment (September 2019), called “click-places”, is the one I just posted the Demo URL. On that, I have dynamically added to the app a specific number of places using Foursquare APIs, starting from the user GPS position. As you have seen, I have also added the place icon and the click behaviour for each of them, using Javascript on a script imported from HTML.

GeoAR.js did the rest: once started, it asked me for GPS data permissions if not enabled (also handling problems about iOS 12 motions sensors), and showed places icon on the camera. Moving the camera and walking around will change position and orientation of the user on the real world, with GeoAR.js recalculating data and showing content where “it will be” in the real world.

To do that, it uses an algorithm to compute objects distances from the user position (further detail can be found on the repository, linked at the end of the article). If user is too far from places, objects are not showed. If it is near them, they are showed bigger. And so on. You got the idea.

Hope you will use GeoAR.js in a good-GPS-signal area.

How can we do that?

First of all, it is possible to create a Location Based Web AR app using only Javascript and HTML with GeoAR.js.

GeoAR.js uses AFRAME under the hood. You can see that clearly from the imports on the embedded file below.

index.html for “click-places” example.

AFRAME is a framework that makes easy to develop AR/VR experiences on the Web, using Web Components and potentially only HTML.

I decided to create GeoAR.js using AFRAME, so we will describe our application with HTML elements, adding eventual custom behaviour using Javascript. GeoAR.js documentation is available in order to get the full APIs set. On this article instead, I’d like to show you the principles behind it.

We basically have two components, actually they are AFRAME custom components:

• gps-camera
• gps-entity-place.

The first one is a sort of “singleton”, a single instance added to the a-camera and it is used to:

• getting position and orientation of the phone using GPS sensors data
• updating those data continuously
• compute distances from objects and user
• calculate where to show objects on the phone screen to better represent their position and distance in the real world space.

You do not have to take care of all these things: this component, when added, will handle all of these.

“places-name” example: places names are always visible on top of the icons (which are customizable).

gps-entity-place instead, are entities added to the HTML (dynamically or statically) and each of them represents a place in the real world space. They come with a pair of values representing latitude and longitude. The gps-camera, using data from sensors and knowing gps-entity-place coordinates, continuously recalculates how the AR content will be showed on the phone camera.

What we mean with “AR content”? Basically every asset (video, icon, image, 3D model) we decided to assign to a specific place. Choice is yours according to the business case.

You will decide this when adding gps-entity-place elements to the DOM. To add interaction, as said before, you can do whatever you want with Javascript, adding event based interaction with AR content but also with any DOM element.

script where you can see how I added gps-entity-place(s) and click behaviour for them.

What can we make better

Hope you get the main idea and the technology behind GeoAR.js. This all means that for performances, the better the GPS signal, the better the result. This is not a real limitation, it is clear that this is a technology (like many other like this) that relies on GPS signal. Of course it makes sense to use it by foot (Google Maps allows only this type of “navigation” to enable the AR mode, for the record).

My goal is to give this project to the Open Source community, on which I put my trust: what I’d love to see is a contribution from it with tests, features, bug fixing… but also reviews and opinions matters for me! Every kind of contribution will be super welcome.

Next steps are to enhance the examples and to merge it on AR.js project.

This is the Github Repository where you can find all informations about GeoAR.js.

EDIT: Now GeoAR.js has been merged into AR.js v2.0.0! Check out AR.js repository for documentation, issues and new features about Location Based Web AR.

Let me know what you think about this. You can ping me on Twitter. Can’t wait to hear from you!