fix: PanoViewer is not working on iOS15

.gitignore

@@ -161,7 +161,8 @@ fabric.properties
 _site/
 .sass-cache/
 .jekyll-metadata
-
+cert.crt
+cert.key
 
 ### SublimeText ###
 # cache files for sublime text

demo/common/js/PanoControls.js

@@ -105,7 +105,7 @@ var PanoControls = (function() {
 
 		var vrButton = document.querySelector(".entervr")
 		vrButton && vrButton.addEventListener("click", function() {
-			panoViewer.enterVR().catch(e => {
+			panoViewer.enterVR().catch(function (e) {
 				Swal.fire({
 					title: "Can't enter VR mode!",
 					text: e.message || e,
@@ -115,7 +115,7 @@ var PanoControls = (function() {
 		});
 
 		// For iOS 13+
-		panoViewer.enableSensor().catch(() => {
+		panoViewer.enableSensor().catch(function () {
 			Swal.fire({
 				title: "Permission needed! (iOS13+)",
 				icon: "question",
@@ -124,10 +124,10 @@ var PanoControls = (function() {
 				reverseButtons: true,
 				confirmButtonText: "Allow",
 				cancelButtonText: "Deny"
-			}).then(result => {
+			}).then(function (result) {
 				if (result.value) {
 					// Granted
-					panoViewer.enableSensor().catch(() => {
+					panoViewer.enableSensor().catch(function () {
 						Swal.fire(
 							"You've denied a permission!",
 							"You have to completely close out your browser and reconnect this page to enable sensor again!",
@@ -140,7 +140,7 @@ var PanoControls = (function() {
 			});
 		});
 
-		const iOSVersion = (() => {
+		const iOSVersion = (function () {
 			if (/iP(hone|od|ad)/.test(navigator.platform)) {
 				// supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
 				var v = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
@@ -150,26 +150,26 @@ var PanoControls = (function() {
 
 		// For iOS 12.2 ~ 13
 		if (iOSVersion && iOSVersion[0] === 12 && iOSVersion[1] >= 2) {
-			PanoViewer.isGyroSensorAvailable(available => {
+			PanoViewer.isGyroSensorAvailable(function (available) {
 				if (!available) {
 					Swal.fire({
 						title: "Please enable the Motion Sensor! (iOS12.2~13)",
 						icon: "warning",
 						text: "This website requires a permission for your device motion sensor for the immersive experience.",
-						html: `
-						<div style="text-align: left;">
-							<div>
-							1. Open <img src="https://developer.apple.com/design/human-interface-guidelines/ios/images/icons/app_icons/Settings_2x.png" width="20" /> <b>Settings</b>
-							</div>
-							<div>
-							2. Select <img src="https://km.support.apple.com/resources/sites/APPLE/content/live/IMAGES/0/IM26/en_US/safari-240.png" width="20" /> <b>Safari</b>
-							</div>
-							<div>
-							3. Enable <b>Motion & Orientation Access</b>
-							</div>
-							<div>4. Reload the page</div>
-						</div>
-						`
+						html: "\
+						<div style=\"text-align: left;\">\
+							<div>\
+							1. Open <img src=\"https://developer.apple.com/design/human-interface-guidelines/ios/images/icons/app_icons/Settings_2x.png\" width=\"20\" /> <b>Settings</b>\
+							</div>\
+							<div>\
+							2. Select <img src=\"https://km.support.apple.com/resources/sites/APPLE/content/live/IMAGES/0/IM26/en_US/safari-240.png\" width=\"20\" /> <b>Safari</b>\
+							</div>\
+							<div>\
+							3. Enable <b>Motion & Orientation Access</b>\
+							</div>\
+							<div>4. Reload the page</div>\
+						</div>\
+						"
 					});
 				}
 			});

demo/examples/panoviewer/etc/hotspot.html

@@ -422,7 +422,7 @@ <h2>Drag and rotate the photo. An anchor will follow.</h2>
         });
     }).on("viewChange", function (e) {
         setHotspotOffsets(viewer);
-    }).on("error", e => {
+    }).on("error", function (e) {
       console.error(e);
     });
 

src/PanoImageRenderer/WebGLUtils.ts

@@ -78,7 +78,6 @@ export default class WebGLUtils {
       ...{
         preserveDrawingBuffer: false,
         antialias: false,
-        xrCompatible: true,
       }, ...userContextAttributes
     };
 

src/PanoImageRenderer/renderer/CubeRenderer.ts

@@ -270,8 +270,8 @@ void main(void) {
     const SHRINK_MULTIPLIER = 1 - trim * (2 / inputTextureSize);
 
     const axisMultipliers = [0, 1, 2].map(axisIndex => {
-      const axisDir = Math.sign(faceCoords[0][axisIndex]);
-      const notSameDir = faceCoords.some(coord => Math.sign(coord[axisIndex]) !== axisDir);
+      const axisDir = mathUtil.sign(faceCoords[0][axisIndex]);
+      const notSameDir = faceCoords.some(coord => mathUtil.sign(coord[axisIndex]) !== axisDir);
 
       return notSameDir;
     }).map(notSameDir => notSameDir ? SHRINK_MULTIPLIER : 1);

src/PanoImageRenderer/vr/XRManager.ts

@@ -94,14 +94,14 @@ class XRManager {
     this._xrSession?.removeEventListener("end", callback);
   }
 
-  public requestPresent(canvas: HTMLCanvasElement, gl: WebGLRenderingContext) {
+  public async requestPresent(canvas: HTMLCanvasElement, gl: WebGLRenderingContext) {
     const options = merge({
       requiredFeatures: [XR_REFERENCE_SPACE],
     }, this._options);
 
     const attributes = gl.getContextAttributes();
     if (attributes && (attributes as any).xrCompatible !== true) {
-      (gl as any).makeXRCompatible();
+      await (gl as any).makeXRCompatible();
     }
 
     return (navigator as any).xr.requestSession("immersive-vr", options).then(session => {

src/utils/math-util.ts

@@ -211,6 +211,10 @@ util.yawOffsetBetween = (viewDir: number, targetDir: number) => {
   return theta;
 }
 
+util.sign = (x: number) => Math.sign
+  ? Math.sign(x)
+  : (Number(x > 0) - Number(x < 0)) || +x;
+
 util.toDegree = toDegree;
 util.getRotationDelta = getRotationDelta;
 util.angleBetweenVec2 = angleBetweenVec2;