fix: can't enter VR session with WebXR

Author: WoodNeck

.gitignore

@@ -206,5 +206,5 @@ report/
 temp/
 demo/_data/version.yml
 demo/release/
-
+dist/
 declaration/

demo/common/js/PanoControls.js

@@ -24,14 +24,15 @@ var PanoControls = (function() {
 		var pieView = new PieView(pieEl);
 		panoViewer.on({
 			"ready": function () {
-				var yawRange = panoViewer.getYawRange();
-				pieView.setState(panoViewer.getYaw(), panoViewer._getHFov(), yawRange[1] - yawRange[0]);
+        var yawRange = panoViewer.getYawRange();
+        var hfov = (180 / Math.PI) * (2 * Math.atan(panoViewer._aspectRatio * Math.tan(panoViewer.getFov() * Math.PI / 360)));
+				pieView.setState(panoViewer.getYaw(), hfov, yawRange[1] - yawRange[0]);
 				showLoading(false);
 			},
 			"viewChange": function (e) {
-					var hfov = panoViewer._getHFov();
-					pieView.setState(e.yaw,  hfov);
-					// console.log("viewChange");
+        var hfov = (180 / Math.PI) * (2 * Math.atan(panoViewer._aspectRatio * Math.tan(panoViewer.getFov() * Math.PI / 360)));
+        pieView.setState(e.yaw,  hfov);
+        // console.log("viewChange");
 			}
 		});
 
@@ -49,7 +50,7 @@ var PanoControls = (function() {
 			panoViewer.updateViewportDimensions();
 
 			var yaw = panoViewer.getYaw();
-			var hfov = panoViewer._getHFov();
+			var hfov = (180 / Math.PI) * (2 * Math.atan(panoViewer._aspectRatio * Math.tan(panoViewer.getFov() * Math.PI / 360)));
 			pieView.setState(yaw,  hfov);
 		}));
 

src/PanoImageRenderer/PanoImageRenderer.ts

@@ -154,7 +154,6 @@ class PanoImageRenderer extends Component<{
 
     this.canvas = this._initCanvas(width, height);
 
-    this.canvas.getContext("webgl", )
     this._setDefaultCanvasStyle();
     this._wrapper = null; // canvas wrapper
     this._wrapperOrigStyle = null;

src/PanoImageRenderer/vr/XRManager.ts

@@ -99,6 +99,11 @@ class XRManager {
       requiredFeatures: [XR_REFERENCE_SPACE],
     }, this._options);
 
+    const attributes = gl.getContextAttributes();
+    if (attributes && (attributes as any).xrCompatible !== true) {
+      (gl as any).makeXRCompatible();
+    }
+
     return (navigator as any).xr.requestSession("immersive-vr", options).then(session => {
       const xrLayer = new (window as any).XRWebGLLayer(session, gl);
 

test/manual/PanoViewer/Panorama.html

@@ -12,7 +12,7 @@
     <script src="../../../node_modules/@egjs/axes/dist/axes.js"></script>
     <script src="../../../dist/view360.js"></script>
     <!-- <script src="../../../dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script> -->
-    
+
     <script src="../lib/jquery-3.3.1.min.js"></script>
     <script src="../lib/screenfull.js"></script>
     <script src="../lib/util.js"></script>
@@ -68,25 +68,26 @@ <h2>Select your panorama picture taken on smartphone</h2>
         }
         ).on({
             "ready": function () {
-                var yawRange = panoViewer.getYawRange();
-                pieView.setState(panoViewer.getYaw(), panoViewer._getHFov(), yawRange[1] - yawRange[0]);
+              var yawRange = panoViewer.getYawRange();
+              var hfov = (180 / Math.PI) * (2 * Math.atan(panoViewer._aspectRatio * Math.tan(panoViewer.getFov() * Math.PI / 360)));
+              pieView.setState(panoViewer.getYaw(), hfov, yawRange[1] - yawRange[0]);
             },
             "viewChange": function (e) {
-                var hfov = panoViewer._getHFov();
-                pieView.setState(e.yaw,  hfov);
+              var hfov = (180 / Math.PI) * (2 * Math.atan(panoViewer._aspectRatio * Math.tan(panoViewer.getFov() * Math.PI / 360)));
+              pieView.setState(e.yaw,  hfov);
             },
             "error": function(e) {
-                console.error(e);
+              console.error(e);
             }
         });
 
         // resize handler
         window.addEventListener("resize", debounce(function() {
-            panoViewer.updateViewportDimensions();
-            
-            var yaw = panoViewer.getYaw();
-            var hfov = panoViewer._getHFov();
-            pieView.setState(yaw,  hfov);
+          panoViewer.updateViewportDimensions();
+
+          var yaw = panoViewer.getYaw();
+          var hfov = (180 / Math.PI) * (2 * Math.atan(panoViewer._aspectRatio * Math.tan(panoViewer.getFov() * Math.PI / 360)));
+          pieView.setState(yaw,  hfov);
         }));
 
         // create file input
@@ -97,10 +98,10 @@ <h2>Select your panorama picture taken on smartphone</h2>
 
             // inject an image with the src url
             reader.onload = function (event) {
-                the_url = event.target.result;
+              the_url = event.target.result;
 
-                panoViewer.setImage(the_url, { projectionType: "panorama" });
-                panoViewer.updateViewportDimensions();
+              panoViewer.setImage(the_url, { projectionType: "panorama" });
+              panoViewer.updateViewportDimensions();
             }
 
             // when the file is read it triggers the onload event above.
@@ -116,16 +117,16 @@ <h2>Select your panorama picture taken on smartphone</h2>
             var requestFullscreen;
 
             if (screenfull.enabled) {
-                requestFullscreen = screenfull.isFullscreen;
+              requestFullscreen = screenfull.isFullscreen;
             } else {
-                requestFullscreen = mode === "full";
+              requestFullscreen = mode === "full";
             }
-                
+
             if (requestFullscreen) {
-                fullscreenContainer.appendChild(rootNode);
+              fullscreenContainer.appendChild(rootNode);
 	            fullscreenContainer.style.display = "block";
             } else {
-                originalContainer.appendChild(rootNode);
+              originalContainer.appendChild(rootNode);
 	            fullscreenContainer.style.display = "none";
             }
 
@@ -137,21 +138,21 @@ <h2>Select your panorama picture taken on smartphone</h2>
 
         document.querySelector(".enterfs").addEventListener("click", function() {
             if (screenfull.enabled) {
-                screenfull.request();
+              screenfull.request();
             } else {
-                changeMode("full");
+              changeMode("full");
             }
         });
 
         document.querySelector(".exitfs").addEventListener("click", function() {
             if (screenfull.enabled) {
-                screenfull.exit();
+              screenfull.exit();
             } else {
-                changeMode("orignal");
+              changeMode("orignal");
             }
         });
     </script>
 
 </body>
 
-</html>
+</html>