そろそろWebGLでもやっておかないと食いっぱぐれるかなあ。
というわけで、

» WebGL Chaser (Google Chrome推奨)

マウスドラッグで視点切り替え、スペースキーでレンダリングモード切り替え。

WebGLといっても、mr.doob先生のThree.js経由です。ついでに、Three.jsを誰でも簡単に始められるようにテンプレートクラスを作っておきました。

» BasicView.js (GitHub)
» BasicView Example

今年は色々な技術や感性を磨きつつ、それらを自分自身へ落とし込めるように頑張りますわー。

» JPPEvent (GitHub)

JPPEvent/srcディレクトリにパスを通してJPPEvent.hをインクルードすればすぐに使えます。

JPPEventはAS3でいうところのEventDispatcherクラスとEventlクラスを備えていて、そのままでも使えるのですが、各クラスを適宜継承することでイベントを発行可能なカスタムクラスや、用途に応じたカスタムイベントを作ることができます。いくつかサンプルを用意したので詳しくはexampleディレクトリをご覧ください。

ちなみにアドオンのコードはoFに依存していないので、実はoFじゃなくても普通に使えます。結構久々にC++を書いているのでバグがあるかも知れませんが、そのときは報告してもらえれば頑張ります。

追記 12.01.15　サンプルコードを修正しました
addEventListener時に無意味なキャストをしていたのでシンプルに使えるよう修正しました。

現在発売中のWeb Designing（2012年1月号）にて、僕のインタビュー記事を掲載していただいています。「10人の新世代クリエイター！」という特集で、10人のU-30枠の一人として取り上げられており、どうやら相当恐れ多いことになっています。

記事中では、仕事やデザインに対する考え方について、クライアントワークや個人制作の事例を交えながらお話しさせていただいています。インタラクションをつくるということに対して、何か少しでも持って帰ってもらえると嬉しいなあと思っています。僕自身も、同世代の他の方の記事にかなり刺激を受けました。みなさん本当にすごい人ばかりです。

機会があれば手にとっていただけるとうれしいです。

（声をかけてくださったマイナビの毛利さん、A4Aの齋藤あきこさん、どうもありがとうございました）

対象物が写った複数の画像をアップロードすると、サーバサイドで対象物を三次元復元し、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画像を使うよ」っていうフラグを渡し忘れていて、えらくハマった。

» ソースコード

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

» サンプル（要FlashPlayer11）
» ソース

こちらはうまくいくようです。SoundCompleteイベントも呼ばれているようです。再生完了時に約20ミリ秒ほど再生ヘッダが最後まで進まずに止まりますが、普通にサウンドを再生したときも同様の現象が起こったので多分こんなもんなのでしょう。

アップデートの目玉であるStage3Dに関してはいろんな人が取り上げているので、ちょっと地味なSoundの新機能をちょちょいと試してます。Sound.LoadPCMFromByteArrayを使えば、ByteArrayに格納されたPCMデータからSoundインスタンスを生成できるようになります。ごにょごにょ加工したByteArrayをSoundインスタンスに変換しておくことで、SampleDataEventでサウンドを動的に生成し続けなくても、同じ音であれば低コストで繰り返し再生できるようになりますね。

以下、SoundインスタンスからByteArrayにデータを抽出して、再びSoundインスタンスに変換し直しただけのサンプルです。クリックで再生します。音量注意。

» サンプル（要FlashPlayer11）
» ソース

見てもらえれば分かりますが、再生終了時の挙動が変です（FlashPlayer11.0.1.152現在）。ちょうど、SampleDataEventでサウンドを動的生成する場合における、最後の方のサンプルデータをずっと入れ続けたような状態でしょうか。調べてみるとSound.lengthが取れておらず0のままで、SoundChannel.positionがずっと進み続けています。SoundCompleteイベントも発行されません。

･･･もうちょっと待てば改善されるかな。それともやり方間違ってるのかな。

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

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カメラを簡単に扱う

最近OpenCVとFlashの連携というものを研究していて、例えばFlashがWebカメラにアクセスしているときにOpenCVが同じWebカメラにアクセスしちゃうと、デバイスがロックされているためにアプリケーションが落ちたりして＼(^o^)／になるんですけど、それを解決してくれるソフトウェアがありました。

» WebCam Splitter ($19.95)

すでにWebカメラが起動している場合はいったんすべて終了させておきます。こいつをインストールして起動するとタスクトレイに常駐します。タスクトレイのアイコンをクリックするとWebカメラの一覧が表示されるので、取り込みたいWebカメラを選択します。成功するとWebカメラが起動し、画像のようにアイコンの目が赤くなります。

WebCam Splitterはあたかも自身がWebカメラであるかのように振舞ってくれるので、アプリケーションは普通のWebカメラに接続するように「VerySoft WebCamSplitter」に対して接続することができます。

同じようにして別ののアプリケーションからも「VerySoft WebCamSplitter」へ接続することで、同一のWebカメラの映像を複数のアプリケーションから同時に使えるようになりました。

ちなみにこのWebCam Splitterというソフト、Webカメラだけでなく動画ファイルやデスクトップのリアルタイムキャプチャもWebカメラとして取り込めるのでかなりおもしろいです。試用期限は無いみたいですが、トライアル版では一定間隔で画面がグレースケールになってテキストがかぶさってしまいます。試してないですが、他にCamSplitterというソフトもあるみたいです。