FLARToolKit スタートガイド

必要なもの

・Adobe Flash CS3 以降
・FLARToolKit
・Papervision3D (rev.814 以降)
・Web カメラ
・印刷したマーカー & マーカーデータ

ダウンロード

めんどいので一式をまとめたものを置いときました。はい。
http://saqoosha.net/lab/FLARToolKit/FLARToolKit-starter-kit.zip
追記（2009/2/8 1:50）：ぎゃー、マーカーの PDF 入れ忘れてた。いれといた & マーカーだけアップしたのでこれをお使いくだせい。

イントロダクション

Papervision3D が使える人なら非常に簡単。サンプルのメイン部分はほぼ Papervinios3D の設定だけ。使えない人もこのサンプルはめっちゃシンプルなので難しくない。大丈夫。
ただ、1 点だけ注意。座標系が Papervision3D とちょっと違います。Papervision3D でレンダリングするのでグローバル座標系はもちろん左手座標系なんだけど、マーカーにのっかるオブジェクトは↓の図みたいなかんじで、マーカーを正面に見たときに右手座標系になる。 上方向が  +X、右方向が +Y、手前方向が +Z になる。（追記 2009/3/2：すいませんめっちゃ間違ってました、、、）

marker-axis

サンプルソースの解説

手順を追って書くほど難しくないのでソースを細かく解説。SimpleCube.as がメインで、その他のソースは特に見る必要ナッシング。なので SimpleCube.as を説明していきます。

17 行目

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

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

20 行目

protected override function onInit():void {

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

24, 25 行目

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

マーカーが正常に認識できているか確認しやすいように、マーカーと全く同じサイズの Plane を作ってみる。赤色、2px のライン。80 てのがマーカーのサイズ。80mm。

26 行目

this._plane.rotationX = 180;

さっき書いたように座標系が違うのでこっち向ける。

27 行目

this._baseNode.addChild(this._plane);

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

36, 37 行目

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

マーカーの上に Cube をのっけてみます。ピンク色。サイズは 40mm x 40mm x 40mm。マーカーの半分のサイズ。

38 行目

this._cube.z = 20;

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

動かしてみる

SimpleCube.fla を開いてパブリッシュすると Web カメラからの画像が表示されます。Web カメラつないでないとエラー出ます。つないでるのに絵が出ないってひとは右クリック→設定→カメラアイコン、で適当なカメラを選んでください。（MacBook とかの内蔵カメラは USB Video Class Video っていう名前になってます。）
印刷されたマーカー全体がカメラに写るようにするとオブジェクトが表示されます。マーカーにぴったりくっついてますね。ほら、簡単でしょう？

まとめ

サンプルを見てわかるようにマーカーに追従してオブジェクトを動かすってだけなら、Papervision3D でオブジェクトを作るコードを書くだけでできちゃうから、みんなも FLARToolKit はじめようー。みたいな。こんなんでいいすか？

Required

– Adobe Flash CS3 or later
– FLARToolKit
– Papervision3D (rev. 817 or later)
– Webcam
– Printed marker & marker data

Download – source of FLARToolKit

http://saqoosha.net/lab/FLARToolKit/FLARToolKit-starter-kit.zip

Let’s get started!

If you are familiar using Papervision3D, this FLARToolKit will be easy to control. You can do whatever you want as if you control Papervision 3D.
If you are non-Papervision3D user, don’t be afraid! It is much fun and easy to control.
One thing you should take care of is that a coordinate system is different from Papervision3D’s.
The global coordinate system of Papervision3D is left-handed, but the object on the marker of FLARToolKit will become following image.

marker-axis

Sample source code

You ONLY need to understand how SimpleCube.as works. Other sources are ….well, you can forget about them.

line 24:

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

Initialize FLARToolKit.
The 1st argument is a path for camera corrective file. You can leave it as default.
The 2nd argument is a definition file of marker pattern. You need to define the pattern for the marker. e.g. flarlogo.pat is for flarlogo-marker.pdf.

line 27:

private function _onInit(e:Event):void {

Once init call is successfully over, this function is called. You can adjust 3D object here.
If you can not call this function and error message comes out, you should check the availability of pattern-file OR condition of Webcam.

line 30, 31:

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

These codes discriminate how the marker works fine or not.
They publish the Plane as a dummy, as same size of as marker(color Red, 2px line, 80mm)

line 32:

_plane.rotationX = 180;

As I discribed above, Papervision3D and FLARToolKit have an opposite coordinate system.
This code adjust the coordinate system.

line 33:

_markerNode.addChild(_plane);

Papervision3D normally “addChild” Scene3D, FLARToolKit needs to “addChild” a special node as it controls 3D object following the marker.
The special node is _markerNode.
Once you “addChild” _markerNode, the object follows the marker automatically.

line 44, 45:

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

Now let’s play with “Pink Cube” on the marker.
Size: 40mm*40mm*40mm. The half size of the marker.

line 46:

_cube.z = 20;

The Cube is based on the center/core(=zero point).
Here is the tips: Transforming +20 , Z makes the object is right on the top of marker.

Now the time to play FLARToolKit!

Here we go! Let’s follow the steps.
1. Open SimpleCube.fla with Flash Authoring
2. Publish it! then you can see the contents with Webcam
Note: If you are not connect with Webcam, you will see the error messages.
If you can not see the contents although you connect with Webcam, you need to set-up Webcam.
[right-click => setting => Camera. you should choose “USB Video Class Video” on Mac OS]
3. Capture the marker, then you will see the object.

see? it is easy!

Thank you for reading this description :)

See, this is easy!! If you can control Papervision3D, why don’t you control FLARToolKit too?! Let’s have fun, let’s move virtual kids!