Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@yushimatenjin

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

はじめに

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

iOS 12のWebVRを使用するための権限を取得する方法

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

iOS 13から変わった"動作と方向へのアクセス"

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

変更点について

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

  • 1. DeviceOrientationEvent.requestPermission()こちらの関数を実行することでデバイスから動作と方向の許可を求めるアラートを出すことができます
  • 2. DeviceOrientationEvent.requestPermission()の返り値は現在の権限の状態deneidgrantedが非同期で渡されます。
    1. 権限を持っている状態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のスターターキットをそのまま使用します。

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

1. PlayCanvasでWebVRのスターターキットを使用して作成をする

スターターキットを使用してiOS13のWebVRに対応をする方法を紹介します。

one

2. シーンの選択をする

two

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


4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yushimatenjin
インターネットに無限の可能性を感じています。
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?