What is WebXR and why is it so exciting

An explanation of what WebXR is and examples of how it is being used

In a previous blog post 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.

What is WebXR

To understand what WebXR is, you need to first understand what Extended Reality is, luckily for you I’ve already written a blog post all about that – click here to check it out!

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 webpage – you will be able to interact with the 3D content – regardless of what device you are on.

As an example, see this below interactive graphic of the word ‘WebXR’.

If you open it on a desktop / tablet / mobile device, you will be able to interact with it by tapping/clicking it. If you are on an AR, MR or VR capable device (e.g a Virtual Reality Headset), it will give you the option to interact with it in XR.

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 apps – they 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 Azure's Mixed Reality API).

Azure Mixed Reality API

Low barrier to entry

WebXR capabilities in browsers are becoming standardised thanks to the efforts of Google, Microsoft and Mozilla, making these features accessible and compatible across multiple devices.

Google WebXR Documentation

Ease of content creation

Creating and viewing AR content on the web is made much easier with Apple's Quicklook feature for Safari mobile web browser, which uses ARKit's world tracking via USDZ 3d files.

Apple AR Quick Look

New ways to play and collaborate

XR platforms like Spatial.io allow people to interact in both physical and digital worlds using Web XR, enhancing collaboration regardless of where users are or the devices they have access to.

WebXR with Spatial.io

Previous slide

Next slide

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.

Aframe.io is a library that allows easy creation of 3D web experiences. An example game called A-BLAST demonstrates this capability in WebVR.

Hubs 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.

Another example by Aframe.io is A-PAINTER, a webvr application that allows you to paint in 3d space using a VR headset and controllers.

AR.js is a library that enables development of Augmented Reality experiences on the browser, this example demonstrates AR via marker recognition.

AR.js Marker Documentation

Another example by AR.js, demonstrates GPS based AR - that enables graphics to be placed over the top of the world based on your phones GPS location.

AR.js GPS Documentation

8th Wall is a WebAR library that enables a website to recognise an image from the phone's camera and digitally augment it.

8th Wall Image Tracking Tutorial

8th Wall also allows markerless AR, which allows a user to map and interact with a virtual object to a physical location in their environment.

8th Wall Markerless AR Demo

Previous slide

Next slide

Conclusion

In this post, you’ve 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 😀

Creative Technologist

Share this post