FLARToolKitって？

FLARToolKitというのは、最近流行のAR（拡張現実）ってのをFlashで簡単に作ることができるライブラリです。実際、ARを取り入れたプロモーションサイトを見かけるようになりました。たとえば、「GE | Plug Into the Smart Grid」や「Living Sasquatch」というサイトを見たことないですか？

North KingdomとGoodby Silverstein & Partnersが手掛けた「GE | Plug Into the Smart Grid」をきっかけに、Web業界でもARに注目が集まり始めました

こういったサイトでは、カメラ映像内にリアルタイムで電子情報を付加することができるコンテンツが用意されています。そこに使われているのがFLARToolKitなんです。

FLARToolKitがやってくれるのは、「マーカー」と呼ばれる四角い図形をWebカメラ映像内から探し出して、3次元空間上の位置を計算するところまでです。マーカー上に3Dグラフィックを描画するためには、別途Papervision3DなどのFlash用3Dライブラリを使用します。

FLARToolKit初体験

FLARToolKitを体験するのに必要なファイル一式をまとめた「FLARToolKit Starter-kit」を用意しました。これを使って、まずはさくっとFLARToolKitを体験してみましょう。

1. FLARToolKit Starter-kitをダウンロード＆解凍します。
2. Dataフォルダの中に「flarlogo-marker.pdf」というPDFファイルがあるので適当な紙に印刷します（できればちょっと厚手の紙がいいです）。これがマーカーになります。

flarlogo-marker.pdf内に描いているマーカー

1. パソコンにWebカメラを接続します。これがないと始まらない。
2. SimpleCube.flaをFlash CS3以降で開きます。
3. パブリッシュします（SimpleCube.swf）。
4. SimpleCube.swfを開いて、画面上にWebカメラからの映像が映っているか確認します。映っていなければ、Webカメラの設定がうまくいっていないということなので、ステージを右クリックして設定画面を開き、Webカメラのページで適切なカメラを選択してください（MacBookやiMac内蔵のカメラはUSB Video Class Videoという名前です）。
5. Webカメラにさきほど印刷したマーカーを向けると…！

マーカー上にピンクのキューブが表示されました！　マーカーをいろいろと動かしても、マーカー上にピッタリとピンクのキューブが表示されます

SimpleCube.flaの中身

SimpleCube.flaのスクリプト、つまり先ほどのピンクのキューブを表示させるためのスクリプトは、別ファイルのSimpleCube.asにすべて書かれています。そのスクリプトの中身を細かく解説していきます。このサンプルでは、キューブの描画にPapervision3Dを使用しています。

20行目

this.init('Data/camera_para.dat', 'Data/flarlogo.pat');

FLARToolKitを初期化します。第1引数は、カメラ補正ファイルへのパスです。これは、FLARToolKitに付属のものを指定しておけばOK。第2引数は、マーカーのパターン定義ファイルへのパスです。これは、使用するマーカーに対応するパターン定義ファイルを指定します。flarlogo.patってのはflarlogo-marker.pdf用。オリジナルマーカーの作成方法については後述します。

23行目

protected override function onInit():void {

initを呼んだあと、初期化が問題なく終わると最終的にこの関数が呼び出されます。3Dオブジェクトの設定はこの中でします。パターンファイルが存在しなかったり、Webカメラが接続されてないと、この関数が呼ばれるまでにエラーが出てしまいます。

28～29行目

var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);
this._plane = new Plane(wmat, 80, 80);

マーカーが正常に認識できているか確認しやすいように、Papervision3Dを使ってマーカーと全く同じサイズのPlaneを作り、マーカー部分に重ねるようにしています。Planeは赤色で2pxのライン。マーカーのサイズが80mm四方なので、80と指定します。

30行目

this._baseNode.addChild(this._plane);

通常、Papervision3Dではcene3DにaddChildしますが、FLARToolKitではマーカーに追従して3D オブジェクトを動かすため、特別なノードにaddChildする必要があります。それが「 _baseNode」。これにaddChildすることで自動的にマーカーに追従して動くようになります。

41～42 行目

var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x75104e);
this._cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);

マーカーの上にCubeをのっけます。ピンク色で、サイズは40mm立方。マーカーの半分のサイズにしています。

43 行目

this._cube.z = 20;

Cubeは原点中心に作られるので、-Z方向、つまりマーカーの上方向に20移動させると、マーカーにちょうどのっかってるようになります。

FLARToolKitでPapervision3Dを使う際は、マーカー上の座標系は下図のように、右方向が +X、上方向が +Y、奥方向が +Z になります。マーカー上でオブジェクトを動かすときは、この座標系で動くので覚えておいてください。

※この座標系は、Rev.2720以降のFLARBaseNodeでaxisModeをAXIS_MODE_PV3D に指定した時のものです。それ以前のリビジョンでは、これとは違う座標系になっているので注意してください。

オリジナルマーカーを作る

マーカーは、簡単なルールに沿って作れば、誰でも好きなデザインで作ることができます。そのルールというのは、以下の3つです。

1. 外側が80mm、内側が40mmの正方形（実際には、外側と内側の比が「2：1」であれば、マーカーとしては機能します。ここでは、説明をわかりやすくするためにサイズ指定しておきます）。

2. 内側の正方形内には、上下左右が判別できる非点対称の図形を描く。

3. なるべく濃い色、コントラストが高くなるように。

以上のルールを頭に入れた上で、マーカーをデザインしてください。マーカーは、カメラかざしたときにハッキリとゆがみなく映るように、厚手の紙に印刷することをおすすめします。サイズは、ハガキ用紙とかがちょうどいいでしょう。

こうして作ったマーカーをFLARToolKitで使用するためには、それぞれのマーカーに対応した専用のマーカーパターンデータを作成する必要があります。マーカーパターンデータというのは、FLARToolKitに「こういうマーカーを使うから、認識してね」と指示するデータです。マーカーパターンデータは、「ARToolKit Marker Generator Online（太郎氏作成）」を使って作ることができます。

1. ARToolKit Marker Generator Onlineへアクセス。
2. カメラ使用許可ダイアログが出た場合は「許可」する。
3. カメラ画像が表示されるので印刷したマーカーを映す。
4. マーカーが赤いラインで囲まれたら "Get Pattern" をクリック。
5. 左のウィンドウにキャプチャ内容が表示されるのでSave。

これで、FLARToolKitで使用できるマーカーパターンデータが作成できました。あとは、このパターンデータを先ほどのSimpleCube.flaで使用できるようにコードを書き換えます。先ほど解説したようにSimpleCube.asの20行目でパターンデータを指定しているので、そこをオリジナルマーカーパターンデータのファイル名に書き換えます。再パブリッシュして動作を確認してみてください。

3D オブジェクトを読み込んでみる

ピンクのキューブだけだと寂しいので、最後にキューブの代わりに3Dオブジェクトを読み込んでみましょう。Blenderを使って、こんな感じの地球を作ってみたのでこれを使います。

読み込む地球3Dオブジェクト

Papervision3Dでオリジナルの3Dモデルを扱う場合は、Collada形式というフォーマットで書き出したデータを読み込むのが一般的です。この地球のオブジェクトも Blenderというフリーの3Dソフトで作成し、Collada形式で書き出しました。model フォルダにあるearth.blendが元のBlenderのファイルで、earth.daeがCollada形式に書き出したものです。このearth.daeをPaperision3Dに読み込みます。

Earth.flaのドキュメントクラスであるEarth.asに、このモデルを読み込む処理が書かれています。17～21行目までがそれ。

this._earth = new DAE();                // 1
this._earth.load('model/earth.dae');    // 2
this._earth.scale = 10;                 // 3
this._earth.rotationX = -90;            // 4
this._baseNode.addChild(this._earth);   // 5

1. DAEというクラスがCollada形式を読み込むためのクラス。
2. loadメソッドで読み込むColladaファイルを指定します。
3. サイズを調整します。
4. 向きを調整します。
5. 最後にマーカーに追従するオブジェクト、_baseNodeにaddChildします。

これだけでCollada形式の3Dオブジェクトを読み込むことができます。Earth.asでは地球が回転するようにちょっとコードを付け加えています。Earth.flaをパブリッシュして動作を確認してみましょう。

マーカー上で地球が回転しています

まとめ

さて、このあたりで今回のチュートリアルは終了です。非常に基本的な部分しか解説していませんが、FLARToolKitの面白さは伝わったのではないでしょうか。FLARToolKit は、単純にマーカーの上にオブジェクトを表示するだけではなく、いろんな使い方もできます。まだまだ遊べるツールなのでいろんなアイデアを考えてみてください！ 　んじゃ！

著者について