対象物が写った複数の画像をアップロードすると、サーバサイドで対象物を三次元復元し、3Dモデルデータをダウンロードできるアプリ『Autodesk 123D Catch』がすごいわけです。とりあえず、出力されたfbxファイルの頂点データをFlashでパースして某PV風なサウンドビジュアライズを速攻で作ってみました。

» Vertices From Autodesk 123D Catch

fbxのパースにはSaqooshaの『FBX Parser for AS3』が使えるかなあと思ったんですが、fbxは方言が激しいらしくうまくパースできなかったので強引にやりました。今、膨大な頂点をまびきながらテクスチャをマッピングする作業が思ったよりもめんどうで苦戦中。

3Dモデルのモデルには@bouzeが協力してくれました。アプリには完成したモデルデータをYouTubeにアップするボタン（いるのかこれ）も付いていたのでやってみました。

» Bouze3D

以下メモ。

僕も学生時代に似たような研究をやってました。こういう技術はたくさんの基礎技術の組み合わせでできていて、例えば

1. 入力画像から特徴点を抽出する。
2. 複数の画像にまたがって現れる特徴点のパターンを検出し、画像同士の相対的な位置関係を明らかにする（カメラの座標と角度の推定）。
3. 各カメラの位置、画像を元に、対象物の表面（メッシュ）を推定する。テクスチャもこのとき多数決法などで復元したりすることもある。
4. 誤差や不十分な入力によってで生じるメッシュの穴を補完する。

数学的予測に基づく面の補完（4）を、再び実際の画像に照らし合わせて答え合わせをする（3）という作業を繰り返すことで精度の良い復元になっていったりします。

まだ確認していないのですが、クラウド上にアップされているみんなの写真を使ってモデリングをおこなうこともできるらしく、これが本当だとすれば、各々が持ち寄った写真から一つの街をモデリングすることもできるかもしれないという。

ちなみに、複数の写真から得られる情報を重ね合わせることで元の写真よりも解像度をあげる超解像という技術があるのですが、この技術も組み合わせれば「自分が復元した3Dモデルが、いつの間にか他の人の写真によってより精細になっていた」ということが実現されるかも知れません。

AIRKinectを使えば、ActionScript Native Extensions（通称ANE）を経由して、AIRアプリからMicrosoftのKinectドライバを簡単に叩けるらしい。

ということでやってみた。

1. Microsoft Kinect SDK beta2をインストールする。
   これまでOpenNIを使ってた人はドライバが競合するので注意。解決方法もあるみたいだけど、めんどうだったのでOpenNIをアンインストールした。
2. ここのDemo Applicationからデモアプリをダウンロードしてインストールする。
3. Kinectを接続してサンプルAIRアプリを起動する。うまく動かない人は、Microsoft Kinect SDKのインストールフォルダに入ってるサンプルを一度起動から、もう一度AIRアプリを試してみるとうまくいくかも。

するとこうなる。

では次に、自分でAIRアプリをパブリッシュしてみる。基本的にはライブラリ作者のチュートリアルビデオが30分かけて丁寧に全部教えてくれる。英語で。

1. ANEを使ったアプリの制作環境をここらへんを参考にしながら整える。

   ちなみにチュートリアルビデオでは現時点ではリリースされていないFlash Builder 4.6を使ってる。Flash Builderでやりたい人はプレリリースプログラムに参加しよう。もう終わってるかも知れないけど。

2. ここのDownload AIRKinectExtensionから.aneファイルをダウンロードする。
3. ここからFlash Builder用のプロジェクトをダウンロードする。
4. AIRKinectExtension.aneにパスを通して、プロジェクトに入ってるBasicKinect01.asをパブリッシュする。FlashBuilder4.6でのパスの通し方は、チュートリアルビデオの3:30あたりから。英語がわからなくても気合いでなんとかなると思う。

自分の場合は、「com.as3nui.nativeExtensions.kinect.data.AIRKinectFlags（色んな定数を定義しているクラス）が無いよ」というコンパイルエラーが出た。よく分からないので、ASDocを見ながら、該当箇所を値に置き換えるとうまくいった。色々試してみると、どうも com.as3nui.nativeExtensions.kinect.data パッケージには、他にもいくつか抜け落ちているクラスがあるみたい。

BasicKinect01.asを改造してDepthをとってみた。

AIRKinect.initialize()で「Depth画像を使うよ」っていうフラグを渡し忘れていて、えらくハマった。

» ソースコード

まあとりあえずこんなとこ。実行速度は実用に耐えられるレベル。

「東京ひよこの会」なる勉強会に参加してきまして、そのとき発表したデモをアップしました。

SpriteやMovieClipのhitAreaというプロパティ自体は前々から知っていたのですが、うまく扱えないためこれまで避けていました。

Spriteを親SpriteのhitAreaとして設定した場合、hitAreaの兄弟Spriteにもボタンが反応してしまっていたのですが（デモ起動直後のbtn4の状態）、このたび会場にいらしていた野中先生のおかげでこの問題を無事解決することができました。

ボタン自体のmouseChildrenをfalseにするだけでした。hitAreaに設定されたSpriteはマウスイベントに関する扱いが少し特殊で、mouseEnabledやmouseChildrenをfalseに設定しても、hitAreaとして設定されているSpriteやMovieClipのヒット領域としての仕事は全うできるようです。言葉での説明が難しいのでデモを見てもらえば分かると思います。

こんな感じで皆それぞれが「今できること + 本当はこんな風にしたい」を持ちより共有してみんなで考える、というスタイルは有意義で、新しい発見もありとても為になりました。自分にとって「てらこ」がエッジな技能を披露する場であるのに対して、ひよこは理解度とスキルのベースアップの場という棲み分けなのかなぁ、という感触です。

皆さんもどんどん参加すればいいと思います。

AIR2.0の新機能でOpenCVと連携してみました。AIRアプリを起動してTwitterID入力 → Webカメラを選択すると、カメラ映像から顔領域を検出してアイコンが顔を隠します。TwitterIDを空欄にすると笑い男が出現します。俺の目を盗みやがったなという具合に。

» OpenCVFaceDetection
» ソース一式

・Iキー　･･･ アイコンの表示/非表示を切り替えます。
・Rキー　･･･ 検出された全顔領域の表示/非表示を切り替えます。

実行にはWindows環境であることと、OpenCV 2.1が必要です。また、ネイティブアプリケーション側とAIR側から同じWebカメラに同時にアクセスするので、複数アプケーションからのWebカメラへの同時アクセスをサポートする環境が必要です。
» OpenCV
» ひとつのWebカメラを複数のアプリケーションから同時に使う

ビルドにはさらにDirectX SDK、Platform SDK（Windows SDKに統合されたっぽい）が必要です。もしこれらのライブラリだけでは足りなかったよーという場合は教えてもらえるとうれしいです。
» Platform SDK → Windows SDK
» DirectX SDK

やりたかったこと
AIR2.0から、ネイティブアプリケーション（exeやappなど）と標準入力・標準出力を介して通信できるようになったので、裏方を全部ネイティブアプリケーションにやらせて結果だけFlashで描画するという試みです。要は一から画像処理系をASで組んでやるよりも、高速に動作するネイティブ言語に元々実装されている資産を使った方が効率いいじゃんっていうことです。今回はC++でOpenCVを使って顔検出するネイティブアプリケーションを実装し、その結果をFlashでリアルタイムに描画するプログラムを組んでみました。

AIRの起動から終了までの流れ

1. ユーザがAIRを起動する
2. AIRがネイティブアプリケーションを起動する
3. ネイティブアプリケーションが毎フレーム顔検出をして、結果をFlashに送る
4. AIRが検出結果に基づいて描画をおこなう（3に戻る）
5. ユーザがAIRを終了すると、AIRがネイティブアプリケーションを終了する

こんな感じです。ネイティブアプリケーションは基本的に表に出しません。エンジン部分はネイティブアプリケーション、表示部分はAIRという風に完全に切り分けることにします。

AIRとネイティブアプリケーションの通信
以下の形式の文字列で通信することにしました。間に改行は挟むことができず、最後は必ず改行で終了する必要があります（改行はデータの終端を意味します）。

顔1のx座標,顔1のy座標,顔1の幅,顔1の高さ;顔2のx座標,顔2のy座標,顔2の幅,顔2の高さ;顔3の・・・\n

このルールに沿った文字列をネイティブアプリケーションから標準出力し、AIR側の標準入力で受け取りパースします。

ちなみに似たような内容を先日のSparkProject勉強会で発表してきました。AIRからのネイティブアプリケーション起動、通信部分、終了に関するそれぞれのコードは発表資料に書いてあります。発表時にはWebCam Splitterのようなソフトウェアの存在を知らなかったために、AIRの透過ウィンドウをネイティブアプリケーションの上に重ねる方式になっています。
» SparkProject勉強会 発表資料

OpenCVでの顔検出にはcvHaarDetectObjects関数を用いました。画像から顔検出をする流れは以下のサイトがわかりやすかったです。各種SDKのインストールについても詳細に書いてあるので環境構築の参考にもなります。
» OpenCVを使って顔認識プログラムを作ってみた

今回のサンプルを作るにあたり、笑い男マークとTwitterアイコンを取得するAPIを以下のサイトからお借りしました。
» antina工作室
» tweetimag.es

感想
ネイティブアプリケーションとAIRの通信は思った以上に簡単でした。かつネイティブアプリケーションの強力なパワーを実感できて満足です。配布時にはネイティブアプリケーション自身やdllを、AIRのインストーラに含めることができるので、ユーザが実行環境を用意する手間もかなり省くことができます（今回はファイルサイズが大きくなるのでdllは含んでいません）。

OpenGLやDirectXで描画までおこなうものに比べれば非力ですが、うまく使えばFlashのメリットである描画やインターフェース構築の簡単さ、ネイティブアプリケーションのメリットである高速演算、それぞれをうまく引き出すことができると思います。

追記 10.08.10
デフォルトで使うOpenCVのバージョンを2.1に変更しました。OpenCV 1.0を使う場合は以下の記事の追記部分を参考にソースコードの一部およびパスを書き換えてください。
» C++とOpenCVでWebカメラを簡単に扱う

MouseEvent.MOUSE_DOWNの発生後にマウスを押したまま対象インスタンスの親インスタンスを変更した場合、つまり別のDisplayObjectContainerにaddChildし直した場合の挙動。

予想では、マウスダウン中に別の親にaddChildしてしまうとマウスを離してもMouseEvent.MOUSE_UPは発生しないと思っていたのだけど、普通にイベントが発生した。これを利用すると、たくさんのアイテムの中からドラッグ中のものを一時的に最前面に表示するなどの処理が実装しやすくなる。

//親コンテナ parentA, parentB を作る
var parentA:Sprite = addChild( new Sprite() ) as Sprite;
var parentB:Sprite = addChild( new Sprite() ) as Sprite;

//子オブジェクト child を作り、parentA に配置しておく
var child:Sprite = parentA.addChild( new Sprite() );
child.graphics.beginFill(0x0);
child.graphics.drawCircle(0, 0, 50);
child.graphics.endFill();
child.x = 100;
child.y = 100;

//子オブジェクトに対してイベントを登録する
child.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
  trace("down");
  //マウスダウンで parentB の子として addChild し直す
  parentB.addChild(child);
});

child.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent):void {
  //マウスを離すと、マウスダウン時と親が違っていてもちゃんと実行される
  trace("up");
});

トップページにコンテンツを追加しました。
» Cells

今回はボロノイ図とパーティクル操作を組み合わせたものとなっています。ボロノイ図のアルゴリズムには高速なFortuneのアルゴリズムを用いています。Fortuneのアルゴリズムは空間を上から下に走査していきながら、各々のボロノイ母点が作り出す放物線（beach line）同士が交わる点列をボロノイ境界とみなします。

» アルゴリズム解説
» C++版 by Matt Brubeck
» AS3版 by Controul

wonderflに投稿されているkndさんの『Fortuneのアルゴリズムの可視化』が直感的で分かりやすいです。

pbjファイルをローカルからアップロードすると、PixelBenderのコードを内部に埋め込んだActionScriptのクラスを生成します。pbjファイルがパラメータを含む場合は、各パラメータに対して自動的にgetter/setterも用意します。インプットに対しても自動でgetter/setterを生成します。

このツールの利点としては

• コンパイル時にPixelBenderのコードを含めることができるので、pbjファイルを外部読み込みする必要が無くなる
• pbjファイルにどのようなパラメータやインプットを設定すればいいのか分かる

といったことがあります。wonderflに投稿する際にメインのコードとPixelBenderをひとつのファイルにまとめたり、パラメータやインプットの指定ミスを減らせることができるかと思います。

エンコード/デコード処理はこのようになっています。

//pbjファイル → 埋め込みコード
function encode(bytes:ByteArray):Array {
    var code:Array = new Array();
    bytes.position = 0;
    while (bytes.bytesAvailable) {
        code.push(bytes.readByte());
    }
    return code;
}

encode(loader.data);

//埋め込みコード → Shaderインスタンス
function decode(code:Array):ByteArray {
    var bytes:ByteArray = new ByteArray();
    for (var i:uint = 0, l:uint = code.length; i < l; ++i) {
        bytes.writeByte(code[i]);
    }
    return bytes;
}

var shader:Shader = new Shader( decode(code) );

おまけ
結局使わなかったのですが、このツールを作るにあたりpbjファイルをディスアセンブルするクラスをC++からASに移植しました。
» Pixel Bender .pbj files （C++版のディスアセンブラ）

当初はpbjファイルをディスアセンブルしてパラメータのgetter/setterを自動生成ｓていたのですが、Shaderインスタンスのdataプロパティを列挙すれば必要な情報を取得できることに、移植完了後に気づきました。なのでディスアセンブラはお蔵入りとなってしまったのですが、せっかくなので置いておきます。使い方はクラスファイルの最初のほうを見てください。
» PBJDecoder.as

RunをクリックするとSource Codeに記述したコードが実行され、実行結果がOutputへ出力されます。場合によっては（というかPreset Codeでは Hello, World! 以外全て）入力待ち状態になるのでその際はInputに要求された文字列もしくは数値を入力してSendをクリックします。

Whitespace？なにそれおいしいの？
Whitespaceは簡単なプログラミング言語です。ただし見えないことを除いては。なぜならばWhitespaceのソースコードは半角スペース、タブ、改行のみで構成されているからです。それ以外の文字は全てコメントとして扱われます。

ちなみに、公式サイトに掲載されているHello Worldのソースです。なんだろうこのドヤ感。
» Hello World

スタックマシンとしての動作と文法
Whitespaceは記憶領域としてスタック、ヒープというものを使います。ASで言うならばスタックはArray、ヒープはObjectと言ったところでしょうか。スタックは値を一番上に積み上げるか、一番上から取り出すことしかできませんし、値を見るだけでもいちいち取り出さなければいけません。ヒープは任意のラベル（アドレス）に値を保存したり、保存しておいた値を取り出しすことができます。

//スタックのイメージ
stack.push(value);           //値の積み上げ
var value:int = stack.pop(); //値の取り出し

//ヒープのイメージ
heap[address] = value;         //値の保存
var value:int = heap[address]; //値の取り出し

ソースコードは処理命令の羅列となっているので、Whitespaceはソースコードの最初から順番に処理命令を読み取りながら、スタックとヒープを操作してプログラムを実行していきます。ひとつの処理命令は「IMP + コマンド + パラメータ」のセットになっています。それぞれの役割は次のようになっています。

• IMP ･･･ Instruction Modification Parameterの略で、処理命令の大まかなカテゴリを表します（AS的にはパッケージのようなものです）。
• コマンド ･･･ 処理命令の具体的な種類を表します（AS的にはメソッドのようなものです）。
• パラメータ ･･･ コマンドを実行するための引数です。コマンドによっては無い場合があります。

それぞれの具体的なコードは以下で解説されているので、心の目で見るといいと思います。
» Whitespace基礎文法最速マスター

ソースコード
こちらからダウンロードして自由に使ってください。496行目辺りからインタプリタのクラスが記述してあります。本当は正規表現でスマートにやりたかったんですけど、汚くなっちゃいました。

超マイペースでぼちぼち作っていた、AIで歩行動作を学習しようプロジェクト（１歩目、２歩目）なのですが、先日のイベントでお話したこともあり一段落したので、ひとまずトップページで正式公開することにしました。

» Earthwalker

今回のアップデートは遺伝的アルゴリズムの最適化、インターフェースの強化、そしてエディタ機能です。

今までは頑張るイモ虫君を見ているだけでしたが、これからは好きな構造の生き物を創って歩かせることができます。誰も見たことのない生き物たちが頑張って歩き方を覚えていく様子を、ほほえましく見守ってあげてください。

エディタ機能
生物の作り方をちょっと説明。真ん中の地球にマウスを持っていくとエディタ機能に入れます。その後、地球の下のほうの「HELP!」にマウスを合わせるとエディタの使い方を見ることができます。基本的には動きの軸となる関節を、棒の体で繋いであげれば完成です。左下のNODEやJOINTは身体構造をあらわしていて、それぞれ関節の数、棒の数になっています。

あまりにパーツの多い生物を作るとPCが重くなっちゃうし、たまに物理演算が崩壊して生き物が飛んでっちゃうので注意ですが、やっとコンテンツとして1ステップ進めることができたかなあ、といった感じです。

学習パラメータ
歩行動作のためのパラメータも少し変えました。
0.5秒ごとに各関節の速度が決められた数値に切り替わるようにして、それを5回繰り返します。1回関節の速度が切り替わる単位を1ステップとします。5ステップをまとめて、1回の歩行動作（＝1サイクル）とします。個体評価は3サイクルでおこないます。計測前の座標と、3サイクル経過後の座標を比べて、どれくらい進んだのかを評価値として遺伝的アルゴリズムを実行します。

左下のSTEPやCYCLEはこの値となっています。ちなみにAGEは世代数、SCOREはその世代の中での最高得点です。それぞれの生き物にくっついてる数字やグラフ表現は個人的な趣味で、中身は適当です、すみません、でも好きなんですこういうの。

今後の予定
このあとどうするかなのですが、まだノープラン。いろんな人の生き物を見れたりするビューアや、レースさせるバトル機能もおもしろそうですし、進化の系譜をまとめて図鑑にするのもいいかも。やりたいことは尽きないですけど、またマイペースに作っていきます。

今、自分が何を作りたいのか、恥ずかしながら模索中です。色々考えてはみるけど、いつも「たくさんの人に喜んでもらいたい」という結論にたどり着きます。僕にとってテクノロジーは大きなキャンバスであり、プログラムは絵筆なのかな。へっぽこプログラマな僕が言うのは何ともおこがましいのですが、音楽や文学や絵画やスポーツで世界中の人を感動させられるなら、プログラムにも何かきっとできるはず。

イベント会場でも、プロジェクタを使ってこいつを設置させてもらったのですが、多くの人に楽しんでいただき、僕が思いもかけないような生き物がたくさん生まれました。そんな生き物たちがだんだんと歩けるようになっていく様子がかわいくて、ただ感動していました（親心によるところも少なからずあると思いますが）。みなさま、どうもありがとうござました。

学習アルゴリズムというコアな技術の軸をぶらさずに、どう表現すればもっと多くの人に楽しんでもらえるのか。イモ虫君にとても勉強させてもらってます。感謝。

外部から読み込んだ画像をテクスチャとして球面上にマッピングしています。
パースはつけていません。

一応最適化ということで、頂点をなるべく重複点させないようにしています。ただし画像の端に対応する頂点が反対側の端と（極に関しては隣とも）うまくマージできずにほったらかしなので、頑張ればもうちょっと減らせると思います。

迷ったのが、多数の3次元座標を Matrix3D を使って一括投影するのに、
Utils3D.projectVectorsとMatrix3D.transformVectorsがあるということ。
前者は2次元座標に、後者は3次元座標に投影してくれる。投影後にzバッファしようと思ったら、projectVectorsは第3引数で渡したuvtのうちtに奥行きが入っているのでそれでソートしてやる。transformVectorsなら3次元座標のzを使えばよろし。

今回は球体ということで、z バッファは必要なかったので（視点と逆向きの法線ベクトルを持つポリゴンのみを描画すればよい）、drawTrianglesの第4引数であるcullingの値を適切に設定することでこっち側向いてるポリゴンだけ描画しました。

具体的にはポリゴンを形成する頂点を時計回りで指定して、球体の内側から外側に向かって面の法線ベクトルを伸ばしてます。このときcullingにTriangleCulling.NEGATIVEを設定すれば、あっち側（視点ベクトルと同じ方向）を向いてるポリゴンは描画されないのでいい感じ。球体を内側から見る場合にはTriangleCulling.POSITIVEにする。

話を戻すと、projectVectorsでもtransformVectorsでもどっちでも良かったので、両方やって速い方を使うことにしたのですけど、両者ほとんど差がない。一瞬transformVectorsのが速い気がしたんだけど多分気のせい。

やってる途中でハマったのが、projectVectorsで投影後のuvt値のうち、t値がどうしても全部1になってしまう問題。これはpsyarkさんに教えてもらって理解。多謝。

@alumican_net 全部1になるのは、第一引数のMatrix3DがProjection行ってないからではないかなー [link]

PerspectiveProjection#toMatrix3D使うと計算楽だよ [link]

Projection行ってるかどうかは、Vector3Dを変換してwが大きくなるかで分かります。もしくはMatrix3Dの4列目に0以外があるかどうか（これはあまり自信なし） [link]

普通はrawData[11]が1とかになる。z→wにするために。 [link]

Matrix3DにPerspectiveProjectionを設定しないとダメらしい。並行投影なのでその辺を端折ったのがいけなかったのか。

最後に、drawTrianglesは意外と重い、期待値が高かっただけに拍子抜け。
限定的な使い方に絞って最適化頑張って、やっとPapervision3Dに勝てるくらい。

描画する頂点を全部まとめて毎フレーム1回のdrawTrianglesに押さえてはいますが、それでも結構くる。しかも残念なことに描画頂点数というよりは、むしろ描画領域が速度に大きく影響している。見えてないポリゴンをdrawTrianglesに渡さないとか色々試してみたけど結果はほとんど変わらず（むしろVectorを作り直すのに時間が余計かかったくらい）。結局画質を落とすのが一番パフォーマンスを上げるという結果になって萎え～。

とはいえdrawTrianglesを使えば簡単にかなりトリッキーなことができるので、使いどころを考えればおもしろい表現ができるはず。まだ完全には理解してないので、もっといい最適化手法がありそう。