Unity WebXR を動かすまで

UnityのWebXR ExportをFirebaseにデプロイするまで

Firefox, Chrome の最新ブラウザで、VR的なコンテンツを表示したい!と思い、
いろいろと調べたので健忘録として

背景

• なぜ、Nativeではないのか？
• インストールをしたくない。アプリストア審査で時間がかかるからバグの修正が大変になる
• Occulus Questとかでも動くかも。

ということですが、VRコンテンツとなると three.js などのスクリプトを駆使するのも大変なので、できるだけコンテンツ制作に近いツールを利用するようにしたいということで、Unityを選択しました。

準備

以下のURLにかかれている内容に沿っていきました。

• https://bibinbaleo.hatenablog.com/entry/2020/12/29/203933

今回、使用した環境は、

• Unity 2020.3.6f1

Package managerからgitでWebXR Export の後継プロジェクトを導入。Window>Package　Manager> + > git url で以下の２つのURLをコピー＆ペースト。

• https://github.com/De-Panther/unity-webxr-export.git?path=/Packages/webxr

• https://github.com/De-Panther/unity-webxr-export.git?path=/Packages/webxr-interactions

  • WebXR Interactions で Sample Scene を import

今回は、このサンプル Sceneを使って話をすすめます。

Unityの設定

テンプレートの導入

• Windows > WebXR > CopyWebGLTemplates

WebXR Export を設定

• Project Setting -> XR Plugin Management > Plug-in Providers > WebXR Export をチェック

HTMLの出力に変更

• HTML5

  • Resolution and Presentation
    • WebXR2020 (Unity2020の場合)を選択

• https://gaprot.jp/2020/10/26/unity2020-webgl-01/
  　により、

　- Decompression fallback を ON にする

を忘れないようにしておかないと、FireBaseでのリリースしたときに起動失敗のエラーが解消した

• ビルド
  • Desertのサンプルを追加してビルド。ビルド先のフォルダ名は public以外にしておく

ローカル https の設定

出力したindex.html などのファイルは、そのままローカルのブラウザにドロップしても動きません。
さらに、セキュリティの関係で httpsサーバーからダウンロードしたコンテンツでないと、
ジャイロが動きません。そのため、ローカルで https のサーバーを立ち上げて、動作確認できるようにします。

• npm をインストール
• http-server のインストール

npm install -g http-server

次に、httpsサーバーにするための認証鍵を生成

• Git for Windows をインストール
• bash を開いて、以下のコマンドを入力してcert.pem を生成

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

• httpsの立ち上げは、Unityから生成した index.html のある場所に cert.pemをおいて以下のコマンドでテスト

http-server -S -C cert.pem

これで、ローカルのネットワークから Androidスマホでアクセスします。右下のVRボタンを押して左右に分かれてレンダリングされればOK.

Firebase の設定

ローカルのテストがうまくいったら、外部のホストでアクセスできるようにホスティングサービスを利用します。
https が提供されて、手軽に試せる Firebase を使います。アカウント登録した前提で、
ホスティングのサービスで外部からのテストを実施。

• 事前に、Web画面でプロジェクトを作っておきます。
• Unityで出力した一つ上のフォルダでコマンドプロンプトで移動しておきます。

Firebase　CLIの基本的な使い方は、以下を参照

• https://firebase.google.com/docs/cli?hl=ja#sign-in-test-cli

コマンドラインツールを使うため npm からインストール

npm install -g firebase-tools

ログインは、アカウント登録画面が Webで表示されます。

firebase login

プロジェクトの確認

firebase projects:list

プロジェクトの初期化

firebase init

ホスティングサービスを設定して、public が生成される。
Unityで出力したファイルを public の下にコピーする

テスト段階では、誰かに勝手に使われて料金が発生するのは大変なので、
ひとまずホスティングの停止する場合は以下のdisableを実行。再開は、またdeployすれば良い。

firebase hosting:disable

動作テストで、作成した firebaseのプロジェクト

• https://XXX.web.app

XXXは、Firebaseのプロジェクト名