Checklist for the Sensor and VR | 한국어
https://codesandbox.io/s/view360-vr-demo-fiqxh
- https 프로토콜을 이용해서 페이지가 제공되어야 디바이스 모션을 사용할 수 있습니다.
- 디바이스의 자이로모션은 iOS 12.2부터 기본적으로 비활성화되어있으며, iOS13 이후부터만 스크립트를 통해 활성화될 수 있습니다.
- 사용자에게 설정 -> Safari -> 동작 및 방향 권한을 활성화하도록 가이드합니다.
const iOSVersion = (() => {
if (/iP(hone|od|ad)/.test(navigator.platform)) {
var v = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
})();
// For iOS 12.2 ~ 13
if (iOSVersion && iOSVersion[0] === 12 && iOSVersion[1] >= 2) {
PanoViewer.isGyroSensorAvailable(available => {
if (!available) {
// Sweet Alert 2를 사용하고 있습니다.
Swal.fire({
title: "Please enable the Motion Sensor! (iOS12.2~13)",
icon: "warning",
text: "This website requires a permission for your device sensor.",
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>
`
});
}
});
}- PanoViewer의
enableSensor()메소드를 통해 디바이스모션을 활성화할 수 있습니다. ⚠️ 주의하실 점은, 해당 메소드는 사용자의 인터랙션에 의해서만 호출되어야 합니다.- iOS 13+인지 판정될 경우, 버튼을 포함한 Modal을 화면에 표시한 이후 버튼의 onclick callback을 통해
enableSensor를 호출하시는 것을 권장드립니다.
- iOS 13+인지 여부는 다음과 같이 판정하실 수 있습니다.
var IS_IOS13_OR_LATER = DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function";- 사용자가 "동작 및 방향" 권한을 취소했을 경우, 이후
requestPermission이 추가적인 팝업을 생성하지 않고 항상 "denied"를 리턴하기 때문에, 자이로센서가 해당 페이지 내에서 활성화될 수 없는 문제가 있습니다. - "동작 및 방향"에 대한 권한 요청을 다시 하기 위해선, 사용자가 iOS에서 브라우저 프로세스를 완전히 종료한 이후에 다시 브라우저를 켜 같은 페이지에 접속해야만 합니다.
- iPad OS 13.3 Safari에서 발생한 이슈로, Safari를 완전히 종료한 이후 landscape orientation인 상태에서로 Safari 브라우저를 켰을 때 orientation을 제대로 계산하지 못해 올바르지 않은 방향을 보는 경우가 있습니다.
- 이는 Safari 브라우저의 버그로, UI 쓰레드를 블락하는 메소드를 호출하거나, 풀스크린 모드에 들어갔다 나온 후에 올바른 orientation값이 계산됩니다.
- 따라서, 센서 활성화 이후 다음 코드를 사용하거나, 혹은 alert()이나 prompt()와 같은 메소드 사용하면 약간의 결함을 포함하지만 이를 해결할 수 있습니다.
document.documentElement.webkitRequestFullscreen();
setTimeout(function() {
document.webkitExitFullscreen();
});- View360의 경우
enterVR()을 호출 시 DeviceMotion이벤트의 Permission이 주어져있는지 체크하는 로직이 포함되어있습니다. - 만일 디바이스모션의 Permission을 기존에 체크하지 않았을 경우
enterVR()호출 시점에 디바이스 모션을 허락할지에 대한 네이티브 팝업창이 뜨고, 사용자가 이를 허락하면 VR 모드에 진입할 수 있습니다. - Permission을 체크하는 과정이 비동기로 일어나기 때문에, 그 경우 VR 진입은 실패하게 됩니다. 즉, 사용자는 VR 진입 버튼을 두 번 눌러야 합니다. 때문에, iOS의 경우 가급적 사용자가 VR 진입 버튼을 누르기 이전에 미리 "동작 및 방향"에 대한 권한을 미리 얻어놓는 것이 좋습니다.
- 모바일 iOS의 경우 브라우저와 무관하게 Fullscreen API를 지원하지 않습니다.
- 때문에 주소창에 의해 콘텐츠의 일부가 가려질 수 있으며, 이 때문에 iOS에서는 원만하게 VR 콘텐츠를 감상하는 것이 어렵습니다.
- 동일한 서비스를 제공하는 네이티브 앱이 존재할 경우 이로 연결하거나, PWA를 시도해볼 수 있습니다.
- WebVR / WebXR Polyfill의 카드보드 UI에서, 뒤로가기 버튼이 iOS에서 눌리지 않는 이슈가 있습니다.
- 별도로 레이어를 띄우고 콜백을 통해
exitVR()를 호출하시는걸 추천드립니다.
- View360의 경우 WebVR API 1.1 및 WebXR API의 스펙을 둘 다 지원합니다.
- View360은 WebXR API를 WebVR API보다 우선합니다. 즉, Oculus browser와 같이 네이티브 WebVR API가 존재하는 브라우저에서 WebXR 폴리필을 추가할 경우 WebVR API를 사용할 수 없게 되어 문제가 발생할 수 있습니다. 때문에, WebXR 폴리필을 사용하기 전에, WebVR API가 존재하는지 테스트해보는 것이 좋습니다.
if (typeof navigator.getVRDisplays !== "function") {
new WebXRPolyfill();
}-
WebVR Polyfill을 이용하실 경우, iOS에서 VR모드 진입/해제시 캔버스의 크기가 변경될 수 있습니다.
- WebXR Polyfill로 변경하시면 해결하실 수 있습니다.
- WebVR Polyfill을 사용하셔야 하는 경우, PanoViewer를 생성하신 엘리먼트를 대상으로 다음과 같은 스타일을 추가해주시면 해결하실 수 있습니다.
/* "panoviewer"가 엘리먼트의 id라고 가정합니다. */
#panoviewer canvas {
width: 100% !important;
height: 100% !important;
}- WebVR Polyfill 사용시 iPad13+에서 "모바일 웹 사이트 요청"시에만 VR모드에 진입 가능합니다.
-
WebXR Polyfill 사용시 iPad13+에서
allowCardboardOnDesktop: true옵션을 활성화하고, "데스크탑 웹 사이트 요청"시에만 VR모드에 진입 가능합니다. - 기기를 하늘을 향하게 하거나, 바닥을 향한 상태에서 VR모드에 진입할 경우 초기에 향하는 방향이 잘못될 수 있습니다.