ブラウザで動く
Virtual Realityコンテンツを
WebVR で作る

WebVR API とは

PCに繋がっているVRデバイスの情報や各種センサーから送られてくるデータをJavaScriptで取得できるAPIです。

現在W3Cによって仕様策定中で、対応ブラウザはごく少ないですが、将来ブラウザやディスプレイの枠を超えた(ように感じる)VRコンテンツを楽しむことが一般的になるかもしれません。

対応ブラウザ

  • Firefox(NightlyもしくはDeveloper EditionにプラグインWebVR Enabler Add-onを入れたもの)
  • Chromium(Chrome Experimental ビルド)

現段階では上記のみとなります

実際どういうデータが取れるのか

例えば、Oculus Riftのようなヘッドマウントディスプレイ(HMD)の場合

HMDは、基本的に PositionSensorVRDeviceHMDVRDevice の2つのデバイスから構成されていて、

  • PositionSensorVRDevice は加速度や傾きセンサーのパラメータ
  • HMDVRDevice は視界を表す角度情報

を取得できます。

いわゆるVRコンテンツは、これらのデータを駆使してCanvasかなにかでゴリゴリ描画することになるのです。

わざわざブラウザで作る意味

処理能力でネイティブアプリに劣るのにわざわざWebブラウザで実装することには、インストール不要でお試しプレイが可能という部分で、一定の需要があると考えています。

例えば

  • ゲームソフトのPVをVRで体験
  • 家具のECサイトで部屋のレイアウトをシミュレーション
  • ビデオ会議でゲストユーザー用のWeb版

「わざわざアプリストアからインストールするの面倒くさいなあ」とユーザーに思われてしまうと、どんなに優れたアプリを作っても元も子もありません。

ウェブ上で気軽にお試しプレイができれば新規ユーザーの流入を増やすことができるのではないでしょうか。

果たしてユーザーはお試し体験をするためにHMDを装着するのか

もちろんHMDを装着してもらえればより良い体験をしてもらえるのですが、なにもHMDだけがVRデバイスではありません。

高精細ディスプレイと各種センサーが搭載されているお手元のスマートフォンもVRデバイスとしての機能を十分に満たしています。(スマホの場合は WebVR API は使わず、既存のやり方で加速度等を取得します)

お試しプレイをしてもらうためには、HMDでもスマホでも、デバイスに依存せずに同じコンテンツを提供できることが大切になります。

A-FRAME

VRコンテンツを作る上で、HMDやスマホなどのデバイス依存を解決してくれるとても便利なライブラリです。

Mozilla製で Three.js をベースに作られています。

なんとこのライブラリ、JavaScript を1行も書かずにVRコンテンツが作れてしまう優れものです!

とりあえず描画してみる

jQuery等と同じように<head>でライブラリを読み込みます。

html
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

<body>にこのようなのカスタム要素を書きます。

html
<a-scene>
	<a-box color="#6173F4" width="1" height="1" depth="1"></a-box>
</a-scene>

たったこれだけでグリグリ動かせるVRコンテンツが完成。

PCであればマウスでドラッグ、もしくはWASDキーで。スマホであれば加速度センサーで。
スマホの場合は右下のVRボタンを押せばCanvasが左右の視野に分かれてVRモードになります。

※widthやheightの単位はメートルです。

AFRAMEでできること

位置・回転・拡縮

html
<a-scene>
	<a-box color="#6173F4" width="1" height="1" depth="1"
		   position="-6 2 -5" rotation="0 0 45" scale="2 0.5 3"></a-box>
</a-scene>

テクスチャを貼る

html
<a-scene>
	<a-box color="#6173F4" width="1" height="1" depth="1"
		   position="0 2 -5" rotation="45 0 45" scale="4 0.5 6"
		   src="assets/chocolate.png"></a-box>
</a-scene>

もしくは

html
<a-scene>
	<a-assets>
		<img id="chocolate" src="assets/chocolate.png">
	</a-assets>

	<a-box color="#6173F4" width="1" height="1" depth="1"
		   position="0 2 -5" rotation="45 0 45" scale="4 0.5 6"
		   src="#chocolate"></a-box>
</a-scene>

<a-assets>を使ってリソースを定義すると、レンダリングの前にロードするのでプリロードのような使い方ができます。

アニメーション

html
<a-scene>
	<a-assets>
		<img id="chocolate" src="assets/chocolate.png">
	</a-assets>

	<a-box color="#6173F4" width="1" height="1" depth="1"
		   position="0 2 -5" rotation="45 0 45" scale="4 0.5 6"
		   src="#chocolate">
		<a-animation attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
	</a-box>
</a-scene>

インタラクション

VRはマウス操作もできなければタッチデバイスでもありません。
その代わりにポインティング操作として注視点を使います。

html
<a-scene>
	<a-assets>
		<img id="chocolate" src="assets/chocolate.png">
	</a-assets>

	<a-box color="#6173F4" width="1" height="1" depth="1"
		   position="0 2 -5" rotation="45 0 45" scale="4 0.5 6"
		   src="#chocolate">
		<a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
	</a-box>

	<a-camera position="0 1.8 5">
		<a-cursor color="#2E3A87">
	</a-camera>
</a-scene>

この例では、チョコレートに注視点が重なっているときに画面内のどこかをクリックするとアニメーションが始まります。

まとめ

非常に簡単な印象を受けるライブラリですが、スマートフォンやHMDでVRモードにして見ると、左右の視差まで自動で計算して描画してくれるので、しっかり立体に見えます。

また、アニメーションやイベントはJavaScriptから複雑な処理を挟むこともできますので、作り込むことも可能です。

ブラウザでできるから、となんでもブラウザで実装するのは良くないですが、「ブラウザでVR」が重要になる場面が今後訪れることもあるかもしれません。
そのときはAFRAMEを使ってみてはいかがでしょうか。