2011年3月7日月曜日

Titanium mobileのARマーカー検出モジュール!


*** iOS 4.3 で動作するようになりました、githubから最新をpullしてください ***

Titanium mobileで ARマーカーを検出するモジュールを作りました。

っても、いろんな記事を大いに参考にさせていただきました。
よって、こっ恥ずかしいのですが、公開します。

git@github.com:atsusy/tiarmarker.git からcloneしてください。

*はじめに
- iOSのモジュールです。Androidでは使用できません。
- OpenCVを使用しています。
- シミュレータでは動きません。デバイスでしか動きません。(iPhone 3G/3GS/4 で動作確認)
- 現時点では、SDKバージョン1.6.0以上としています。

*ARマーカーって?
AR(Augmented Reality) [拡張現実] の実現手法の一つです。
マーカーという定型のマークをカメラで認識し、位置や姿勢、コードを検出します。

A-Z と 0-9 を ARマーカーにするとこんな感じです。文字でなくてもいいです。
最終的には4x4の16bitのコードとして認識します。


マーカーにアプリケーションで物体等をオーバーレイしたりすると、
カメラを通してARを体験することができるというものです。

やったことないんですが、ラブプラスなんかでも使われてるんですね。

*インストール方法
事前に、サンプル動作用にTitanium mobile SDK 1.6.0のプロジェクトを作成しておいて下さい。

cloneしたソースのディレクトリで、
./build.py
を実行し、モジュールをビルドします。
ビルドが完了すると、com.armarkerti-iphone-0.1.zip というファイルが出来上がっているはずです。

com.armarkerti-iphone-0.1.zipを、サンプル動作用に作成したプロジェクトのディレクトリにコピーして下さい。

モジュールのインストールは以上です。

*サンプルの実行
example/app.jsを、サンプル動作用に作成したプロジェクトのResourceディレクトリにコピーして下さい(プロジェクトが作成したapp.jsを上書きします)

tiapp.xmlを編集し、modulesタグ内に、ARマーカー検出モジュールを使用する事を宣言して下さい。
<modules>
   <module version="0.1">com.armarkerti</module>
 </modules>

後は、プロビジョニングファイルを用意してデバイス上で実行して下さい。

起動するとカメラの入力映像が表示されますので、example/marker.pngを印刷するか、PCに表示してください。

"A"のマーク(左上)をカメラで見て、その上に"a"という文字がマーカーに合わせて表示されれば正しく動作しています。

*ビューをオーバーレイさせるには
まずは、example/app.jsを参考にして下さい。

1) com.armarker.ti : createCameraView() で、カメラの映像を表示するビュー(cameraView)を生成する
2) オーバーレイしたいビューを作成する
その際、center:{x:0, y:0}, visible:false としておく
3) オーバーレイしたいビューをcameraViewにaddする
4) cameraViewのdetectedイベントで、検出したマーカーすべての コード(code)/中心位置(moment)/射影行列(transform)にアクセスできるので、目的のマーカーがあるかチェック

オーバーレイしたいビューを animate({transform:マーカーへの射影行列の3DMatrix, duration:0}) すると、マーカー上にビューがオーバレイ表示される。目的のマーカーが存在しない場合は、オーバーレイしたいビューのvisibleをfalseにする。

*足りないところ
- フレームレートが低い!(3GSとかで動くのかな?)
- 検出精度がまだまだ!(認識してくれない事がまああります)
- create3DMatrixの初期値に、m11-m44のディクショナリを渡したい(試したけど無理だった)
- 3Dオブジェクトをオーバーレイさせたい!

*参考にした記事
OpenCVで遊ぼう!
iPhoneでOpenCVを使う方法