What is WebXR and why is it so exciting
Tags: webxr, webvr, webar, webmr
Published: 2022-05-02 11:26:09

---
title: What is WebXR and why is it so exciting
published: true
date: 2022-05-02 10:55:47 UTC
tags: webxr, webvr, webar, webmr
canonical_url: https://jamesmiller.blog/what-is-webxr/
---
![Header Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vr2tio3i2wetbq23qz1.jpg)

In a [previous blog post](https://jamesmiller.blog/what-is-the-metaverse/) I explained the underlying XR (Extended Reality) technologies that enable the Metaverse.

In this post I will explain the impact of WebXR on the future of the internet and show some examples of what it is capable of.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489813686/NYyyGqNjL.png)

WebXR Logo

### What is WebXR

To understand what WebXR is, you need to first understand what Extended Reality is, luckily for you Ive already written a blog post all about that[click here to check it out](https://jamesmiller.blog/what-is-the-metaverse/)!

In a nutshell, WebXR is an api on web browsers, that allows the XR hardware (such as headsets and mobiles devices) to work on websites through the use of WebGL.

In practical terms, this means that when you visit a webpageyou will be able to interact with the 3D contentregardless of what device you are on.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489815485/REf21qtkn.png)

Image demonstrating WebXR compatibility across devices

### Why use WebXR

Traditionally XR has been limited to native apps that must be downloaded onto a users device, this has been due to hardware and software limitations.

WebXR has huge potential, for the same reason that web apps have advantages over native appsthey are just easier and quicker to get up on your device and use!

As technical limitations for WebXR shrink, exciting benefits become clearer:

#### A more useful and engaging internet

What a website is capable of is greatly enhanced, with integration of real time spatial awareness (with MR headsets like HoloLens 2) and cloud services (e.g [Microsoft Azures Mixed Reality API](https://developer.microsoft.com/en-gb/mixed-reality/)).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489817181/hPZK_336O.gif)

Demonstration of how web pages can gain an awareness of the spaces around them.

#### Low barrier to entry

WebXR capabilities in browsers are [becoming standardised](https://developers.google.com/ar/develop/webxr) thanks to the efforts of Google, Microsoft and Mozilla, making these features accessible and compatible across multiple devices.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489819871/mxuGznhSp.gif)

Companies like Google have increased XR compatibility across web browsers

#### Ease of content creation

Creating and viewing AR content on the web is made much easier with [Apples Quicklook](https://developer.apple.com/augmented-reality/quick-look/) feature for Safari mobile web browser, which uses ARKits world tracking via USDZ 3d files.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489821947/6HZZE6ljg.gif)

An example of the use of ARKit via Quicklook

#### New ways to play and collaborate

XR platforms like [Spatial.io](https://support.spatial.io/hc/en-us/articles/360060391652) allow people to interact in both physical and digital worlds using WebXR, enhancing collaboration regardless of where users are or the devices they have access to.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489823925/w4h8fCZzV.gif)

Example of WebXR with Spatial.io

### Examples of WebXR

Whilst WebXR is still in active development, it already has a lot of exciting applications that have been created for all sorts of categories.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489827297/BMnXl_HYl.gif)

Example showing how 3D assets can be leveraged across AR, VR and traditional websites, depending on the device that is viewing the page.

#### Gaming

Aframe.io is a library that allows easy creation of 3D web experiences.

An example game called [A-BLAST](https://aframe.io/examples/showcase/a-blast/) demonstrates this capability in WebVR.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489831304/xfdrXTQt_.gif)

[A-BLAST](https://aframe.io/examples/showcase/a-blast/)

#### Social

[Hubs](https://hubs.mozilla.com/) is a platform created by Mozilla, that allows anyone to create a Metaverse and invite your friends to it at the click of a button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489833772/Qf0icZmOd.gif)

[Mozilla Hubs](https://hubs.mozilla.com/)

#### Recreational

Another example by Aframe.io is [A-PAINTER](https://blog.mozvr.com/a-painter/), a webvr application that allows you to paint in 3d space using a VR headset and controllers.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489835880/kkKFQO8fk.gif)

[A-PAINTER](https://blog.mozvr.com/a-painter/)

#### Experiential

[AR.js](https://ar-js-org.github.io/AR.js-Docs/marker-based/) is a library that enables development of Augmented Reality experiences on the browser, this example demonstrates AR via marker recognition.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489837977/Juucxm9ba.gif)

[AR.js marker recognition](https://ar-js-org.github.io/AR.js-Docs/marker-based/)

#### Contextual

Another example by AR.js, [demonstrates GPS based AR](https://ar-js-org.github.io/AR.js-Docs/location-based/)that enables graphics to be placed over the top of the world based on your phones GPS location.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489840751/KJ9MzZuZJ.gif)

[AR.js location recognition](https://ar-js-org.github.io/AR.js-Docs/location-based/)

#### Useful

8th Wall is a WebAR library that enables a website to [recognise an image](https://www.youtube.com/watch?v=wiga9zGesZY) from the phones camera and digitally augment it.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489843537/JCsogV2Ta.gif)

[8th Wall image recognition](https://www.youtube.com/watch?v=wiga9zGesZY)

#### Playful

8th Wall also allows [markerless AR](https://8w.8thwall.app/r17-media-demo/?demo=moon), which allows a user to map and interact with a virtual object to a physical location in their environment.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489845378/YCviqw4fH.gif)

[8th Wall markerless AR](https://8w.8thwall.app/r17-media-demo/?demo=moon)

### Conclusion

In this post, youve learnt what WebXR is and various examples of it.

I hope this has been helpful in understanding these technologies and I plan on making more posts on how to get started with WebXR.

In the meantime, have fun playing with WebXR :D

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1651489847347/UoJYlbF2u.gif)