テクスチャマッピングを理解してみる その３

前回は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)の範囲であるため、表示位置によって変更する必要が無いと思っていたことでした。でも、同じように変更する必要があるんです。