Merge pull request #16649 from mvilledieu/helio-webxr-polyfill

Magic Leap - Helio WebXR Polyfill (Lumin 0.96.0)

examples/js/vr/HelioWebXRPolyfill.js

@@ -0,0 +1,172 @@
+/**
+ * @author mvilledieu / http://github.com/mvilledieu
+ */
+
+if ( /(Helio)/g.test( navigator.userAgent ) && "xr" in navigator ) {
+
+	console.log( "Helio WebXR Polyfill (Lumin 0.96.0)" );
+
+	// WebXRManager - XR.supportSession() Polyfill - WebVR.js line 147
+
+	if (
+		"supportsSession" in navigator.xr === false &&
+    "supportsSessionMode" in navigator.xr
+	) {
+
+		navigator.xr.supportsSession = function ( sessionType ) {
+
+			// Force using immersive-ar
+			return navigator.xr.supportsSessionMode( 'immersive-ar' );
+
+		};
+
+	}
+
+	if ( "requestSession" in navigator.xr ) {
+
+		const tempRequestSession = navigator.xr.requestSession.bind( navigator.xr );
+
+		navigator.xr.requestSession = function ( sessionType ) {
+
+			return new Promise( function ( resolve, reject ) {
+
+				tempRequestSession( {
+					mode: 'immersive-ar' // Force using immersive-ar
+				} )
+					.then( function ( session ) {
+
+						// WebXRManager - xrFrame.getPose() Polyfill - line 279
+
+						const tempRequestAnimationFrame = session.requestAnimationFrame.bind(
+							session
+						);
+
+						session.requestAnimationFrame = function ( callback ) {
+
+							return tempRequestAnimationFrame( function ( time, frame ) {
+
+								// WebXRManager - xrFrame.getViewerPose() Polyfill - line 279
+								// Transforms view.viewMatrix to view.transform.inverse.matrix
+
+								const tempGetViewerPose = frame.getViewerPose.bind( frame );
+
+								frame.getViewerPose = function ( referenceSpace ) {
+
+									const pose = tempGetViewerPose( referenceSpace );
+
+									pose.views.forEach( function ( view ) {
+
+										view.transform = {
+											inverse: {
+												matrix: view.viewMatrix
+											}
+										};
+
+									} );
+
+									return pose;
+
+								};
+
+								// WebXRManager - xrFrame.getPose() Polyfill - line 259
+
+								frame.getPose = function ( targetRaySpace, referenceSpace ) {
+
+									const inputPose = frame.getInputPose(
+										targetRaySpace,
+										referenceSpace
+									);
+
+									inputPose.transform = {
+										matrix: inputPose.targetRay.transformMatrix
+									};
+
+									return inputPose;
+
+								};
+
+								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( function (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 tempRequestReferenceSpace = session.requestReferenceSpace.bind(
+							session
+						);
+
+						session.requestReferenceSpace = function () {
+
+							return tempRequestReferenceSpace( {
+								type: "stationary",
+								subtype: "floor-level"
+							} );
+
+						};
+
+						resolve( session );
+
+					} )
+					.catch( function ( error ) {
+
+						return reject( error );
+
+					} );
+
+			} );
+
+		};
+
+	}
+
+}

examples/webvr_ballshooter.html

@@ -12,6 +12,7 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - ball shooter
 		</div>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 

examples/webvr_cubes.html

@@ -11,7 +11,8 @@
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
 		</div>
-
+		
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 

examples/webvr_dragging.html

@@ -12,6 +12,7 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - dragging
 		</div>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 

examples/webvr_lorenzattractor.html

@@ -8,8 +8,8 @@
 	</head>
 	<body>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
-
 		<script src="js/vr/WebVR.js"></script>
 
 		<script>

examples/webvr_paint.html

@@ -12,9 +12,9 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - paint
 		</div>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 		<script src="js/vr/WebVR.js"></script>
-
 		<script src="js/loaders/OBJLoader.js"></script>
 
 		<script>

examples/webvr_panorama.html

@@ -7,8 +7,8 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
-
 		<script src="js/vr/WebVR.js"></script>
 
 		<script>

examples/webvr_rollercoaster.html

@@ -8,10 +8,10 @@
 	</head>
 	<body>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 
 		<script src="js/RollerCoaster.js"></script>
-
 		<script src="js/vr/WebVR.js"></script>
 
 		<script>

examples/webvr_sandbox.html

@@ -8,6 +8,7 @@
 	</head>
 	<body>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 
 		<script src="js/objects/Lensflare.js"></script>

examples/webvr_sculpt.html

@@ -12,6 +12,8 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - sculpt
 		</div>
 
+		
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 

examples/webvr_video.html

@@ -14,8 +14,9 @@
 			stereoscopic panoramic render by <a href="http://pedrofe.com/rendering-for-oculus-rift-with-arnold/" target="_blank" rel="noopener">pedrofe</a>. scene from <a href="http://www.meryproject.com/" target="_blank" rel="noopener">mery project</a>.
 		</div>
 
-		<script src="../build/three.js"></script>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
+		<script src="../build/three.js"></script>
 		<script src="js/vr/WebVR.js"></script>
 
 		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">

examples/webvr_vive_paint.html

@@ -12,6 +12,7 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - htc vive - paint
 		</div>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 
 		<script src="js/vr/ViveController.js"></script>

examples/webvr_vive_sculpt.html

@@ -12,6 +12,7 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - htc vive - sculpt
 		</div>
 
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 		<script src="../build/three.js"></script>
 
 		<script src="js/vr/ViveController.js"></script>

src/renderers/webvr/WebXRManager.js

@@ -113,6 +113,12 @@ function WebXRManager( renderer ) {
 
 	};
 
+	this.getSession = function () {
+
+		return session;
+
+	};
+
 	this.setSession = function ( value ) {
 
 		session = value;