feat: Update to WebXR

[mister-ben]

Brings @kevleyski 's changes in #273 into main:

For devices that support WebXR, use that Add iOS device orientation permission check on entering 360 (note ESLint workaround as this is iOS Safari specfic) Fall back to original WebVR polyfill if navigator.xr not available after initialising WebXR polyfill Includes fixes for projections other than equirectangular that needed updates after three.js version bump

Also: Removes husky again, because the pre-commit lint needs a bump to at least Node 15 to accept some code in dependencies (nullish coalescing assignment), and upgrading that is a whole other package of work. Prevents Browserstack CI from trying to run on Chromium, as the video playback will fail.

[kevleyski]

Great stuff, will give this a proper go later but looks good already, I'll see if anyone wants to help with that too

A bit of context and doco for anyone new

https://docs.google.com/presentation/d/19jz0guudowBpcBlMg2INdD6PX5w9tdJfS54Q8Twvqkc/edit

Credits:

Don't forget to give StreamShark some major love next time seeing them around who sponsored this effort! https://streamshark.io

Shout out to Nik Lever too for his Udemy course on WebXR which is particularly good - head here https://www.udemy.com/course/learn-webxr/?couponCode=DEC23_SALE

[amtins]

The progress bar circle is visible

[mister-ben]

The progress bar circle is visible

I haven't seen that... which example / which browser was this?

[amtins]

I haven't seen that... which example / which browser was this?

@mister-ben I have this behavior with all the examples on Firefox and Chrome on desktop. To reproduce this case, simply :

• open any example
• open the developer console and select the WebRX tab
• start playback, the media should be displayed in stereoscopic mode, if not, click on the Enter VR button
• click on exit immersive in the WebRX tab

[mister-ben]

I've removed the cardboard button in the control bar for now, and used three.js's VRButton as an overlay button. I don't love the UX, if we want the cardboard button we need to include what's going on inside the VRButton class, it's quite different from what worked before. This seems ok as an interim compromise.

This works well on Android. iOS is a pain going in and out of immersive mode. It works sometimes, other times Safari doesn't understand the screen orientation and messes up the display. When exiting, the canvas is larger than the player. I don't know yet whether the issues are in three.js, the plugin, or Safari. Or a combination.

[amtins]

@mister-ben on Android on Firefox, moving the phone to change orientation works well, but on Chrome it doesn't. Also, on VR mode, the back and settings buttons don't respond to touch, as well as when using a google cardboard the toggle play doesn't work.

[amtins]

I see that the canvas is created here plugin.js#L783-L788, and then it's deleted somehow when entering immersive mode. When leaving immersive mode, the canvas is added to the player as the last child somehow, and this is the cause of #285 (comment). But I can't figure out how.

[WCPetersen]

This seems to break the EAC projections. Can anyone else confirm?

[kevleyski]

(do we have some good examples, happy to dive in and check on the headsets I have)On 12 Feb 2024, at 5:42 am, Will Petersen @.***> wrote: This seems to break the EAC projections. Can anyone else confirm?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[WCPetersen]

Yes, there are examples for both EAC and EAC_LR in the examples/samples dirs. They should be listed when you run npm start. Even without the headset, they're broken in the browser. I just want to check if that is happening with everyone or if I have a bad dependency (or something like that).

[kevleyski]

Yeah controllers were working - I’ll try find some time to check if something changed On 20 Feb 2024, at 7:29 am, Will Petersen @.***> wrote: @WCPetersen commented on this pull request.

In src/plugin.js:

• controller.userData.selectPressed = false;
• controller.userData.index = i;
• this.scene.add(controller);
• controllers.push(controller);
• const grip = this.renderer.xr.getControllerGrip(i);
• grip.add(controllerModelFactory.createControllerModel(grip));
• this.scene.add(grip);
• }
• return controllers;
• }
• createText(message, height) {

Does this ever get called?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>