VRを活用したいからと、世界中のすべてのWeb開発者が新しい言語やUnity、Unreal Engineのようなゲームエンジンをイチから学ぶ必要はありません。なぜなら、Web上でVRを試せる方法があるからです。なかでも「A-Frame」のフレームワークは、最も簡単に始められる方法でしょう。
A-Frameとは？
A-FrameはカスタムHTMLを使ってWebVRを作成する、オープンソースのフレームワークです。three.jsやWebGLを使ってシーン中にVRに対応した要素を作れます。シンプルなVR体験を盛り込むだけであれば、WebGLなどレベルの低いAPIを学ぶ必要はありません。
A-Frameチームは、開発者同士がより良いAPIやアイデアを構築できるような拡張性のあるWeb上のVRを作ろうとしています。このVRが浸透し、確立すれば、いずれはWebVRのスタンダードになると期待されています。
そうなれば、規格の普及やブラウザーへの対応が終わるのを待たずに、JavaScriptフレームワークと実験的なブラウザーを通して新しい機能を使えます。
デバイスの互換性
重要な疑問は「A-Frameはクロスブラウザー対応しているか？」でしょう。驚くべきことに、 A-Frameは実に多くのプラットフォームで機能し、ブラウザーがWebGLに対応していれば3DシーンをVRなしの2Dとして見られます。
Chrome、Firefox、Edge、そしてOperaではデスクトップ上でインタラクティブな3D体験ができます。Oculus RiftをWebVR対応のブラウザーにつなげれば互換性のあるVRにもなります（詳細は下の「必要なこと」を参照）。
スマートフォンでは、過去2世代までの最新iOSかAndroidに適応します（iPhone6以上、Samsung Galaxy S6以上。私のHTC One M9でもきちんと機能します）。これらのスマホは、大体がGoogle CardboardヘッドセットのVRにも対応しているので、デスクトップのVRよりも簡単で互換性が高いと言えるでしょう。
必要なこと
A-FrameでのVRを体験する条件は以下のようになります。
- VRではないベーシックな体験 — 先ほど紹介したWebGL対応のブラウザー
- デスクトップでのVR体験
- WebVR対応のブラウザー（最新のChromium WebVR build やFirefox Nightlyなど）
- Oculus Riftのヘッドセット（できればHTC Viveも。こちらはまだテストしていませんが！）
- モバイル端末でのVR体験
- 最新のスマートフォンでは少なくとも、シーンをセミVRビューの視点で見られます（ヘッドセットなしで端末を動かすと視点が変わります）
- Google CardboardまたはGear VRヘッドセット
始め方
A-Frameの「Getting Started」にアクセスしましょう。 A-FrameのチームはCodePen、スニペット、npm、ダウンロードまたはCDN化できるJSファイルのフレームワークやHTMLのBoilerplate、練習用にぴったりなローカルの開発用サーバーまで、A-FrameでVR実験するためのさまざまなオプションを提供しています。できるだけシンプルにしたいので、今回はA-Frame boilerplateから直接ダウンロードします。
システム上のどこでも、Webプロジェクトを置きたいところにBoilerplateを構築します。このとき必ずしもローカルWebサーバー上で動作させる必要はありません。BoilerplateはCDN上でA-Frameを使うので、必要なのはindex.htmlです。package.jsonはnpmを使ったローカルWebサーバーをテストします。この後、説明しますが、必ずしもテストする必要はありません。
ローカルサーバーを作動させる
A-FrameのBoilerplateには専用のローカルWebサーバーがあります。A-Frameのシーンをテストするために必須というわけではありません。コンピューター上のファイルシステムを通してWebページを動かす際によく起きるCORS（Cross-Origin Resource Sharing：訳注 原文では“cross-origin policy”）の問題に対処するためにもテストしておくと良いでしょう。
ローカルWebサーバーを起動するには、Terminal/Command Prompt内のBoilerplateプロジェクトのフォルダを開き、以下を実行します。
npm install && npm startこれでWebサーバーに必要なものはすべてインストールできます。以降、サーバーを起動するときはnpm startと入力しましょう。
ローカルWebサーバーを起動すると、Webブラウザーが自動的に立ち上がってBoilerplateのWebページを自動で読み込みます。LiveReloadも同時に起動されるので、変更を加えると自動的に毎回更新します。
もしWebページを違う端末で開きたい場合や、ローカルWebサーバーを作動させたのに自動的にブラウザーが開かない場合は、ブラウザー上でhttp://localhost:3000へ直接アクセスして開けます。または、IPアドレスhttp://192.168.0.1:3000でも開けます。
一番最初に以下の絵が表示されます。
新しいシーンを構築する
<body>タグ内にある、<a-scene>以外のBoilerplateのコードをすべてを削除しましょう。すべてのA-Frame要素は<a-scene>コンポーネント内に設置されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Our First A-Frame Experience</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>A-FrameはVRシーンの中でよく使われる一連のプリミティブ要素をひとまとめにして備えています。カスタムシーンを構築するためにいくつか追加してみましょう。
背景を設定する
どんなシーンにも背景は必要です。イメージはフラットカラー、パノラマ、エクイレクタングラーを選べます。今回のプリミティブは <a-sky>です。
シングルのフラットカラーの背景は以下のコードになります。
<a-scene>
<a-sky color="#C500FF"></a-sky>
</a-scene>これで、自然で明るい紫色の背景ができました。
背景が雄大であればあるほど、360度のパノラマ展開ではかっこよく見えます。良い背景写真はFlickrで見つけられます。さまざまな種類のエクイレクタングラー写真が利用できます。
私はFlickrでLuca Biada氏の写真を見つけました。作者のクレジット表記が必要な写真です（写真を使う際は必ずライセンス条件を確認しましょう！）
写真提供: Luca Biada
以下のコードを使ってこの写真をシーンに設置します。
<a-scene>
<a-sky src="street.jpg"></a-sky>
</a-scene>すると、背景シーンが360度になります。
Boxを追加する
背景シーンができあがったら、要素を入れていきましょう。<a-box>プリミティブで、シーンの中にキューブとボックスを入れられます。以下のコードで、シーン内の道路上にオレンジ色のボックスを追加できます。
<a-box color="#B76705" depth="2" height="2" width="4" position="0 0 -1.25"></a-box>color属性は背景のskyboxと同様に機能し、box要素の色を設定します。その他、形を作るための属性、depth、height、widthもあります。今回は2×2×4のサイズで、道路の上に置くとなんとなく車のように見えるボックスを作ります。シーン内で位置を変えたいときはposition属性で位置の変更ができます。位置を変える属性は3つあって、それぞれx y zです。
先のコードはシーン内で次のように反映されます。
円柱を追加する
道路上にcylinder（円柱）プリミティブ<a-cylinder>を使って電柱を追加してみましょう。
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>colorとposition属性はボックスの設置時と同じように機能しますが、ここで新しい2つの属性があります。円柱の高さと半径を決めるheightとradiusです。下の画像が電柱を入れたシーンです。
以下のコードで簡単に電柱を連ねて設置することができます。
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-10 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="20 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="50 0 -7"></a-cylinder>それを反映したのが下の画像です。
円柱はA-Frameでいろいろな種類が作れるので、 Cylinder docsから好きなものを試してみてはいかがでしょうか？
球体を追加する
3D空間の中に球体（Sphere）を追加してみましょう。以下の<a-sphere>プリミティブで実行できます。
<a-sphere color="#000000" radius="2" position="0 15 20"></a-sphere>コードはかなりシンプルで分かりやすいです。下のように奇妙な真っ黒い球体が空に浮かびます。
Assetsを使ってテクスチャーを追加する
<a-assets>タグを使って、ボックスや円柱、球体などのプリミティブにテクスチャーを加えられます。 A-Frameのアセットマネジメントシステムにアセットを定義する機能を加え、プリミティブの形作りに使えるようになります。シーンにテクスチャーを加えるときにはこの方法がお勧めです。
私は“Carlos Aguilar from Subtle Patterns”のシンプルでかっこいい繰り返しパターンで調整しました。以下のように、シーン内にアセットを追加できます。
<a-assets>
<img id="darktexture" src="blacktexture.png">
</a-assets>idはシーン内でテクスチャーを参照するときやオブジェクトを示すときに使う名前を指します。 src属性はA-Frameにどのイメージが欲しいのかを伝えます。シーン内でオブジェクトに特定のテクスチャを加えたい場合は、オブジェクトのsrc属性内のテクスチャーのID前にハッシュタグを入れることで、テクスチャーを追加できます。
<a-sphere src="#darktexture" radius="2" position="0 15 20"></a-sphere>奇妙で不気味な球体をかっこよく、SFっぽい見た目に仕上げました。
VR上での動作
以上をVRで見るにはPCに接続されているOculus Riftか最新のスマホが必要です。おそらくスマホのほうが手近でしょう。スマホを動かせばすべての角度からシーンを眺められます。
Google Cardboardのヘッドセットを持っているなら、スマホにつないで画面右下のVRアイコンをタップすればVRビューで観られます。
実際に試してみよう！
今回紹介したA-Frameのデモは、こちらから見られます。 — A-Frame Street Demo.
最後に
WebVRでクロスブラウザーに対応したVRを作成するなら、A-Frameは本当にシンプルで使いやすいフレームワークです。A-Frameでできることは他にもたくさんありますが、今後記事で紹介していくのでお楽しみに！
WebVRファンのみなさん、先週、PrimroseとWebVRでVRを構築する方法を紹介しましたので、こちらもぜひチェックしてください！ Primroseとは、生産性管理アプリを対象としている、WebVRのフレームワークです。 Elio Qoshi氏もWebVR 1.0 API Draft Proposalについて記事を書いていますので、WebVRに関わっている人にとっては一読の価値ありです。
