Help us understand the problem. What is going on with this article?

Oculus Quest “だけで” VR開発

見よ、このバーチャルの世界で完結するスマートな VR 開発環境

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だけで開発を完結させたい。

方法はないかといろいろ試してみた結果、下記のツール・ライブラリに行きつきました。

手順

細かく説明するよりググってもらったほうが早いと思うので、ざっくり手順と補足です。

  1. Glitch 登録
  2. Oculus Quest と Bluetooth キーボードを用意し、ペアリング
  3. Oculus Quest に Firefox Reality をインストール
  4. Firefox Reality をデスクトップモードにして A-Frame 公式の好きなサンプルを開く
  5. Glitch で Remix To Edit でプロジェクトをクローン

補足

Glitch 登録

Glitch は Web 向けのお手軽なクラウド開発環境です。
裏で node.js が動いており、自動保存やライブロードもしてくれます。
登録なしでも使用できますが、ログインせずに作ったプロジェクトは5日で消えるそうなので登録しましょう。

Oculus Quest と Bluetooth キーボードを用意し、ペアリング

Oculus Quest のホーム画面右下の設定から接続。
Bluetooth キーボードからの日本語入力はまだサポートされていません。
できれば英字配列のキーボードを用意してください。
(筆者は HHKB 使ってます)

Oculus Quest に Firefox Reality をインストール

Quest のストアからインストール。
Firefox Reality は Oculus Quest 標準ブラウザと比べて以下が強いです。

  • マルチウインドウ(最大3つ)
  • キーボード入力(標準ブラウザはソフトキーボードが邪魔)

Firefox Reality でデスクトップモードにして A-Frame 公式の好きなサンプルを開く

A-Frame は Web ページ用の VR/AR ライブラリです。
HTML タグを数行書くだけで VR の実装ができます。
公式ページは PC ならサンプルの右上に Glitch のプロジェクトへのリンクがあり、
参考にしたいプロジェクトを手軽にクローンできます。

Firefox Reality は標準ではモバイル表示のため、 Glitch へのリンクが表示されません。
右下設定でデスクトップモードにしましょう。
サンプル表示時に警告が出るようになりますが、無視でかまいません。
image.png

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 が見限らないように、みんなでコミュニティを盛り上げていきたいところです。

A-FrameとOculus Questでオブジェクトを掴んだりテレポーテーションしたり
A-Frame の基礎が丸々収まってる素晴らしい記事です。是非参考に。

gaegae
Unity ゲームプログラマです。 Oculus Quest で ゲーム作る方法を模索中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした