A-Frame / three.js support on Looking Glass Portrait

[kfarr]

I have been able to successfully download and install the Chrome extension and use it on the webxr sample page as well as babylon.js with the portrait. I appreciate the view controls to find the perfect image in the scene, it's super useful.

I tried run the sample A-Frame "hello webvr" scene and when I click VR mode the scene becomes unresponsive and there is a new console message:

The optional feature 'bounded-floor' is not supported

When I run a three.js webxr sample scene the scene keeps animating after the button is pressed but no overlay appears to set holoplay view controls / settings. There are also messages on the console:

The optional feature 'bounded-floor' is not supported
VM79:7662 HoloPlayXRDevice.isFeatureSupported: feature not understood: hand-tracking
isFeatureSupported @ VM79:7662
requestSession @ VM79:936
button.onclick @ VRButton.js:72
VM79:937 The optional feature 'hand-tracking' is not supported
VM79:7662 HoloPlayXRDevice.isFeatureSupported: feature not understood: layers
isFeatureSupported @ VM79:7662
requestSession @ VM79:936
button.onclick @ VRButton.js:72
VM79:937 The optional feature 'layers' is not supported

Is there anything else I could do to help diagnose?

[kainino0x]

IIRC the bounded-floor message is not an issue. Three.js(/A-Frame) content should be able to handle devices that don't have bounded-floor.

Three.js doesn't work except with 2 views, at least last I checked (maybe it's more broken now). See the readme:

• Three.js: Technically works, but can only handle 2 views. Often fails to launch in Chrome, due to an unattributed DOMException. (tested page)

The 2-view problem is a limitation of Three.js and will require a fix there. The other is mysterious still.

[brianpeiris]

I managed to hack in a fix for three.js and also seemed to have fixed the issue with Chrome. I'm not sure if this change would be easy to get into three.js upstream though, since their WebXR implementation assumes there will only be two WebXR cameras, and this hack doesn't touch that code. I suppose a proper implementation would need to modify the rest of the three.js code to support an arbitrary number of cameras to begin with.

Here are the changes I made:

• In webxr-polyfill, force injection of the polyfill, even if there is a native WebXR implementation (which there is in Chrome), and also forcefully polyfill the makeXRCompatible function on the webgl context. To be honest, I'm not sure exactly why this works, but it does. https://github.com/brianpeiris/webxr-polyfill/commit/948d201305746af7d11761b009489d6c17a70f84
• In three.js, have the WebXR frame loop create cameras for the additional views, if they don't already exist: https://github.com/brianpeiris/three.js/commit/12a094fc16b7dd8e04ce355e26040058038d573f
• In holoplay-webxr, just update the submodule to point to the fixed polyfill. https://github.com/brianpeiris/holoplay-webxr/commit/26d8169e4206b22250b25fb3c6ba2f665852177a
• Finally, I pulled all those pieces into a sample app:
  • https://github.com/brianpeiris/holoplay-webxr-three/blob/main/index.js
  • https://github.com/brianpeiris/holoplay-webxr-three/blob/main/package.json
  • https://brianpeiris.github.io/holoplay-webxr-three