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

roman-tech

テクノロジーはロマンだ。

超お手軽VR開発フレームワーク A-FRAME入門:第1回

本シリーズでは最近話題のバーチャルリアリティ開発フレームワークであるA-FRAMEの使い方について記載します。筆者も特に詳しいわけではなくこれから勉強しながら執筆していくので一緒に学んでいきましょう。参考URLは以下の本家サイトです。

aframe.io

本記事で学べること

  • A-FRAMEの概要を知る

  • 基本的な使い方を知る

必要なスキル

軽くhtml5javascriptはかじっておくといいかもしれません。

ただ、結構気軽に開発できるので初心者の人でも言語を学びながらやっていけると思います。

A-FRAME概要

A-FRAMEはwebブラウザ上で動作する3Dとバーチャルリアリティ開発のためのオープンソースフレームワークです。これまで、ブラウザ上で3D空間を表現するにはwegGLという非常に難解なライブラリを使いこなす必要がありハードルが高すぎました。大学でopenGL(1.0)を使っていた僕でさえかなりイミフな部分が多かったです。

しかし、A-FRAMEはwegGLの部分を隠蔽し、ユーザが簡単に3D空間を構築できるように設計されています。しかし、簡単に構築できるということはそれだけできることに制限が出てくると思うので、その辺を見極めながら勉強していきましょう。

実際にどんなことができるの?

上に記載した本家のサイトには多くのサンプルが置いてありますので、それを見てもらうのが一番でしょう。

hello world

Hello World – A-Frame

・・・すごい。html数行でグリグリ動きますね。当然スマホのジャイロにも連動して動きます。

さあ早速開発を始めよう!

開発に必要なもの

  • インターネットに接続可能なパソコン

  • テキストエディタ(これは完全に人の好みですね。テキストエディタ界には様々な派閥があることで知られます。Vimでもemacsでも秀丸でもお好きなものをお使いください。)ちなみに僕はAdobeのフリーエディタbracketsを使っています。 http://brackets.io

  • webGL対応のwebブラウザ(IEはわかりませんがそれ以外なら今は大体どれでも問題ないかと。僕はエディタでbracketsを使っているので連動して動くChromeを使っています。) たったこれだけでVRの開発がはじめられちゃいます!

スマホでみたいよ!って方は別途レンタルサーバなどを用意する必要がありますが)

1.A-FRAMEのダウンロード

まずは本家のURLからA-FRAMEをダウンロードしてきましょう。

<ダウンロード先>

Getting Started – Docs – A-Frame

f:id:roman-tech:20160626203020j:plain

赤枠の部分を右クリックし、「リンク先のファイルをダウンロード」するとA-FRAMEのソースコードがダウンロードできます。なお、①と②の違いは以下です。

ソースコード圧縮版:(ソース名:aframe.min.js)

サイズが小さく、ダウンロード時間が押さえられる。ただし可読性はほぼ無い。

ソースコード未圧縮版(ソース名:aframe.js)

サイズが大きいがソースコードを読むことが可能。また、頑張れば自分の用途に合わせてカスタマイズできる。

機能差はないため、普通の用途であれば①のみダウンロードすれば問題無いでしょう。しかし、ソースコードの中身が気になるなぁって方は②をダウンロードしましょう。このシリーズではソースを改変するかもしれないためあえて②を選択します。

2.ソースを書こう!

ついにお楽しみ!コーディングの時間ですね! その前にディレクトリ構成を決めましょう。 僕は以下のようにして使っています。

【a-frame-project】
     【lib】
          a-frame.js(もしくはaframe.min.js)
     【sample1】   
          index.html
     【sample2】  
          index.html

*)【】はディレクトリ

とりあえず上のような構成のディレクトリを作成し、 まずは¥a-frame-project¥libの中に先ほどダウンロードしてきたaframe.js(またはaframe.min.js)を入れましょう。そしてsample1の下にindex.htmlを作成し以下を記入しましょう。

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Sample1 sphere</title>
    <script src="../lib/aframe.js"></script>
</head>
    <a-scene>
        <a-sphere position="0 2.00 -1" radius="1.25" color="#FE0000"></a-sphere>
    </a-scene>
</body>
</html>

むむっ!なにやら赤い球体が出てきましたね! マウスでグリグリできます。スマホでみた場合、右下のゴーグルアイコンをタップすると2眼のVRモードになり、ジャイロセンサーに連動して画像が動くようになります。

スマホからみたいって方はサーバにアップロードしたので以下URLからご覧ください。

http://action-code.xyz/a-frame-project/sample1-sphere/action-code.xyz

f:id:roman-tech:20160626214156j:plain:w300

因みにa-sphereで記載された中のパラメータの意味は以下の通りです。

position:左から球体を置く場所のx軸上の位置、y軸上の位置、z軸上の位置です。色々値を変えてみてどこに配置されるか試してみるといいと思います。
radius:球体の半径。
color:球体の色。web界ではおなじみの16進数表記です。なお代表的な色は"red","yellow"などでも指定できますが、現状ライティングの設定が反映されないようでのっぺりした絵になるので注意が必要です。

3.応用編

しかしながら球を表示するだけではつまらないので今回はricoh thetaで撮影した360度画像を球体に貼り付けて簡易VRシステムを構築してみましょう。

theta360.com

まずはthetaで撮影した画像を用意しましょう。今回はこの画像を使います。
The 大阪城!!

f:id:roman-tech:20160626225356j:plain:w500

それではコーディングに入りましょう。 まずは画像をindex.htmlと同じディレクトリに入れて、以下のように記載します。 今回は<a-sky>タグを使うのがポイントで、バーチャル空間全体の色を指定したり、画像を指定したりできます。

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sample2 theta</title>
    <script src="../lib/aframe.js"></script>
</head>
    <a-scene>
        <a-sky src="img.jpg" rotation="0 -90 0"></a-sky>
    </a-scene>
</body>
</html>

簡単すぎてワロタ。
自前でWebGL使ってVRシステム作ったことあるけどあの苦労はなんだったんだ。。。
因みに画像を読み込んだりするプログラムはローカル環境では動かないことが多いため、サーバにアップロードして動作確認する必要があります。

以下のURLにアップロードしたのでご確認ください。

http://action-code.xyz/a-frame-project/sample2-theta_image/

ひとまず本日はこの辺で!次は何を試そうかしら。




© 2016 Tsukasa Horinouchi