webxr | Repository for the WebXR Device API Specification | Augmented Reality library

thanks kindly for your time and attention. I recognise this is a long shot but I'm hoping someone might be generous enough to relay some advice or guidance. I am in the beginning phases of researching how I might build an app for a mobile device, using javascript and related tools, libraries and packages. The concept for the app is that it will access the device camera, recognise faces, and overlay animated AR assets onto the device display. However, I want users to couple their phone with a wearable headset, and use the app through a split screen VR style display. I assume I'll need some sort of VR wrapper for the core AR application. At the moment, I am focussed primarily on the graphical display and UI aspects, so that I can build a proof-of-concept to test whether the idea is even viable. I recognise I may be misguided to attempt this in javascript rather than native mobile languages - if this is the case, I would welcome any opinions on the matter. I'm asking about javascript because that's what I know, basically.

Thus far, I've been reading about various libraries such as WebXR, Three.js and others. I assume I'll need to use React Native, though it's not easy to get a clear sense of whether I should even be trying to achieve what I want using javascript. I have no code to show as yet.

Additionally, I recognise there are similar questions already posted to the forum - for example, this one: VR+AR on mobile phone. I haven't found any recent threads that address this specific set of requirements so I do apologise if I've missed something. If there is info on the forum, grateful if someone could point me to the relevant thread. At the very least, thanks for reading. Cheers, all.

I'm trying to share anchors from WebXR over the network with other clients. However, they only have one property, anchorSpace, which itself doesn't have any properties:

I've created a proof-of-concept SPA (source code / demo) which loads stereoscopic images from a web server and renders them in stereoscopic 3D using the aframe-stereo-component for A-frame.

Testing this on a Quest 2 in the Oculus Browser and Firefox Reality, this works fine: each image appears in 3D when viewed in immersive VR mode via WebXR.

However, after scrolling through a number of images (usually 8 to 12), the slideshow stops working. In Firefox Reality, this manifests by the app just freezing and becoming unresponsive.

In Oculus Browser, the image description is displayed but the image area remains black. Connecting the Quest 2 to a PC with adb and inspecting the page using Chrome DevTools, I can see the following output when this occurs:

I'm trying to use WebXR using Three.js in React but I keep seeing this error:

'XRWebGLLayer' is not defined no-undef

for baseLayer: new XRWebGLLayer(session, gl)

I tried this same code in vanilla.js and had no errors at all but when I try it with react.js it doesn't compile.

The tutorials I'm referring to are: https://developers.google.com/ar/develop/webxr/hello-webxr and https://www.devbridge.com/articles/ar-app-development-tutorial/

I'm using version 0.133 of three.js and I imported it into my react app using: import * as THREE from 'three';

I'm relatively new to react and three.js. Can anyone please help point me in the right direction? I'd really appreciate it!!

UPDATE IN ANSWER BELOW

Is anyone else experiencing the newest couple versions of chrome causing issues with legacy Java applications? Just yesterday I needed to get the company's policy manager to allow downloading files from an internal unsecured server by adding our URLs to a whitelist - you can see the details of the process on the chromium blog here. That issue was present in v90 as well.

What I'm currently experiencing due to the v91 update is as follows: My boss was trying to use a page in one of our Java 6 legacy applications and he noticed that the page wouldn't return the data in any format - we checked and he was already v91. I was on v90 and the page worked fine. After updating Chrome to v91, I'm getting the same broken page as my boss.

I was thinking it might be something related to the CSS but I don't have time to poke at it and redeploy the legacy app every time to test the changes. Though, I have taken a peek at this chromium blog post for version 91. Though I don't see much relating to what may have caused the removal of all non-label fields and the formatting of the label fields are all wonky and out of place.

I'm going to look into investigating the struts tile that holds the code JSP code; if I find something I'll post it here for reference.

The first image below is what one row should look like with the header above it. As you see in the second picture, all there is the header with improper formatting and the grid is gone.

How would one go about mirroring or cloning the WebXR 'immersive-xr' view from a HMD like the VIVE or Oculus in the browser using the same WebGL canvas?

There is much discussion about copying the pixels to a texture2D, then applying that as a render texture, or completely re-drawing the entire scene with an adjusted viewTransform. These work well if you are rendering a different view, such as a remote camera or 3rd person spectator view, however both are a waste of resources if one only wants to mirror the current HMD view on the desktop.

Self answered below as there was no solid answer when I ran into this and I'd like to save future devs the time. (Especially if they're not all to savvy with WebGl2 and WebXR)

Note, that I'm not using any existing frameworks for this project for 'reasons'. It shouldn't change much if you are, you'd just need to perform the steps at the appropriate place in your library's render pipeline.

I am trying to use Google's model viewer to load 3D models. It has a button. But I want that button to be visible after the model is completely loaded. So, I used to use this Vanilla JavaScript code

I have been using a-frame since 2018 to show my scenographies to the directors I work for. I used the colladas files for my objects and everything was working great and my textures were as I wanted. But since the webxr (aframe-v1.1.0.min) appeared it is no longer possible to use collada I have tried the Gltf files but it is too heavy and not satisfactory. So I wanted to know how to put collada back into the a-frame scipts. I tried: "collada-model-legacy.js" with "ColladaLoader.js" in another folder but it doesn't work. Do you have a solution? Thank you

I'm implementing a feature to get coordinate of an a-sky while moving the VR controller.