drawTrianglesとUVマッピング #2
November 15, 2008
下のサンプルはdrawTrianglesを使って描画した矩形にテクスチャ画像を貼り付けたもの。

サンプル表示(要 Flash Player 10)
四隅の頂点を動かすと、テクスチャ画像もそれに合わせて変形する。

これには四隅とテクスチャ画像をあらかじめ関係づけておく必要がある。
オブジェクトとテクスチャの「関係づけ」がUVマッピング。
たとえ話。
布団に布団カバーをつけるときを思い出してみる。
布団カバーがテクスチャにあたる。
布団カバーの四隅や中間ポイントと、布団を結びつける。
そうすると、布団を折り曲げしても、カバーがずれない。
これは布団(オブジェクト)とカバー(テクスチャ)がひもなどで関係づけられているから。
話をFlashに戻す。
drawTrianglesでUVマッピングを実装するには次のデータが必要。
必要なデータ
1.頂点の座標データ
2.描画の順番データ
3.UVマッピング用座標データ(uv座標)
処理の流れ
1.頂点の座標データセット
描画したいのは四角形なので頂点座標データを四つ用意。

ハンドルをドラッグしたときに四角形を変形したいので、四隅のハンドルの座標を四角形の頂点にセット。
_vertices = new Vector.<Number>();
// 左上
_vertices[0] = _lt.x;
_vertices[1] = _lt.y;
// 左下
_vertices[2] = _lb.x;
_vertices[3] = _lb.y;
// 右上
_vertices[4] = _rt.x;
_vertices[5] = _rt.y;
// 右下
_vertices[6] = _rb.x;
_vertices[7] = _rb.y;
2.描画の順番データをセット
頂点の座標データはx、yをひとつのデータと考えると、次の順番にセットされている。
頂点の座標データ
0番目 左上
1番目 左下
2番目 右上
3番目 右下
正方形を描画するには三角形が2つ必要。
1つ目の三角形を描画するには、0番目、1番目、2番目(左上、左下、右上)の順に頂点を結ぶ。
2つ目の三角形を描画するには、2番目、3番目、1番目(右上、右下、左下)の順に頂点を結ぶ。
したがってindicesは次のようになる。
var indices:Vector.<int> = new Vector.<int>();
indices.push(0,1,2,2,3,1);// 描画の順番セット
3.UVマッピング用座標データをセット
テクスチャ画像の高さ、幅を1として考える(width、heightではなく比率で考える)。

UVマッピングのUVとは、xyと同じ意味合い。
テクスチャの幅を1と考えるのであれば、UVマッピングデータに使う右上の座標は( u:1, v:0)と考える。

「1.頂点の座標データ」でセットしたのと同じ順番でUVマッピング用の座標データもセットする。
_uvtData = new Vector.<Number>();
// 左上とひもづけ
_uvtData[0] = 0;
_uvtData[1] = 0;
// 左下とひもづけ
_uvtData[2] = 0;
_uvtData[3] = 1;
// 右上とひもづけ
_uvtData[4] = 1;
_uvtData[5] = 0;
// 右下とひもづけ
_uvtData[6] = 1;
_uvtData[7] = 1;
4.描画
ビットマップデータを塗りに指定して、drawTrianglesメソッドを実行。
graphics.beginBitmapFill(_img.bitmapData);
graphics.drawTriangles(_vertices,_indices,_uvtData);
今回は、布団カバーでいうところの四隅のみの設定にとどめておくので、UVマッピングデータは0か1。
たとえばオブジェクトの中間にもポイントを設ける場合は、UVマッピングデータには0.5を指定する。

このようにUVマッピングデータは0から1までの範囲で指定することができる。
中間ポイントを増やすには、drawTrianglesで描画する三角形の数も増やす必要がある。
三角形(ポリゴン)を細かくすればするほど、3Dイメージがリアルになっていく(そして処理が重くなっていく)。トレードオフ。
カテゴリー:
Trackback
Trackback URL for this entry:

















