chore: Swap webvr to webxr polyfill packages #273

kevleyski · 2022-12-20T03:25:13Z

Description

Fixes #216 (WebXR support)

Specific Changes proposed

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

Requirements Checklist

Feature implemented / Bug fixed
If necessary, more likely in a feature request than a bug fix
- Unit Tests updated or fixed
- Docs/guides updated
Reviewed by Two Core Contributors

…w Device API is more likely the better thing to do though

WebVR to WebXR

[KJSL] Swap webvr ro webxr polyfill packages

[KJSL] Add WebXR immersive VR support

chore: Swap webvr ro webxr polyfill packages

…olyfill if webxr immersive is not available)

chore: Swap webvr ro webxr polyfill packages (continue to use webvr p…

… operation to play/pause and exit VR/AR session)

chore: Swap webvr for webxr polyfill packages (adding basic controller…

…k on entering 360)

chore: Swap webvr ro webxr polyfill packages

…k on entering 360)

chore: Swap webvr to webxr polyfill packages

kevleyski · 2022-12-20T03:52:20Z

Had planned to add thinks like thumb stick controls scrubbing rate maybe and throw a TV not your AR wall - but then those can be a separate issue items

This is more a quick fix to get the player playing immersive VR

gkatsev

OMG, thank you so much for this! Been highly requested for sure.

Had a couple of questions.

CONTRIBUTING.md

CHANGELOG.md

package.json

src/big-vr-play-button.js

gkatsev · 2022-12-20T16:30:45Z

src/plugin.js

@@ -1,6 +1,8 @@
+import 'babel-polyfill';


What is babel-polyfill needed for here? Since this is a library, we generally prefer not including polyfills, requesting users include it on their page themselves.
Also, should this be using @babel/polyfill as it's newer?

This seemed to be a dependency of webxr polyfill - I'll recheck

Seems like it isn't required https://github.com/immersive-web/webxr-polyfill#browser-support

I think we should make a note of it in the README, but otherwise leave it out of the bundle.

Ok so I tried pulling it out this results in the WebXR sessions not starting because there is some regenerator code not generated without babel-polyfill
I encourage other to help remove it if its a concern, I'm out of cycles today

going to "unresolve" this just so that it doesn't get lost, but I don't think it's a blocker.

FWIW, when I test this on oculus browser 36 / chromium 130, this works well. I would remove the polyfill here and leave it up to consumers if they want to support older browsers?

gkatsev · 2022-12-20T16:31:30Z

src/plugin.js

+    // Detect WebXR is supported
+    if (window.navigator.xr) {


src/plugin.js

gkatsev · 2022-12-20T16:35:07Z

src/plugin.js

+    if (window.navigator.xr) {
+      this.log('WebXR is supported');
+      window.navigator.xr.isSessionSupported('immersive-vr').then((supportsImmersiveVR) => {
+        if (supportsImmersiveVR) {


if this is false should we try and fall back to the WebVRPolyfill? Or does it happen automatically? A bit hard to understand since it's asynchronous.

Yeah I went through a few permutations of that - after testing it seemed to not really matter
Then again could be getting lucky in timing each time

gkatsev · 2022-12-20T16:36:12Z

src/plugin.js

+    }
+
+    // No WebXR support fall back to using WebVR polyfill
+    if (!hasWebXR) {


wouldn't this always get set up regardless of whether webXR is available? Since hasWebXR will always be false here as it hasn't been set to true in the promise above.

Co-authored-by: Gary Katsevman <[email protected]>

src/plugin.js

…board

… out-of-date plugins so embedding base64/png images instead

…a issue

bbsimong

I've started looking at this and noticed this PR has been open for a little while, but has seen some recent activity. Is the MetaCDN team still planning on taking this forward? I've tried this out for a little bit and does seem to behave pretty well.

bbsimong · 2024-11-22T15:36:17Z

CHANGELOG.md

+* rollback THREE.js as this introduced a noticable gamma/brightness increase, adding gyro support, moved 
+* immersive controller images into base64


FWIW, testing locally, an upgrade to 170 seems OK when setting the color spaces manually. This was an explicit change in r152: https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791

I think these should be all:

// Line 742 this.videoTexture.colorSpace = THREE.SRGBColorSpace; // Line 769 this.renderer.outputColorSpace = THREE.SRGBColorSpace;

That doesn't have to happen as part of this PR though.

bbsimong · 2024-11-22T17:21:27Z

vendor/three/DeviceOrientationControls.js

+  MathUtils,
+  Quaternion,
+  Vector3
+} from '../../node_modules/three/build/three.module.js';


I think you can just import from 'three'?

I'm looking at making threejs a peer dependency and that should help a good deal with three shaking?

bbsimong · 2024-11-22T17:24:10Z

src/plugin.js

+      window.navigator.xr.isSessionSupported('immersive-vr').then((supportsImmersiveVR) => {
+        if (supportsImmersiveVR) {
+          // We support WebXR show the enter VRButton
+          this.vrButton = VRButton.createButton(this.renderer);


thought: createButton takes in an optional sessionInit object that's spread into the requestSession parameters so that users can request additional features. That may be a neat thing to add in. Doesn't have to happen here though.

bbsimong · 2024-11-24T08:48:16Z

src/plugin.js

+import {XRControllerModelFactory} from '../node_modules/three/examples/jsm/webxr/XRControllerModelFactory';
+import {BoxLineGeometry} from '../node_modules/three/examples/jsm/geometries/BoxLineGeometry';


These can be imported from three directly I think?

Suggested change

import {XRControllerModelFactory} from '../node_modules/three/examples/jsm/webxr/XRControllerModelFactory';

import {BoxLineGeometry} from '../node_modules/three/examples/jsm/geometries/BoxLineGeometry';

import {XRControllerModelFactory} from 'three/examples/jsm/webxr/XRControllerModelFactory';

import {BoxLineGeometry} from 'three/examples/jsm/geometries/BoxLineGeometry';

bbsimong · 2024-11-26T14:09:29Z

src/plugin.js

@@ -761,15 +899,350 @@ void main() {
    window.addEventListener('resize', this.handleResize_, true);
    window.addEventListener('vrdisplayactivate', this.handleVrDisplayActivate_, true);
    window.addEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_, true);
+    window.addEventListener('pointerdown', this.handleUserActive_, true);
+
+    // For iOS we need permission for the device orientation data, this will pop up an 'Allow'


Safari/iOS is only allowing DeviceMotionEvent.requestPermission during a user event and not on page load.

That said, onDeviceOrientationChange doesn't seem to do anything with the event data, is it needed?

Kevin Staunton-Lambert and others added 25 commits December 2, 2022 13:51

Updating node-sass version (to remove python2 dependency)

d742fd1

Husky update

d3fba93

[KJSL] Swap webvr ro webxr polyfill packages

139f797

Example of having both polyfills - rewritting plugin.js to use the ne…

a46b98d

…w Device API is more likely the better thing to do though

[KJSL] Swap webvr ro webxr polyfill packages

dc28b05

Merge pull request #1 from kevleyski/main

f41dc2a

WebVR to WebXR

[KJSL] Swap webvr ro webxr polyfill packages

dbc1073

[KJSL] Swap webvr ro webxr polyfill packages

cd30806

Merge pull request #2 from kevleyski/main

eecdbba

[KJSL] Swap webvr ro webxr polyfill packages

[KJSL] Swap webvr ro webxr polyfill packages

d6821ab

Merge pull request #3 from kevleyski/main

842abed

[KJSL] Swap webvr ro webxr polyfill packages

[KJSL] Swap webvr ro webxr polyfill packages

6de443d

[KJSL] Swap webvr ro webxr polyfill packages

b318d28

[KJSL] Swap webvr ro webxr polyfill packages

6d4ff0a

Merge pull request #4 from kevleyski/main

e02ce1d

[KJSL] Add WebXR immersive VR support

chore: Swap webvr ro webxr polyfill packages

70a1611

Merge pull request #5 from kevleyski/main

e0d1c48

chore: Swap webvr ro webxr polyfill packages

chore: Swap webvr ro webxr polyfill packages (continue to use webvr p…

36e7cdc

…olyfill if webxr immersive is not available)

Merge pull request #6 from kevleyski/main

c8330f7

chore: Swap webvr ro webxr polyfill packages (continue to use webvr p…

chore: Swap webvr ro webxr polyfill packages (adding basic controller…

56ad5f3

… operation to play/pause and exit VR/AR session)

Merge pull request #7 from kevleyski/main

a8d1459

chore: Swap webvr for webxr polyfill packages (adding basic controller…

chore: Swap webvr ro webxr polyfill packages (add iOS permission chec…

856a183

…k on entering 360)

Merge pull request #8 from kevleyski/main

8d88ec5

chore: Swap webvr ro webxr polyfill packages

chore: Swap webvr ro webxr polyfill packages (add iOS permission chec…

7c0c62b

…k on entering 360)

Merge pull request #9 from kevleyski/main

46c7207

chore: Swap webvr to webxr polyfill packages

gkatsev reviewed Dec 20, 2022

View reviewed changes

kevleyski and others added 2 commits December 21, 2022 04:01

Update src/big-vr-play-button.js

7bf68a5

Co-authored-by: Gary Katsevman <[email protected]>

Update src/plugin.js

1cc47ef

Co-authored-by: Gary Katsevman <[email protected]>

gkatsev reviewed Dec 20, 2022

View reviewed changes

src/plugin.js Outdated Show resolved Hide resolved

Kevin Staunton-Lambert and others added 27 commits July 24, 2024 12:49

Merge remote-tracking branch 'origin/main'

8a41917

THREE.js buffer geometry refactor

cc00e6f

Cleanup, bump three and external imports

ab66880

Disable Cardboard by default

58ab5ba

(remove cardboard)

36345dd

KJSL: reviving DeviceOrientationControls for where we've removed Card…

e00f3a9

…board

KJSL: Reviving DeviceOrientationControls for iPhone

26c4ef1

KJSL: Reviving DeviceOrientationControls for iPhone

1293cbd

KJSL: Reviving DeviceOrientationControls for iPhone

2297edd

KJSL: Reviving DeviceOrientationControls for iPhone

8685bb5

KJSL: Reviving DeviceOrientationControls for iPhone

5de1366

KJSL: devices fill the screen more

888a390

KJSL: devices fill the screen more

ebbf917

KJSL: moving example UI image to dist, this will later be separated

8b44f0c

KJSL: latest rollup image plugin didn't seem to work with other maybe…

f7a1c4e

… out-of-date plugins so embedding base64/png images instead

KJSL: update to latest THREE.js

d131def

Allow passing in M3U8 or MPD as the QUERY_STRING

92f9182

Fix up exception and green button

a3145b5

Resize timing bug around webxr-polyfill (getEyeParameters)

3c9efb8

Resize timing bug around webxr-polyfill (getEyeParameters)

6f845f5

Resize timing bug around webxr-polyfill (getEyeParameters)

ec34d00

Rollback THREE.js to earlier version which didnt have brightness/gamm…

0c90edc

…a issue

KJSL: v2.1.1

e89683f

KJSL: v2.1.1

3be5577

KJSL: v2.1.2 Android can use native cardboaard support instead

cea8a83

Merge remote-tracking branch 'origin/jimdevel'

b5ddaa5

KJSL: v2.1.2 Android can use native cardboard support instead

5f5ce22

bbsimong reviewed Nov 22, 2024

View reviewed changes

bbsimong reviewed Nov 24, 2024

View reviewed changes

bbsimong reviewed Nov 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Swap webvr to webxr polyfill packages #273

chore: Swap webvr to webxr polyfill packages #273

kevleyski commented Dec 20, 2022 •

edited

Loading

kevleyski commented Dec 20, 2022

gkatsev left a comment

gkatsev Dec 20, 2022

kevleyski Dec 20, 2022

gkatsev Dec 20, 2022

kevleyski Dec 21, 2022

gkatsev Dec 21, 2022

bbsimong Dec 5, 2024

gkatsev Dec 20, 2022

gkatsev Dec 20, 2022

kevleyski Dec 20, 2022

gkatsev Dec 20, 2022

bbsimong left a comment

bbsimong Nov 22, 2024

bbsimong Nov 22, 2024

bbsimong Nov 22, 2024

bbsimong Nov 24, 2024

bbsimong Nov 26, 2024

		* rollback THREE.js as this introduced a noticable gamma/brightness increase, adding gyro support, moved
		* immersive controller images into base64

		import {XRControllerModelFactory} from '../node_modules/three/examples/jsm/webxr/XRControllerModelFactory';
		import {BoxLineGeometry} from '../node_modules/three/examples/jsm/geometries/BoxLineGeometry';

chore: Swap webvr to webxr polyfill packages #273

Are you sure you want to change the base?

chore: Swap webvr to webxr polyfill packages #273

Conversation

kevleyski commented Dec 20, 2022 • edited Loading

Description

Specific Changes proposed

Requirements Checklist

kevleyski commented Dec 20, 2022

gkatsev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bbsimong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevleyski commented Dec 20, 2022 •

edited

Loading