面の裏表の一方だけを描く―カリング
3次元空間における面の重ね順については，
では，
前掲スクリプト1は，
カリングを決めるには，
表2 TriangleCullingクラスのカリングを指定する定数
| 描画する面 | TriangleCullingクラスの定数 | 時計回りの頂点番号で描画される面 |
|---|---|---|
| 正負両面 | NONE(デフォルト) | 両面 |
| 負の方向の面 | NEGATIVE | 手前向きの面 |
| 正の方向の面 | POSITIVE | 奥向きの面 |
頂点番号を時計回りに定めたとき
スクリプト1にGraphics.
図4 カリングによって手前向きの面だけが表示される
スクリプト2 3次元空間で回転させる立方体の4面にテクスチャマッピング
// フレームアクション
var nUnit:Number = 100 / 2;
var mySprite:Sprite = new Sprite();
var myTexture:BitmapData = new Image();
var vertices:Vector.<Number> = new Vector.<Number>();
var indices:Vector.<int> = new Vector.<int>();
var uvtData:Vector.<Number> = new Vector.<Number>();
var nDeceleration:Number = 0.3;
var myGraphics:Graphics = mySprite.graphics;
var myPerspective:PerspectiveProjection = transform.perspectiveProjection;
var worldMatrix3D:Matrix3D = new Matrix3D();
var viewMatrix3D:Matrix3D = myPerspective.toMatrix3D();
viewMatrix3D.prependTranslation(0, 0, myPerspective.focalLength);
mySprite.x = stage.stageWidth / 2;
mySprite.y = stage.stageHeight / 2;
vertices.push(-nUnit, -nUnit, -nUnit);
vertices.push(nUnit, -nUnit, -nUnit);
vertices.push(nUnit, nUnit, -nUnit);
vertices.push(-nUnit, nUnit, -nUnit);
vertices.push(-nUnit, -nUnit, nUnit);
vertices.push(nUnit, -nUnit, nUnit);
vertices.push(nUnit, nUnit, nUnit);
vertices.push(-nUnit, nUnit, nUnit);
vertices.push(-nUnit, -nUnit, -nUnit);
vertices.push(-nUnit, nUnit, -nUnit);
addRectangleIndices(0, 1, 2, 3);
addRectangleIndices(1, 5, 6, 2);
addRectangleIndices(5, 4, 7, 6);
addRectangleIndices(4, 8, 9, 7);
uvtData.push(0, 0, 0);
uvtData.push(1/4, 0, 0);
uvtData.push(1/4, 1, 0);
uvtData.push(0, 1, 0);
uvtData.push(3/4, 0, 0);
uvtData.push(2/4, 0, 0);
uvtData.push(2/4, 1, 0);
uvtData.push(3/4, 1, 0);
uvtData.push(1, 0, 0);
uvtData.push(1, 1, 0);
addChild(mySprite);
addEventListener(Event.ENTER_FRAME, xRotate);
function xRotate(eventObject:Event):void {
var nRotationY:Number = mySprite.mouseX * nDeceleration;
var vertices2D:Vector.<Number> = new Vector.<Number>();
xTransform(vertices2D, nRotationY);
xDraw(vertices2D);
}
function xTransform(vertices2D:Vector.<Number>, myRotation:Number):void {
worldMatrix3D.prependRotation(myRotation, Vector3D.Y_AXIS);
var myMatrix3D:Matrix3D = worldMatrix3D.clone();
myMatrix3D.append(viewMatrix3D);
Utils3D.projectVectors(myMatrix3D, vertices, vertices2D, uvtData);
}
function xDraw(vertices2D:Vector.<Number>):void {
myGraphics.clear();
myGraphics.beginBitmapFill(myTexture);
// myGraphics.drawTriangles(vertices2D, indices, uvtData);
myGraphics.drawTriangles(vertices2D, indices, uvtData, TriangleCulling.NEGATIVE);
myGraphics.endFill();
}
function addRectangleIndices(n0:uint, n1:uint, n2:uint, n3:uint):void {
indices.push(n0, n1, n3);
indices.push(n1, n2, n3);
}
次回はこのスクリプト2に垂直の回転を加える。そうなると，
- ※2
- 立方体の6面すべてをテクスチャでくるんだ場合なら，
内側の面つまり裏面は見えない （見えるのは手前の最大3面）。したがって， カリングで済ませられる。次回は， あえて内側が見える立体を扱うことになる。
今回解説した次のサンプルファイルがダウンロードできます。
- スクリプト2のサンプルファイル
（CS5形式/約115KB）
