The Sixwish project

詳細説明 - ソースコード解説 １

処理を追いながら仕組み、コードについて解説します。
ここでは全体像と、初期設定などについて説明します。

全体像

FLARToolKitのコードに付いての説明は、技術評論社のサイト(FLARToolKitを使ったAR系 Flashの作り方)やAdobeのサイトにもあります。 しかし、全体像の説明までされているところはないので、ここで軽く説明します。

大手で解説に使われているコードは本当に一部分なので今回使用する SimpleCubeのコード全体像を下図に示します。

SimpleCube の全体像

各種設定とパラメータなどの読込み
init()
paramLoad()
↓
ARToolKitの初期化
initialization(e:Event)
↓
3Dオブジェクト表示ライブラリの初期化
supportLibsInit()
↓
3Dオブジェクトの生成と登録
start() (3Dオブジェクト生成:createObject) (マーカーイベント登録:addEventListener)
↓
メインループ処理
run()
detector	onMarkerAdded(マーカー認識時)
	onMarkerRemoved(マーカー非認識時)

若干、手抜き気味な全体像ですが、この流れで進みます。
なお、メインループ処理部分は永久ループになっており(厳密には違う)、ウェブカメラの映像を取得している間、１フレームごとに呼び出されます。

各種設定とパラメータなどの読込み

最初にコンストラクタが呼び出されますが、そこからinit()処理が呼び出されます。

その処理が下記の部分です。

protected function init():void
{
	// 各種サイズの初期化
	this.captureWidth = 320;
	this.captureHeight = 240;
	
	// W:H の比率は必ず captureWidth:captureHeight=canvasWidth:canvasHeight にすること
	this.canvasWidth = 640
	this.canvasHeight = 480;
	
	// マーカーの一辺の長さ(px)
	this.codeWidth = 80;
	
	// カメラパラメータファイル
	// 16:9 の比率で使う場合は、camera_para_16x9.dat を使ってください
	this.cameraParamFile = '../resources/Data/camera_para.dat';
	
	// マーカーのパターンファイル
	this.markerPatternFile = '../resources/Data/flarlogo.pat';
	
	// パラメータのロード
	this.paramLoad();
}

殆どが変数定義ですが、いろいろと意味があるので一つずつ説明します。

// 各種サイズの初期化
this.captureWidth = 320;
this.captureHeight = 240;

キャプチャーサイズ（ウェブカメラの解像度）を定義しています。最近のウェブカメラは640x480辺りをサポートしていますが、PCのスペックによっては負荷が高くなり重くなります。 そのため、320x240 を使うことが多いようです。しかし、どうしても認識率を上げたい場合は、480x360を使用することで負荷とバランスが取れることもあります。

// W:H の比率は必ず captureWidth:captureHeight=canvasWidth:canvasHeight にすること
this.canvasWidth = 640
this.canvasHeight = 480;

表示サイズの定義です。キャプチャーサイズと同じサイズでは小さな画面になってしまいます。そのため、表示時には拡大しています。
コメントにも書かれていますが、比率を維持してください。この比率がずれると、表示位置のズレや3Dオブジェクトが変形したりします。

// マーカーの一辺の長さ(px)
this.codeWidth = 80;

マーカーの一辺の長さを何ピクセルとして扱うかを定義しています。
ARToolKitでも使われていますが、1px = 1mm として便宜上扱うための定義と思ってください。
実際に使用するマーカーのサイズに合わせて定義することで、誤差はありますがほぼ同サイズになるようになります。

// カメラパラメータファイル
// 16:9 の比率で使う場合は、camera_para_16x9.dat を使ってください
this.cameraParamFile = '../resources/Data/camera_para.dat';

// マーカーのパターンファイル
this.markerPatternFile = '../resources/Data/flarlogo.pat';

カメラパラメータファイルの場所を示しています。カメラパラメータファイルはカメラ毎にキャリブレーション(ARToolKitに含まれるツールで行う)を行った方が良いのですが、それほど影響はないので準備されているものを使用します。 しかし、コメントに書かれている通り、16:9の比率のウェブカメラ入力にする場合は、camera_para_16x9.datに切り替えてください。誤差がでます。

その下のマーカーのパターンファイルの指定ですが、標準でついているFLAR Logoマーカーを使用します。
マーカーのパターンファイルの作り方は別途説明します。

続いてパラメータのデータロード部分です。

/**
 * カメラパラメータなどを読み込み、変数にロード
 *@return void
 */
private function paramLoad():void
{
	var mf:NyMultiFileLoader=new NyMultiFileLoader();
	mf.addTarget(
		this.cameraParamFile, URLLoaderDataFormat.BINARY,
		function(data:ByteArray):void
		{
			cameraParam = new FLARParam();
			cameraParam.loadARParam(data);
			cameraParam.changeScreenSize(captureWidth, captureHeight);
		});
	mf.addTarget(
		this.markerPatternFile, URLLoaderDataFormat.TEXT,
		function(data:String):void
		{
			// 分割数(縦・横)、黒枠の幅(縦・横)
			markerPatternCode = new FLARCode(16, 16);
			markerPatternCode.loadARPattFromFile(data);
		}
	);
	//終了後、初期化処理に遷移するように設定
	mf.addEventListener(Event.COMPLETE, initialization);
	//ロード開始
	mf.multiLoad();
	
	return;
}

面倒だったのでNyARToolKitAS3に付属しているutilを使ってロードしています。 この部分は入れ替えた方が良いかもしれません。
このあたりは情報定義とファイルのデータ読み込みだけなので、FLASHでどのように組み込んでも構わないと思います。

では、何を読込み、どの変数にどのような情報を代入しているかを見ていきます。

	mf.addTarget(
		this.cameraParamFile, URLLoaderDataFormat.BINARY,
		function(data:ByteArray):void
		{
			cameraParam = new FLARParam();
			cameraParam.loadARParam(data);
			cameraParam.changeScreenSize(captureWidth, captureHeight);
		});

カメラパラメータのデータを読み込んで、camraParam：FLARParamに入れています。
この部分は、4:3の比率で使うのであれば、FLARParam初期値が含まれているので省略することが可能です。

	mf.addTarget(
		this.markerPatternFile, URLLoaderDataFormat.TEXT,
		function(data:String):void
		{
			// 分割数(縦・横)、黒枠の幅(縦・横)
			markerPatternCode = new FLARCode(16, 16);
			markerPatternCode.loadARPattFromFile(data);
		}
	);

マーカーのパターンデータを読み込み、markerPatternCode:FLARCodeに入れています。
枠線の幅を変える方法もありますが、それは別途説明します。

さて、読み込み完了後はARToolKitの初期化処理に飛びます。