「ドロネー三角分割でWEBカメラ表示」高速化
先般 wonderfl に s26 さんが投稿したドロネー三角分割でWEBカメラ表示が激萌えなんですが、速度が激萎えなんです。
コードを拝見してみたら、なんか C 言語のコードを ActionScript に直訳したような記述。
自前でゼロから書かなくても、Actionscript の既存クラスメソッドが使えるなぁ、とか、過去、先達が高速化のために使わない方がよいと言ってたメソッドを使ってるなぁ、とか、いろいろあったので、今現在持てるテクニックを導入して、コードを書き換えてみます。
それがコレ↓
forked from: ドロネー三角分割でWEBカメラ表示 – wonderfl build flash online
コードの中身を拝見すると、ウェブカメラの映像に以下の3つの画像処理を施していました。
- グレイスケール
- 減色
- エッジ検出
そして、エッジとして検出された座標はすべてドロネー母点になり得るものです。しかしすべてをドロネー母点にしていると、とてもじゃないが重くて動かないので、適当に間引く、という処理がなされています。
私はこの部分をスライダーで調節できるようにしてみました。スライダーを右に動かすと、速いけど荒い、左に動かすと、遅いけど細かい、という風になります。
そうして選別したドロネー母点の集合を、nicoptere さんによる wonderfl の投稿 delaunay triangulation にある Delaunay クラスに投げています。
しかしオリジナルの Delaunay クラスでは三角形の辺を描画するだけなので、そのままでは使えません。
Delaunay#render では描画する三角形の頂点を判別しているので、この頂点から三角形の重心を求め、カメラ映像のその座標の色を引っぱってきて、三角形全体をその色で塗りつぶす、という修正が加えられています。
これらのアルゴリズムを ActionScript の文法で置き換えたものが、今回投稿したコードです。
ちなみに上にあげた画像処理に加え、一番最初に平滑化も施しました。
それぞれの画像処理については、私の過去のブログエントリーを参照いただければ幸いです。
- 平滑化
- グレイスケール
- 減色
- エッジ検出
もう一点触れておくと、エッジ検出は上の「エッジ検出(4) ラプラシアン」で解説した手法によるものです。
これは2次微分を使ったもので、コードとしては ConvolutionFilter で実現します。
s26 さんの考え方だと ConvolutionFilter の matrix パラメータは以下のようになります。
private const MATRIX:Array = [ -1, -1, -1, -1, 8, -1, -1, -1, -1 ];
私は下記の matrix パラメータを用いました・
private const MATRIX:Array = [ 0, 1, 0, 1, -4, 1, 0, 1, 0 ];
どっちでも基本的には変わらないんだろうと思いますが、なんとなくこっちの方が速いように感じました。
Comments
Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!