【iOS13】새로워진 WebVR의 사용법 [PlayCanvas]

소개

iOS13에서 WebVR을 수행하는 방법이 변경되었습니다. 지금까지 (iOS 12)는 Safari 설정에서 가속도 허가를 하는 방법이었지만, iOS13에서 허가 방법이 바뀌어 브라우저에서 허가를 요구하게 되었습니다.
PlayCanvas를 사용한 대응 방법이 없었기 때문에 공개했습니다.

iOS 12 WebVR을 사용하는 권한을 얻는 방법

iOS 설정 열기

모션 및 화면 방향 액세스 허용

브라우저에서 장치의 動作と方向를 가져올 수 있습니다

iOS 13에서 바뀐 "동작 및 방향 액세스"

브라우저에서 경고를 발행

許可 또는 拒否 중 하나가 선택됨

許可 경우 브라우저에서 장치의 動作と方向를 얻을 수 있습니다

변경점에 대해 기존 PC 등의 동작은 그대로 사용할 수 있으므로 userAgent 를 보고 iOS13 의 경우에만 허가를 요구하는 스크립트를 추가합니다. htps : // 기 st. 기주 b. 코 m/유시마 텐진/세 6에 0d후 346510c94d65에 f7에 4에 f로 14아

1. DeviceOrientationEvent.requestPermission()이 함수를 실행하여 장치에서 動作と方向의 권한을 묻는 경고를 보낼 수 있습니다.

2. DeviceOrientationEvent.requestPermission() 반환값은 현재 권한 상태 deneid 또는 granted가 비동기적으로 전달됩니다.

권한이 있는 상태 granted 그렇다면 PlayCanvas enterVr 함수에서 VR 상태( 画面が2分割になり、回転などを取得している )로 합니다.

디바이스 취득 방법은 이쪽을 참고로 했습니다
iOS13에서 WebAR 및 WebVR의 디바이스 모션 설정이 개선되었습니다!

web-vr-ui.js

    const onEnterVrPressedEventIOS13 = function(){

          if ( DeviceOrientationEvent && DeviceOrientationEvent.requestPermission && typeof DeviceOrientationEvent.requestPermission === 'function') {
            DeviceOrientationEvent.requestPermission().then((state) => {
                if(state === "granted"){
                    self.camera.camera.enterVr(function (err) {
                        if (err) {
                            console.warn(err);
                        } 
                });
                }else if(state === "denied"){
                    alert("Permission is denied !")
                }

            })
          }

    }

    if(window.navigator.userAgent.includes("OS 13")){
        this.vrButtonDiv.addEventListener('click', onEnterVrPressedEventIOS13, false);

    }else{
        this.vrButtonDiv.addEventListener('click', onEnterVrPressedEvent, false);
        onEnterVrPressedEvent();
    }

};

PlayCanvas에서 WebVR 사용

2020년 12월 현재
PlayCanvas의 스타터 키트는 WebVR의 API + iOS 13에 대응했습니다.
이번에는 PlayCanvas의 스타터 키트를 그대로 사용합니다.

iOS13의 WebVR 대응 PlayCanvas의 스타터 키트를 만들어 보았다 htps // t. 코 / 오 → hDlG 5

이 프로젝트의 Fork 원래 Starter Kit: VR를 참조하여 작성합니다.