読者です 読者をやめる 読者になる 読者になる

音楽的でテクノロジー的なブログ

音楽とテクノロジーを愛する、エンジニア1年生なブログ。

A-Frameを使ったVRコンテンツ開発入門

aframe_sample000

前回のブログに書きました通り、A-Frameでの開発について書いていきます。

動作環境

項目 内容
OS macOS Sierra 10.12.3
A-Frame 0.2.0
Chrome 55.0.2883.95 (64-bit)

A-Frameについて

本題の前にA-Frameについておさらいしておきましょう。
A-Frameは、WebブラウザFirefoxで有名な「Mozilla」のMozVR開発チームが開発したWebVR用のオープンソースフレームワーク
Three.jsをベースに開発されたとのこと。

特徴をまとめると

  • HTMLライクなマークアップ言語
  • HTMLの知識があればVRコンテンツの開発が可能
  • WebGLの知識無しで3DCGを扱える
  • 開発にあたって必要な物は「.html」のファイルのみ
  • つまり、初期投資や開発環境の構築は必要なし

ブラウザで3DCGを扱うとなるとWebGLが一般的ですが、「WebGLでは難しい!」という人向けに作られたのがThree.jsで、そのThree.jsをさらに扱いやすくしたものがA-Frameなのでしょう。

※ そしてそのA-Frameをより簡単に、グラフィカルにしたものとして「A-Frame Editor」というものも開発中とのこと。

いくつか特徴はありますが、HTMLで開発を行うので、作成したものをサーバーにさえ置いておけばブラウザでURLを叩くだけでVRコンテンツにアクセスできるため、開発・アクセス共にブラウザだけで完結するというのが一番の特徴でしょう。
サーバーやファイルの扱いが難しいのであればjsdo.itCodePenなどのブラウザ上でコーディングやプレビュー可能なサービスを使えばOK

A-Frameで作るVRコンテンツ

前置きが長くなりましたが本題です。
今回作成したVRコンテンツはコチラ
非常にシンプルなものではありますが、上記のリンクをスマートフォンiPhoneのみ動作確認済み)からアクセスし、横向きでブラウジングすることでスマートフォンジャイロセンサーと連動したVRコンテンツを楽しむことができるので、スマホ × VRの雰囲気はつかめるかと思います。
ハコスコなどのVRゴーグルを持っている方は、スマートフォンでアクセスした後に画面右下のゴーグルマークをタップすることで3Dモードでの視聴が可能です。
PCのブラウザ(Firefox推奨)でもVR空間をグリグリと動かすことができるのでぜひ試してみてください。
今回作成したサンプルは、正面には球体と箱のオブジェクト、後ろ側には巨大な球体のオブジェクトを設置しています。 aframe_sample004
A-Frameを使ったWebVRのサンプル


ソースコード

上記のWebVRコンテンツは以下のHTMLファイルで動作しています。

<html>
<head>
  <title>A-Frame</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-box position="7 0 -3" color="skyblue" width="2" height="2" depth="2"></a-box>
    <a-box position="-7 0 -3" color="skyblue" width="2" height="2" depth="2"></a-box>
    <a-sphere position="0 3 -3" color="#EF2D5E"></a-sphere>
    <a-sphere position="0 2 6" color="gray" radius="1"></a-sphere>
    <a-plane position="0 -1 1" rotation="-90 0 0" width="30" height="30" color="silver"></a-plane>
  </a-scene>
</body>
</html>

たったこれだけのコードでVRコンテンツが作れてしまうのがA-Frameの凄いところ。
では簡単にソースコードを解説していきます。

A-Frameの読み込み
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

まず初めに必要なのが「aframe.min.js」の読み込み。
<script>のタグで読み込むだけではあるのですが、注意すべきなのは読み込むべきバージョン。
2016年7月24日現在では「ver 0.2.0」が最新版のため、本記事では最新版を読み込んではいますが、ver 0.1.×系で存在した記述が0.2.0ではなくなっていたり、その他細かな仕様が変更されているので「ver 0.1.× 系で作成されたコンテンツはver 0.2.0では動作しない」と思っておいたほうがいいでしょう。
それなのにA-Frame公式には「ver 0.2.×」のマニュアルページに「ver 0.1.×」の記述が残っていたりで混乱してしまったり…

A-FRAME HTMLでのコーディング
<a-scene>
    <!-- ここにA-Frame HTMLを記述 -->
</a-scene>

<a-scene>のタグがVR空間を表しています。
このタグで囲まれた部分にA-Frame HTMLを書いていくことで、VR空間にオブジェクトを置いたり様々なアクションを設定することができます。

オブジェクトの設置
<a-box position="7 0 -3" color="skyblue" width="2" height="2" depth="2" ></a-box>
<a-box position="-7 0 -3" color="skyblue" width="2" height="2" depth="2"></a-box>
<a-sphere position="0 3 -3" color="#EF2D5E" ></a-sphere>
<a-sphere position="0 2 6" color="gray" radius="1" ></a-sphere>

作成したVRコンテンツには球体と箱型のオブジェクトが配置されていますが、これらを呼び出しているのが上記のコード。
<a-box>タグでは箱型のオブジェクトを指定し、属性としては見ての通りですが、colorでオブジェクトの色を指定し、width height depthで箱の大きさ(幅, 高さ, 奥行)を指定しています。
もちろんcolorは16進数のカラーコードでも制御ができます。
また、<a-sphere>では球体を取得し、radiosで大きさ(半径)を指定しています。
positionタグでは3D空間上のどこにオブジェクトを配置するのかを制御しています。
例えば正面のピンクの球体の場合、
position="0 3 -3"
を指定することで、X軸方向に0、Y軸方向に3、Z軸方向に-3の位置にオブジェクトを配置することができます。
座標軸はこのようなイメージ。 座標軸

床のオブジェクトの設置
<a-plane position="0 -1 1" rotation="-90 0 0" width="30" height="30" color="silver"></a-plane>

<a-plane>では平面を取得することができ、今回作成したサンプルでは床として平面のオブジェクトを配置しています。
widthheightで平面の大きさを指定し、床にするためrotationで平面を-90°倒しています。

今回使用したA-Frameのタグはこれだけですが、他にも様々なタグが用意されているので、興味のある方は公式のマニュアルを参考にしてみてください。

Overview – A-Frame

最後に

見ての通りいとも簡単にVRコンテンツを作ることができるA-Frame。
ブラウザ上で動くのでコンテンツの公開も非常に手軽なのがいいところ。
複雑なものを作る場合はJavaScriptでのコーディングも必要にはなりますが、VRコンテンツ開発の入り口として「A-Frame」を活用するのは今のところベストプラクティスなのではないでしょうか。
余談ですが、今月(2016年9月号)の日経PC21にVRゴーグルが付録されているとのことなので、気になる方は試してみてはいかがでしょうか。


A-FrameやVRコンテンツの詳細を知りたい方は前回紹介したVR FREEKもオススメ。




参考リンク

A-Frame – Make WebVR

新しいWebVRフレームワークA-Frame入門 - Qiita

VR開発フレームワークA-frameでつくる360度ビューワー | 涙彩