Bits & Bytes

Posts Tagged ‘adobe’

Perspective Projections in 3D with Actionscript 3.0

The most fundamental transformation in 3D graphics is the perspective transformation that projects points in 3D space onto the 2D image plane. In Actionscript, this is referred to as a Perspective Projection. This transformation is absolutely essential to creating an image from a 3D model. Most models are composed of sets of points. So, we will show how to project a single 3D point onto a 2D image. Once you know how to project a point, you can project virtually any complex object in 3D. For example, you can project a polygon by projecting each vertex, individually. Once the vertices are projected, you can connect them to create the projected polygon.

Before we get into 3D, we want to consider how we can project a point in 2D onto a 1D line segment. This will demonstrate the essence of the problem and make the 3D case much easier to understand. So, we begin with 2D plane, and we want to project it onto the x-axis or the line y = 0. Every perspective projection has a viewpoint, which represents the observer’s eye. In this case, we set the viewpoint at (0, -1) and say that we are looking down the y-axis in the direction in which y is increasing (as shown by the white arrow). Now any point in the 2D can be projected onto our 1D image line given by the x-axis. For example, the point P’ = (1.5, 2) gets projected, by triangle similarity, onto the x-axis at P” = (.5, 0), where

x” = x’*(1/(2 + 1))

= 1.5*(1/3)

= .5

In general, a point (x’, y’) is transformed to (x”, 0) by x” = x’*(1/(y’ + 1)).

This result can be further generalized by allowing the viewpoint to be anywhere on the negative y-axis. Here’s we have the viewpoint at (0, -f), and f is refered to as the focal length. Here, the point (x’, y’) is transformed to (x”, 0) by x” = x’*(f/(y’ + f)) in much the same way as before.

Unlike the x-axis, images have finite length. Here, we used the interval [-w/2, w/2] to represent a one dimensional image with its width equal to w. If we project a point to the x-axis and it falls outside of this interval, it will not show up in our image. In this case, we say that the point is clipped. However, the finite image size presents us with an opportunity to define the field of view. The field of view is the angle θ defined at the viewpoint that encompasses the image width. By trigonometry, we have tan(θ/2) = (w/2)/f. So, the focal length, f, can be written in terms of the image width, w, and field of view like this f = w/(2*tan(θ/2)).

Next, we move to three dimensions and the default case for Actionscript. In this case, our origin is positioned in the upper-left corner of our image with the positive z-axis pointing into the screen. The image width and height are given by the stage object, and we will refer to them simply as w and h, respectively. With this, we have viewpoint located in the default position at (w/2, h/2, -f). The point (w/2, h/2) defines the vanishing point of the image and is called the projection center in Actionscript. By default, the field of view is 55 degrees, and the focal length is calculated from the field of view as f = w/(2*tan(θ/2)), which follows from the fact that tan(θ/2) = w/(2*f). In 3D, the projection of the 3D point P’ = (x’, y’, z’) to P” = (x”, y”, 0) in the 2D image space defined by the xy-plane or z = 0 is accomplished with the following equations

x” = w/2 + (x’ – w/2)*(z’/(z’ + f))

y” = h/2 + (y’ – h/2)*(z’/(z’ + f))

In Actionscript, perspective transformations are accomplished by the PerspectiveProjection class, which has three members named: fieldOfView, focalLength, and projectionCenter. These properties correspond to the field of view, the focal length, and the projection center, respectively.

Keep in mind that the focal length and the field of view are not independent, but are related by the formula above. So, changing the value of one will change the other. The field of view is not used in the projection equations, but it is used as a convenient way to understand how projections work and set the focal length.

Declaring and Using Vectors in Actionscript 3.0

Actionscript allows us to use a parameterized Vector class for an array-type data structure, in addition to the Array class. Unlike an Array, a Vector can only hold one type of data item. This restriction allows a Vector to be accessed more efficiently than an Array. So, a Vector should be used whenever possible.

A Vector in Actionscript is similar to an STL vector in C++. Both are parameterized by a data type and can grow or shrink as items are added or removed. Both the Actionscript and C++ types have many different operations for manipulating the vector types. Both vectors also use the less-than and greater-than symbols to bracket the parameter type. However, the Actionscript Vector requires an additional period before the parameter, as shown in the examples below.

One-Dimensional Vectors

Function Notation

var aMyVector:Vector.<int> = Vector.<int>([1, 2, 3]);
var aMyArray:Array = Array(new Sprite());
var aMyVector:Vector.<DisplayObject> = Vector.<DisplayObject>(aMyArray);

Constructor Notation

var aMyVector:Vector.<int> = new Vector.<int>();
aMyVector.push(1, 2);
var aMyVector:Vector..<int> = new Vector.<int>(2);
var aMyVector:Vector.<int> = new Vector.<int>(2, true);
aMyVector[0] = 1;
aMyVector[1] = 2;

Multi-dimensional Vectors

Above, we have several examples of how to create a Vector. The first example uses the Vector() function to create a Vector of 3 ints with the values 1, 2, and 3. The second example uses the Vector() function to create a Vector of the base type DisplayObject from an Array of the derived type Sprite.

Using constructors, we have three examples below those; the constructor takes two parameters: an uint and a Boolean to set the size and the whether the size is fixed, respectively. Without any parameters, the constructor uses the default parameters 0 and false to create a Vector of size zero that can be resized, as we show in the first constructor notation example. In the second constructor example, we create a Vector of ints with size 2. Since we did not specify a second argument, the Vector does not have a fixed size. In the last example, we create a Vector of ints with size 2 that has a fixed size, since the second parameter is true. We use the bracket operator to fill the first and second entries with 1 and 2, respectively.

var aaMyVector:Vector.<Vector.<int>> = new Vector.<Vector.<int>>(3, true);
aaMyVector[0] = new Vector.<int>(2, true);
aaMyVector[1] = new Vector.<int>(2, true);
aaMyVector[2] = new Vector.<int>(2, true);

aaMyVector[0][0] = 1;
aaMyVector[1][0] = 2;
aaMyVector[2][0] = 3;
aaMyVector[0][1] = 4;
aaMyVector[1][1] = 5;
aaMyVector[2][1] = 6;

Just as we did for Arrays, we can create multi-dimensional Vectors recursively. We can combine any of the methods for creating one-dimensional Vectors to do this. However, we limit ourselves to one example to avoid confusion. In this example, we create a Vector of 3 int Vectors. Next we create a new Vector of ints for each entry of this Vector. Finally, we use the double bracket operator to assign each entry a value.

Declaring and Using Arrays in Actionscript 3.0

Arrays in Actionscript are extremely flexible; there are many ways to declare and assign values to an array in Actionscript. We can use functions, bracket notation, or constructors to create an Array object. We also have several ways to fill the entries of an Array object.

It is important to note that an Array in Actionscript is an object. So, an Actionscript Array is very different from say an array in C/C++. In fact, Arraysin Actionscript can hold many different types of data, which is different from arrays in most languages. However, Actionscript does also have a Vector type, which is similar to a traditional array in that, for efficiency, it is limited to holding only one type of data.

One dimensional Arrays are pretty straight-forward in how they can be declared and used. However, there are multiple methods for creating one-dimensional Arrays, which can be put together in numerous combinations to created multi-dimensional Array objects.

One-Dimensional Arrays

Function Notation

var aMyArray:Array = Array();
var aMyArray:Array = Array(3);
var aMyArray:Array = Array(qMyObject);

Bracket Notation

var aMyArray:Array = [“XoaX.net”, 17];

Contructor Notation

var aMyArray:Array = new Array();
var aMyArray:Array = new Array(3);
var aMyArray:Array = new Array(1, 2, 3);

Above, we show several methods for creating an Array. The first three examples use function notation to create an Array of 0, 3, and 1 objects, respectively. Next, we have an Array of two elements that is created via the bracket notation; notice that the Array contains elements of different types: a string and an int. Lastly, we have three Array objects that are created using constructors: the first creates an Array with 0 elements, the second an Array with three elements, and the third an Array of the three elements 1, 2, and 3.

Filling an Array

var aMyArray:Array = new Array();
aMyArray.push(80, 120, 200, 440);
var aMyArray:Array = new Array(4);
aMyArray[0] = 80;
aMyArray[1] = 120;
aMyArray[2] = 200;
aMyArray[3] = 440;

Above, we have two examples of how to declare and fill an Array with the four elements 80, 120, 200, and 400. In the first case, the push() function puts an element, or multiple elements, into an Array and extends the size of the Array. In the second case, we use the typical bracket operator [] to set the value of entries that are already allocated. There are many other functions available for removing elements, concatenating Arrays, and altering Arrays in many other different ways, as well; we will cover those later.

Multi-dimensional Arrays

var aRow1:Array = new Array(1, 2, 3);
var aRow2:Array = new Array(4, 5, 6);
var aMyArray:Array = new Array(aRow1, aRow2);
var aRow1:Array = [1, 2, 3];
var aRow2:Array = [4, 5, 6];
var aMyArray:Array = [aRow1, aRow2];
var aMyArray:Array = new Array(2);
aMyArray[0] = new Array(1, 2, 3);
aMyArray[1] = new Array(4, 5, 6);
var aMyArray:Array = new Array(2);
aMyArray[0] = [1, 2, 3];
aMyArray[1] = [4, 5, 6];
var aMyArray:Array = [ [1, 2, 3], [4, 5, 6] ];

Here, we have 5 examples of how to create a two-dimensional Array object, by combining the methods for one-dimensional Arrays. We can continue like this and create Arrays with any number of dimensions.

Categories

Recent Posts