Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 12, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@
"global": "^4.4.0",
"three": "0.125.2",
"video.js": "^6 || ^7",
"webvr-polyfill": "0.10.12",
"webxr-polyfill": "^2.0.3"
},
"devDependencies": {
Expand Down
123 changes: 77 additions & 46 deletions src/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import {version as VERSION} from '../package.json';
import window from 'global/window';
import document from 'global/document';
import WebXRPolyfill from 'webxr-polyfill';
import WebVRPolyfill from 'webvr-polyfill';
import videojs from 'video.js';
import * as THREE from 'three';
import VRControls from '../vendor/three/VRControls.js';
import VREffect from '../vendor/three/VREffect.js';
import OrbitOrientationContols from './orbit-orientation-controls.js';
import * as utils from './utils';
import CanvasPlayerControls from './canvas-player-controls';
Expand Down Expand Up @@ -76,7 +78,7 @@ class VR extends Plugin {
return;
}

this.polyfill_ = new WebXRPolyfill({
this.polyfill_ = new WebVRPolyfill({
// do not show rotate instructions
ROTATE_INSTRUCTIONS_DISABLED: true
});
Expand Down Expand Up @@ -471,7 +473,7 @@ void main() {
return;
}

// webxr-polyfill/cardboard ui only watches for click events
// webvr-polyfill/cardboard ui only watches for click events
// to tell that the back arrow button is pressed during cardboard vr.
// but somewhere along the line these events are silenced with preventDefault
// but only on iOS, so we translate them ourselves here
Expand Down Expand Up @@ -523,7 +525,6 @@ void main() {

}

/* KJSL: TODO: requestAnimationFrame -> setAnimationLoop */
requestAnimationFrame(fn) {
if (this.vrDisplay) {
return this.vrDisplay.requestAnimationFrame(fn);
Expand Down Expand Up @@ -563,6 +564,10 @@ void main() {
this.omniController.update(this.camera);
}

if (this.effect) {
this.effect.render(this.scene, this.camera);
}

if (window.navigator.getGamepads) {
// Grab all gamepads
const gamepads = window.navigator.getGamepads();
Expand All @@ -586,14 +591,16 @@ void main() {
}
this.camera.getWorldDirection(this.cameraVector);

/* KJSL: TODO: requestAnimationFrame -> setAnimationLoop */
this.animationFrameId_ = this.requestAnimationFrame(this.animate_);
}

handleResize_() {
const width = this.player_.currentWidth();
const height = this.player_.currentHeight();

if (this.effect) {
this.effect.setSize(width, height, false);
}
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
}
Expand Down Expand Up @@ -681,13 +688,12 @@ void main() {
};

this.renderer.setSize(this.player_.currentWidth(), this.player_.currentHeight(), false);

this.vrDisplay = null;

// Previous timestamps for gamepad updates
this.prevTimestamps_ = [];

this.renderer.setPixelRatio(window.devicePixelRatio);

this.renderedCanvas = this.renderer.domElement;
this.renderedCanvas.setAttribute('style', 'width: 100%; height: 100%; position: absolute; top:0;');

Expand All @@ -697,56 +703,72 @@ void main() {
videoElStyle.zIndex = '-1';
videoElStyle.opacity = '0';

if (window.navigator.xr) {
this.log('is supported, getting vr displays');
let displays = [];

window.navigator.xr.isSessionSupported('immersive-vr').then((displays) => {
if (window.navigator.getVRDisplays) {
this.log('is supported, getting vr displays');

// ShowEnterVRButton
document.body.appendChild(VRButton.createButton(this.renderer));
window.navigator.getVRDisplays().then((displaysArray) => {
displays = displaysArray;
});
}

this.renderer.xr.enabled = true;
this.renderer.xr.setReferenceSpaceType('local');
this.renderer.setAnimationLoop(this.render.bind(this));
if (window.navigator.xr) {
this.log('is supported, getting vr displays');

if (1 || displays.length > 0) {
this.log('Displays found', displays);
this.vrDisplay = displays[0];
window.navigator.xr.isSessionSupported('immersive-vr').then((supportsImmersiveVR) => {
if (supportsImmersiveVR) {
// ShowEnterVRButton
document.body.appendChild(VRButton.createButton(this.renderer));

this.renderer.xr.enabled = true;
this.renderer.xr.setReferenceSpaceType('local');
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setAnimationLoop(this.render.bind(this));
} else {
// WebVR polyfill fall back
this.effect = new VREffect(this.renderer);
this.effect.setSize(this.player_.currentWidth(), this.player_.currentHeight(), false);

if (displays.length > 0) {
this.log('Displays found', displays);
this.vrDisplay = displays[0];

// Native WebVR Head Mounted Displays (HMDs) like the HTC Vive
// also need the cardboard button to enter fully immersive mode
// so, we want to add the button if we're not polyfilled.
if (!this.vrDisplay.isPolyfilled) {
this.log('Real HMD found using VRControls', this.vrDisplay);
this.addCardboardButton_();

// We use VRControls here since we are working with an HMD
// and we only want orientation controls.
this.controls3d = new VRControls(this.camera);
}
}

// Native WebVR Head Mounted Displays (HMDs) like the HTC Vive
// also need the cardboard button to enter fully immersive mode
// so, we want to add the button if we're not polyfilled.
if (1 || !this.vrDisplay.isPolyfilled) {
this.log('Real HMD found using VRControls', this.vrDisplay);
this.addCardboardButton_();
if (!this.controls3d) {
this.log('no HMD found Using Orbit & Orientation Controls');
const options = {
camera: this.camera,
canvas: this.renderedCanvas,
// check if its a half sphere view projection
halfView: this.currentProjection_.indexOf('180') === 0,
orientation: videojs.browser.IS_IOS || videojs.browser.IS_ANDROID || false
};

if (this.options_.motionControls === false) {
options.orientation = false;
}

// We use VRControls here since we are working with an HMD
// and we only want orientation controls.
this.controls3d = new VRControls(this.camera);
}
}
this.controls3d = new OrbitOrientationContols(options);
this.canvasPlayerControls = new CanvasPlayerControls(this.player_, this.renderedCanvas, this.options_);

if (!this.controls3d) {
this.log('no HMD found Using Orbit & Orientation Controls');
const options = {
camera: this.camera,
canvas: this.renderedCanvas,
// check if its a half sphere view projection
halfView: this.currentProjection_.indexOf('180') === 0,
orientation: videojs.browser.IS_IOS || videojs.browser.IS_ANDROID || false
};

if (this.options_.motionControls === false) {
options.orientation = false;
}

this.controls3d = new OrbitOrientationContols(options);
this.canvasPlayerControls = new CanvasPlayerControls(this.player_, this.renderedCanvas, this.options_);
}

/* KJSL: TODO: requestAnimationFrame -> setAnimationLoop */
this.animationFrameId_ = this.requestAnimationFrame(this.animate_);
});

this.animationFrameId_ = this.requestAnimationFrame(this.animate_);
} else if (window.navigator.getVRDevices) {
this.triggerError_({code: 'web-vr-out-of-date', dismiss: false});
} else {
Expand Down Expand Up @@ -813,6 +835,11 @@ void main() {
this.canvasPlayerControls = null;
}

if (this.effect) {
this.effect.dispose();
this.effect = null;
}

window.removeEventListener('resize', this.handleResize_, true);
window.removeEventListener('vrdisplaypresentchange', this.handleResize_, true);
window.removeEventListener('vrdisplayactivate', this.handleVrDisplayActivate_, true);
Expand Down Expand Up @@ -869,6 +896,10 @@ void main() {
}

polyfillVersion() {
return WebVRPolyfill.version;
}

polyfillVersionXR() {
return WebXRPolyfill.version;
}
}
Expand Down
Loading