→Affine Transformations as Matrices
(yet another example) |
|||
| Line 6: | Line 6: | ||
Before wading too far into the Texture waters, it's best to begin with some basic concepts: | Before wading too far into the Texture waters, it's best to begin with some basic concepts: | ||
== | == Screen Coordinates == | ||
The screen | The screen refers to what the player sees. It may go by various different names in some graphics systems (canvas, surface, etc.) but here we'll just call it the screen. The term ''Screen Coordinates'' is used to specify a point in the screen. In World of Warcraft the origin of the screen coordinates is at the lower left corner. | ||
== Texture | == Texture Coordinates == | ||
A Texture frame is used to display all or part of an image. It has an arbitrary location, size, and scale, and appears as a rectangular area on the screen with vertical and horizontal edges, just like any other frame. We'll use the term ''Texture Coordinates'' to refer to a location within the frame, where (0,0) is the lower left corner, (1,0) is the lower right corner, (0,1) is the upper left corner, and (1,1) is the upper right corner. "Texture" will always have an initial capital, for consistency with the name of the frame type in the API. Each screen coordinate within the bounds of the Texture on screen can be mapped into a Texture frame coordinate within the box from (0,0) to (1,1). | |||
== | == Image Coordinates == | ||
Texture frame elements | Texture frame elements contain images. These are generally loaded from image files located by file paths. The World of Warcraft user interface engine handles different sizes of images: the length of each side is always a power of two (64 x 64, 256 x 256, 512 x 128, etc.). We will use the term ''Image Coordinates'' to refer to locations within the contents of the image rectangle. The corners are (0,0) for the upper left, (1,0) for the upper right, (0,1) for the lower left, and (1,1) for the lower right. '''Notice that the image origin is at the <u>upper left</u>, whereas screen and texture frame origins are at the <u>lower left</u>.''' | ||
It is quite possible that a pixel logically outside the image rectangle is visible in the texture frame. To allow for this, the coordinate box from (0,0) to (1,1) containing the entire image is imagined to be extended over an infinite canvas by repeating indefinitely the first and last pixels on each row and column. This will usually give the desired effect, as the pixels at the edge are generally set to the image background colour. | |||
== An Analogy == | == An Analogy == | ||
Think of the image as a sheet of infinitely flexible rubber, with a faint set of grid lines rules on it. There's an origin, and coordinates, and the contents of the image file is printed onto the rubber between (0,0) an (1,1) and extends as far as you want in each direction. | Think of the image as a sheet of infinitely flexible rubber, with a faint set of grid lines rules on it. There's an origin, and coordinates, and the contents of the image file is printed onto the rubber between (0,0) an (1,1) and extends as far as you want in each direction. | ||
Think of the Texture frame | Think of the Texture frame as a rigid rectangular frame, with an attachment point at each of the four corners. The rubber image sheet is attached to each corner of the frame, and stretches between these points. Anything outside the edge of the frame can be ignored; what's within the edges of the frame is what you see on screen. | ||
The SetTexCoord method is used to provide the image coordinates of each of these four corner points. | The SetTexCoord method is used to provide the image coordinates of each of these four corner points. | ||
=Coordinate Transformations= | =Coordinate Transformations= | ||
==Overview== | ==Overview== | ||
The way in which the image coordinates map to Texture frame coordinates, and then onto Screen Coordinates (or vice versa) is through a series of | The way in which the image coordinates map to Texture frame coordinates, and then onto Screen Coordinates (or vice versa) is through a series of ''Affine Transformations''. These are transformations which preserve linearity (points which lay on a line before the transformation, continue to lay on a line after it) and distance ratios (the ratio of distance between two pairs of points on a line before the transformation remain the same afterwards). In the 2D world affine transformations are any combination of: | ||
* Translation ( | * Translation (moving all points in the image the same distance and direction) | ||
* Rotation ( | * Rotation (rotating all points around an origin) | ||
* Scaling ( | * Scaling (enlarging or reducing distances by the same factor in all directions) | ||
* Shearing ( | * Shearing (offsetting points parallel to a line, where the offset is proportional to the perpendicular distance from that line) | ||
==Textures and the Screen== | ==Textures and the Screen== | ||
| Line 49: | Line 48: | ||
With the inverse in hand, we can determine what the image coordinates are going to be by passing in the four corner Texture coordinate values (0,1) (0,0) (1,1) (1,0) in turn and passing the resulting set of coordinates into SetTexCoord as the UL, LL, UR, and LR image coordinates. | With the inverse in hand, we can determine what the image coordinates are going to be by passing in the four corner Texture coordinate values (0,1) (0,0) (1,1) (1,0) in turn and passing the resulting set of coordinates into SetTexCoord as the UL, LL, UR, and LR image coordinates. | ||
=The Math= | =The Math= | ||
| Line 55: | Line 53: | ||
==Overview of Matrix Multiplication== | ==Overview of Matrix Multiplication== | ||
Matrix multiplication is written as follows, for the expression b = Ta, where b is (X,Y,Z) and a is (x,y,z) you'd have; | |||
Matrix multiplication is written as follows, for the expression b = | |||
{ | <math> | ||
\begin{pmatrix} | |||
X\\ | |||
Y\\ | |||
Z | |||
\end{pmatrix} | |||
= | |||
\begin{pmatrix} | |||
X&B&C\\ | |||
D&E&F\\ | |||
G&H&I | |||
\end{pmatrix} | |||
\times | |||
\begin{pmatrix} | |||
x\\ | |||
y\\ | |||
z | |||
\end{pmatrix} | |||
</math> | |||
Which is then calculated as follows: | Which is then calculated as follows: | ||
| Line 75: | Line 83: | ||
You'll note my matrix example was a 3 dimensional coordinate, and a 3 by 3 matrix, this is because a 2 dimensional matrix isn't enough to represent an affine transformation by itself, because it cannot represent translation. The trick is to add a 'dummy' z coordinate, which ALWAYS has the value 1, and then use the following matrices: | You'll note my matrix example was a 3 dimensional coordinate, and a 3 by 3 matrix, this is because a 2 dimensional matrix isn't enough to represent an affine transformation by itself, because it cannot represent translation. The trick is to add a 'dummy' z coordinate, which ALWAYS has the value 1, and then use the following matrices: | ||
{ | <math> | ||
\begin{pmatrix} | |||
X\\ | |||
Y\\ | |||
1 | |||
\end{pmatrix} | |||
= | |||
\begin{pmatrix} | |||
A&B&C\\ | |||
D&E&F\\ | |||
0&0&1 | |||
\end{pmatrix} | |||
\times | |||
\begin{pmatrix} | |||
x\\ | |||
y\\ | |||
1 | |||
\end{pmatrix} | |||
</math> | |||
Which then yields: | Which then yields: | ||