Thursday, 8 December, 2022 UTC
Summary
Demonstrating how the WebXR API can be used to create cross device compatible experiences.
Intro
I’ve recently posted about what the buzzword ‘Metaverse’ means, as well as examples of what the underlying technology ‘WebXR’ is and what it is capable of.
What I didn’t address, was how to start developing these experiences from a practical development perspective.
I’m currently in the process of writing documentation for an open source library I’ve created called Wrapper.js, which aims to easily allow developers to spin up Full Stack Web3-based applications.
In the meantime, I wanted to share some key code snippets — that may be helpful to someone out there looking to develop these kinds of experiences.
Overview
In order to make the most of the information in this post, it's important that you understand these two key points:
The Concept
The big difference between traditional XR and WebXR, is that WebXR-based applications run in the browser.
Using the WebXR API, you can query what capability is of the device you’re using to view the experience and load the appropriate content so that it is able to load without issue.
This enables you to open the web application on an XR headset, desktop or mobile device and be able to interact with the content.
The Tech Stack
The libraries we will be using to implement this concept are:
- Three.js (implemented with React-Three-Fiber) for the creation of 3D assets.
- React-XR for leveraging the WebXR API (e.g VR Headset + controllers) & React-Three-Drei which has useful functions for creating WebGL content.
- React to componentize and standardize the logic — in this case, we will use Next.js.
WebXR Code Examples
There are two examples to talk through in order to implement cross-device compatible WebGL content, these are outlined below.
These are extracts from the WebXR template of the Wrapper.js repository.
The index file
In Next.js, this file would be located in pages/index.js — if you’re using another implementation of React, you can extract this into your index file.
Important lines to note here are:
- Line 5: where we import the XRScene Higher Order Component we will write to do the logic to load assets correctly.
- Line 16 and line 39: which indicate how you wrap your 3D assets (GLTF models/meshes/lights, etc) with the XRScene component, demonstrating how to neatly contain and separate ‘web compatibility’ logic — from ‘WebGL content’.
XRScene Higher-Order Component
The XRScene component is written in a manner that you can pass other child components into it and render them based on specific logic (essentially acting like a parent wrapper that renders children components, this is known as a Higher Order Component).
Important lines to note are between 38–45, where it is calling the webxr api through navigator.xr:
- If the WebXR api is not accessible, then the device is considered a normal website rendering device
- If ‘immersive-ar’ is possible on that device, then the scene will be rendered for Augmented Reality
- If ‘immersive-vr’ is possible on that device, then the scene will be rendered for Virtual Reality
Another important set of lines is between 9–13, which sets the device’s capability (‘normal’ Web vs WebAR vs WebVR) so that you can reference it in other components throughout your application.
https://medium.com/media/da2eab6af051c5256722f19c1501d322/hrefConclusion
This post has shown you how to render a scene based on the device you’re using’s compatibility with the WebXR API.
I hope this is helpful for you in developing you WebXR experiences, have fun :D
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.
Get a Custom NFT of your Personality
Personality
NFTs
https://playground.gameoflife.co/all-coursesHow to Create Cross-Device Compatible WebXR Experiences was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.