WHAT IS WEBAR? A HANDBOOK ON WEB-BASED AUGMENTED REALITY

As a digital agency that prides itself on creating custom mobile applications, we’ll be the first to tell you that mobile apps aren’t needed for all augmented reality projects. While apps are no doubt at the top of the mountain when it comes to AR, the emergence of WebAR, means they are no longer the end-all-be-all when it comes to deploying certain types of content. 

WebAR is short for “web-based augmented reality”, or simply, AR content that is displayed using a smartphone’s web browser (like Chrome or Safari). These unique experiences skip downloads at the App Store and jump right into the action — making augmented reality more accessible than ever! 

Getting Started

At its core, WebAR does the same thing as standard augmented reality: provide an immersive experience by blending the physical and virtual world. By looking through a smartphone’s camera, a real-world environment is accurately digitized so that it can be enhanced with computer-generated content. With WebAR, the difference lies in how this content is accessed. Traditional AR experiences need a dedicated app, while a WebAR experience lives online within a special web page. 

Since WebAR requires getting users to a specific web page, there are a few different techniques that get users where they need to go with as few barriers as possible.

Scan a QR code using a phone’s camera

This is done via the mobile device’s built-in camera application. Simply point the camera at the code and it will automatically take users to the AR experience — most iOS and Android mobile devices have this functionality. 

Social media advertising

Going this route allows brands to craft a campaign around WebAR content. Paid advertising can also reach similar audiences from beyond their normal social media following. All users need to do is tap on the shared link or ad to activate the WebAR experience. 

Call to action on existing website

Since WebAR experiences already live on their own web page, why not tie it to an existing website? 

Type in a web address manually

The best course of action here is to select a domain name that’s easy for users to remember and type into their browser.

All of these methods provide different opportunities to take users straight to a website with a WebAR experience already loaded up and ready to go. By offering a selection of options, WebAR lets businesses pick the format that best fits with their campaign and goals. 

Now that WebAR is less of a mystery, let’s dive into what some development platforms can do. Two tried and true options for building WebAR experiences include 8th Wall and ZapWorks Studio. Both platforms have all of the basics needed to get started: 

Real-world tracking

8thWall Image Targets WebAR Experience

8thWall Image Targets WebAR Experience

Similar to standard augmented reality, WebAR looks through a phone’s camera to digitize a physical environment and overlay virtual content. This is important for keeping the experience realistic and avoiding jarring mishaps (EX. a virtual character properly can stand on a physical table vs. hovering awkwardly in space).

Face tracking

Recognizing user faces opens the door for some wacky filter options, such as digital tattoos or makeup. Users can feel more involved if a specific facial gesture triggers the experience (such as scrunched eyebrows or “Say cheese”). This feature is geared towards brands who want to create a more personal experience and is a great source of shareable content.

Image tracking

With this feature, brands can set a specific 2D image (EX. signs, logos, posters) to serve as a special marker. This marker will trigger the AR experience when it’s detected by a phone’s camera, adding another layer of immersion by allowing users to start the experience themselves.

What would this look like put together? Say the goal is to have a brand’s mascot spring out of a cereal box and greet the user. The brand could print boxes marked with special QR codes, then encourage them to examine it with their smartphone’s camera. Scanning the QR code will trigger the experience, causing the character to come to life and dance a jig right on the kitchen countertop. Even better, users can pose and resize the mascot as  Both 8th Wall and Zapworks can build this kind of scenario, but if you’re undecided between the two, you can’t go wrong with 8th Wall and their proven track record

What Makes WebAR So Special?

While handy for some users, apps can run into barriers like limited phone storage or choppy download speeds while on data. On the other hand, WebAR is as easy as tap-and-go and gives brands more options for rolling out augmented reality experiences. As long as a device supports ARKit (Apple devices) or ARCore (Android devices), it’s fair game. 

Convenience isn’t the only perk of WebAR; one of the main benefits that web pages in general provide is analytics (Note: traditional apps also offer many of the same data points). Depending on the overall objectives of the campaign, gathering data on how users interact within the experience can be worthwhile. WebAR can be integrated with traditional metrics like clicks and time spent per page or even more granular insights like how long a user interacted with a particular AR experience. Having this data on hand makes life much easier for marketers and other decision makers to follow up on campaign results. 

WebAR also makes sense from a holistic standpoint. App development is no easy feat, and sometimes it doesn’t make sense logistically to build a dedicated app for a single AR experience. For companies or brands who aren’t ready to commit resources to a full app, WebAR is an affordable way of getting the job done.

Limitations & Challenges

When deciding between a traditional app or WebAR, it all comes down to the type of augmented reality experience. Time for some hard facts; AR experiences have more potential within an app, where there’s more memory to play with and therefore more complex animations. In comparison, web-based AR has less wiggle room and can result in lower-resolution visuals. This is because a dedicated app has access to all of a device’s hardware, while a web page is limited by a device’s mobile browser. 

Speaking of mobile browsers, there’s the potential issue of browser compatibility. Chrome and Safari are built very differently, so creating a web experience that works consistently across all mobile browsers can cause some headaches. After all, nobody wants to tap a link expecting a fun experience only to read “Sorry, your device is not supported.”

With this in mind, WebAR will usually be more basic than app-based AR. This isn’t to say that WebAR can’t deliver personalized, immersive experiences, but flashier ideas will likely deserve their own app. Convenience has its tradeoffs, so bear this in mind when considering which format would align best with your campaign.

Looking Forward

WebAR stands as a flexible option to deploy AR experiences, giving any brand a way to add interactivity to their campaigns. With a wide variety of customization and deployment options, web-based augmented reality can easily be added to the toolboxes of brands and products everywhere. As technology continues to evolve, web browsers like Chrome and Safari will ensure that complex WebAR experiences become a familiar sight in the coming quarters. As pioneers in the augmented reality space, we’ve worked on our fair share of WebAR projects (and still are!), so feel free to send any lingering questions our way!

RELATED WORK

RELATED ARTICLES