WebAR Explained: What it is and How it Works?

Artificial Reality (AR) and Virtual Reality (VR) technologies are not new to the tech world.

The commercial applications for both started appearing right around 2008-2012. So, yes, it has been more than a decade, but the technology did not blow up as expected.

However, the impact of the technologies has been significant, looking at the AR trends. For instance, VR changed how we communicate and interact with media, and it is evolving for various other use cases, like a gateway to a virtual world.

Similarly, AR integrated the digital world with the real world for exciting interactions like live view in Google Maps, games like Pokémon GO, and more.

Not to forget, Microsoft HoloLens, is a pristine example of what VR and AR can do. 

Considering all that, what is WebAR? Is it a new term? What does it mean? In this article, let me break it down for you.

What is WebAR?

WebAR, short for Web-based Augmented Reality, is a technology that provides you with AR experiences through a web browser. It is more targeted towards mobiles, but you can also experience the same on a desktop browser.

You do not need any special hardware or software for AR experience with WebAR tech.

All you require is a link to a webpage designed to give you a web-based AR experience. No need to download an app or purchase any special hardware. It should work on just about any decent smartphone, whether it is an Android or iOS device.

A fast and reliable internet connection should help provide a good WebAR experience on the type of your interaction. And that makes it the most accessible technology compared to VR and AR.

While the concept remains the same, some companies like Google refer to it as “WebXR” which enables browsers like Chrome to offer immersive AR and VR experiences through the browser.

How WebAR Technology Works

As the name suggests, it is a web-based technology. All the magic happens behind the web page when you start interacting with it. 

However, to make it work, there are some requirements. Some essentials include:

• Gyroscope accelerometer
• Camera sensor

Coupled with computer vision, web-based AR is made possible.

Most users have smartphones that meet the requirements. But what does it happen behind the web page?

Here’s what happens in simple terms:

1.  A trigger is needed to initiate the interaction with the AR experience on the web. With WebAR, it is a web link or a QR code you find on a card, a poster, or similar.

2. Camera stream access comes into action where virtual and real-world meet and sync. It is when you grant access to your camera feed after loading up a web page.

3. Once the user starts the camera stream, a 3D scene within the web page will be activated, which should sync with the camera’s position. 

This 3D environment contains AR elements.

4. The following process involves orientation that tracks the position/angle needed to blend in correctly with the real-world image from the camera. Technically, this is called the “Six Degrees of Freedom (6DoF)” which allows the webAR to track objects on the image and place/render AR elements on them.

5. Finally, the scene gets rendered that draws AR elements on the real-world view based on your interactions with the web page. These are handled/stored by a cloud-based content management system or AR Cloud.

Overall, many functions happen behind an HTML web page. Again, as an end-user, you do not need to worry about it all. 

If you are a developer, you need to refer to the documentation of the API or the framework you want to use to build the WebAR application to be accessed on a web browser.

For instance, ARCore documentation by Google is an excellent place to start, where you will learn about crafting a web-based AR experience that includes the following:

• Debugging
• Using the device’s camera
• Testing
• Rendering AR elements
• Placement
• Depth
• Lightning Estimation
• Faces/Images/Cloud Anchors

If you are new to these concepts, you might want to learn the differences between Augmented Reality vs. Virtual Reality.

WebAR vs. App-based AR

The apparent difference between WebAR and app-based AR (or native AR) is its availability or accessibility.

WebAR works right from the web browser without requiring additional software. However, you need to ensure that the browser supports the WebAR experience, which I will discuss in the later section of this article.

In comparison, app-based AR must be installed from the App Store or the Play Store.

Along with that, some of the other differences include:

How WebAR Experiences Are Created?

There are varieties of platforms, APIs, and frameworks that help you build WebAR experiences.

You might find some no-code cloud platforms offering you an easy way out, or you can explore Google or Apple’s official documentation to get started making WebAR applications that are compatible with smartphone browsers.

To give you an idea of what the development process of creating WebAR experiences looks like, here are some pointers:

#1. Choosing Target Browser and Use-Case

Before you start making a WebAR experience, you need to evaluate the type of target audience, the potential web browser they would be using, and what you want to do with it.

For instance, if you want to redirect people to a marketing campaign simply, you will have to consider all kinds of browser support and something easy to access for most.

On the contrary, you can choose the AR elements accordingly if you want to provide a rich experience for a particular set of users (with specific types of devices, like big-screen tablet users).

#2. Framework or Platform Selection

As I mentioned above, depending on the ease of development requirement, you can choose from various options to proceed with the development.

For instance, you can go the build-from-scratch way to follow the supported frameworks by the browsers and make it as per the instructions. Open-source WebAR frameworks like AR.js, JSARToolKit should be some friendly options.

Or, you can choose a no-code platform like XR to get started. Different platforms offer unique features. So, you might want to explore your options first.

If you can do it all, it may not cost much. However, if opting for a platform, you must opt for its premium plans to satisfy your requirements.

#3. Scan for Additional Tools

Depending on what you want to do, you could try specialized tools to add effects and various other stuff to your WebAR experience.

For instance, you can use Banuba’s WebAR SDK for a good face-tracking feature to provide an immersive product try-on experience.

#4. Asset Creation

The platforms you choose may already offer this built-in. But if you want to add some unique 3D assets to the WebAR experience, you can do that too.

X3dom is an excellent place to start creating 3D objects for AR applications.

#5. Optimize

When you put it all together, you must ensure that it is optimized to its maximum potential to be accessible to most users, even without high-speed internet access.

You can choose assets or simplify the experience if you think it could be too much to optimize.

#6. Testing and Distribution

Once it is ready to go, you should always test it out and check the experience first-hand. Potentially using a variety of devices and network conditions.

Next, you can continue distributing it using the platform you use. Or, do it yourself by creating a custom webpage, and hosting things on your servers, to share the experience.

Popular WebAR Framework

Here are some popular WebAR frameworks that help you create web-based augmented reality experiences.

#1. AWE 

AWE is a no-code platform that lets you effortlessly create web-based augmented reality experiences. If you know some technical bits, you may extend the functionalities with JavaScript and CSS.

You can simply create the app and open the link on your web browser. It is that easy.

In addition, you get to track analytics to keep an eye on how your app performs.

#2. ARToolKitX

ARToolKit is an open-source project that helps you build multi-platform augmented reality. It supports iOS, Android, macOS, Windows, and Linux.

If you want to use its software development kit (SDK), head to its GitHub page to explore what it offers.

#3. Vuforia

Vuforia is an enterprise-focused company providing AR solutions for various use cases, and that would include WebAR as well.

It may not be for everyone. However, if you are looking for a scalable solution for your enterprise, you might want to look at it.

#4. WebXR

WebXR is Google’s solution to provide access to VR and AR in compatible web browsers. It uses ARCore to power the AR experiences on Android’s default Google Chrome browser.

It is also a core part of what Samsung plans to use for providing immersive experiences on their Galaxy smartphones.

#5. ARKit and AR Quick Look

Apple’s solution, ARKit helps integrate the iOS device camera and its feature to help produce AR experiences.

This might be more suitable for an app. But, you might want to take a look it along with AR Quick Look documentation that lets you add augmented reality to the browser as well.

Supported Browsers to run WebAR

The support for the WebAR experience depends on what was used to build it. However, you should be good to go if you use the default web browsers, which include Google Chrome (on Android/iOS) and Safari (for iOS).

Some other popular options that are known to work are:

• Firefox
• Microsoft Edge
• Samsung Internet

Theoretically, you can try any web browser, whether it is a mobile browser or a desktop browser.

However, you may not get a consistent experience across all of them. So, if one browser fails, you might want to experiment with other options.

Benefits of WebAR

WebAR is popular for various use cases and categories of industries like fashion, jewelry, watches, furniture, tourism, and entertainment. The reason for its popularity is the benefits it comes with.

The benefits include:

• It is super fast to deploy a WebAR experience.
• It is easy to build a WebAR page compared to an app-based AR.
• WebAR is affordable for product-based companies to use for marketing purposes.
• WebAR is naturally accessible because most people have a smartphone that already supports it.
• It is easily compatible with a range of browsers.
• You can create a WebAR experience without any coding knowledge. 

Challenges in WebAR

While WebAR has many advantages, it has some downsides, which might prevent some from using the technology.

The key challenges are:

• WebAR experiences do not involve rich content; it is typically simple.
• The performance of WebAR technology is inferior because of how it works compared to native/app-based AR.
• WebAR experiences are not consistent across browsers, which makes it difficult to consider, even if it is faster and easier to deploy.

Even if the challenges sound quirky, WebAR is doing exceptionally well with marketing and other areas of its applications.

Learning Resources

As I mentioned, WebAR is a simple and effective experience for the end-user. However, if you are making things from scratch, without the help of no-code platforms, you need the technical knowledge to make it a reality.

Udemy offers solid deals on courses relevant to it. Some best courses to explore more about it are:

#1. Introduction to Web AR Development 

This highly-rated Udemy course includes insights on WebXR, mindAR, and more technologies needed to build a web AR application.

You are not just limited to learning, but you also get hands-on experiences and get to build a portfolio for yourself to get started.

#2. Intro to Augmented Reality on the Web

This course on Udemy focuses on WebXR and Three.js. If you want the basics to get the fundamentals right and want to build something minimal, you can opt for this course.

Wrapping Up

WebAR is explosive and yet limited. As the progress continues with augmented reality, all kinds of AR experiences will eventually evolve.

WebAR is not going anywhere anytime soon, considering smartphone manufacturers have slowly started to embrace and promote more than ever.

You may also explore augmented intelligence and augmented analytics.