WebAR vs Native AR – a comparison of the two popular Native AR apps and Web-based AR applications to decide which is better for your business:
This articulatory guide explains web-based Augmented Reality, how it works, and the technology stack behind it.
It begins with a brief definition and explanation of augmented reality and native AR applications before moving on to a detailed discussion of web-based augmented reality.
Let’s explore the key differences between WebAR vs Native AR!
Table of Contents:
WebAR vs Native AR – Comparison
What is Augmented Reality/AR
To make it simple, augmented reality technology basically augments real-world space with 2D or 3D graphical elements.
What is Native AR Application
In business terms, Native AR apps are the ones that are packaged and deployed in relevant app stores for distribution. Users have to download the application from the relevant app store and start using the app.
In technical terms, native apps run directly on the relevant operating system of the device. Android and iOS provide ARCore and ARKit frameworks to execute AR apps on their respective operating systems. Because of that, native AR applications will have better control over device hardware, which enables them to give better performance.
Pros of Native AR
Performance
AR features in an application are mostly resource-intensive for any device platform, and they require a substantial amount of memory for proper operation.
AR is primarily concerned with displaying 3D objects and their animations over a real-world environment, which necessitates a sufficient amount of RAM size and execution speed to provide a presentable and pleasing performance free of glitches.
Rendering
Native applications run on the operating system, because of which they will have direct access to the Graphics Processing Unit, or GPU, in short. The GPU is responsible for drawing graphical elements on the screen.
Platform-Specific Features
AR applications will use device-oriented platform-specific features like cameras, gyroscopes, plane tracking, acceleration, and orientation. Native apps, which are installed on operating systems, will have better control over these features.
Technology Stack for Native AR
Game engines like Unity and Unreal play predominant roles in Native AR application development. These game engine frameworks integrate with device operating systems like Android and iOS to provide realistic graphic rendering.
The preferred programming languages for Unity are C# and Unreal is C++, but at the same time, both the engines support visual scripting called BOLT and BluePrint, respectively.
So what is there for JavaScript developers? The answer to this question is WebAR.
What is WebAR
In Web-based Augmented Reality or WebAR, AR content is displayed on web browsers like Chrome or Safari, without forcing the consumer to download the app from the relevant app store.
WebAR does the same thing as the standard AR app, augmenting the real-world environment with digital content. The only difference is that webAR content lives online on a web page.
Example of webAR applied to static image poster with a picture explaining before webAR and after webAR. Before webAR is just a poster image, webAR displays 3D models, 3D text, and social media icons and their links over the browser.
Before WebAR
After WebAR
[image source]
How to Trigger WebAR Content
WebAR is basically getting users to the webpage where AR content has been designed and developed. There are ways to take users to the AR content page, but each has its own way.
QR Code to Trigger WebAR Content
All the latest advanced mobile phones, Android and IOS, have this functionality. The built-in camera application can scan the QR code and trigger action based on it. So, simply pointing the camera at a QR code would take the user to an AR experience developed and hosted on the webpage.
Post AR content URL on Social Media Platform
Brands can craft a campaign on social media like Meta, Instagram, or WebAR content. Tap on the shared link to activate the WebAR experience.
Embed in the existing Website & click to Invoke Action
WebAR content is available on the webpage, so this webAR URL can be embedded in the existing website content.
Directly Use the AR Page URL
A common way to access WebAR content is to key in the domain name in the mobile phone web browser.
The below-mentioned image throws light on behind the scenes webAR functionality:
[image source]
Browser Functionality
Mobile browsers are nowadays coming up with advanced functionalities. As mentioned in the native AR section, browsers support sensor APIs to bring in features like gyroscope, orientation, magnetometer, and webGL along with the webXR standard to enable VR and AR content on the web.
What is WebAssembly
WebAssembly plays a vital role in displaying AR content in browsers. WebAssembly is a web standard that allows you to run and execute assembly code as binary code. WebAssembly files are created by compiling C/C++ files, which are executed by JavaScript code. So it takes up the complex job of handling the computer vision part of AR.
The image below shows the working of WebAssembly:
[image source]
What is WebGL
[image source]
The above image explains the webGL architecture.
The Web Graphical library is a JavaScript API for drawing 2D and 3D interactive graphics on different web browsers without additional plugin support.
What is WebXR
WebXR is basically a set of standards to support web content in virtual reality, augmented reality, and mixed reality hardware.
The webXR device API is a set of APIs developed to manage the process of rendering 3D graphical elements in hardware devices like AR Glass, immersive headsets, and AR-supported mobile devices.
The WebXR API manages the timing, scheduling, and point of view of drawing the scene on hardware. It does not load and manage 3D models; instead, it is WebGL’s responsibility to load 3D models and other graphic elements on the screen.
The below-mentioned image explains the working of webXR functionality:
[image source]
What Features Does WebAR Support
#1) Plane Tracking or Real World Tracking
[image source]
The above picture explains plane tracking via webAR.
Simultaneous Localization and Mapping, or SLAM, is an important feature of AR. An AR device should sense and identify its 3D position in a real-world environment. This is achieved by calculating the spatial relationship between itself and multiple key points.
With this feature, the physical environment can be digitized with 3D models and overlaid with virtual content over the webAR camera view. AR Commerce-like product visualization comes under this feature category.
#2) Face Tracking
[image source]
The above picture makes clear the viability of face tracking on webAR.
Machine learning subset object detection and classification is the underlying technology of the face tracking feature of AR. Recognizing the face and its features and gestures to trigger an AR action is the concept behind this feature.
#3) Target Tracking or Image Tracking
[image source]
The above image explains image tracking or target tracking via webAR.
Even in this feature, machine learning plays an important role in recognizing the target image via object recognition and object classification algorithms. By sticking a QR code to open the camera from the web browser, scanning the target image would trigger the webAR action by overlaying the 3D or any graphical content on the camera view.
Pros of WebAR
- No app installation: Since webAR content resides on a web browser like a webpage, users don’t have to download an app from the app store to experience AR.
- Easy Analytics Integration: Since the WebAR content resides on the web page, it is easy to collect user behavior analytics based on click events.
- Faster to launch and Ease to Deploy: Web Technologies has the power and flexibility to launch and update features in a short time, similarly to webAR, which relies on web technology standards like HTML, CSS, and JavaScript for development, so there is no need for dependency on core platforms.
Technology Stack of WebAR
Open source :
Javascript library frameworks: threejs, babylonjs, A-frame, ARjs, model-viewer, viromedia.
3D modelling: Blender, Cinema4D, Maya.
Paid platforms: AWS Sumerian, 8thwall, Zappar, Blippar, Holokink, echo3D, Augmania, and the list goes on and on. Every day, new low-code AR platforms are introduced into the market, continuing the current trend.
Comparison Table: WebAR vs Native AR
| WebAR | Native AR |
|---|---|
| A Web page is developed to display AR content. | An application is being developed to showcase AR content. |
| HTML, CSS, Javascript and 3D models form the basis for creating AR content. | AR Core, ARKi, Unity, and Unreal platforms form the basis for developing AR content. |
| The basic building blocks for rendering AR content are webassembly, webGL, and webXR. | The device's built-in GPU, graphics libraries, and device drivers form the basic building blocks to render AR content. |
| A minimalistic prototype for AR content is a preferred option to take up webAR. | Native AR is required for high-processing, graphically intensive, and memory-intensive AR content. |
| Ease of access is the success of webAR. Consumers can access webAR content just by scanning the QR code. | Consumers have to download AR apps from the respective platforms' app stores, for example. Android users can access the Google Play Store, while iOS users can access the Apple Play Store. |
Frequently Asked Questions
Some of the frequently asked questions are answered in this section.
Q #1) What is webAR?
Answer: WebAR, also termed Web Augmented Reality, is a technology that augments the real environment with 2D or 3D graphical elements via a mobile phone browser. Instead of forcing the consumer to download the app from the app store, it facilitates the user’s access to AR over the mobile phone browser just by keying in the webAR URL.
Q #2) How does WebAR work?
Answer: By scanning the QR code using the mobile phone camera lens, the AR content web page URL, which is embedded under the hood of the QR code, will get triggered and the AR content will get displayed.
Q #3) How much does webAR cost?
Answer: Platforms such as 8thwall, Hololink, Zappar, and Blippar offer a webAR studio for creating AR content as well as hosting infrastructure and asset storage space for $40-$60 per month.
Q #4) How do you implement webAR?
Answer: There are two approaches to tackle webAR implementation. One is via the open-source route, without paying any cost for infrastructure, but spending only for implementation. Using one of the open-source Javascript libraries like threejs, babylonjs, AR.js, model-viewer, and, for 3D modeling, the open-source software Blender.
Second, paid platforms such as 8th Wall, Zappar, Blippar, Hololink, Microsoft Power Apps, and the list goes on. These platforms provide an IDE for developers to design and implement AR content. For 3D models, Sketchfab, CGTrader, and Cinema 4D provide both free and paid options to augment AR content.
Conclusion
From this tutorial, one can understand the major difference between Native AR apps and Web-based AR applications. We briefly discussed the techniques and the tech stack behind WebAR vs Native AR. But there would be confusion about picking one among them. It all depends on the business requirements.
Suggested Reading =>> AR vs VR tutorial
If a business wants to run a campaign for a short time and does not involve much complex 3D or graphical overlaying, then webAR is a better choice than native AR. Whereas the business needs a complex animated simulation with real-time 3D rendering, it’s better to pick Native AR.
To quote examples like marketing campaigns, product showcases, and visualization, they can all go with webAR. Manufacturing, logistics, and medicine all require high processing and memory capacity GPUs to render high definition and more realistic 3D models, so it is best to use a native AR application in these cases.
Which AR is best according to you?