Working basics of the polyfill for main WebXR API calls

examples/js/vr/Polyfill.js

@@ -0,0 +1,105 @@
+
+
+if( 'xr' in navigator ) {
+
+	console.log('Helio: Chrome m73 WebXR Polyfill:', navigator.xr);
+
+	// WebXRManager - XR.supportSession() Polyfill - WebVR.js line 147
+
+	navigator.xr.supportsSession = navigator.xr.supportsSessionMode;
+
+	if( 'supportsSessionMode' in navigator.xr ) {
+
+		const temp = navigator.xr.requestSession.bind(navigator.xr);
+
+		navigator.xr.requestSession = function (sessionType) {
+
+			return new Promise((resolve, reject) => {
+				temp({ mode: sessionType })
+					.then(session => {
+
+						// WebXRManager - xrFrame.getPose() Polyfill - line 279
+
+						const tempRequestAnimationFrame = session.requestAnimationFrame.bind(session);
+
+						session.requestAnimationFrame = function (callback) {
+
+							return tempRequestAnimationFrame(function (time, frame) {
+
+								frame.getPose = function (targetRaySpace, referenceSpace) {
+
+									console.log('targetRay', targetRaySpace)
+
+									return frame.getInputPose(targetRaySpace, referenceSpace);
+
+								}
+
+								callback(time, frame);
+
+							})
+
+						};
+
+						// WebXRManager - xrFrame.getPose( inputSource.targetRaySpace, referenceSpace) Polyfill - line 279
+
+						const tempGetInputSources = session.getInputSources.bind(session);
+
+						session.getInputSources = function () {
+
+							const res = tempGetInputSources();
+
+							res.forEach(xrInputSource => {
+
+								Object.defineProperty(xrInputSource, 'targetRaySpace', {
+									get: function () {
+										return xrInputSource
+									},
+								});
+
+							});
+
+							return res;
+						}
+
+						// WebXRManager - xrSession.getInputSources() Polyfill Line 132 - 136
+
+						session.inputSources = Object.defineProperty(session, 'inputSources', {
+							get: session.getInputSources
+						});
+
+						// WebXRManager - xrSession.updateRenderState() Polyfill Line 129
+
+						session.updateRenderState = function ({ baseLayer }) {
+
+							session.baseLayer = baseLayer;
+
+							// WebXRManager - xrSession.renderState.baseLayer Polyfill Line 219
+
+							session.renderState = {
+								baseLayer: baseLayer,
+							}
+
+						}
+
+						// WebXRManager - xrSession.requestReferenceSpace() Polyfill Line 130
+
+						const temp = session.requestReferenceSpace.bind(session);
+
+						session.requestReferenceSpace = function () {
+
+							return temp({ type: 'stationary', subtype: 'floor-level' });
+
+						}
+
+						resolve(session);
+
+					});
+			})
+
+		}
+
+	}
+
+}
+
+

examples/js/vr/WebVR.js

@@ -9,6 +9,10 @@ var WEBVR = {
 
 	createButton: function ( renderer, options ) {
 
+		var isMagicLeapOne = /(Helio)/g.test( navigator.userAgent );
+
+		var sessionType = isMagicLeapOne ? 'immersive-ar' : 'immersive-vr';
+
 		if ( options && options.referenceSpaceType ) {
 
 			renderer.vr.setReferenceSpaceType( options.referenceSpaceType );
@@ -44,6 +48,8 @@ var WEBVR = {
 
 			function onSessionStarted( session ) {
 
+				console.log(session);
+
 				session.addEventListener( 'end', onSessionEnded );
 
 				renderer.vr.setSession( session );
@@ -81,7 +87,7 @@ var WEBVR = {
 
 				if ( currentSession === null ) {
 
-					navigator.xr.requestSession( 'immersive-vr' ).then( onSessionStarted );
+					navigator.xr.requestSession( sessionType ).then( onSessionStarted );
 
 				} else {
 
@@ -129,14 +135,17 @@ var WEBVR = {
 
 		}
 
-		if ( 'xr' in navigator && 'supportsSession' in navigator.xr ) {
+		console.log(navigator);
 
+		if ( 'xr' in navigator ) {
+
+			console.log('test');
 			var button = document.createElement( 'button' );
 			button.style.display = 'none';
 
 			stylizeElement( button );
-
-			navigator.xr.supportsSession( 'immersive-vr' ).then( showEnterXR );
+			console.log(navigator.xr)
+			navigator.xr.supportsSession( sessionType ).then( showEnterXR );
 
 			return button;
 

examples/webvr_ballshooter.html

@@ -13,6 +13,7 @@
 		</div>
 
 		<script src="../build/three.js"></script>
+		<script src="js/vr/Polyfill.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 
 		<script src="js/geometries/BoxLineGeometry.js"></script>

src/renderers/webvr/WebXRManager.js

@@ -16,8 +16,6 @@ function WebXRManager( renderer ) {
 
 	var session = null;
 
-	var framebufferScaleFactor = 1.0;
-
 	var referenceSpace = null;
 	var referenceSpaceType = 'local-floor';
 
@@ -103,8 +101,6 @@ function WebXRManager( renderer ) {
 
 	this.setFramebufferScaleFactor = function ( value ) {
 
-		framebufferScaleFactor = value;
-
 	};
 
 	this.setReferenceSpaceType = function ( value ) {
@@ -113,6 +109,12 @@ function WebXRManager( renderer ) {
 
 	};
 
+	this.getSession = function () {
+
+		return session;
+
+	};
+
 	this.setSession = function ( value ) {
 
 		session = value;
@@ -125,17 +127,13 @@ function WebXRManager( renderer ) {
 			session.addEventListener( 'end', onSessionEnd );
 
 			session.updateRenderState( { baseLayer: new XRWebGLLayer( session, gl ) } );
-
 			session.requestReferenceSpace( referenceSpaceType ).then( onRequestReferenceSpace );
 
-			//
-
 			inputSources = session.inputSources;
 
 			session.addEventListener( 'inputsourceschange', function () {
 
 				inputSources = session.inputSources;
-				console.log( inputSources );
 
 				for ( var i = 0; i < controllers.length; i ++ ) {
 
@@ -216,7 +214,9 @@ function WebXRManager( renderer ) {
 		if ( pose !== null ) {
 
 			var views = pose.views;
-			var baseLayer = session.renderState.baseLayer;
+			var baseLayer;
+
+			baseLayer = session.renderState.baseLayer;
 
 			renderer.setFramebuffer( baseLayer.framebuffer );
 
@@ -224,7 +224,20 @@ function WebXRManager( renderer ) {
 
 				var view = views[ i ];
 				var viewport = baseLayer.getViewport( view );
-				var viewMatrix = view.transform.inverse.matrix;
+
+				var viewMatrix;
+
+				if ( 'transform ' in view ) {
+
+					viewMatrix = view.transform.inverse.matrix;
+
+				} else {
+
+					// DEPRECATED
+
+					viewMatrix = view.viewMatrix;
+
+				}
 
 				var camera = cameraVR.cameras[ i ];
 				camera.matrix.fromArray( viewMatrix ).getInverse( camera.matrix );
@@ -251,11 +264,28 @@ function WebXRManager( renderer ) {
 
 			if ( inputSource ) {
 
-				var inputPose = frame.getPose( inputSource.targetRaySpace, referenceSpace );
+				var inputPose;
+
+				inputPose = frame.getPose( inputSource.targetRaySpace, referenceSpace );
 
 				if ( inputPose !== null ) {
 
-					controller.matrix.fromArray( inputPose.transform.matrix );
+					if ( 'transform' in inputPose ) {
+
+						controller.matrix.fromArray( inputPose.transform.matrix );
+
+					} else if ( 'targetRay' in inputPose ) {
+
+						controller.matrix.elements = inputPose.targetRay.transformMatrix;
+
+					} else if ( 'pointerMatrix' in inputPose ) {
+
+						// DEPRECATED
+
+						controller.matrix.elements = inputPose.pointerMatrix;
+
+					}
+
 					controller.matrix.decompose( controller.position, controller.rotation, controller.scale );
 					controller.visible = true;