👈

HOT The word new as would be seen on a sticker on an item in store inventory trying to attract new customers. WEB AR

AR?

AR vs VR?

Augmented Reality plays with your current reality, adding a layer of something like an image or animation - this is the technology used to make instagram filters that turn your face into a cat.

Virtual Reality completely immerses you in the experience, like wearing an oculus headset and being under water.

XR, extended reality, or MR, mixed reality, are both bucket terms for AR and VR.

A-Frame?

A popular web framework to create VR. Check out the docs here!

AR.js?

A library for AR on the Web, enabling Image Tracking, Location based AR and Marker tracking.

We became interested in A-Frame and AR.js because:

AR has applications and potential to improve every field and industry. A-frame has a low barrier to entry to start working with web AR - in the docs promised only 10 lines of html to get started! 👏

Screenshot from aframes website landing page

The Fundamentals

Once you have A-frame and AR.js imported into your HTML, you need to create a scene comprised of these two main components:

Marker

The marker (pattern or barcode), image or location that the camera identifies to activate the object.

Object

The content displayed once the marker is recognized - like an image, text, 3d object, etc.

Our App

Custom Marker

We went through 8 markers until we figured out the limitations of custom markers.

Screenshot of all the 8 markers we tried before getting to one that worked.

Custom Object

Here was our custom object, a png:

he word new as would be seen on a sticker on an item in store inventory trying to attract new customers.

All together, the basic code looks like this:

Attempt at being helpful with a screenshot of the scene code including imports, scene makrer and object.

Here's how it looks when it works. I have a photo of the marker on my mobile device, am holding it up to the camera and the AR experience is displaying our object.

Judith testing out the custom web AR experience and it working for the first time

Try our custom AR experience:

If you want to see our AR experience, take a photo of this marker with your phone or a secondary device:

Our custom AR marker, a box with the text NEW and a thick black border around it.

Then click here and hold up the photo to the camera.

My mom got it working 👇

Screenshot of my mom getting our custom AR experience to work.

Making your own AR experience

But first, do you like funny stories?

So, you might notice on A-Frame's website they don't really advertise their AR capabilities. Since we couldnt find AR on the A-Frame website but knew from heresay it was a possibility, we googled "aframe ar" and followed the first tutorial that came up:

Screenshot from our google search of aframe ar that shows the tutorial we followed and the tutorial we should have followed

That first 2017 tutorial caused us some challenges detailed below, like why are these markers so limited?

Well, turns out there is actually an updated tutorial from 2020, the 3rd result in that google search, that extends the marker to be an image or location - much cooler!

But actually the simple marker tutorial seems a little more explicit and simple for beginners.

So choose your poison - if you just want a basic understanding of how it works, the 2017 tutorial is nice.

If you want to make something really cool, go for 2020!

And always check the date of your tutorials!

Getting started

The 2017 tutorial is great to follow, but make sure you use the most current JS imports for aframe and AR.js as the ones in the tutorial are out of date and will make it buggy when you try to make a custom marker.

Also, check the basic starter scene out on this code pen with a hiro marker:

Trip ups we had that maybe you can avoid:

  • If you want a custom marker, it needs to be a simple black and white design, you need to add the code preset='custom' in your a-marker-camera, and make sure your JS imports are the most current ones.
  • We ran into a CORS error with our custom marker asset, but when we spun up a local server that issue resolved. Open your terminal to the folder of your project and run: python -m SimpleHTTPServer 8080
  • Anticipate asking your user for 3 permissions - 2 camera permissions and 1 location permission.
  • My computer fan was gasping for air, took a lot of processing power

Conclusion

Overall, we reccommend trying out A-frame because it's instantly gratifying, web based, fun, and an easy intro to AR in the web.

To hear us chat about the pros, cons and ratings while sitting in our seperate closets for optimum audio, tune into the podcast 👇

If that's not enough WebAR for you - we went to the source. The curiosity of what the future of WebAR looks like led us to shooting an email to Nicoló Carpignoli - the current maintainer of AR.js. This episode is an interview with him where we dive into topics like the Web XR device API, w3c and AR js studio and the future. 👇