VR Watch
WebブラウザーでVR。「WebVR」でVRコンテンツを作成
「VRコンテンツ開発ガイド 2017」試し読み/その5
2017年6月6日 14:51
株式会社エムディエヌコーポレーションから発売中の書籍「VRコンテンツ開発
ガイド 2017」。その中身を少しだけ紹介していきます。
B5判 / 224P
ISBN978-4-8443-6666-9 / 価格（本体2,600円＋税）
2017年05月16日発売
今回は比留間和也氏によるChapter 5「WebVRコンテンツの開発手法」の内容を紹介します。
比留間 和也
VRエンジニア/Unityエンジニア。Webエンジニア、iOSエンジニアを経験したのち、趣味のVRコンテンツ開発が高じてVR開発をメインとした活動を開始。現在はOculus Rift、HTC Vive向けVRコンテンツ開発を主業務としている。VRコンテンツはゲームを主体とし、ニコニコ生放送などで利用される「複数参加型」のものを開発中。
Twitter:http://twitter.com/edo_m18
技術全般ブログ:http://qiita.com/edo_m18
Unityブログ:http://edom18.hateblo.jp/
WebVRとは
ネイティブアプリとしてのVRとは別に、WebにもVRを利用しようとする流れがあります。
それが本節で取り扱うWebVRです。ここではWebVRについての現況と概要について簡単に説明します。
WebVRの現況
現在、WebVR APIについてはまだ仕様策定中であり、パソコン版ブラウザにおいては正式に対応が発表されたものはありません。しかし、2017年3月時点ではAndroid版ChromeのWebVR正式対応が発表されたりと、確実にWebVRの準備が整いつつあることがうかがえます。
ネイティブのVRアプリと比べると、いろいろと制約が付いて回るWebVRですが、逆にネイティブアプリよりも勝っている部分があることも事実です（例えば、WebVRコンテンツ同士をハイパーリンクでつなぐ仕様なども策定中です）。
本誌は主にネイティブアプリの話が大半を占めていますが、ここではWebVRに焦点を当て、ネイティブアプリと比べてどう違うのか、どういった点がメリットなのかなどについて解説していきたいと思います。
A-FrameでつくられたWebVRのサンプル。
WebVRはAPIの仕様
WebVRとは、W3Cで策定が進んでいる、ヘッドマウントディスプレイ（以下、HMD）とポジショントラッキングを行うセンサーなどの、デバイスを扱うためのAPIの名称です。もう少し具体的にいうと、HMDの位置や姿勢、目の瞳孔間距離などHMDの状態・情報を取得するために利用されるものです。
VRならではの立体視可能な映像はWebVRのAPIの範疇外となり、WebGLを用いてレンダリングを行います。（最新のAPIでは、左右の目の状態に応じたプロジェクション行列の生成なども行ってくれるようになっています）。つまり、ざっくりといえばデバイスアクセスを行うためのAPIといえます 。
WebVRのAPIはW3Cが策定を進めている。現状はGitHubのWebサイト上にドラフト（草案）が公開されている。
APIの仕様は0.9と1.0で大きく違う
執筆時点の最新のバージョンはWebVR API 1.1です。最初のバージョンであるWebVR API 0.9とはAPIの仕様が大きく異なっているため、開発を行う際は注意が必要です。
そもそも執筆時点でも草案の段階を出ていないため、しばらくしたらまったく異なったAPIの形になっている可能性もあります。もしなにか開発を行おうとしてWeb上の記事を参考にする場合は、その記事がどのバージョンのAPIについて書いているのかを前もって確認したほうがよいでしょう。
とはいえ、APIの仕様自体はデバイスアクセスのために必要なものを提供してくれているのみなので、本質的にはデバイスへのアクセスと、デバイスからの値を受け取ってWebGLでレンダリングする、というものに過ぎません。基本を押さえてしまえばそれほど難しいAPIではないでしょう。
コントローラの制御はGamepad API
最近のVRでは、HTC Vive（以下、Vive）に代表される、VR空間内を自由に操作できるコントローラがあるのが標準です。
Vive登場以前ではHMDだけで、視点のみがVR内に入るため、VR空間内にあるものを操作したい場合は視点による操作か、あるいは標準的なコントローラ（ゲームパッドやキーボード、マウスなど）による操作しかありませんでした。
しかし、Viveの登場によりVR空間内を直接操作できるコントローラが主流となり、執筆時点ではOculus Riftも専用のデバイスである、「Oculus Touch」を用いてVR空間内を自由に操作することができるようになっています 。
指のつかみやボタンで、VR空間内に実際に手が入り込んだかのように操作することができる。
実はこのコントローラの操作に関してはWebVRのAPIでは扱っていません。ではどのAPIかというと、Gamepad APIがそれを担当してくれています 。
VR-HMDを接続し、コントローラを起動すると、Gamepad APIがそのコントローラを認識し、現在の位置や姿勢などの値を教えてくれます。これを適切に扱うことで、WebVRについてもコントローラを用いたコンテンツの制作が可能となります。
Mozilla（Firefoxの開発ベンダー）は積極的にWebVRの開発に力を入れている。
WebVRの開発環境
本節では、執筆時点でのWebVRの開発環境について解説します。 主に、WebVRに対応したブラウザの紹介と、利用できるWebVR向けのフレームワークについて紹介します。どのフレームワークも個性があるので、自分に合うものを選ぶのも大事な選択肢でしょう。
WebVRに対応したブラウザ
執筆時点ではWebVR APIに正式に対応したブラウザはまだありません。ともに実験的な機能となりますが、WebVR APIに対応したブラウザは以下の3点になります 。
- Firefox Nightly
- Experimental Chromium Builds(※)
- Samsung Internet for Gear VR
これ以外のブラウザでは現状、WebVR APIが動作するブラウザはありません。また、本章の冒頭でも書いたように、APIのバージョン違いの問題もあるため、実際に開発を行う場合は常に最新版のフレームワークにアップデートするなどの対応がしばらくは必要でしょう。
(※編注): 上記の対応状況は書籍執筆時点のものです。最新のブラウザ対応状況は下記に手確認できます。
WebVR Rocks
WebVRを有効化する
前述の通り、現在APIに対応しているブラウザもまだ実験段階の実装のため、WebVRを利用するにはいくつかのフラグの有効化と、Add-onなどのインストールが必要となります。
その手順について解説します（しかし、アップデートが早く、場合によってはここで紹介する方法がすでに古くなっている可能性もあるため、動作しない場合は左で紹介したWebサイトを見るなどして最新の手順に従ってください）。
また、Oculus Riftで閲覧する場合と、HTC Viveで閲覧する場合にセットアップ方法が異なるので注意が必要です（Oculus RiftはOculus Rift runtime、HTC ViveはOpenVRのDLLが必要です）。
Firefox Nightly／Chromium（Oculus Rift向け）
- Firefox Nightly／Chromiumのダウンロードサイトより最新版をダウンロードします。
- Oculusのサイト（https://www3.oculus.com/en-us/setup/）より、最新のruntimeをダウンロードします。
- runtimeのインストールおよび適切にOculus Riftをセットアップします（すでにセットアップが済んでいる方は手順❷、❸の操作は不要です）。
- ［Settings］→［General］→［Unknown Sources］をオンにし、プラットフォーム外で配信されているコンテンツが閲覧できるように設定します(下の画像) 。
- Firefox Nightly／Chromium を再起動後、WebVRコンテンツを配信しているWebサイトよりVRコンテンツを閲覧することができるようになります。
Firefox Nightly（HTC Vive向け）
- Firefox Nightlyのダウンロードサイトより最新版をダウンロードします。
- OpenVRのGitHubリポジトリから、「openvr_api.dll」をダウンロードします。
- ダウンロードしたDLLファイルを、Firefox Nightlyから読み込める場所に保存します（例 c:¥openvr¥）。
- Firefox Nightlyのアドレスバーに「about:config」と入力し、「dom.vr.openvr.enabled」を「true」に変更します 。(図A)
- 次に「gfx.vr.openvr-runtime」の値に、手順❸で保存したDLLファイルのファイルパスを指定します（例 c:¥openvr¥openvr_api.dll）。 (図B)
- Firefox Nightlyを再起動後、WebVRコンテンツを配信しているWebサイトよりVRコンテンツを閲覧することができるようになります。
Chromium（HTC Vive向け）
- Chromiumのダウンロードサイトより最新版をダウンロードします。
- URLバーに「chrome://flags/#enable-webvr」と入力し、「WebVR」フラグを有効にします 。(図C)
- 続けてURLバーに「chrome://flags/#enable-gamepad-extensions」と入力し、「Gamepad Extensions」フラグを有効にします 。(図D)
- その後、SteamVRアプリケーションを起動します。
- 起動後、WebVRコンテンツを配信しているWebサイトよりVRコンテンツを閲覧することができるようになります。
閲覧する際の注意点
何度か書いているように、APIは草案段階のため、内容が大きく変わることがありえます。筆者が確認している時点でも、WebVRコンテンツとして公開されているものの、最新のブラウザではすでに動作しなくなっているものもいくつか見受けられました。そのため、セットアップが正常に終わっていても閲覧できないコンテンツがあることには注意が必要です 。
WebVRのサポート状況の一覧サイトを参考にして対応具合を確認できる。
この先の内容は？
このあとは、WebVRのフレームワークを用いて実際にWebVRコンテンツの作
成を行っていくようになっています。また、デバッグの手法や、フレームワークを用いずに開発する場合の基本なども解説しています。
