A-Frameを使った基本的なデモの作成

主要な企業からVRハードウェアが2016年の前半にリリースされる予定であり，バーチャルリアリティは2016年に規模が巨大になるでしょう．WebVR はすでにその誇大広告の一部ですが，ツールやライブラリはコミュニティ内に出始めたところですので，デモやその他の実験作品をつくることはまだ課題となっています．A-Frame は，ゲーム開発コーディングの原則に従いつつ，WEB開発者へ使いやすさをもたらします．それは，プロトタイプやデモを迅速かつ上手に構築するために，WebGL(WebVRはWebGL上に構築されています)を知る必要のない開発者のための構築済みのブロックです．利用可能なすべてのプラットフォーム用にバーチャルリアリティ体験を作成するためのマークアップです．

A-Frameの現行バージョンは 0.1.0で非常に実験的なことを意味していますが，すでに動作するようになっており，ブラウザですぐに確認することができます．新しい標準仕様ではなくフレームワークであるので，裏で何が起こっているかやブラウザ間の違いについて知る必要はありません．デスクトップ，モバイル(iOS や Android)，Oculus Riftで動作します（GearVRのようなより多くのVRデバイスのサポートも予定されています）．

A-Frame は WebGL上に構築されており，モデル，動画再生，スカイボックス，ジオメトリ，コントロール，アニメーション，カーソルなどの構築済みコンポーネントを持っています．ゲーム開発の世界で知られているエンティティコンポーネントアーキテクチャを採用していますが，A-FrameはWEB開発者を対象としており，HTML構造を提供しているのでJavaScriptでDOM操作が行えます．ゲームを作成するだけでなく，バーチャルリアリティWEB体験も作ることができます．

もしすでに Three.js や PlayCanvas を用いた基本的な3D環境を構築する方法を知っているなら，A-Frameで同じようにトライすることができます．

環境設定

A-Frameを使った開発を始めるのに必要なことは多くありません．次のことから始めてください：

最新のFirefoxやChromeのようなWebGLを十分サポートしているモダンなブラウザを使っているか確認してください - Firefox Nightly あるいはWebVRをサポートしている特別なビルド版のChrome をダウンロードします.
Oculus Riftのような追加のVRデバイスを入手してください．
実験環境を保存するディレクトリを作成します．
ディレクトリに最新のA-Frameエンジンのコピーを保存します．
別タブで A-Frame ドキュメントを開いておきます — ヘルプを参照するのに便利です．

HTML 構造

今回使うHTML構造はこちらです：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MDN Games: A-Frame demo</title>
  <script src="js/aframe.min.js"></script>
</head>
<body>
	<!-- HTML goes here -->
</body>
</html>

ドキュメントcharset や <title> のような基本的な情報を含んでいます．最初の <script> 要素は A-Frameフレームワークをページにインクルードします; <body> 要素の中にサンプルコードを書いていきます．

読み進める前に，このコードをコピーして，作業用のディレクトリに index.htmという名前のテキストファイルに保存してください．

シーン Scene

シーンはすべてが発生する場所です．デモに新しいオブジェクトを作成するとき，画面に表示させるにはすべてをシーンに追加していきます．A-Frameでは，シーンは Scene エンティティによって表現されます．

注記: エンティティは任意の要素です — 直方体や円柱や円錐のようなオブジェクトだけでなくカメラ，ライト，音声ソースになることもできます．

<body> 要素の内側に次の行を追加して見ましょう:

<a-scene>
</a-scene>

以後は，シーンに追加するエンティティはすべて，この <a-scene> タグの内側にHTMLコードを記述していきます．

立方体

立方体をシーンに追加するのはとても簡単で，<a-cube> と呼ばれるカスタムエンティティを作成します．

<a-cube
  color="#0095DD"
  position="0 1 0"
  rotation="10 20 0">
</a-cube>

いくつかの定義されているパラメータが含まれています: 色(color), 位置(position), 回転(rotation)．

注記: 距離の値 (例えば cube y position) は単位がありません，シーンに適切な基本単位とみなしてください — ミリメートル，メートル，フィート，マイル — どれにするかはあなた次第です．

スカイボックス Sky box

スカイボックスは，3D世界の背景です．このデモでは単純な色を使いますが，画像を使うこともできるので，周りを見渡したときの体験の一部に影響するでしょう． <a-cube> の内側の <a-cube> 要素の前に，次のHTMLを追加します．

<a-sky color="#DDDDDD"></a-sky>

動きました！カスタムした背景のシーンに立方体が見えるでしょう！

ここまでで作成したコードはこちらです:

GitHub からチェックアウトもできます．

A-Frame は必要なすべての設定の面倒をみてくれます．デフォルトの光源が設定されているので，立方体が表示されます．コントロールはすでに動作しています: マウスで見回したり，キーボードで移動したりできます．さらに，"VRモードに入る" ボタンも画面右下に表示されていて，バーチャルリアリティ上で実際にシーンを見ることができます．

それらの（デフォルト設定されている）すべての要素を，自分で好きなパラメータを使って定義して作ることもできます．

カメラ Camera

カメラエンティティは <a-camera> をシーンに追加することで作成できます．カメラの位置を明示的に指定することができ，物体が見えるように少しだけシーンの中心から後ろに移動させています． </a-scene> 要素を閉じる直前に追加します:

<a-camera
  position="0 1 4"
  cursor-visible="true"
  cursor-scale="2"
  cursor-color="#0095DD"
  cursor-opacity="0.5">
</a-camera>

カメラにカーソルを定義することもできます（デフォルトでは非表示です）．カーソルを表示させることで，そのスケール，色，だけでなく，オブジェクトが隠れてしまうのを防ぐために不透明度も指定できます．

ライト Lights

A-Frameの基本的なライト種類は，ディレクショナルライトとアンビエントライトです．最初のタイプはシーン上のどこかに設置された指向性ライトで，2つ目のタイプは最初のタイプからライトを反射します．よってより自然になります; これはグローバルにセット可能です．繰り返しになりますが，以前に追加したコードの直後に新しいコードを追加します．

<a-entity
  light="
    type: directional;
    color: #FFF;
    intensity: 0.3"
  position="-1 1 2">
</a-entity>
<a-entity
  light="
    type: ambient;
    color: #fff">
</a-entity>

ここではディレクショナルライトは白色として，光の強さ（intensity）を 0.3 ，座標 -1 1 2 に配置しました．アンビエントライトは色のみ指定でき，これも白にしました．

ジオメトリ Geometry

ここまでで，立方体があるシーンを構築し，さらに独自の空，カメラ，ライトを追加してきましたので，シーンにもっと形状を追加していきましょう． <a-cube> のようなデフォルトエンティティに制限はされておらず，独自の形状を持ったエンティティを作成することができます．トーラスでトライしてみましょう - ここまでのコードに以下の記述を追加します:

<a-entity
  geometry="
    primitive: torus;
    radius: 1;
    radiusTubular: 0.1;
    segmentsTubular: 12;"
  rotation="10 0 0"
  position="0 1 0">
</a-entity>

ここで追加したエンティティは，その形状としてトーラスプリミティブ(torus primitive) を持っています．形状にいくつかの初期値を与えます：トーラスの外側エッジの半径，チューブの半径，チューブの円周周りのセグメント数を個々に与えます．トーラスをX軸周りの回転とY軸を1だけ上げた位置にしました．

材質 Material

トーラスはすでに表示されていますが，その色はランダムです．それを決めるには，エンティティの見た目を決定する material を定義しなければなりません．トーラスの <a-entity> を次のように編集してみましょう：

<a-entity
  geometry="
    primitive: torus;
    radius: 1;
    radiusTubular: 0.1;
    segmentsTubular: 12;"
  material="
    color: #EAEFF2;
    roughness: 0.1;
    metalness: 0.5;"
  rotation="10 0 0"
  position="0 1 0">
</a-entity>

最初に，材質の色を設定し，そして，roughness（表面の粗さ．よりラフネス値の高い材質は，なめらかな材質よりも反射光がいろんな方向に散らばります) ，metalness （その材質がどれくらい金属っぽいか）を指定します．

HTMLから JavaScript へ

ここまでは，すべてのエンティティをHTMLで定義してきましたが，WEB開発者ならJavaScriptもしっているべきです - JavaScriptで作成したエンティティをシーンへ追加することも可能です．3つ目の形状としてシリンダを追加するのにその方法を使ってみましょう． <body>要素の末尾（<a-scene> 要素の直後）に， <script> と </script> タグを追加します．そしたら，<script> タグの内側に次のJavaScriptコードを加えましょう：

var scene = document.querySelector('a-scene');
var cylinder = document.createElement('a-cylinder');
cylinder.setAttribute('color', '#FF9500');
cylinder.setAttribute('height', '2');
cylinder.setAttribute('radius', '0.75');
cylinder.setAttribute('position', '3 1 0');
scene.appendChild(cylinder);

最初にシーンハンドラを取得し，A-Frameエンティティのシリンダ要素を作成します．適切な属性の設定をすべて済ませます： color, height, radius と position．最後に新しく作成したシリンダをシーンへ追加します．それだけで，3つの異なる形状をA-Frameで作成できました！次のように見えているはずです:

数行のHTMLとJavaScriptだけ覚えておけば良さそうですね．

アニメーション Animation

シーン上の形状を動かすために rotation や position をすでに使っています; 拡大縮小することもできます - それらの属性は animation のイリュージョンを作成することで操作できます．

回転 Rotation

アニメーション作成を手助けする，特別な <a-animation> エンティティがあります．それを <a-cube> と </a-cube> タグの間に追加します:

<a-cube
  color="#0095DD"
  rotation="0 0 0"
  position="-3 1 0">
  <a-animation
    attribute="rotation"
    from="20 0 0"
    to="20 360 0"
    dur="4000"
    repeat="indefinite"
    easing="linear">
  </a-animation>
</a-cube>

他のエンティティと同様に，アニメーションのためのキープロパティを定義することができます．ここでは，完全に回転させるために rotation 属性を 20 0 0 から 20 360 0 へとアニメーションさせます．持続時間(duration)を 4 秒，無限にリピートするようにセットしています．アニメーションは線形緩和(linear easing)を使っています．これは内部的に実装されている tween.js によって行われます．

拡大 Scaling

エンティティのアニメーションをトーラスのようなカスタムジオメトリへ追加することもできます：

<a-entity
  geometry="
    primitive: torus;
    radius: 1;
    radiusTubular: 0.1;
    segmentsTubular: 12;"
  material="
    color: #EAEFF2;
    roughness: 0.1;
    metalness: 0.5;"
  rotation="10 0 0"
  position="0 1 0">
  <a-animation
    attribute="scale"
    to="1 0 1"
    easing="ease-out"
    direction="alternate"
    dur="2000"
    repeat="indefinite">
  </a-animation>
</a-entity>

トーラスのアニメーションには scale 属性を使ってみましょう．初期値（デフォルトスケールは 1 1 1 です）から 1 0 1 へと変化させます．これはY軸方向のスケールが 1 から 0 へと変化することになります．緩和は ease-out を使ってみました．方向(direction)を alternate にセットすることでスケールは 0 になった後に 1 へ戻り，2秒の持続時間で無限にリピートするようになっています．

移動 Moving

<a-animation> を使って3つ目の形状の位置(position)を変化させることもできますが，すでにお伝えしている通り，シーンに対する操作はすべてJavaScriptを使うこともできるので，もちろんシリンダを動かすこともできます．次のコードを <script> タグの末尾に追加してください：

var t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);
  cylinder.setAttribute('position', '3 '+(Math.sin(t*2)+1)+' 0');
}
render();

render() 関数を使って，シリンダの位置を毎フレーム更新します - Y軸の値を変更でき，移動にどんな効果がでるか見てみましょう．

すべては適切に描画されて，アニメーションしてます - あなたの初めてのA-Frameシーンを構築することができましたね，おめでとう！ここに，最終バージョンがどんなふうに見えて動作するかを置いておきます:

GitHubからチェックアウトもできます.

最後に

思っていたより簡単だったでしょ？ A-Frame はWEB開発者を対象として，HTMLマークアップを使うことで簡単になっていて，JavaScriptの作法に沿って使うことができます．始めるのは簡単ですが，さらに高度な概念のための強力なAPIも提供しています．すべてを行うフレームワークで，作者がブラウザ間の違いをケアしているので，使う人がそれらを心配する必要はありません．サポートされるVRデバイスの数と同じように，コミュニティも成長しています．WEBの未来を構築して飛び込むには最高のタイミングです．