From 80f9e0c5848e06f4edfdb37c96884e9c10cf6c39 Mon Sep 17 00:00:00 2001 From: Kevin Staunton-Lambert Date: Wed, 21 Dec 2022 10:51:41 +1100 Subject: [PATCH 1/2] chore: Swap webvr for webxr polyfill packages (PR fix ups - part revert babel is need for regenerator code when creating the WebXR session) --- package.json | 1 + src/plugin.js | 1 + 2 files changed, 2 insertions(+) diff --git a/package.json b/package.json index d84db67e..1477c7ea 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ }, "dependencies": { "@babel/runtime": "^7.14.5", + "babel-polyfill": "^6.26.0", "global": "^4.4.0", "three": "0.125.2", "video.js": "^6 || ^7", diff --git a/src/plugin.js b/src/plugin.js index 538dbfc0..a07bd867 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -1,3 +1,4 @@ +import 'babel-polyfill'; import {version as VERSION} from '../package.json'; import window from 'global/window'; import document from 'global/document'; From 448eb88700ea342a9f8fec429e444bc96b414fc1 Mon Sep 17 00:00:00 2001 From: Kevin Staunton-Lambert Date: Wed, 21 Dec 2022 11:12:09 +1100 Subject: [PATCH 2/2] chore: Swap webvr for webxr polyfill packages (PR fix ups - only show play pause when control triggers) --- src/plugin.js | 45 +++++---- vendor/three/VRButton.js | 198 --------------------------------------- 2 files changed, 26 insertions(+), 217 deletions(-) delete mode 100644 vendor/three/VRButton.js diff --git a/src/plugin.js b/src/plugin.js index a07bd867..ea58b7d0 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -2,7 +2,6 @@ import 'babel-polyfill'; 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'; @@ -12,13 +11,16 @@ import OrbitOrientationContols from './orbit-orientation-controls.js'; import * as utils from './utils'; import CanvasPlayerControls from './canvas-player-controls'; import OmnitoneController from './omnitone-controller'; -import { VRButton } from '../vendor/three/VRButton.js'; -// import controls so they get regisetered with videojs +// WebXR related imports +import WebXRPolyfill from 'webxr-polyfill'; +import {VRButton} from '../node_modules/three/examples/jsm/webxr/VRButton'; +import {XRControllerModelFactory} from '../node_modules/three/examples/jsm/webxr/XRControllerModelFactory'; +import {BoxLineGeometry} from '../node_modules/three/examples/jsm/geometries/BoxLineGeometry'; + +// import controls so they get registered with videojs import './cardboard-button'; import './big-vr-play-button'; -import {XRControllerModelFactory} from '../webxr/libs/three/jsm/XRControllerModelFactory'; -import {BoxLineGeometry} from '../webxr/libs/three/jsm/BoxLineGeometry'; // Default options for the plugin. const defaults = { @@ -864,25 +866,26 @@ void main() { this.scene.add(this.holodeck); // Play/Pause - const buttonPlayPause = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0x00ffff})); - - buttonPlayPause.position.x = -0.4; - buttonPlayPause.position.y = -2.0; - buttonPlayPause.position.z = -4.0; - buttonPlayPause.buttonid = 'playpause'; - this.holodeck.add(buttonPlayPause); + this.buttonPlayPause = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0x00ffff})); + this.buttonPlayPause.position.x = -0.4; + this.buttonPlayPause.position.y = -2.0; + this.buttonPlayPause.position.z = -4.0; + this.buttonPlayPause.buttonid = 'playpause'; + this.buttonPlayPause.visible = false; + this.holodeck.add(this.buttonPlayPause); // ExitVR - const buttonExit = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0xff0000})); - - buttonExit.position.x = 0.4; - buttonExit.position.y = -2.0; - buttonExit.position.z = -4.0; - buttonExit.buttonid = 'exit'; - this.holodeck.add(buttonExit); + this.buttonExit = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0xff0000})); + this.buttonExit.position.x = 0.4; + this.buttonExit.position.y = -2.0; + this.buttonExit.position.z = -4.0; + this.buttonExit.buttonid = 'exit'; + this.buttonExit.visible = false; + this.holodeck.add(this.buttonExit); this.highlight = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0xffffff, side: THREE.BackSide})); this.highlight.scale.set(1.1, 1.1, 1.1); + this.highlight.visible = false; this.scene.add(this.highlight); } @@ -936,12 +939,16 @@ void main() { function onSelectStart() { this.children[0].scale.z = 10; this.userData.selectPressed = true; + self.buttonExit.visible = true; + self.buttonPlayPause.visible = true; } function onSelectEnd() { this.children[0].scale.z = 0; self.highlight.visible = false; this.userData.selectPressed = false; + self.buttonExit.visible = false; + self.buttonPlayPause.visible = false; } this.controllers.forEach((controller) => { diff --git a/vendor/three/VRButton.js b/vendor/three/VRButton.js deleted file mode 100644 index 8d170cef..00000000 --- a/vendor/three/VRButton.js +++ /dev/null @@ -1,198 +0,0 @@ -class VRButton { - - static createButton( renderer ) { - - const button = document.createElement( 'button' ); - - function showEnterVR( /*device*/ ) { - - let currentSession = null; - - async function onSessionStarted( session ) { - - session.addEventListener( 'end', onSessionEnded ); - - await renderer.xr.setSession( session ); - button.textContent = 'EXIT VR'; - - currentSession = session; - - } - - function onSessionEnded( /*event*/ ) { - - currentSession.removeEventListener( 'end', onSessionEnded ); - - button.textContent = 'ENTER VR'; - - currentSession = null; - - } - - // - - button.style.display = ''; - - button.style.cursor = 'pointer'; - button.style.left = 'calc(50% - 50px)'; - button.style.width = '100px'; - - button.textContent = 'ENTER VR'; - - button.onmouseenter = function () { - - button.style.opacity = '1.0'; - - }; - - button.onmouseleave = function () { - - button.style.opacity = '0.8'; - - }; - - button.onclick = function () { - - if ( currentSession === null ) { - - // WebXR's requestReferenceSpace only works if the corresponding feature - // was requested at session creation time. For simplicity, just ask for - // the interesting ones as optional features, but be aware that the - // requestReferenceSpace call will fail if it turns out to be unavailable. - // ('local' is always available for immersive sessions and doesn't need to - // be requested separately.) - - const sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor', 'hand-tracking' ] }; - navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted ); - - } else { - - currentSession.end(); - - } - - }; - - } - - function disableButton() { - - button.style.display = ''; - - button.style.cursor = 'auto'; - button.style.left = 'calc(50% - 75px)'; - button.style.width = '150px'; - - button.onmouseenter = null; - button.onmouseleave = null; - - button.onclick = null; - - } - - function showWebXRNotFound() { - - disableButton(); - - button.textContent = 'VR NOT SUPPORTED'; - - } - - function showVRNotAllowed( exception ) { - - disableButton(); - - console.warn( 'Exception when trying to call xr.isSessionSupported', exception ); - - button.textContent = 'VR NOT ALLOWED'; - - } - - function stylizeElement( element ) { - - element.style.position = 'absolute'; - element.style.top = '20px'; - element.style.padding = '12px 6px'; - element.style.border = '1px solid #fff'; - element.style.borderRadius = '4px'; - element.style.background = 'rgba(0,0,0,0.1)'; - element.style.color = '#fff'; - element.style.font = 'normal 13px sans-serif'; - element.style.textAlign = 'center'; - element.style.opacity = '0.8'; - element.style.outline = 'none'; - element.style.zIndex = '999'; - - } - - if ( 'xr' in navigator ) { - - button.id = 'VRButton'; - button.style.display = 'none'; - - stylizeElement( button ); - - navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) { - - supported ? showEnterVR() : showWebXRNotFound(); - - if ( supported && VRButton.xrSessionIsGranted ) { - - button.click(); - - } - - } ).catch( showVRNotAllowed ); - - return button; - - } else { - - const message = document.createElement( 'a' ); - - if ( window.isSecureContext === false ) { - - message.href = document.location.href.replace( /^http:/, 'https:' ); - message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message - - } else { - - message.href = 'https://immersiveweb.dev/'; - message.innerHTML = 'WEBXR NOT AVAILABLE'; - - } - - message.style.left = 'calc(50% - 90px)'; - message.style.width = '180px'; - message.style.textDecoration = 'none'; - - stylizeElement( message ); - - return message; - - } - } - - static registerSessionGrantedListener() { - - if ( 'xr' in navigator ) { - - // WebXRViewer (based on Firefox) has a bug where addEventListener - // throws a silent exception and aborts execution entirely. - if ( /WebXRViewer\//i.test( navigator.userAgent ) ) return; - - navigator.xr.addEventListener( 'sessiongranted', () => { - - VRButton.xrSessionIsGranted = true; - - } ); - - } - - } - -} - -VRButton.registerSessionGrantedListener(); - -export { VRButton };