Unity WebXR ExporterでVR刺身タンポポを動かしてみた / Challenge to use Unity WebXR Exporter for VR Sashimi Tanpopo

Transcript

1. Unity WebXR Exporterで
   VR刺身タンポポを動かしてみた
   こりん（@korinVR）
   WebXR Tech Tokyo #0 @ cluster
   2020/04/27
   

   View Slide

2. 自己紹介
   本名 古林 克臣（こばやしかつおみ）
   ハンドル こりん（@korinVR）
   職業 Unityエンジニア
   所属 株式会社エクシヴィ
   

   View Slide

3. 主な個人VR作品
   - 3D駐車シミュレーター
   - VRちゃぶ台返し
   - パラレルパラソル（仮）
   - VR刺身タンポポ　etc...
   

   View Slide

4. 今日の題材
   VR刺身タンポポ
   

   View Slide

5. VR刺身タンポポをQuestでリリースしたい
   流れてくる刺身にタンポポをのせるだけの簡単なお仕事
   イベントで展示したり、Windows実行ファイルを配布
   本当はOculus Storeできちんと出したい
   ストアがゲーム機並みに厳しくこんなネタアプリは通らない
   WebXR！
   

   View Slide

6. WebXR版の実現方法
   最初はA-FrameとA-Frame Physicsを使って
   ゼロから作り直すつもりだった……が
   4月8日、MozillaのUnity WebXR Exporterが
   突然のメジャーアップデート
   

   View Slide

7. WebXR版の実現方法
   ブログエントリを読んだらQuestへの言及がある！
   ので、試しに使ってみることに
   

   View Slide

8. Unity WebXR Exporterについて
   UnityのWebGL出力をWebXR APIでVRに対応させる
   Asset StoreとGitHubにある。ドキュメントはGitHub参照
   

   View Slide

9. Unity WebXR Exporterの使い方（概略）
   1. Universal Render Pipelineの新規プロジェクトを作成
   2. Virtual Reality Supportedをオン
   3. プラットフォームをWebGLにする
   4. Unity WebXR Exporterをインポート
   5. InputManager.assetを入れ替え
   6. Main Cameraを削除してWebXRCameraSetを配置
   7. WebGL Templateをアセット付属の「WebXR」に設定
   これでビルドすればオーケー！
   

   View Slide

10. 注意：WebXR APIはHTTPSが必要
    Build & Runで起動するローカルHTTPサーバーでは
    正常に動作しない
    npmの http-server -S 等で動かす必要あり
    （下記ページを参考に）
    node.js - npm http-server with SSL - Stack Overflow
    https://stackoverflow.com/questions/35127383/npm-http-server-with-ssl
    

    View Slide

11. ビルドしたアプリをウェブで公開するには
    HTTPSのウェブサイトを立ち上げる
    今回はAWS Route 53でドメインを新規に取得し、
    S3＋CloudFront＋Certificate Managerを使用
    UnityでWebGL出力したフォルダをまるごと
    aws s3 sync コマンドでアップロード・更新
    サイズが大きいのでバズる可能性があるなら転送料金に注意
    

    View Slide

12. Oculus Questでの動作画面
    

    View Slide

13. 動作の所感
    

    View Slide

14. Oculus Questでの動作：起動時間
    VR刺身タンポポの場合、WebGL出力のサイズは12MBほど
    ページを開いて起動に約20秒かかる
    おそらくほぼWebAssemblyのパース・コンパイル時間
    将来的にはPCブラウザ同様
    数秒で起動するようになるはず
    ロード画面を調整したほうがよさそう
    

    View Slide

15. Oculus Questでの動作：フレームレート
    フレームレートが低い（20～30fpsくらい？）
    Issueが立っていて、フォークされているバージョンでは
    改善されているという話も。おそらく一時的な不具合
    

    View Slide

16. Chrome 81での動作
    chrome://flags の下記設定でVRモードに入れる
    ……がヘッドセットの中に何も映らない（Rift SもViveも）
    （何か間違ってる気がする）
    

    View Slide

17. Firefoxでの動作
    VRのパーミッションをRememberをチェックして
    記憶させてからページをリロードする必要がある……。
    

    View Slide

18. 現在のステータス：
    とりあえずQuestでは動く……！
    何かcontributeしたいですね
    

    View Slide

19. Unity WebXR Exporterの注意点
    

    View Slide

20. 注意1：WebXRCameraSetについている手
    Takeモーションで指3本を曲げるだけの単純なもの
    WebXRCameraSet単体だと、トリガーの状態に関わらず
    Takeが再生されて指3本が曲がった状態で固定されてしまう
    →DesertControllerInteraction.cs を参考に解決
    たぶん手は自前で
    用意したほうがいい
    

    View Slide

21. 注意2：コントローラーの角度
    Unity上で実行したときと、ブラウザで実行したときで
    コントローラーの角度が大きく違う
    プラットフォームを判定してずらす必要がありそう
    

    View Slide

22. 注意3：シーンロードしないこと
    SceneManager.LoadSceneでシーンを遷移・リロードすると
    VRモードが解除される＝止まってしまう
    VR刺身タンポポではリスタート時にシーンリロードしていた
    LoadSceneせずに初期状態に戻るように書き直した
    基本1シーンで作る必要がありそう
    

    View Slide

23. 注意4：WebXRCameraSetの名前を変えない
    動かなくなる。エディタで実行すると下記エラーが出る
    The webxr.js script requires the WebXRManager gameobject to be named
    WebXRCameraSet for proper functioning
    UnityEngine.Debug:LogError(Object)
    WebXR.WebXRManager:Awake() (at Assets/WebXR/Scripts/WebXRManager.cs:110)
    

    View Slide

24. Oculus QuestでVR刺身タンポポ
    試してみたい？
    

    View Slide

25. Questのブラウザを開いて、アドレスバーに
    バーチャルキーボード右下の「.com」キーを使うと楽です！
    遊んでみてね！ アプデしていきます！
    vrsashimi.com
    Oculus QuestでVR刺身タンポポ
    こりん（@korinVR）
    

    View Slide