画像からMeshをつくってみる

動機
OLM Digital R&D » モーフィング応用による2次元アニメーション http://www.olm.co.jp/rd/n-way-morphing/

画からMeshを作ってみようかなと思いつくままにやってみた．

入力画像(背景は透明)

微分フィルタにて境界とおぼしき点を探索

参考: ハフ変換を使わない画像のエッジ角度 - 無作為研究所 http://www.faicha.com/vision/02edgea/, 他

適当な点から最近傍をつないでいく(境界の赤色の点上の緑色の線）

参考(NSArrayの高階関数を用いるソート): Safx: Objective-C上でブロックオブジェクトによる高階関数を用いてソートする方法について http://safx-dev.blogspot.jp/2010/11/objective-c.html

とにかく三角形となるように埋めて行く（青色の線が三角形の群れ）

参考: Javaゲーム制作記 任意多角形の三角形分割 http://javaappletgame.blog34.fc2.com/blog-entry-148.html, 他

縮退三角形を間に常に挟む事でとにかく書き出す

var v= [
 { x:0.207031, y:0.937500, z:0.0 },
…
 { x:0.205078, y:0.933594, z:0.0 },
];
var i= [
 2170, 2169, 2168,
 2169, 2168, 2168,  2168, 2168, 2168,  2168, 2168, 2168,  2168, 2168, 2167,
 2168, 2167, 2166,
…
 1, 2, 3210,
 2, 3210, 3210,  3210, 3210, 1,  3210, 1, 1,  1, 1, 3210,
 1, 3210, 0,
];
function (__structure v,__structure i) main ()
{
 var result = new Object();
 result.v= v;
 result.i= i;
 return result;
}

参考: 縮退三角形(Degenerate triangle)による最適化 - 強火で進め http://d.hatena.ne.jp/nakamura001/20100111/1263219309

書き出したコードをJavascriptパッチに入れてMesh Creater/Mesh Rendererに任せてみる

yone80さんのGLSL Shader(vertNoise)をかぶせてみる