Oculus Questを購入したので、Quest向けのWebVRアプリを作ってみました。
- A-Frame WebVR Maze
https://vr.jyuko49.com/maze/index.html
本記事では、WebVRアプリを作成して公開するまでの流れを雑にまとめています。上記アプリの具体的な実装方法については詳しく述べません。要望があれば別記事で書くかも。
Oculus Quest向けWebVRアプリ
Oculus Quest向けにVRアプリを提供する方法としては、UnityやUnreal Engineで開発して、Oculus Storeに登録する形が一般的です。
最初はUnityアプリから始めようかなと思ったのですが、自由に公開できるWebVRを先に試すことにしました。
Webで公開できる
Oculus Storeの審査は厳しく、また、SteamやPSVRで実績のあるタイトルでないと通らないという話もあります。
Submitting Your App to the Oculus Quest Store | Oculus
一方、WebVRならアプリをAWS等にアップすればよいため、個人開発者が一般のユーザ向けに審査なしでアプリ公開することが可能です。導線の確保やマネタイズをどうするのかは課題ですが、とにかく体験してもらうことを優先するケースでは有効な手段になります。
Webで開発できる
WebAR/VRの記事では何度か述べてますが、"Webで書ける"、"豊富なサンプル・ライブラリがある"という点で、比較的学習がしやすい環境だと思っています。
A-FrameならHTML感覚のマークアップでVRアプリが作れますし、three.jsを使ってJavaScriptをゴリゴリ書けば、アニメーションや物理演算など様々な実装が可能です。
A-Frameで実装する
Quest対応の導入としては、tks_yoshinagaさんの資料が非常によくまとまっており、大変参考になりました。
www.slideshare.net
各コンポーネントの詳細は、A-Frame公式のドキュメントが頼りです。
また、A-Frameを使った簡単なアプリは過去に自分でも作成しているので、そちらも一部を流用しました。当時はモバイル（ハコスコやDayDream向け）に作っているので、ソースコードはQuest対応の手直しが必要です。
ようこそジャパリVRへ！ - Qiita
A-FrameでVR迷路を移動する - Qiita
A-FrameでPhysicsを扱う - じゅころぐAR
A-Frameでnav meshを使う - じゅころぐAR
Oculus Questで確認する
Hello World!
動作確認を行うために、index.htmlに以下のコードを書きます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World! - A-Frame</title>
<meta name="description" content="Hello, World! - A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
このコードを実機（Quest）で動かします。
ローカルサーバ
開発中に作業PC（テスト環境はMac）とOculus Questが同じWiFiにつながっていれば、ローカル接続で確認できます。
http-serverなどを使えば簡単です。
作業用PCにhttp-serverをインストールして、index.htmlを配置したディレクトリでhttp-serverコマンドを実行します。
npmが使えない！という方は、Node.jsとnpmを先にインストールしてください。
$ npm install -g http-server $ http-server
今回はhttp://192.168.0.7:8080でローカルサーバが立ち上がったので、Oculus ブラウザにアドレスを入力します。
右下のゴーグルのアイコンをクリックするとVRモードになります。
index.htmlだけならhttp-serverのコマンドを叩けばよいですが、HTMLやJSのサイズが大きくなってくるとwebpackを導入したくなってくるので、そうなったらwebpack-dev-serverやbrowser-syncもあります。
公開する
静的Webサイトホスティング
AWSを使って公開し、インターネット経由で実機確認する方法です。
手順は過去記事にまとめてあるので割愛します。
URLがわからなければ容易にアクセスできないとはいえ、インターネット上に公開する形になりますので、アップロードするコンテンツやライブラリのライセンスには注意が必要です。
詳しくは書きませんが、上記の構成にしておけば、Lamda@Edgeを使ってBasic認証や接続元IPアドレスによる制限をかけることは可能です。一部のみに公開したい場合はご検討ください。
VR迷路アプリの試験公開
静的Webサイトホスティングで構築したVRアプリを試験的に公開しています。
Oculusブラウザで、アドレスバーに"vr.jyuko49.com/maze/index.html"と入力してもらえれば体験できます。
ページの内容は予告なく変更または停止する可能性があります。と書くと、ややネガティブに聞こえますが、配信する側にとってはコンテンツのアップデートがしやすいというのもWebVRの利点ですね。
公開しているVRアプリは、A-FrameでVR迷路を移動するをQuest用に移植したものです。
青：EASY、黄：HARD、赤：VERY HARD
— jyuko (@jyuko49) 2019年7月7日
赤はヤバいです。
前進はスティック（カメラ前方にしか行けません）
リタイアとリトライはまだ実装してないので、メニューボタンで戻る。
迷路の自動生成アルゴリズムを採用しており、壁の配置パターンは毎回変わります。サイズも可変にしており、難易度が三種類あります（自分で選べないけどね）
難易度の違い pic.twitter.com/Q3dkoMjuV8
— jyuko (@jyuko49) 2019年7月7日
一応、タイムも計測しているので、最速クリアを目指す遊び方もできます。
実装としては、THREE.Clockを.start()、.stop()する感じです。
まとめ
開発するアプリの内容によってはUnityの方が作りやすいと思いますが、WebVRは簡単に公開できる点がいいですね。
今後に目を向けると、"VR内広告プラットフォーム"と"VRアプリ（Webページ）間のシームレスな遷移"が欲しいところです。
