読者です 読者をやめる 読者になる 読者になる

デジタル・デザイン・ラボラトリーな日々

アラフィフプログラマーが数学と物理を基礎からやり直す

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

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

テクスチャで使用するのは、この猫画像
f:id:Yaju3D:20130223142237j:plain

その前に、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
	]
);

実行すると下記の画像が表示される
f:id:Yaju3D:20130223144016j:plain

今度は反転した座標を指定する。
第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
	]
);

実行すると下記の画像が表示される
f:id:Yaju3D:20130223144045j:plain


この2つの画像を組み合わせれば、正方形で表示されることになる。
f:id:Yaju3D:20130223142237j:plain

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

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