Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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」に設定 これでビルドすればオーケー!

Slide 10

Slide 10 text

注意: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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Oculus Questでの動作画面

Slide 13

Slide 13 text

動作の所感

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Unity WebXR Exporterの注意点

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

注意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)

Slide 24

Slide 24 text

Oculus QuestでVR刺身タンポポ 試してみたい?

Slide 25

Slide 25 text

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