boostworthyisryantaylor

One of the major additions to the 'Graphics' API in Flash Player 10 is the 'drawTriangles' method. The syntax is as follows:

Before exploring each parameter, you need to understand why this method is such a huge addition to the Flash 'Graphics' API. Since the early days of Flash, developers have always toyed with implementations of 3D frameworks. It wasn't until the birth of AVM2 and AS3 that 3D really took off in Flash, thanks to the huge leap in performance. We have since seen the rise of a handful of many well-known and successful open-source Flash libraries such as Papervision3D, Sandy, Away3D, and Alternativa 3D. A lot of award-winning sites have resulted from these libraries and it has truly grabbed the attention of Adobe and become a major focus of Flash Player 10. The 'drawTriangles' method is one of the many additions that the Flash Player team has made to help increase the quality and performance of these open-source libraries. Having said all of that, let's begin examining the 'drawTriangles' method and its parameters.

The first parameter, verticies, is a 'Vector' containing numbers that correspond to points of triangles. If you are new to the concept of the type 'Vector' in Flash Player 10, then you need to understand that 'Vector' is simply a typed array, not a geometric vector. The 'verticies' Vector can contain an infinite amount of triangle points and should always be a factor of six (three sets of x,y points). The even indices will always contain the x values and the odd indices will always contain the y values. For instance, a single triangle could be defined as follows:

Simple enough. Now suppose that you have two triangles and they share some common verticies:

This correctly describes two triangles, however it is inefficient since is using six verticies when only four are necessary. The second parameter, incidies, allows you to specify sets of indicies in the 'verticies' Vector which make up triangles. When the 'indicies' parameter passed as a Vector rather than null, the assumption that every six indicies in the 'verticies' Vector represents a triangle is no longer made. Instead, the 'verticies' Vector is treated as a random collection of verticies and the pairs of numbers in the 'indices' Vector are treated as pairs of three which specify which verticies represent a triangle. As an example of this, the same two triangles that were described in the example above will now be described using only four points by taking advantage of the 'indicies' parameter. Note that the indicies are zero-based, so if you are having problems picturing this, mentally add one to each index to correctly relate it to the corresponding point number.

Before moving on, if you are interested in actually seeing this, the example below shows the entire process for drawing the triangles that we have described thus far.

This is great and all, but what if you want your triangles to contain bitmaps rather than just color fills? No problem - the next parameter, uvtData, is for handling UV mapping of a bitmap texture to a triangle. If you are unfamiliar with the process of UV mapping in a 3D application such as Maya, basically the top left corner of the bitmap is represented as (0, 0) and the bottom right corner is represented as (1, 1). Using this normalized coordinate system, you can specify a UV coordinate that corresponds to each vertex of a triangle. Moving forward with the example that I have been building upon, let's say that you want to map a given image to the two triangles. The triangles form a rectangle, however by default a bitmap texture is going to fill each triangle rather than properly being distributed between the two to correctly form the full rectangular image. UV mapping can be is used to correct this as seen in the example below.

Up until now, I have only been passing pairs of U and V values in the 'uvtData' Vector. The optional T value is used for calculating the distance from the eye to the texture in z space so that the renderer can correctly apply an accurate perspective of the texture in 3D. T is calculated as focalLength / (focalLength + z), where focalLength is the distance from the eye to the screen and z is th distance from the screen to the texture. The focal length should be defined as a constant value for use in all of your projections. A lower focal length will result in a more dramatically stretched perspective, so you should experiment with the value and settle on one that you feel works best for the cinematographic look that you are after. In the example that follows, I used a value of 400 and found satisfactory results. In addition to including each T value with the 'uvtData' Vector, you will need to apply each T scalar to the corresponding vertex. Here is a demonstration of the rotation of the verticies and the application of the T scalars:

Here is a screen shot of the result:

Before moving on, I also want to note that you can use a 'Shader' object for representing a Pixel Bender filter and then apply the shader to your triangles as a fill. The example below demonstrates this practice. Note that you cannot use UVT mapping with shaders; UVT support is strictly used for improving texture quality when a bitmap fill is used.

The forth and final parameter of the 'drawTriangles' method is for culling. Culling is the process of determining what triangles are visible to a camera (view point) in a 3D scene. To summarize the process, first you need to calculate the vector normal of a given triangle. This is done by finding the cross product of two of the sides. Once you have the vector normal of the triangle, you need to find the vector of the camera when pointed towards the triangle. This is simply a matter of picking a point on the triangle, then subtracting the point of the camera from that point. Once you have these two vectors, the dot product will reveal the angle between them. Examining the sign of this angle is how you determine whether or not the triangle should be visible. Fortunately, culling support is built into Flash Player 10, so if you hate math - you are off the hook. The three options that exist for the culling parameter are defined as constants of the 'flash.display.TriangleCulling' class. They are as follows:

TriangleCulling.NONE - This is the default value. When this setting is used, no culling is performed. Though this is often not desired, there are some situations in which this is necessary to correctly display an object. For instance, say you had a sphere and it's material has some transparency - meaning you can see through the triangles to some extent. In this case, you do not want to perform any culling on the object. Culling would prevent some of the triangles from being rendered and, in this case, the desired result would be to see all of the triangles.

TriangleCulling.POSITIVE - This is the more common culling method and is known as backface culling. When this approach is used, only the triangles that are facing towards the view point will be rendered. Any triangles that are pointing away from the view point will not be rendered. In the case of an object with a solid material applied, this works perfectly in rendering only what is visible to the camera.

TriangleCulling.NEGATIVE - The less common culling method, but still useful for some situations. In this case, triangles that are facing away from the view point will be rendered, while triangles that are facing the view point will not. A good example of when you would want to perform this type of culling is for an object being used for an environment map. Let's say that you have a giant cube and the camera is placed inside of it. With the right material mapped correctly to the cube, the illusion that you are in an environment will result. In order to render the internal triangles, but not the ones outside of the cube, this culling method should be used.

To see culling in action, modify the previous example by passing the 'positive' culling value as the forth parameter.

Experimenting with various angles of rotation will result in the culling of the triangles when appropriate. Note that the order of the indicies in the 'indicies' Vector directly affects the direction of the triangle's vector normal. If you ever experience undesired culling results for some triangles but not others, changing the order of the indicies will likely resolve the issues.

That concludes my foundational exploration of Flash Player 10's new 'drawTriangles' method. In the future, I will be posting some more advanced examples of how 3D frameworks can evolve from all of this.