Understanding basic planar transformations, and the connection between mathematics and geometry. We'll start with two dimensions to refresh or introduce some basic mathematical principles. The plane is somewhat simpler to relate to than space, and most importantly it is easier to illustrate the mechanisms we discuss. We'll discuss basic transformation principles, and we'll see how we can use matrices to express transformations. We will also study how formulation of the matrix operations affects the connection between geometric reasoning and mathematical operations.
This is the basis for two important mechanisms in most graphical systems: current transformation matrix and matrix stack. We'll start by studying 3 basic operations in the plane: translations (parallel shifting), scaling and rotation.
Translation Translation is to move, or parallel shift, a figure. We use a simple point as a starting point. This is a simple operation that is easy to formulate mathematically. We want to move the point P1 to a new position P2. P 1=(x 1,y 1)=(3,3) P 2=(x 2,y 2)=(8,5) We see that x 2=x 1+5 y 2=y 1+2 This means that translation is defined by adding an offset in the x and y direction: tx and ty: x 2=x 1+tx y 2=y 1+ty We assume that we can move whole figures by moving all the single points. For a many-sided figure, a polygon, this means moving all the corners. Again we will use a single point as a starting point: P1.
Matrices are used for almost all computer graphics calculations, including camera manipulation and the projection of your 3D scene onto a 2D viewing window. Transformation matrix. In linear algebra, linear transformations can be represented by matrices. If is a linear transformation mapping to and is a column vector with entries, then for some matrix, called the transformation matrix of. Note that has rows and columns, whereas the transformation is from to.
P 1=(x 1,y 1)=(3,3) We 'scale' the point by multiplying it with a scaling factor in the x-direction, sx=2, and one in the y-direction, sy=3, and get P 2=(x 2,y 2)=(6,9) The relation is: x 2=x 1sx y 2=y 1sy It may seem a bit strange to say that we scale a point, since a point in a geometric sense doesn't have any area. It is better to say that we are scaling a vector.
If we consider the operation on a polygon, we see that the effect becomes a little more complicated than with translation. In addition to moving the single points, the polygon's angles and area is also changed. Note: Scaling is expressed in relation to origin. Rotation Rotation is more complicated to express and we have to use trigonometry to formulate it. P 1=(x 1,y 1)=(rcos(v 1),rsin(v 1)) P 2=(x 2,y 2)=(rcos(v 1+v 2),rsin(v 1+v 2)) We'll introduce the trigonometric formulas for the sum of two angles: sin (a+b) = cos(a)sin(b)+sin(a)cos(b) cos (a+b) = cos(a)cos(b)-sin(a)sin(b) and get: P 1=((rcos(v 1), rsin(v 1) ) P 2=(rcos(v 1)cos(v 2)-rsin(v 1)sin(v 2), rcos(v 1)sin(v 2)+rsin(v 1)cos(v 2)) We insert: x 1=rcos(v 1) y 1=rsin(v 1) in P2's coordinates: P 2=(x 2,y 2)=(x1cos(v 2)-y1sin(v 2), x1sin(v 2)+y1cos(v 2)) and we have expressed P2's coordinates with P1's coordinates and the rotation angle v.
X 2= x 1cos(v)-y 1sin(v) y 2= x 1sin(v)+y 1cos(v) Notice: Rotation is expressed relative to origin. This also means that the sides in figures that are rotated create new angles with the axes after a rotation. We assume that the positive rotation angle is counterclockwise. Matrices We now have the following set of equations that describes the three basic operations: Translation defined by tx and ty x 2=x 1+tx y 2=y 1+ty Scaling defined by sx and sy x 2=sxx 1 y 2=syy 1 Rotation defined by v x 2= x 1cos(v)-y 1sin(v) y 2= x 1sin(v)+y 1cos(v) We want to find a common way to represent the operations. We know from linear algebra that we can represent linear dependencies like these with matrices. If we take the equation sets directly we get: Translation decided by tx and ty Scaling decided by sx and sy Rotation decided by v The matrix operations multiplication and addition are described in the module:. Homogeneous coordinates The three basic operations have a little different form.
We want the same form and introduce homogeneous coordinates. This means that we write a position vector like this. Then we can write all basic operations as multiplication between a 3 x 3 matrix and a 1 x 3 vector. Translation Scaling Rotation We have a general form P2=MP1 where P1 and P2 are expressed in homogeneous coordinates.
We will not worry about the third coordinate, the number 1. We'll not try to give a geometric explanation of this.
The whole point is to standardize the mathematics in the transformations. The third coordinate stays the same in the basic transformations and, as we will se later, in combinations of them. The module discusses this subject a bit further. Geometry We'll use this common form of expression for many things. But first, lets look at some simple relations between matrices and geometry. The identity matrix An important matrix is the identity matrix.
It transforms a point to itself: P1=P2=IP1 This can be interpreted as - translation with (0,0) - rotation with 0 degrees, since cos (0)=1 and sin (0) =0 - scaling with (1,1) We will need the identity matrix in many situations. In OpenGL there is a function to specify this as the current transformation matrix.
GlLoadIdentity Later we will learn why this function is important. Mirroring We can mirror a point around the coordinate axes with matrices.
Around the y-axis, a scaling with (-1,0): Around the x-axis, a scaling with (0,-1): Shearing A special operation called shearing is a scaling along one of the axes that depends on the coordinate on the other axis, for example the x-axis depends on y. In the plane we see that the only effect from this parallel projection, is that it removes the y-coordinate. The consequence of this will always be a line along the x-axis. In space projections are more interesting. Compound operations It is nice to have a common form for the basic transformations. We get the profit when we see how we can combine geometric operations by combining matrices.
We can combine several geometric operations by multiplying the respective matrices. Before we do this, we can have a look at the advantages. They are essentially three:. Rendering speed. Typically we will be in a situation where we have to calculate coordinates for a large number of points, maybe thousands, when we represent our drawing on the screen. The coordinates for these points are changed by various reasons, and their position could be the result of a large number of geometric transformations. We want to decrease the number of calculations for every point.
Instead of multiplying every vector (point) with all of the matrices that are involved in turn, we want to multiply it with only one matrix. It works like this in OpenGL: There is always a current model matrix that all of the points are multiplied with. We will return to this later. But let us indicate the problem for now by saying that we often have figures put together by different components. The different components are combined in a way that makes their position dependant of other parts of the figure.
For example are the fingers on a robot dependant of the position of the arm they are attached to. Then it could be clever to reuse the transformations matrices several times. A practical way to do this is to have a stack of transformation matrices. This is the way it is done in OpenGL.
We can integrate the viewing transformation with the model transformation. Lets study some simple examples that illustrate the principle. Two translations We'll start with a simple example.
Let us assume that we are doing two translations on a point. Let us assume that the first translation is (2,3) and that the second is (4,6). We can of course easily from geometrical considerations establish that the result should be a translation (6,9).
If not, something has to be wrong with our reasoning. The two matrices are. We see that the result is as desired.
We achieve a matrix that realizes the compound operations by multiplying the two single matrices. We also see that in this special case we could have gotten the matrix by adding the matrices as well, but this is a special case for two translations. We also see that in this case T1T2=T2T1.
This is not surprising. It doesn't matter in what order the operations are done. However in general the matrix multiplication is not independent of the factor's order. This is a special case.
We want to examine the relation between order and matrix multiplication closer in the next example. Rotation around another point than origin We consider a triangle with the corners a (1,1), b (2,-1) and c (4,2). We want to rotate this triangle 90 degrees around one of its corners, a. We know that rotation, as we described it above, always is performed around origin. We have to make a strategy that combines several transformations. We try two strategies and then try to draw some conclusions. A strategy could be:.
Move origin to rotation corner. Rotate 90 degrees. Move origin back It is easy to put up the three matrices that realize the three operations. Move origin to the corner, a: Rotate 90 degrees: Move origin back: If we follow our reasoning we will get a matrix M=T1RT2, and we should get the desired effect by multiplying all the points in the triangle with this matrix, P2=MP1. And we can draw the result: Which is what we wanted.
Our strategy was successful. An alternative strategy could be as follows:. Move the triangle so that a ends up in origin. Rotate 90 degrees. Move the triangle back, so that a ends up in its original place Since moving the point a to the origin is the opposite of moving the origin to a, the first operation is the same as what we called T2 above. In the same way step 3, moving the triangle back, is the same as what we called T1 above. The alternative strategy becomes: M=T2RT1.
If we calculate this we get. If we use this matrix on the triangle's three points we get a solution like this: which is not what we wanted. Above we found that moving the point to origin and moving origin to the point are opposite transformations.
The same transformation matrices are a part of both strategies, but the order they are used in is different. We also saw that the first strategy with moving the origin was successful. This leads to the following formulation of a strategy to couple matrices to geometric reasoning. We can do either:. We can go through with the reasoning on the origin, and set up the matrices in the same order as we reason.
We can go through with the reasoning on the figure, and set up the matrices in the opposite order of the geometric reasoning. Normally we will use strategy 1, but some times it can be easier to reason with strategy 2. In OpenGL To understand how OpenGL's transformations work, we have to take a closer look at the concept: current transformation matrix. It means that OpenGL always multiply coordinate values in drawing commands with the current matrix, before they are processed further and eventually, after more transformations, are rendered onto the screen.
The basic drawing command in OpenGL, for plane and space respectively: glVertex2(x,y) glVertex3(x,y,z) The position vector which are described by the parameters is multiplied with the current transformation matrix, before it is processed further on its way to the screen. GlVertex is in principle the only basic drawing primitive in OpenGL.
The most simple matrix is the identity matrix, I. It doesn't do anything with the coordinates. It is set to be the current transformation matrix with glLoadIdentity OpenGL has three basic functions that make up the current transformations matrix, in addition to glLoadIdentity: glTranslate glRotate glScale When we call one of these the current transformations matrix is affected by the new transformation matrix that is multiplied with it. The example with rotation around another point than the origin, can be realized like this in OpenGL: Geometric operation OpenGL-call Current matrix M Reset the transformations glLoadIdentity M=I Translate origin to a glTranslate(1,1,0) M =IT1 Rotate glRotate(90,0,0,1) M= IT1R Translate origin back glTranslate(-1,-1,0) M= IT1RT2 We see that the rotation function has parameters that both gives the rotation and the rotation axis. The matrix stack OpenGL offers a stack (last-in-first-out-queue) of transformation matrices, and we can push matrices to this stack and we can pop from the stack when we want to. GlPushMatrix glPopMatrix This way we can keep temporary matrices (push) and get them (pop) after we have used other operations in the meantime. This strategy is very useful when drawing non-trivial figures in OpenGL (and all other graphical packages).
We will return to this in program examples, but we can indicate the use with an example. Lets look at a robot arm, with an upper arm, lower arm and three fingers: glRotate glPushMatrix glRotate glPopMatrix glPushMatrix glRotate glPopMatrix glPushMatrix glRotate Rows and columns In our reasoning so far we have described a point with a column vector, and we have written P2=MP1. As an alternative we can describe a point with a row vector and write P2=P1M Then we can write the three basic operations like this: Translation.
6.5 - Transformation Matrices The previous three lessons described the basic transformations that can be applied to models: translation, scaling, and rotation. These transformations can be combined to produce complex motion. But we need an easy and efficient way to combine these transformations.
The solution is matrices! This lesson will review the basics of matrix math and show you how to combine transformations using matrices. Matrices are used for almost all computer graphics calculations, including camera manipulation and the projection of your 3D scene onto a 2D viewing window.
Therefore, this is a critical section of material that you need to master. It is not the purpose of this tutorial to provide mathematical proofs for these concepts, but rather to give you a solid foundation in how to use matrix math to create computer graphics. If you desire a formal education in matrix math, I suggest you study the at Kahn academy, but that level of expertise is not required to master computer graphics. Matrix Basics A system of equations can be written in matrix format by separating out the coefficients of the equations from the variables. Let’s take the general equation for rotation and put it into matrix form. Please note that the x, y, and z values are our “variables” and the fn values are the “coefficients” of the equation terms.
To manipulate a graphics model for a computer graphics scene, we will create the transformation by choosing appropriate fn values and then apply the transformation to every vertex in a model. The fn values are constant for the rendering of a single frame of animation, but they typically change for the next animation frame.
The equations. F1 f4 f7 f2 f5 f8 f3 f6 f9. x y z = x' y' z' Eq1 The matrix equations presented in these tutorials can be executed by clicking on the operator symbols in the equation. Try it now by clicking on the multiplication symbol in the equation above. A new version of the equation will be displayed below the original equation, where the matrices before and after the operation symbol have been replaced by a single matrix that is the result of the operation. Matrices are multiplied as follows: each element in the result is calculated by taking the corresponding row of the left matrix and the corresponding column of the right matrix and multiplying the individual corresponding elements and then adding up the terms.
If you place your cursor over any element in the newly displayed matrix, the corresponding rows and columns that were used to calculate that term will be highlighted in the original matrices. Perhaps it would be easier to visualize these issues if the matrix contained numbers instead of symbols. Perform the matrix multiplication below by clicking on the multiplication symbol and then hover your mouse over each term of the result.
1 5 6 0 2 1 3 0 0. x y z = x' y' z' Eq2 The equation used to calculate each term is intentionally shown in the result so that you can see where each value comes from.
![Transformation matrix calculator Transformation matrix calculator](/uploads/1/2/5/4/125449009/262218159.png)
Selecting the “-” button to the right of the equation will reduce each term to its simplest calculated value. Please use this functionality throughout these tutorials to closely examine how matrices work. If you click on the equal sign in the equation, each side of the equation will be reduced to its simplest form. The “X” button to the right will remove the generated equation from the web page. Cos(angle) sin(angle) 0 -sin(angle) cos(angle) 0 0 0 1. x y z = x' y' z' Eq4 Now we come to the hard one – translation. Notice that in each of the previous examples, the transformation of each vertex component was some combination of the original x, y, and z values.
But for translation, we simply want to add a value to each component. The matrices we have used so far have no way to do this.
So we need a larger matrix. Instead of a 3 by 3 matrix, we use a 4 by 4 like this: The translation equations are. 1 0 0 0 0 1 0 0 0 0 1 0 tx ty tz 1.
x y z 1 = x' y' z' 1 Eq5 Let’s make some observations about this matrix multiplication:. The additional component of 1 at the end of the (x,y,z) column vector guarantees that the offsets (tx, ty, tz) will be unchanged. The one’s down the diagonal guarantee that the original (x,y,z) values are included in the results unchanged. The last row of the transformation matrix (0,0,0,1) guarantees that the 1 component at the end of the (x,y,z) value remains a 1 in the result. Do we really need that last row in the transformation matrix?
Could we do this? 1 0 0 0 1 0 0 0 1 tx ty tz. x y z 1 = x' y' z' Eq6 From a pure mathematical perspective, yes you can. However, our goal is to create a single, consistent format for applying a series of transformations. In addition, we need the ability to undo (or reverse) transformations, which requires that our transformation matrices be square. Therefore, the 4 th row in a transformation matrix is required. The extra value added to a vertex at the end, the trailing 1, is called the homogeneous coordinate.
The standard convention is to call this the w component. Therefore, a vertex in homogeneous coordinates looks like (x,y,z,w).
The w component is useful for more than just translation, and we will discuss those uses in future lessons. But for now, notice that the w component implements (and controls) translation. For a vertex, we always want the w component to be 1.
However, remember that a vector has a magnitude and a direction, but no location. A vector can’t be translated! When we represent a vector using homogeneous coordinates, the w value need to be zero! Since we rarely store the homogeneous component in memory to reduce memory usage, you will have to add the homogeneous component when it is needed.
Just remember:. For vertices use (x,y,z,1), which allows for scaling, rotation, and translation. For vectors use, which allows for scaling and rotation (but not translation). Putting this all together gives us the following consistent way to perform our three basic transformations: Scale. 1 0 0 0 0 cos(angle) sin(angle) 0 0 -sin(angle) cos(angle) 0 0 0 0 1.
x y z 1 = x' y' z' 1 Eq11 Rotate angle degrees about any axis defined as: Let’s derive a transformation for rotating about any axis by combining the transformations we have already created. This will give you an example of how basic transformations can be combined to form more complex transformations. If we want to rotate about an axis defined by, then we can accomplish this by performing the following sequence of transformations:. Rotate about the Z axis to place the vector in the Z-X plane.
Let’s call this new vector. Then rotate about the Y axis to place along the X axis.
Then rotate about the X axis the desired angle. Then rotate about the Y axis to place back to its original location. Then rotate about the Z axis to place back in its original location. This series of 5 rotations will provide the visual affect of rotating a model about the axis. But we don’t want to do all of the 5 transformations over and over again for each vertex. We want a single transformation that will produce the visual motion we desire. We can accomplish this by multiplying the 5 matrices together before we start rendering, and then use a single transformation matrix to perform the desired rotation.
To make this idea clear, lets perform the 5 transformations above in the order they are specified. The order is critical, because if you change the order, you will get a very different result. We need to calculate 2 angles of rotation that will get the axis of rotation aligned with the X axis. Let i be the angle in step one, j be the angle for step two, and k be the angle for step 3. And let’s use s and c to represent the sin and cosine functions. The transformation looks like this.
C(-i) s(-i) 0 0 -s(-i) c(-i) 0 0 0 0 1 0 0 0 0 1. c(-j) 0 -s(-j) 0 0 1 0 0 s(-j) 0 c(-j) 0 0 0 0 1. 1 1 0 0 0 c(k) s(k) 0 0 -s(k) c(k) 0 0 0 0 1. c(j) 0 -s(j) 0 0 1 0 0 s(j) 0 c(j) 0 0 0 0 1.
c(i) s(i) 0 0 -s(i) c(i) 0 0 0 0 1 0 0 0 0 1. x y z 1 = x' y' z' 1 Eq12 Perform the matrix multiplications in the above equation to see what the single transformation is equal to.
Note that the resulting answer is in terms of sin and cos functions because the equations do not contain specific numerical values, but in a specific instances, you would have a single 4-by-4 matrix with 16 numeric values that would perform your desired transformation. If the model you were transforming contained 10,000 vertices, reducing your complex transformations to a single 4-by-4 matrix saves a huge amount of computation. It should be noted that a rotation about an axis can be calculated using simpler equations by combining like terms in the above equations. For operations that are common, such as rotating about a specific axis, the calculations are simplified to their simplest form before programming them into algorithms. But for the general case, complex motion will be created by forming a series of 4x4 matrix transformations and combining them into a single transformation matrix. Let’s take a look at some basic properties of matrices. 2 5 4 -3.4 -4 3 8!= -4 -4 3 8.
2 5 4 -3 Eq13 From a computer graphics perspective it is easy to understand that matrix order matters. For example, physically take some object, assume it is located at the origin, and perform these transformations on it:. Move it 2 units down the X axis. Then rotate it about the Z axis by 90 degrees. Now, perform the transformations in reverse order:. Rotate the object 90 degrees about the Z axis.
Then move it 2 units down the X axis. The object ends up in a totally different place! Let’s perform these transformations in matrix format. The equation below moves an object 2 units down the x axis and then rotates 90 degrees about the Z axis. 1 0 0 0 0 1 0 0 0 0 1 0 2 0 0 1. cos(90) sin(90) 0 0 -sin(90) cos(90) 0 0 0 0 1 0 0 0 0 1. x y z 1 = x' y' z' 1 Eq15 Multiply and simplify the two equations to see that the transformations indeed are totally different!
The matrix that is closest to the (x,y,z,1) vector is the transformation that happens first. Then the transformation to the left of that, and so on.
Therefore, you must order the transformations from right to left in your calculations to get your desired order of transformations. M. M -1 = M -1.
M = I Eq18 An arbitrary 4-by-4 matrices may or may not have an inverse. However, if you create a transformation which is a combination of scaling, rotation, and/or translation, the resulting 4-by-4 matrix will always have an inverse. We will discuss how a matrix inverse is used in later lessons. Matrix math follows the same simple rules as algebra. If you have an equation, you must always perform the same operation on both sides of the equation to maintain its equality.
However, since the order of matrix multiplication matters, if you pre-multiply one side of an equation by a matrix, make sure you pre-multiply the other side of the equation by the same matrix. Consider the following equation. Matrix Conventions The fundamental issue with computer graphics transformations is their order. As we have already discussed, this correlates to the ordering of your matrix multiplications.
By convention WebGL (and the OpenGL system it was derived from) orders the transformations from right to left. This is because of the way we created the initial equations.
We started by positioning the transformation matrix to the left of the (x,y,z,w) vertex. There is another way you can perform the same multiplication. You can put the (x,y,z,w) vertex at the front of the equation, like this. X y z 1. 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 = x' y' z' 1 Eq19 Notice that the translation matrix in the above example had to move the translation values to the last row of the matrix. In fact, every transformation matrix we have discussed (except scaling) will have a different format if you post-multiply the transformations. And if you use this convention, the transformations are applied from left to right, not right to left.
The important thing is that you select a convention and use it consistently. Never mix the conventions! For this entire tutorial, we will use the WebGL/OpenGL convention of pre-multiplying the transformations times the vertices. A note of caution. It is easy to search the web and get conflicting information about graphic transformations because there are two ways to structure the transformations, pre-multiplying or post-multiplying.
![Transformation Transformation](/uploads/1/2/5/4/125449009/984980448.jpg)
OpenGL uses the pre-multiplying convention while Microsoft’s Direct3D uses the post-multiplying convention. Therefore, make sure that you understand which convention a web page is assuming so you don’t get confused by conflicting information. Glossary vector In mathematics, a vector is any ordered list of values.
In computer graphics a vector represents a direction in 3D space. Matrix The coefficients of a system of equations with the variables removed. Linear algebra The mathematical concepts and theory concerning vectors and matrices. Matrix multiplication An algorithm for multiplying two matrices to produce a single matrix. Square matrix A matrix that has the same number of rows as columns. Transformation matrix A 4x4 matrix with values in specific locations to perform a specific computer graphics operation.
Pre-multiply matrix The matrix goes on the left side of the multiplication operator. Post-multiply matrix The matrix goes on the right side of the multiplication operator. Identity matrix A square matrix with 1’s down the diagonal and zeros in all other positions. Multiplication of a matrix times an identity matrix does not change the original matrix using either pre or post multiplication. Matrix inverse A matrix that is derived from another matrix such that the multiplication of the original matrix and its inverse results in an identity matrix. A matrix inverse can be either pre or post multiplied to get an identity matrix.
Multiplying by a matrix inverse is equivalent to division in algebra.