From 60a6d82e791b48e43b0ffd498000c5956a29c39c Mon Sep 17 00:00:00 2001 From: Mingyu Kim Date: Tue, 12 Oct 2021 19:34:30 +0900 Subject: [PATCH] fix: PanoViewer is not working on iOS15 --- .gitignore | 3 +- demo/common/js/PanoControls.js | 40 +++++++++---------- demo/examples/panoviewer/etc/hotspot.html | 2 +- src/PanoImageRenderer/WebGLUtils.ts | 1 - .../renderer/CubeRenderer.ts | 4 +- src/PanoImageRenderer/vr/XRManager.ts | 4 +- src/utils/math-util.ts | 4 ++ 7 files changed, 31 insertions(+), 27 deletions(-) diff --git a/.gitignore b/.gitignore index a2d1f4cb2..d8be23c13 100644 --- a/.gitignore +++ b/.gitignore @@ -161,7 +161,8 @@ fabric.properties _site/ .sass-cache/ .jekyll-metadata - +cert.crt +cert.key ### SublimeText ### # cache files for sublime text diff --git a/demo/common/js/PanoControls.js b/demo/common/js/PanoControls.js index 9df0222b2..62f16ff1a 100644 --- a/demo/common/js/PanoControls.js +++ b/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: 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: ` -
-
- 1. Open Settings -
-
- 2. Select Safari -
-
- 3. Enable Motion & Orientation Access -
-
4. Reload the page
-
- ` + html: "\ +
\ +
\ + 1. Open Settings\ +
\ +
\ + 2. Select Safari\ +
\ +
\ + 3. Enable Motion & Orientation Access\ +
\ +
4. Reload the page
\ +
\ + " }); } }); diff --git a/demo/examples/panoviewer/etc/hotspot.html b/demo/examples/panoviewer/etc/hotspot.html index 2c46e879e..f437ba888 100644 --- a/demo/examples/panoviewer/etc/hotspot.html +++ b/demo/examples/panoviewer/etc/hotspot.html @@ -422,7 +422,7 @@

Drag and rotate the photo. An anchor will follow.

}); }).on("viewChange", function (e) { setHotspotOffsets(viewer); - }).on("error", e => { + }).on("error", function (e) { console.error(e); }); diff --git a/src/PanoImageRenderer/WebGLUtils.ts b/src/PanoImageRenderer/WebGLUtils.ts index fa22f4b44..0bcce3f6e 100644 --- a/src/PanoImageRenderer/WebGLUtils.ts +++ b/src/PanoImageRenderer/WebGLUtils.ts @@ -78,7 +78,6 @@ export default class WebGLUtils { ...{ preserveDrawingBuffer: false, antialias: false, - xrCompatible: true, }, ...userContextAttributes }; diff --git a/src/PanoImageRenderer/renderer/CubeRenderer.ts b/src/PanoImageRenderer/renderer/CubeRenderer.ts index 5bd5ad1f1..c091a4c7b 100644 --- a/src/PanoImageRenderer/renderer/CubeRenderer.ts +++ b/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); diff --git a/src/PanoImageRenderer/vr/XRManager.ts b/src/PanoImageRenderer/vr/XRManager.ts index 7d86d1c38..4b5bd7da7 100644 --- a/src/PanoImageRenderer/vr/XRManager.ts +++ b/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 => { diff --git a/src/utils/math-util.ts b/src/utils/math-util.ts index fdff9bdfb..96d78f3e0 100644 --- a/src/utils/math-util.ts +++ b/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;