UnityのWebXR ExportをFirebaseにデプロイするまで
Firefox, Chrome の最新ブラウザで、VR的なコンテンツを表示したい!と思い、
いろいろと調べたので健忘録として
背景
- なぜ、Nativeではないのか？
- インストールをしたくない。アプリストア審査で時間がかかるからバグの修正が大変になる
- Occulus Questとかでも動くかも。
ということですが、VRコンテンツとなると three.js などのスクリプトを駆使するのも大変なので、できるだけコンテンツ制作に近いツールを利用するようにしたいということで、Unityを選択しました。
準備
以下のURLにかかれている内容に沿っていきました。
今回、使用した環境は、
- 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の場合)を選択
- 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の基本的な使い方は、以下を参照
コマンドラインツールを使うため npm からインストール
npm install -g firebase-tools
ログインは、アカウント登録画面が Webで表示されます。
firebase login
プロジェクトの確認
firebase projects:list
プロジェクトの初期化
firebase init
ホスティングサービスを設定して、public が生成される。
Unityで出力したファイルを public の下にコピーする
テスト段階では、誰かに勝手に使われて料金が発生するのは大変なので、
ひとまずホスティングの停止する場合は以下のdisableを実行。再開は、またdeployすれば良い。
firebase hosting:disable
動作テストで、作成した firebaseのプロジェクト
XXXは、Firebaseのプロジェクト名