Three Ways to Make an Augmented Reality Web Application

Making augmented reality experiences is easier than ever. Here are three of the quickest ways to get something up and running.

Augmented reality is becoming easy to make and easy to use.

Below we’ll outline the three easiest, cheapest, and/or fastest ways to develop an augmented reality web application.

This was a free stock photo but looks like it could be a cool application for building planning - Photo by Patrick Schneider on Unsplash

A quick note on app AR vs. web AR

I’ve written about this before but I’ll say it again:

Web augmented reality is where it’s at, not phone app AR.

If I have to download an app to enter an AR experience then I won’t do it, and neither will most people. Web AR means everyone can experience your thing in around five seconds with no download required, you just go to a website. That’s important because the barrier of entry becomes nil.

Here are the three options we’ll compare:

• ZapWorks
• 8th Wall
• DIY with AR.js and A-Frame.js

ZapWorks — best for the entrepreneur

What is it?

• An online SaaS company and suite of tools for making augmented reality applications. They also do phone app and web AR.

Free Trial

• 30 days

Cost

• $95/month — 1k views, 2.5 cents for every additional
• $180/month — 2.5k views 2 cents per additional

Developer Knowledge

• None needed for the most straightforward implementation, but it may help.

Designer Knowledge

• ZapWorks has it’s own desktop design studio — it seems like they made a very dumbed-down version of Blender (a free and robust 3D animator app), which I find to be useful and a relief. If you starting from scratch making 3D models, as I was, then working in this studio is a much easier introduction than getting acquainted with one of those really robust 3D animation platforms.
• ZapWorks is the best route for the newbie 3D model designer but leaves the door open for knowledgeable 3D designers to their thing.

Pros:

• It’s the most straightforward to use of the solutions I’ve seen.
• The web AR experience loads quickly and reliably.
• Image tracking works better than anything else I’ve seen. Works well at a distance and with uploaded tracking images.
• You get some extra niceties included: like having an icon showing the user where they should be pointing their camera.
• Best bang for your buck for new products.

Cons:

• The cheapest route has ZapWorks branding included, which I find to be kitschy; it just looks like it was made for a children's scavenger hunt, but not in a good way. If they update this to be more modern and intriguing (like 8th walls branding), it would do them well.
• You’re marrying this method when you decide to use it. If you spend a lot of time creating a product and they up monthly prices there’s not much you can do aside from trying to negotiate down.
• The UI of the site is a little clunky and confusing at first.

Notes:

• ZapWorks seems to be pivoting from just a phone app AR experience to having a web AR experience as well. The functionality that lets you scan a QR code to enter a web AR experience is apparently new for them. This is good. If it were just an app then I would have disregarded this solution completely.

My preferred solution is with studio and web AR QR code (from ZapWorks)

8th Wall — best for mid to large-sized company

What is it?

• A SaaS company for making augmented reality experiences with their online development and test environment plus extra tools for making AR easier.

Free Trial

• 14 Days

Cost

• $1250/month, 25k views included 1 cent for additional views
• $3000/month, 500k views included 1 cent for additional views
• $5000/month 1mm views included, .25 cent for additional views

Developer Knowledge

• This solution is largely built to be comfortable for a developer — they have an online IDE (integrated development environment), a pretty simple way to test, QA, and deploy your code, even their own miny version of Github replete with sample projects.
• You’ll be making projects using aframe.js or three.js so having knowledge there is a bonus. If you don’t, you can pick it up pretty quickly by looking at the sample projects.

Designer Knowledge

• If you are already comfortable creating 3D models in your chosen environment (I used Blender) then you’ll be at home here just uploading your obj files. If not, you’ll have to learn quite a bit from scratch.

Pros

• Image tracking and the web AR experience on the whole work quite well.
• You can get moving quickly by cloning project libraries and tweaking them. You can do some really cool stuff pretty quickly by doing that — like having something come out of a portal in the wall, on a card, or any flat or curved object.
• The branding is strong, subtle, and futuristic. They did a good job with this. This is important because “made with 8th Wall” or some variation of that language will likely in your application built with it.
• A mid to large size company that already has developers and designers will find the version control and lack of reinventing any design or development wheel nice. For mid-size I would still consider ZapWorks first.
• If you are looking to learn about developing with A-Frame.js or three.js you will this route (if not, this is a con).

Cons

• Bloody expensive (I’m not British, that is how expensive it is). Yes for the solo entrepreneur it’s pricy. $1250 a month if you’re trying to just get going! It is $99/month if you’re messing around, but as soon as you do anything commercial you have to pay quite a steep price.
• It’s expensive.
• Need some development chops.

From the 8th Wall Project Library https://www.8thwall.com/8thwall/portal-aframe

Notes

• The AR industry is moving quickly. I think 8th Wall has found a place for itself, but I wonder if they could soon be displaced by open-source advancements. I’m curious what other value they’ll bring in the future.

DIY w/ AR.js and A-Frame — a new hope

What is it?

• A-Frame is an open-source javascript AR and VR library aka makes shapes and stuff with this.
• AR.js is a free and open-source library for making web AR experiences.

Trial/Cost

• None! Free! Open-source!

Developer Knowledge

• Requires a lot of developer knowledge.
• You’ll need to know how to know basic HTML, CSS, and a solid amount of javascript (though you could hack something together I think). You’ll also need to host your web AR experience somewhere — you can do it quickly and easily through GitHub pages, though that will require your code to be public.
• There will likely be a lot of troubleshooting, and no one to hold your hand, just stackoverflow.

Designer Knowledge

• You’ll need to know what you’re doing. You can find tutorials online for making 3D models if you’re new to it, but it will take time.

Photo by Zan on Unsplash

Pros

• It’s free!

Cons

• It will be buggy for quite a few scenarios. For instance, I had a lot of trouble with image and marker tracking. I spent quite a bit of time trying to get some image tracking working, only to have it be super shaky (which I tried to resolve via multiple troubleshooting routes).
• You will have to set up your own development and testing environment. I did do this by standing up a quick GitHub pages site. I’d make changes, push the new code to master in the repo, wait 30 seconds or so for the site to be updated, and then test it from my phone. That’s not ideal, it took a while and I was flailing trying to get things to work.

Notes

• I have a ton of hope for this project and similar projects to it in the future. I believe anything that can be open-source will eventually be open-source. For now, we’re in the classic scenario of a couple of companies making something much easier and charging out the wazoo for it while the open-source community hasn’t quite caught up.

I am not affiliated with any of the above companies. Just an interested party.

Joe Collins is a writer and software developer. He has worked as an engineer in the programmatic advertising, clean energy, and ski industries. He’s currently developing augmented reality web applications and decentralized applications.