処理を追いながら仕組み、コードについて解説します。
ここでは全体像と、初期設定などについて説明します。
FLARToolKitのコードに付いての説明は、技術評論社のサイト(FLARToolKitを使ったAR系 Flashの作り方)やAdobeのサイトにもあります。 しかし、全体像の説明までされているところはないので、ここで軽く説明します。
大手で解説に使われているコードは本当に一部分なので今回使用する SimpleCubeのコード全体像を下図に示します。
各種設定とパラメータなどの読込み | |
---|---|
init() | |
paramLoad() | |
↓ | |
ARToolKitの初期化 | |
initialization(e:Event) | |
↓ | |
3Dオブジェクト表示ライブラリの初期化 | |
supportLibsInit() | |
↓ | |
3Dオブジェクトの生成と登録 | |
start() (3Dオブジェクト生成:createObject) (マーカーイベント登録:addEventListener) | |
↓ | |
メインループ処理 | |
run() | |
detector | onMarkerAdded(マーカー認識時) |
onMarkerRemoved(マーカー非認識時) |
若干、手抜き気味な全体像ですが、この流れで進みます。
なお、メインループ処理部分は永久ループになっており(厳密には違う)、ウェブカメラの映像を取得している間、1フレームごとに呼び出されます。
最初にコンストラクタが呼び出されますが、そこから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の初期化処理に飛びます。