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

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

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

前回の第46回は,矩形を三角形に分けてビットマップで塗るいわゆる「テクスチャマッピング」について解説した。今回は,いよいよ3次元空間座標を2次元平面に透視投影して,ビットマップの面を貼ってみたい。3次元空間座標の透視投影は,第43回Vector3Dオブジェクトの座標に遠近法を適用するで学んだ。このときは,3次元空間で回転する正方形をワイヤーフレームで描いた第43回図7再掲)⁠今回は,この正方形にテクスチャマッピングしてみよう。

第43回図7 回転するワイヤーフレームの四角形にパースペクティブがかかった(再掲)

第43回図7 回転するワイヤーフレームの四角形にパースペクティブがかかった(再掲)

第43回図7 回転するワイヤーフレームの四角形にパースペクティブがかかった(再掲)

第43回図7 回転するワイヤーフレームの四角形にパースペクティブがかかった(再掲)

3次元空間で水平回転する正方形の頂点座標にテクスチャマッピングする

第43回スクリプト1「3次元空間の頂点座標から2次元平面に透視投影したワイヤーフレームを描く」フレームアクションだ。今回はこのフレームアクションに手を加える。スクリプトの解説やファイルのダウンロードは,第43回2ページをご覧いただきたい。

[ライブラリ]に納めた塗りのビットマップには,クラス「Image」を設定しておく第45回図1再掲)⁠⁠ライブラリ]のビットマップへの[クラス]の設定方法ついて詳しくは,第34回3次元空間における回転「ビットマップのインスタンスを動的に配置する」を参照してほしい。

第45回図1 塗りで使う[ライブラリ]のビットマップにクラス名「Image」を設定(再掲)

第45回図1 塗りで使う[ライブラリ]のビットマップにクラス名「Image」を設定(再掲)

それでは,第43回スクリプト1をテクスチャマッピングできるように書き替えよう。できあがるフレームアクションは,スクリプト1として後にまとめて掲げた。手を加えるスクリプトは抜き書きして順に示す。まずは,初期設定から考えよう。

加えた内容は大きくふたつある図1)⁠第1は,テクスチャとして用いるビッマップのインスタンス(myTexture)をつくることだ。第2に,Graphics.drawTriangles()メソッドに渡すVectorオブジェクトをつくった。第2引数となる分割した3角形の頂点番号の組と,第3引数のuv座標だ。そして,それらのVectorオブジェクトに初期値のエレメントを与えている。なお,第1引数の頂点座標はアニメーションさせるため,後で書直す関数(xGetVertices2D())で計算する。

var nUnit:Number = 100 / 2;
var mySprite:Sprite = new Sprite();
var myTexture:BitmapData = new Image();   // 追加: ビットマップのインスタンス生成
var vertices:Vector.<Vector3D> = new Vector.<Vector3D>();
// 追加: Graphics.drawTriangles()メソッドに渡すVectorオブジェクト
var indices:Vector.<int> = new Vector.<int>();   // 頂点番号(第2引数)
var uvData:Vector.<Number> = new Vector.<Number>();   // uv座標(第3引数)
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);
// 追加: uv座標値
uvData.push(0, 0);
uvData.push(1, 0);
uvData.push(1, 1);
uvData.push(0, 1);
addChild(mySprite);

図1 初期設定にGraphics.drawTriangles()メソッドの引数となるVectorオブジェクトを加える

図1 初期設定にGraphics.drawTriangles()メソッドの引数となるVectorオブジェクトを加える

つぎは,イベントリスナーの設定だ。ここでもふたつ書き替える。第1は,透視投影した頂点座標のデータ型だ。第43回スクリプト1ではVectorオブジェクトのベース型をPointで定めた。しかし,Graphics.drawTriangles()メソッドに渡すには,ベース型をNumberにしなければならない。第2に,描画はワイヤーフレームでなくテクスチャマッピングにするので,関数(xDraw())を新たに定める。

addEventListener(Event.ENTER_FRAME, xRotate);
function xRotate(eventObject:Event):void {
  var nRotationY:Number = mySprite.mouseX * nDeceleration;
  xTransform(vertices, nRotationY);
  // var vertices2D:Vector.<Point> = xGetVertices2D(vertices);
  var vertices2D:Vector.<Number> = xGetVertices2D(vertices);   // 変更: ベース型をNumberに
  // xDrawLines(vertices2D);
  xDraw(vertices2D);   // 変更: テクスチャマッピングの関数を呼出す
}

そして,上記の変更にもとづく関数の修正だ。3次元空間の座標を2次元平面に透視投影する関数(xGetVertices2D())は,つぎのように戻り値であるVectorオブジェクトのベース型をPointからNumberに変える。その他の実質的な中身はそのままだ。

// function xGetVertices2D(myVertices:Vector.<Vector3D>):Vector.<Point> {
function xGetVertices2D(myVertices:Vector.<Vector3D>):Vector.<Number> {
  // var vertices2D:Vector.<Point> = new Vector.<Point>();
  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(new Point(myVector3D.x, myVector3D.y));
    vertices2D.push(myVector3D.x, myVector3D.y);
  }
  return vertices2D;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入