WE/AR Blog Web-Based Augmented Reality: All You Need to Know
Dark Mode

Web-Based Augmented Reality: All You Need to Know

https://secure.gravatar.com/avatar/92926fa028241ac3a1d78a857bd1e841?s=100&d=mm&r=g
By Oleg Boiko
17 min read
20.06.2022
web-based AR

Web-based Augmented Reality (WebAR) is a technology that allows users to view and interact with augmented reality (AR) content in a web browser. Unlike traditional AR experiences, which require users to download and install a dedicated app, WebAR experiences can be accessed directly from a browser. Maximize your reach, capitalize on ease of use, and provide a friction-less AR experience with WebAR.

Anyone with a web-enabled device can view AR content without downloading or installing additional software. While AR applications are more customizable, Web augmented reality experiences are generally easier to develop, making them more cost-effective. Not to mention that WebAR can be easily shared via a URL, allowing it to be more viral and market to wider audiences.

The main merit of WebAR compared to traditional solutions is that it can reach nearly twice as many users as AR applications. The seamless user experience, combined with an unlimited reach, drives the WebAR presence so rapidly.

How does WebAR Work?

As for WebAR, when used on mobile devices, it relies on sensors to be placed and tracked in your physical environment. Incorporating computer vision and sensors allows augmented reality web app experiences to deliver target and object detection, interactivity, videos, animated 3D objects, and more.

Right now, using WebAR on mobile devices allows enjoying all the merits of this technology, and the future looks even more promising. With mobile browsers adding new exciting features, including accelerometer and magnetometer, developers get a chance to introduce even more exciting functions in the future. To understand how WebAR works a bit more, look at its four critical features described below.

Six Degrees of Freedom (SDoF)

Six Degrees of Freedom
Source: wikipedia.org

In some sense, SDoF is a straightforward concept that refers to the freedom of movement of a rigid body in three-dimensional space. When working with 3D images using WebAR, the mobile browser tracks the model’s axis of position and orientation. Ultimately, SDoF enforces complete control over the 3D image orientation and movement, which is essential for a proper WebAR experience.

Streaming with a Camera

For proper work, the mobile camera on your mobile device has to provide a perspective and field of view. This principle is a must to blend filters and augmented reality web 3D objects into a real-world environment. For that reason, camera streaming is a must concept that enables WebAR as a whole.

Understanding of a Scene

WebAR requires a decent understanding of your real-world environment, which is necessary to place 3D objects and augmenters within your physical space. That’s why your mobile device must map a surface and estimate the amount of light and distance needed to provide WebAR experiences.

Modern Content Management System (CMS)

Don’t forget that modern WebAR tools utilize innovative Content Management Systems. Some tools and platforms capitalize on cloud-based technologies, which allow triggering AR events at ease. These triggers are QR codes, markers, locations, or anything else. Once you store triggers in the cloud-based CMS, you have a chance to include interactive content that you can embed according to your project’s goals.

WebAR Vs. App-Based AR

As we iterated before, there are two types of AR: web-based and app-based. App-based AR uses an app to deliver AR experiences, with an app that must be downloaded before it can be used. Web-based AR refers to augmented reality without app, which instead uses a web browser to deliver AR experiences with no downloads required.

Because AR applications use higher-quality computer vision capacities provided by ARCore and ARKit, they outperform WebAR solutions in terms of functionality. As everything comes with a price, AR apps are more resource-consuming regarding development and thus require more testing on various operating systems and platforms. 

Due to how accessible and far-reaching WebAR can be, it has an untapped potential for reaching millions of devices compared to AR apps. While Web-based solutions are less technologically prominent, they still provide a cutting-edge AR experience app-less.

WebAR Benefits

The merits that come with WebAR are never-ending, ranging from the absence of a need to download extra content and fast deployment to smart updates and various integrations. As a whole, WebAR’s most significant benefits are:

  • Enormous reach, allowing you to reach millions of devices as the part of your marketing campaign
  • App-less experience available as AR in browser, which eliminates any barriers to entry
  • Endless engagement with your audience that drastically boosts your brand awareness among the general public
  • 4x dwell time boost compared to mobile videos and non-AR experiences
  • Rapid deployment, which is achieved mainly through the app-less experience
  • Compatibility with popular web browsers, eventually contributing to an even higher reach

While AR applications also have their perks, WebAR is steadily gaining popularity thanks to the mentioned benefits.

WebAR Features

To better understand WebAR’s primary features, reviewing them one by one is necessary. While the WebAR solutions are a bit limited in functionality compared to conventional AR applications, their modern features are promising. Take a look at a few primary features WebAR presents to its users.

AR Face Tracking

AR Face Tracking
Source: circuitstream.com

As for AR face tracking, this technology allows a mobile device to track the movement of a person’s face. It is primarily used to create realistic 3D models, apply AR filters, and create augmenters that can be customized to control the AR experience.

Removing the Background

Background removal is the process of hiding, modifying, or completely removing unwanted elements from the background. Using WebAR technologies, the background removal can be conducted in a few clicks, making it a highly customizable feature.

Simultaneous Localization and Mapping (SLAM)

Simultaneous Localization and Mapping (SLAM)
Source: nvidia.com

Simultaneous Localization and Mapping (SLAM) is a technology that understands the physical environment using feature points. As a whole, SLAM allows WebAR solutions to recognize 3D objects and scenes. Moreover, it instantly tracks the world and provides a chance to overlay digital augmenters.

Geolocational Placement

Location-Based AR
Source: shutterstock.com

AR geolocational placement allows users to place virtual objects in the real world. It’s typically done by tracking the user’s location and using AR to display the virtual object on top of the real-world environment. It can be done using GPS data or manually placing the content on a map. The content can be anything from a 3D model of a building to a video or audio clip.

Object Tracking

Object Tracking in AR
Source: wikitude.com

Object tracking in AR involves using a computer vision algorithm to track a real-world object in a video feed. You can use the object tracking to create an AR experience in which virtual objects are anchored to real-world objects, allowing the user to interact with them more realistically. Object tracking can be used for various purposes, including education, gaming, and industrial tasks such as assembly and maintenance.

Image Tracking

AR Image Tracking
Source: vuforia.com

As for image tracking, this browser AR feature provides solutions that detect 2D images. The detection is triggered by displaying the digital content in videos, panoramas, slideshows, text, sound, or 3D animations. Image tracking can be done using various technologies, such as optical character recognition, fiducial markers, and computer vision.

Techniques That Turn Users On to WebAR

AR via QR-code
Source: pomona.edu

As a whole, WebAR provides an immersive experience by intertwining the digital and physical worlds. The real-world environment will be accurately displayed by looking at your phone’s camera. Thus, the 3D or other computer-generated content can be flawlessly blended with a physical environment. However, how the AR Web content is presented differs from AR applications. Since it requires leading users to a particular web page, a few techniques allow getting them to that place without significant barriers, including:

  • Social media presence allows brands to revolutionize their marketing efforts using WebAR-powered content. Users on social media will need to tap on the shared link or an ad to activate the WebAR experience.
  • Sharing QR codes is another widespread technique that turns users on to WebAR. Point your device’s camera at the code, automatically transitioning you to the AR experience.
  • You can also opt for SMS messaging, which your customers can open and activate the WebAR experience directly from the SMS link.
  • If you need to send a direct link, you can always do so to your target audience. Feel free to place it on your website, email, or social media post to deliver your WebAR experience.
  • Television advertising is another chance to make your WebAR experience more widespread. Give your consumers a way to activate your WebAR solution from their homes, just watching TV.
  • Banner ads can also benefit your WebAR campaign, providing your target audience with a full-scale advertising journey that is both engaging and immersive.
  • Create a shortened link using one of the URL-modification services and make it easy. This way, users will remember the URL and can type it in their browser manually. 
  • If you prefer using the existing augmented reality website to activate the WebAR experience, try working with the Call-to-Action (CTA) button.

As you can see, numerous techniques lead users to activate your custom WebAR experience. Choose the one that works best for your business objectives and start working on its implementation using one of the WebAR frameworks.

Mobile WebAR Platforms

One of the most exciting approaches to WebAR development is the creation of AR solutions for mobile devices using Web technologies. There are currently two developer experimentation platforms: WebARonARCore for Android and WebARonARKit for iOS.

WebARonARCore

WebARonARCore is an experimental browser solution for Android that creates room for possibilities for developers to create AR experiences using web technologies. This build is designed on top of the Android ARCore Developer Preview, featuring a similar functionality. While this solution is a great chance to tinker with WebAR on mobile devices, it’s not a fully-featured Web browser. Still, it has essential benefits, such as motion tracking, rendering, and understanding of the real world, making it a top-notch solution for mobile development.

WebARonARKit

Much like WebARonARCore, WebARonARKit is a custom solution for iOS devices that capitalizes on mobile WebAR experimentation. While this platform is meant for experimentation purposes only, it still features motion tracking, rendering, and synchronization of the camera frame. Please note that WebARonARKit is not an official Apple product and is now available for testing purposes as the GitHub repository. 

Browsers that Can Run WebAR

Because WebAR’s main feature is being app-less, a list of browsers can run WebAR seamlessly. As of now, you can try out WebAR experiences using one of the following augmented reality browsers:

  • Apple Safari
  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Mozilla WebXR Viewer
  • Magic Leap’s Helio
  • Samsung Internet

WebAR provides access to Web based AR experiences using a sophisticated technological stack. More precisely, these tools used in modern browsers include WebGL, WebVR, sensor APIs, and WebRTC.

WebAR Devices

WebAR experiences are available on various devices, from PCs and mobile devices to AR headsets. What makes this technology great is that its functionality is far-reaching, allowing it to be tested on multiple platforms. Let’s take a look at how WebAR manifests itself in various devices.

PCs

Because WebAR requires a head-worn device to experience AR, it’s the least flexible device. Still, when having an appropriate device, you can open one of the web browsers mentioned earlier and share the wanted WebAR experience. A huge benefit of using a PC with WebAR is an option to quickly process large projects with chunks of visual data, which are delivered faster than on mobile.

Mobile Devices

WebAR stands out as a promising technology that can revolutionize how we interact with AR as a whole. Since custom AR solutions require the use of applications, WebAR change that by allowing it to reach broader audiences with the use of mobile browsers. Just share the URL of your WebAR mobile experience without the need to download and install anything.

Microsoft Hololens

As for Hololens, this ergonomic holographic device can run WebAR experiences from a Web browser. While this Microsoft product was initially designed for organizational productivity purposes, there’s room for opportunity to use it alternatively. Developers can use Vuforia to create mixed-reality experiences, accompanied by the built-in Hololens developer support.

Magic Leap

When it comes to Magic Leap, it’s a leading AR optics with a large cross-support of WebAR solutions. Magic Leap uses WebGL API to provide efficient rendering for 3D graphics in a browser environment. Moreover, the company has a built-in browser Helio that supports cross-platform WebAR experiences developed with WebGL, Three.js, and other frameworks.

WebAR Tools

With more WebAR solutions manifesting themselves on the market, numerous tools can modify your AR experience. Some of these include platforms that require no coding knowledge to tinker with WebAR solutions. Let’s briefly review each individually to find out what additional tools match your business needs.

Blippar

Blippar focuses on computer vision and AR solutions for the print, entertainment, and advertising industries. Its key features include object and image recognition, scanning, and surface tracking. This tool is widely used for multi-functional WebAR solutions, including training, print media, gamified experiences, interactive packaging, and more. 

Zappar

As Zappar markets itself on the market, this platform is all about making AR accessible to everyone and everywhere, with no app required. This Web based Augmented Reality tool includes the ZapWorks toolkit alongside the ZapBox MR kit. Zappar’s features include 3D support, dynamic lighting, instant publishing, face and image tracking, and custom splash screens.

EasyAR

EasyAR delivers a full spectrum of custom AR for Web solutions for motion tracking, object recognition, and mapping features. Yet, it also has a dedicated WebAR stack that is implemented cross-platform. It provides an SDK with SLAM tracking, 3D object recognition, and screen recording.

8th Wall

8th Wall is an excellent example of how a cross-platform AR Web development tool can be used across industries. This world-leading platform provides a complete set of tools to create interactive experiences in your Augmented Reality browser. This product’s key advantages include a cloud-based code editor, a vast library of templates, a dedicated AR engine, built-in hosting, and a remote debugger.

Holoink

Holoink is a lightweight WebAR development tool with its main strength being smart prototyping options. This platform allows developers to create WebAR experiences in just a few hours by dragging and dropping 3D objects to the scene and visually overviewing the entire experience in the storyboard.

Xr.+

Xr.+ is in the lead of no-code WebAR applications that offer a wide range of options for 3D development. This platform has numerous features, including world, image, and object tracking, movement detection, virtual portals, and 360 image view. Thanks to this platform’s emphasis on functionality, it’s one of the best options for full-scale WebAR development.

Awe

With Awe, developers can introduce image, spatial, face, 360, and GPS WebAR functionalities. Feel free to test filters, masks, logos, brochures, virtual objects placing, exhibitions, and educational content, all from your AR browser. Awe also features a no-code mode for creating Mixed Reality experiences using a drag & drop interface, which can be extended using CSS and JavaScript code snippets.

Gravity Jack

If you want to skip app creation and rely on a solid WebAR solution, Gravity Jack stands out. It’s a full-service custom solution platform that focuses on AR development. Regarding WebAR, Gravity Jack capitalizes on real-world, face, and image tracking. This company has also released a dedicated AR web app, browsAR, for generating Quick Augmented Reality codes. 

Augmania

Augmania always aims to deliver the most fun, seamless, and fresh WebAR solutions possible. Working as a no-code platform, Augmania encompasses various features, including geo-tracking, object detection, and smart tracking. Do note that Augmania also works well with your digital assets, making it a go-to tool for no-code WebAR development.

Conclusion

WebAR, as a technology, has an untapped potential for your company to elevate your marketing or activation strategy to achieve tremendous results. Since WebAR is becoming more widespread and technologically advanced, you should use the right tools and frameworks to achieve your business objectives.

At WE/AR Studio, you can contact an expert team of WebAR specialists who will advise how to create a custom solution from scratch. Feel free to reach out to WE/AR studio at hello@wear-studio.com. After a consultation, our team will start discovering the most personalized WebAR solution for your business goals.