ActionScript 3.0で始めるオブジェクト指向スクリプティング

第47回 遠近法を適用した3次元空間座標へのテクスチャマッピング

この記事を読むのに必要な時間:およそ 4.5 分

最後に,テクスチャマッピングの関数(xDraw())を新たに定める。引数は,2次元平面に透視投影した座標のVectorオブジェクトだ。ワイヤーフレームを描く関数(xDrawLines)はもはや要らない。新たな関数の基本的な処理は,前回のスクリプト3のリスナー関数(xDraw())と変わらない。とくに補足は不要だろう。

/* 削除
function xDrawLines(vertices2D:Vector.<Point>):void {
  // ...[中略]...
}
*/
function xDraw(vertices2D:Vector.<Number>):void {
  myGraphics.clear();
  myGraphics.beginBitmapFill(myTexture);
  myGraphics.drawTriangles(vertices2D, indices, uvData);
  myGraphics.endFill();
}

でき上がったフレームアクションの全体は,つぎのスクリプト1のとおりだ。さほど大きな手を加えずにできたように見える。

スクリプト1 3次元空間の回転する正方形を2次元平面に透視投影してテクスチャマッピング(暫定)

// フレームアクション
var nUnit:Number = 100 / 2;
var mySprite:Sprite = new Sprite();
var myTexture:BitmapData = new Image();
var vertices:Vector.<Vector3D> = new Vector.<Vector3D>();
var indices:Vector.<int> = new Vector.<int>();
var uvData:Vector.<Number> = new Vector.<Number>();
var nDeceleration:Number = 0.3;
var myGraphics:Graphics = mySprite.graphics;
var nFocalLength:Number = transform.perspectiveProjection.focalLength;
mySprite.x = stage.stageWidth / 2;
mySprite.y = stage.stageHeight / 2;
vertices.push(new Vector3D(-nUnit, -nUnit, 0));
vertices.push(new Vector3D(nUnit, -nUnit, 0));
vertices.push(new Vector3D(nUnit, nUnit, 0));
vertices.push(new Vector3D(-nUnit, nUnit, 0));
indices.push(0, 1, 3);
indices.push(1, 2, 3);
uvData.push(0, 0);
uvData.push(1, 0);
uvData.push(1, 1);
uvData.push(0, 1);
addChild(mySprite);
addEventListener(Event.ENTER_FRAME, xRotate);
function xRotate(eventObject:Event):void {
  var nRotationY:Number = mySprite.mouseX * nDeceleration;
  xTransform(vertices, nRotationY);
  var vertices2D:Vector.<Number> = xGetVertices2D(vertices);
  xDraw(vertices2D);
}
function xTransform(myVertices:Vector.<Vector3D>, myRotation:Number):void {
  var nLength:uint = myVertices.length;
  var myMatrix3D:Matrix3D = new Matrix3D();
  myMatrix3D.prependRotation(myRotation, Vector3D.Y_AXIS);
  for (var i:int = 0; i<nLength; i++) {
    myVertices[i] = myMatrix3D.transformVector(myVertices[i]);
  }
}
function xGetVertices2D(myVertices:Vector.<Vector3D>):Vector.<Number> {
  var vertices2D:Vector.<Number> = new Vector.<Number>();
  var nLength:uint = myVertices.length;
  for (var i:uint = 0; i < nLength; i++) {
    var myVector3D:Vector3D = myVertices[i].clone();
    myVector3D.w = (nFocalLength + myVector3D.z) / nFocalLength;
    myVector3D.project();
    vertices2D.push(myVector3D.x, myVector3D.y);
  }
  return vertices2D;
}
function xDraw(vertices2D:Vector.<Number>):void {
  myGraphics.clear();
  // myGraphics.lineStyle(1, 0x0000FF);   // 確認用
  myGraphics.beginBitmapFill(myTexture);
  myGraphics.drawTriangles(vertices2D, indices, uvData);
  myGraphics.endFill();
}

テクスチャがゆがむ謎

前掲スクリプト1のキャプションに「⁠⁠暫定⁠⁠」とあるのが気になる。取りあえず,⁠ムービープレビュー]を確かめよう。マウスポインタの水平位置に応じた向きと速さで,正方形が水平に回り,ビットマップはそのかたちに合わせて塗られる。しかしよく見ると,回るときにテクスチャの真ん中当たりが上下に歪み,ペンギンが2頭身になったり4頭身になったりする図2上段⁠⁠。

図2 三角形に分割したテクスチャが回転でゆがむ

図2 三角形に分割したテクスチャが回転でゆがむ 図2 三角形に分割したテクスチャが回転でゆがむ 図2 三角形に分割したテクスチャが回転でゆがむ

図2 三角形に分割したテクスチャが回転でゆがむ 図2 三角形に分割したテクスチャが回転でゆがむ 図2 三角形に分割したテクスチャが回転でゆがむ

前掲スクリプト1の関数xDraw()内に,コメントアウトが1行ある。この確認用のGraphics.lineStyle()メソッドを有効にすると,分けた三角形の外枠が描かれ,どのように画像がゆがむのか少し見やすくなる図2下段⁠⁠。

myGraphics.lineStyle(1, 0x0000FF);   // 確認用

とくに画像中程の水平線に注目すると,三角形に分けた対角線のところが,上下にゆがんでいるとわかる。ふたつの三角形の変形に食い違いがあるようだ。ゆがみをさらにはっきりと見るため,使うビットマップを格子状の線が引かれた正方形に変えてみる。

正方形を回してゆがみを確かめると,線のつながりは保たれているものの,正方形のます目が平行四辺形になっている図3上段⁠⁠。これはつまり,テクスチャに遠近法が適用されていないことを示す。いわゆるパースペクティブがかかれば,ます目は奥に向かって狭まった台形にならなければいけないはずだ図3下段⁠⁠。

図3 テクスチャに遠近法が適用されていないと三角形の継ぎ目がゆがむ
テクスチャに遠近法の適用なし

図3 テクスチャに遠近法が適用されていないと三角形の継ぎ目がゆがむ 図3 テクスチャに遠近法が適用されていないと三角形の継ぎ目がゆがむ 図3 テクスチャに遠近法が適用されていないと三角形の継ぎ目がゆがむ

テクスチャに遠近法を適用

図3 テクスチャに遠近法が適用されていないと三角形の継ぎ目がゆがむ 図3 テクスチャに遠近法が適用されていないと三角形の継ぎ目がゆがむ 図3 テクスチャに遠近法が適用されていないと三角形の継ぎ目がゆがむ

前掲スクリプト1は,正方形の頂点座標には遠近法を適用して透視投影した。しかし,テクスチャは単に三角形の頂点に合わせて変形しただけで,遠近法つまり奥行きを考えていない。Graphics.drawTriangles()メソッドの第3引数には,uv座標に奥行きのt軸を加えたuvt座標が渡せる。そうすれば,テクスチャにも遠近法が適用される。次回はこのuvt座標について解説する。

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書