Checklist for the Sensor and VR | 한국어

센서 관련 주의사항

공통

• https 프로토콜을 이용해서 페이지가 제공되어야 디바이스 모션을 사용할 수 있습니다.

iOS Permission 관련 문제

• 디바이스의 자이로모션은 iOS 12.2부터 기본적으로 비활성화되어있으며, iOS13 이후부터만 스크립트를 통해 활성화될 수 있습니다.

iOS(<13)

• 사용자에게 설정 -> Safari -> Motion & Orientation Access를 활성화하도록 가이드합니다.

iOS(13+)

• PanoViewer의 enableSensor() 메소드를 통해 디바이스모션을 활성화할 수 있습니다.
• ⚠️ 주의하실 점은, 해당 메소드는 사용자의 인터랙션에 의해서만 호출되어야 합니다.
• iOS 13+인지 판정될 경우, 버튼을 포함한 Modal을 화면에 표시한 이후 버튼의 onclick callback을 통해 enableSensor를 호출하시는 것을 권장드립니다.

A-Frame의 예시

iOS 13+에서 페이지 로드시 디바이스 모션 활성화를 위한 Modal이 팝업된 모습

• iOS 13+인지 여부는 다음과 같이 판정하실 수 있습니다.

var IS_IOS13_OR_LATER = DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function";

사용자가 DeviceMotion 팝업 취소시

• 사용자가 "동작 및 방향" 권한을 취소했을 경우, 이후 requestPermission이 추가적인 팝업을 생성하지 않고 항상 "denied"를 리턴합니다.
• "동작 및 방향"에 대한 권한 요청을 다시 하기 위해선, iOS에서 브라우저 프로세스를 완전히 종료한 이후에 다시

TODO

• 취소되었을 경우 관련 설명
• iOS 12관련 설명(이미지) 추가

VR 관련 주의사항

iOS 관련 주의사항

자이로센서 관련 주의사항 (iOS 13+)

• View360의 경우 enterVR()을 호출 시 DeviceMotion이벤트의 Permission이 주어져있는지 체크하는 로직이 포함되어있습니다.
• 만일 디바이스모션의 Permission을 기존에 체크하지 않았을 경우 enterVR() 호출 시점에 디바이스 모션을 허락할지에 대한 네이티브 팝업창이 뜨고, 사용자가 이를 허락하면 VR 모드에 진입할 수 있습니다.

VR 진입 후의 주의사항

• 모바일 iOS의 경우 브라우저와 무관하게 Fullscreen API를 지원하지 않습니다.
• 때문에 주소창에 의해 콘텐츠의 일부가 가려질 수 있으며, 이 때문에 iOS에서는 원만하게 VR 콘텐츠를 감상하는 것이 어렵습니다.
• 동일한 서비스를 제공하는 네이티브 앱이 존재할 경우 이로 연결하거나, PWA를 시도해볼 수 있습니다.

WebXR API & WebVR API

• View360의 경우 WebVR API 1.1 및 WebXR API의 스펙을 둘 다 지원합니다.
• VR에서 핵심적으로 사용되는 enterVR함수의 경우 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모드에 진입 가능합니다.