【iOS13】新しくなったWebVRの使い方 [PlayCanvas]

## はじめに

iOS13でWebVRをやる方法が変わりました。今まで(iOS 12)は、Safariの設定から加速度の許可をする方法だったのですが、iOS13から許可の方法が変わり、ブラウザ上から許可を求めるようになりました。
PlayCanvasを使用した対応方法がなかったため公開いたしました。

## iOS 12のWebVRを使用するための権限を取得する方法
1. iOSの設定を開く
2. モーションと画面の向きのアクセスを許可する
3. ブラウザ上でデバイスの`動作と方向`を取得できるようになる

<img src="https://user-images.githubusercontent.com/39250588/65743893-06a3aa80-e0e6-11e9-93a7-a518beafd79e.png" width=500 />

##iOS 13から変わった"動作と方向へのアクセス"
1. ブラウザからアラートを出す
2. `許可`または`拒否`のどちらかが選択される
3. `許可`された場合ブラウザ上でデバイスの`動作と方向`を取得できるようになる

<img src="https://user-images.githubusercontent.com/39250588/65743832-c3493c00-e0e5-11e9-8713-8923927363c9.PNG" width=500/>



### 変更点について
既存のパソコンなどの動作はそのまま使用できるので、`userAgent`を見て`iOS13`のときのみに許可を求めるスクリプトを追加します。
[https://gist.github.com/yushimatenjin/ce6e0dfe346510c94d65ff7e4afde14a#file-web-vr-ui-js-L80-L111](https://gist.github.com/yushimatenjin/ce6e0dfe346510c94d65ff7e4afde14a#file-web-vr-ui-js-L80-L111)

- 1. ` DeviceOrientationEvent.requestPermission()`こちらの関数を実行することでデバイスから`動作と方向`の許可を求めるアラートを出すことができます
- 2. `DeviceOrientationEvent.requestPermission()`の返り値は現在の権限の状態`deneid`か`granted`が非同期で渡されます。
- 3. 権限を持っている状態`granted`だった場合にPlayCanvasの`enterVr`関数でVRの状態(`画面が2分割になり、回転などを取得している`)にします。

- デバイスの取得の方方はこちらを参考にいたしました
[iOS13でWebARとWebVRにおけるデバイスモーション設定が改善しました！](https://bagelee.com/webar-vr/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のスターターキットをそのまま使用します。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">iOS13のWebVR対応したPlayCanvasのスタータキットを作ってみた<br> <a href="https://t.co/oZlhDlGdi5">https://t.co/oZlhDlGdi5</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1177421831415857152?ref_src=twsrc%5Etfw">September 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


このプロジェクトの`Fork`元の`Starter Kit: VR`を参考にして作成します。



#### 1. PlayCanvasでWebVRのスターターキットを使用して作成をする
スターターキットを使用してiOS13のWebVRに対応をする方法を紹介します。

![one](https://user-images.githubusercontent.com/39250588/65745335-ed512d00-e0ea-11e9-9116-ce652de7587c.png)

#### 2. シーンの選択をする
![two](https://user-images.githubusercontent.com/39250588/65745337-ed512d00-e0ea-11e9-9233-6a45fab7124e.png)




<img src="https://user-images.githubusercontent.com/39250588/65747038-eb3d9d00-e0ef-11e9-85f5-16d36fc49816.gif" width=500 height=400/>





このQRから飛ぶことができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b125fd78-3051-f582-9636-01f2ef17eaf3.png" width="100" />
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">iOS13のWebVR対応したPlayCanvasのスタータキットを作ってみた<br> <a href="https://t.co/oZlhDlGdi5">https://t.co/oZlhDlGdi5</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1177421831415857152?ref_src=twsrc%5Etfw">September 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>