今年はWebVR元年と言われているようにWebVRがじわじわと盛り上がってきています。WebVRとは、ブラウザ上でVRコンテンツを実現する技術のことです。今回の記事では、その先駆けとなるであろうFirefoxでおなじみのMozillaが開発しているWebVRを開発するためのフレームワーク「A-Frame」を簡単に紹介します。このA-FrameはHTMLのタグのようなものを使ってVRを構築するという画期的なフレームワークとなっています。
はじめに – 2017年はWebVR元年
2017年は「WebVR」元年と言われています。VR（バーチャルリアリティ）は仮想現実のことで、WebVRとは、その仮想現実の体験をWeb上で提供することことを言います。そのWebVRを実現するための技術がWebVR APIとなり、その仕様の策定がWebブラウザー「Firefox」の開発元であるMozillaとW3Cが中心となって現在進められています。今年中にChromeやFirefoxなどのブラウザーに実装されると言われています。
このことが何を意味しているかと言うと、ブラウザー上でVRのコンテンツを体験できるようになります。つまりブラウザーにURLを入力するだけで、いつでも好きな時に好きなVRコンテンツにアクセスできるようになります。また開発者もWebの技術だけで、VRが作れるようになるため、開発者人口が一気に増えることになります。Webの特質でもありますが、作ったVRコンテンツの共有も簡単にできるようになります。
Oculusの2017年の動き
こうした動きを受けてVR業界を先導する米Oculus（オキュラス）は、Web VRに対応した独自のVRブラウザ「Carmel」を開発し、Oculus RiftなどのVR用のゴーグルで動くようにする予定だということです。さらに、コンテンツの開発を容易にするためのVR開発専用フレームワーク「React VR」を同時に開発しているとのことです。この「React VR」はJavaScriptのフレームワーク「React」をベースに作られており（OculusはReactを開発するFacebookの傘下です）、Reactの作法でVRを構築することができるようになっています。
このようにWeb上でVRが動く世界が間近に迫ってきています。
WebVR開発専用フレームワーク「A-Frame」
なお、WebVRのブラウザーへの実装を待たずとも、すでにWebVRの開発は進められています。その代表的な開発ツールのひとつにWebVR APIの仕様策定を進めているMozillaが開発している「A-Frame」というJavaScriptライブラリがあります。
まず以下のサイトを見てみてください。シリアの惨状を伝えるためのサイトで、その手段としてVRが使われています。こちらのサイトはA-Frameで作られています。
A-Frameの一番の特徴は、HTMLのタグを書く感覚でVRコンテンツを作ることができることです。例えばボックスは「ボックスタグ」、背景は「背景タグ」、光は「光タグ」のようなオブジェクトが用意されており、これらを組み合わせてVRコンテンツを作っていきます。タグには属性をつけることで、色や大きさ、質感、回転状態、位置、アニメーションなどの状態を設定していきます。
A-Frameの公式サイトで、さまざまなタイプのVRのサンプルが確認できるようになっています。ひとつひとつ確認してみてください。ソースも確認できるようになっています。ソースを確認すると、実にシンプルな実装になっていることがわかるかと思います。
「A-Frame」の使い方
まだ私自身が勉強中の身なので、今回の記事では実装方法について詳しく書きません。さわりの部分だけ紹介します。
基本的には以下のjsファイルをHTMLファイルに読み込むだけで、あとはA-Frameで用意されているタグを組み合わせるだけです。
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
VRを実装する箇所をbody内に<a-scene>タグで指定します。<a-scene>タグの中がVRの領域となります。
<body>
<a-scene>
</a-scene>
</body>
<a-*>となっているのが、A-Frameで用意されているタグです。先ほどの<a-scene>の中に、立方体を表す<a-box>と背景を表す<a-sky>を入れます。
<body>
<a-scene>
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky color="#ccc"></a-sky>
</a-scene>
</body>
結果は以下のようになります。
実装結果は以下でご確認ください。実際にVR用ゴーグルで見ることもできますし、PCブラウザだとマウスで操作することができます。とても簡単にWebVRが実装できるということがわかるかと思います。
まとめ
冒頭でも述べたように、今年は「WebVR」元年となると言われています。VR界を先導してきたOculusやMozillaが素晴らしい技術を開発してくれています。今回紹介したA-Frameもそのひとつで、VRコンテンツをHTMLのタグを書く感覚で作ることを可能にしてくれています。
今回は詳しい使い方は紹介できませんでしたが、興味のある方はA-Frameで用意されている主要なタグの使い方をひとつひとつ見てみてください。HTMLが書ければ、おそらくそれほど難しいものではないと思います（ただしVRの概念的なものを理解しているのが前提の話となりますが…）。
![Oculus Rift cv1 製品版 2016 オキュラス リフト (Oculus Rift cv1 製品版) [並行輸入品]](http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B01EUAU9OM&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=wanderer-22)
- Oculus Rift cv1 製品版 2016 オキュラス リフト (Oculus Rift cv1 製品版) [並行輸入品]
コメント