見よ、このバーチャルの世界で完結するスマートな VR 開発環境
※ A-Frame のサンプルに Oculus Touch コントローラの表示を追加する作業風景です。
TL;DR
ブラウザに Firefox Reality、開発環境に Glitch、VRのフレームワークに A-Frame を使えば、
Oculus Quest 上で手軽に VR の開発ができます。
前置き
Oculus Quest が発売されて VR とても身近になりましたね。
ですが VR ゲームをプレイするのではなく、自分で作りたいとなった場合、
Quest は気軽にアプリを公開できるプラットフォームではないので、創作のハードルはまだまだ高いです。
WebVR なら アプリではなく Web ページなので、気軽に公開できます。
Unity + WebVR Asset で開発できますが、やってみて下記が煩わしい💦
- 長い WebGL ビルド
- 修正のたびにゴーグルの着脱
そこで思いました。PC無しで、Oculus Questだけで開発を完結させたい。
方法はないかといろいろ試してみた結果、下記のツール・ライブラリに行きつきました。
手順
細かく説明するよりググってもらったほうが早いと思うので、ざっくり手順と補足です。
- Glitch 登録
- Oculus Quest と Bluetooth キーボードを用意し、ペアリング
- Oculus Quest に Firefox Reality をインストール
- Firefox Reality をデスクトップモードにして A-Frame 公式の好きなサンプルを開く
- Glitch で Remix To Edit でプロジェクトをクローン
補足
Glitch 登録
Glitch は Web 向けのお手軽なクラウド開発環境です。
裏で node.js が動いており、自動保存やライブロードもしてくれます。
登録なしでも使用できますが、ログインせずに作ったプロジェクトは5日で消えるそうなので登録しましょう。
Oculus Quest と Bluetooth キーボードを用意し、ペアリング
Oculus Quest のホーム画面右下の設定から接続。
Oculus Quest に Firefox Reality をインストール
Quest のストアからインストール。
Firefox Reality は Oculus Quest 標準ブラウザと比べて以下が強いです。
- マルチウインドウ（最大３つ）
- キーボード入力（標準ブラウザはソフトキーボードが邪魔）
Firefox Reality でデスクトップモードにして A-Frame 公式の好きなサンプルを開く
A-Frame は Web ページ用の VR/AR ライブラリです。
HTML タグを数行書くだけで VR の実装ができます。
公式ページは PC ならサンプルの右上に Glitch のプロジェクトへのリンクがあり、
参考にしたいプロジェクトを手軽にクローンできます。
Firefox Reality は標準ではモバイル表示のため、 Glitch へのリンクが表示されません。
右下設定でデスクトップモードにしましょう。
サンプル表示時に警告が出るようになりますが、無視でかまいません。
Glitch で Remix To Edit でプロジェクトをクローン
Glitch のプロジェクトページを開いたら「View Source」ボタンを押すとソースが見れます。
さらに右上の「Remix To Edit」を押すとプロジェクトがクローンされて、編集できるようになります。
これでコーディングの準備は完了です。ソースをいじって VR 開発を楽しみましょう。
バグ・不便な点など
キーボードが効かない
ファイル名をいったん押しましょう💦
Firefox Reality はページ内の入力フォームが押されてソフトキーボードが表示されないと、Bluetooth キーボードで入力ができません。
Glitch のソース欄は一回押しただけでは、カーソルが出るだけでソフトキーボードが出てきません。
現状、ファイル名を押すとソフトキーボードが出て入力できるようになります。💦
押した文字が変なところに出てくる。
ソース欄でアルファベットや数字のキーを2つ以上同時に押してしまうと
文字が少しずれた個所に入力されるようです。
注意して押しましょう💦
Unity + WebVR と比べて
ざっくり比較です。小規模向けにはよいが、大規模開発なら Unity という当たり前な結論です。
Firefox Reality + Glitch + A-Frame のメリット
- ビルド不要、単なる HTML/Javascript なので
- 公開の手間なし、Glitch が自動で Web スペース作ってくれる
- VR ゴーグル外さなくても一通りの作業ができる。
- HTML タグだけで VR のカメラやコントローラ、オブジェクトの物理演算まで設定できる。
Firefox Reality + Glitch + A-Frame のデメリット
- HTML/Javascript なのでコードの補完がほとんどない
- アセットが Oculus Quest だけではアップロードできない
※ node.js を駆使すればできるかもしれないが未調査 - Visual Inspector が Firefox Reality からでは操作しづらい
Unity + WebVR のメリット
- C# なのでコードの補完が使える
- Inspector で GUI で便利操作
- 便利なアセット盛りだくさん
Unity + WebVR のデメリット
- ビルドが長い
- 成果物を Web スペースにアップロードが必要
- 修正のたびに VR ゴーグルつけなおし
まとめ
まだまだ不便な個所がたくさんありますが、良い開発環境になる可能性を感じてます。
Firefox Reality も A-Frame も Mozilla 製です。
Mozilla が見限らないように、みんなでコミュニティを盛り上げていきたいところです。
