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

前回のテクスチャマッピングを理解を深めるために簡単なツールを作成してみたい。

テクスチャで使用するのは、この猫画像

その前に、drawTriangle()の引数の中身を理解する必要がある。
function drawTriangle(g, img, vertex_list, uv_list)
vertex_listは、描画する三角形の頂点座標3つである。
uv_listは、テクスチャの頂点座標3つである。UV座標は0～1の範囲で指定する。

これを踏まえて座標を指定してみる。
第3引数のvertex_listに左上(0,0)を頂点として時計周りに三角形の頂点座標を渡す。
第4引数のuv_listにも左上(0,0)を頂点として時計周りに三角形の頂点座標を渡す。但し0～1の範囲

drawTriangle(g, img, 
	[
	 0, 0,
	 img.width, 0,
	 0, img.height
	],
	[
	 0, 0,
	 1, 0,
	 0, 1
	]
);

実行すると下記の画像が表示される

今度は反転した座標を指定する。
第3引数のvertex_listに左下(0,img.height)を頂点として反時計周りに三角形の頂点座標を渡す。
第4引数のuv_listにも左下(0,img.height)を頂点として反時計周りに三角形の頂点座標を渡す。但し0～1の範囲

drawTriangle(g, img, 
	[
	 0, img.height,
	 img.width, img.height,
	 img.width, 0,
	],
	[
	 0   , 1,
	 1   , 1,
	 1   , 0
	]
);

実行すると下記の画像が表示される

この2つの画像を組み合わせれば、正方形で表示されることになる。

参考　canvasを使って知識ゼロから独学してみた「エセ」テクスチャマッピング入門以前編

簡単なツールを作成してみました。

See the Pen
テクスチャツール by やじゅ (@yaju-the-encoder)
on CodePen.