Getting Started with 3D Methods in Flash Player 10

The XYZ-coordinate system as Player 10 sees it looks as follows:

It is a left-handed system. The x and the y axis are as they have always been. The z axis is perpendicular to the screen and points away from the observer.

The property fieldOfView that we used in our applets corresponds to the view angle as depicted below:

In all our applets, we set the value of fieldOfView explicitely. If we didn't, the value would have been set to a default perspective distortion which is calculated based on the diemensions of the Stage.

The main question is as follows. Does the value of the z-coordinate of a Display Object affect its depth? In other words, will the z-coordinate determine which objects appear in front of which? The answer is 'No'. Setting the value of 'z' does position the object in the 3D space and it does affect the way the object behaves when it is being rotated, it affects the object's perspective distortion, etc. However, changing the object's place on the Display List has to be done via setChildIndex, addChildAt, and other familiar methods that determine the object's depth. In other words, depths sorting still has to be done by hand.

Take a look at the following applet. Both images, the front and the back of the card, that is, 'bmFirst' and 'bmSecond', are visible. In the constructor of the ZCoordinate class (the class behind the applet), we set: bmFirst.z=-100, bmSecond.z=100. So bmSecond is farther away from the observer. This is reflected in its perspective distortion: the image appears smaller. However, 'bmSecond' was added to the Display List after 'bmFirst'. Thus it appears in front of 'bmFirst'.

Flash Player 10 Beta 1 version of the applet. Flash Player 10 Beta 2 version of the applet.

Here are the relevant portions of the code in the class constructor:

public function ZCoordinate(){

card=new Sprite();

addChild(card);

card.x=225;

card.y=160;

bdFirst=new Img1().bitmapData;

bmFirst=new Bitmap(bdFirst);

card.addChild(bmFirst);

bmFirst.x=-60;

bmFirst.y=-86;

bmFirst.z=-100;

bdSecond=new Img2().bitmapData;

bmSecond=new Bitmap(bdSecond);

card.addChild(bmSecond);

bmSecond.x=-30;

bmSecond.y=-46;

bmSecond.z=100;

this.transform.perspectiveProjection.fieldOfView = 60;

setUpText();

}

What is Next? In this tutorial, we only scratched the surface of 3D Flash Player 10 support by using a couple of simple properties. The number of new 3D classes and methods is vast and we will try to present them in our upcoming tutorials.

To give an overview, the whole 'flash.geom' package and the 'Graphics' class has been expanded ennormously. The Matrix3D and Vector3D classes support all possible linear algebra operations that you may want to built your 3D apps: rotations about an arbitrary axis with an arbitrary pivot point, all kinds of projections, cross product and dot product of vectors in 3D, etc. For texture mappings and drawing triangular meshes there is a sophisticated 'drawTriangles' method. The method does backface culling as well. Thus, it takes care of depth sorting for convex bodies, like a cube, when visible faces do not overlap and visibility is determined by the direction of the normal vector. We see an enormous potential in the new version of the Player. Having said that, the new features will not substitute for industrial-strength 3D engines like PaperVision3D, Alternativa3D, Away3D and Sandy3D. The new features will make creating such engines easier, though, by providing helpful tools.

Download