drawTrianglesとUVマッピング #2

November 15, 2008

下のサンプルはdrawTrianglesを使って描画した矩形にテクスチャ画像を貼り付けたもの。
drawTrianglesとUVマッピングサンプルイメージ1
サンプル表示(要 Flash Player 10)

サンプルソースダウンロード

四隅の頂点を動かすと、テクスチャ画像もそれに合わせて変形する。
drawTrianglesとUVマッピングサンプルイメージ2

これには四隅とテクスチャ画像をあらかじめ関係づけておく必要がある。
オブジェクトとテクスチャの「関係づけ」がUVマッピング。

たとえ話。
布団に布団カバーをつけるときを思い出してみる。
布団カバーがテクスチャにあたる。
布団カバーの四隅や中間ポイントと、布団を結びつける。
そうすると、布団を折り曲げしても、カバーがずれない。
これは布団(オブジェクト)とカバー(テクスチャ)がひもなどで関係づけられているから。

話をFlashに戻す。
drawTrianglesでUVマッピングを実装するには次のデータが必要。


必要なデータ
1.頂点の座標データ
2.描画の順番データ
3.UVマッピング用座標データ(uv座標)


処理の流れ
1.頂点の座標データセット
描画したいのは四角形なので頂点座標データを四つ用意。
drawTrianglesイメージ3

ハンドルをドラッグしたときに四角形を変形したいので、四隅のハンドルの座標を四角形の頂点にセット。

_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ではなく比率で考える)。
drawTrianglesとUVマッピングサンプルイメージ3

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

「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を指定する。
drawTrianglesとUVマッピングサンプルイメージ5

このようにUVマッピングデータは0から1までの範囲で指定することができる。
中間ポイントを増やすには、drawTrianglesで描画する三角形の数も増やす必要がある。

三角形(ポリゴン)を細かくすればするほど、3Dイメージがリアルになっていく(そして処理が重くなっていく)。トレードオフ。

カテゴリー: 



Posted by scratchbrain at November 15, 2008 7:43 AM ブックマークに追加する

Trackback

Trackback URL for this entry:

Post a Comment


検索

このブログを検索

サイトコンセプト

レディオヘッド、Flash・ActionScript 3.0、Processing、アートに関すること。日記・雑感、読書感想など。
[SCRATCHBRAIN.NET ホーム]
[SCRATCHBRAIN プロフィール]
[お問い合わせ]
[Twitter]

リンク

  • 戦略を、カジュアルに。
  • ドット絵
  • 4コマ漫画
  • 嫁と更新。レシピ、子育て
  • バルセロナ観光ガイド
  • 洋楽ブックマーク
  • こんなライヴに行きました

広告

おすすめ

最近のエントリー

カテゴリー

タグクラウド

全てのエントリー一覧

RSSフィード

月別アーカイブ

powered by Movable Type

hosted by

あわせて読みたいブログパーツ