サイトウサンマーカーを使った、FLARToolKitの新デモを公開してみた

久しぶりにFLARToolKitでデモを作ってみた。
まず、難しい話は後にして、こちらのデモページを見て欲しい。これが今回の目玉商品！サイトウサンマーカーで見る癒しのサイトウサン4コマ漫画だ！
なお、サイトウサンについては、「ひながた＊わーるど-キャラクター-サイトウサン」を参照のこと。

ちなみに、デモページにはマーカー画像だけでなくマーカーのパターンファイルも公開してあるので、ARerの諸君には是非活用して欲しいと思います。


と言うことで、今回は、最近俺が興味を持ってるキャラクター「サイトウサン」をフィーチャーして、マーカーベースARの新たな可能性を探ってみた。
今までARToolKitと言えば、マーカーの上に3次元モデルを表示すると言うのがメジャー路線だったが、今回は「2次元の絵」を出してみたわけだ。以前のエントリで、ARビデオ名刺について考察してみた結果、「映像は問題なく出るが、音がブツ切れになる」と言う結論を得たので、今回は絵だけを出してみようという考えなわけだ。
今回は4コマ漫画を出してみたが、別に静止画で自己紹介をしたりとかそう言うのでもいいし、カメラの中だけのバーチャル絵本・バーチャルグラビアとしても使える。

マーカー識別部分のコード

ARビデオ名刺のエントリで2次元の絵を表示するコードは提示したので今回はちょっとだけ。採用したのはDistortImageの方で、ちゃんと向きを調節して、マーカーの上下左右にあわせて画像が出るようにしてみた。

< View plain text >
ActionScript

  1. //表示するコマの画像を取得
  2. var image:Bitmap = this.visible ? this._comic.current : this._comic.next;
  3. //変換用のBitmapDataに描き込む
  4. this._bitmap.draw(image);
  5. //マーカ内の頂点情報(2次元配列)を、DistortImageが扱えるPointに変換
  6. var points:Array = new Array();
  7. var direction:int = this._detector.getDirection();
  8. for (var i:uint = 0; i < 4; i++) {
  9.     points.push(new Point(this._square.sqvertex&#91;i % 4][0], this._square.sqvertex[i % 4][1]));
  10. }
  11. if (direction % 2 == 0) {
  12.     this._distort.setTransform(this.graphics, this._bitmap, points&#91;direction % 4],
  13.     points&#91;(1 + direction) % 4],
  14.     points&#91;(2 + direction) % 4],
  15.     points&#91;(3 + direction) % 4]);
  16. } else {
  17.     this._distort.setTransform(this.graphics, this._bitmap, points&#91;(2 + direction) % 4],
  18.     points&#91;(3 + direction) % 4],
  19.     points&#91;(0 + direction) % 4],
  20.     points&#91;(1 + direction) % 4]);
  21. }
  22. &#91;/as]
  23.  
  24. かなり汚いコードだが、多分こんな感じだ。<code>this._detector.getDirection()</code>でマーカの向きを0?3の整数として取得できるのだが、こいつの値が俺の欲しい値と逆になってるっぽかった。そのせいで妙なif文を入れる羽目になった。誰か鮮やかな解決方法を教えて欲しい。
  25. また、FLARToolKitの元々のサンプルは、マーカーの誤検知率が若干高かったんだが、その原因を突き止め、対処してみた。
  26. こんな感じ。
  27. [as]
  28. if (this._detector.detectMarkerLite(this._source, this._thresh) && this._detector.getConfidence() >= 0.5) {

サンプルはdetectMarkerLiteの戻り値だけで検知の成否を決めているが、今回はその後「一致度」もチェックして、50%以上ならマーカー発見としてみた。
このdetectMarkerLiteは、たとえ「一致度」が0.1とかでも検知成功(true)と判定するので、こいつしか見ない判定だと、かなりのザル状態になる。どの位ザルかと言うと、サイトウサンマーカーとHiroマーカーの区別が付かないレベルだ(でかい方が選ばれる)。

FLARToolKitを使いやすくしてみたい

今ちょっと、FLARToolKitがどうやったら使いやすくなるか、と言うのを考えていて、試しに「マーカーを検知してWebカメラに合成する部分をレイヤー構造にしたらどうか？」と考え、色々クラスを作ってみたんだが、結局レイヤーを毎回ゴリゴリ書く羽目になっている気がするので挫折気味だ。そもそも、古いJavaのノリでクラス階層を定義してみた結果、今回のサンプルを作るのに4個もクラスが必要で、コードを掲載できない状態になってしまった。

やっぱ、Flashなんだからサラッと書いてサラッと出したいと考えると、今の方式はちょっと重い。また、FLARToolKitのマーカー判定処理の重さを考えると、あまりイベントとかを飛ばしたり関数を作りまくりの呼びまくりと言う状態にしたくないとも思える。後、俺自身FLARToolKitの扱いに慣れてきて、不便を感じなくなってきた。こうなると「便利にしよう」と言う気迫が薄れてしまう。

そもそも、ActionScript3.0の主戦場はFlashなので、IDEと上手に連携する方策を考えたいのだが、IDEも持ってない俺にはつらい状態だ。

この部分の内容のまとまりの無さから自分でもハッキリ分かるが、凄く混乱している。取り敢えず今回のサンプルもSpark Projectにコミットするので、見て下さい。

募集中です

今回、4コマ漫画の画像から各コマを切り出して1コマ1コマ別のBitmapにするという何処に需要があるのかサッパリ分からないクラスを作ったので、ついでにSpark Projectにコミットしておこう。みんな4コマ書け！
そんなことより饅頭恐いな?、お次はサイトウサンのメタセコモデルが恐い。

タイトルとURLをコピーしました