前回は2枚の三角形を使用して画像を表示したのですが、画面を波のように揺らすといった複雑な表現をしたい場合、1枚の画像を細かく分割する必要があります。
多数の正方形などに分割したものをメッシュといいます。
今回は、5分割の計25枚に分割してみます。
前回のdrawTriangle()をそのまま使用します。
function drawTriangle(g, img, vertex_list, uv_list)
vertex_listは、描画する三角形の頂点座標3つである。
uv_listは、テクスチャの頂点座標3つである。UV座標は0~1の範囲で指定する。
今回は分かりやすいように、わざと半分の三角形だけ描画します。
コメントアウトを外せば、正方形で描画されます。
var m = 5; var wx = img.width / m; var wy = img.height / m; for(var i=0; i<m; i++){ for(var j=0; j<m; j++){ drawTriangle(g, img, [ i*wx, j*wy, (i+1)*wx, j*wy, i*wx, (j+1)*wy ], [ i/m, j/m, (i+1)/m, j/m, i/m, (j+1)/m ] ); /* 半分だけ表示するため、わざとコメントアウト drawTriangle(g, img, [ i*wx, (j+1)*wy, (i+1)*wx, (j+1)*wy, (i+1)*wx, j*wy, ], [ i/m, (j+1)/m, (i+1)/m, (j+1)/m, (i+1)/m, j/m, ] ); */ } }
自分が勘違いしていたのは、uv_listの座標は(0-1)の範囲であるため、表示位置によって変更する必要が無いと思っていたことでした。でも、同じように変更する必要があるんです。