Lecture 6 - Deriving the Transformation Matrices

We're at "Hello World" with OpenGL. We currently have code that can:

Draw simple triangles
Draw a background color
Press g to get a mesh of our object(s)

Today, our goal is to make the transformation matrices P, M, and V to create composite transforms.

We use the mat4 type to create $4 \times 4$ matrices that help:

Translate
Rotate
Scale
For example, you may have some vertex shader file like:

mat4 t1
mat4 s
mat4 ctm

int main(void)
{
	multiplyMat(s, r, ctm);
	// apply ctm
	// draw
}

This is an important topic for the rest of the quarter, so listen up.

Note

You may want to have different colors on different faces. These are defined in the simple_vert.glsl file to, where we may take in some vec4 norm vector to determine what the color of the face should be.

Looking at the Given Code

Recall that the identity matrix in $R^{4}$ is:

[\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix}]

We'll call createIdentityMat() in our C++ code to generate this matrix. For passing this to the GPU, you'll just glUnifromMatrix4fv to model what input values to give to get a matrix out of it. We'll use this idea to help send the model of the matrix, rather than just constant values themselves.

Think about:

Building "HI" letters at the origin
Then "camera" $\to$ "view" moves high back to - $z$ .

So then you'll get something like ctm1 = t1 * s1, ctm2 = t2 * s2, ... for each rectangle such that we get the words "HI" spelled out in transformed rectangles.

Note

We will NOT be moving the camera yet, but you can just translate the opposite as you want the camera to move. You can move all the objects the reverse direction, rather than move the camera. We'll get to camera movement in P4.

So then we'll get:

mat4 camTrans = trans(0,0,-3);

// then we apply camTrans to just ALL the objects
ctm1 *= camTrans;
ctm2 *= camTrans; 
// ...

Rotations

Recall that we do rotations around an axis, especially in 3D:

Notice that rotations will accidentally translate our objects. You can make it rotate around just our object's axis (which we'll see later), but keep this in mind when composing our transformations.

For L4 you'll only have a rotx or roty or rotz (ie: rotation just along the axis), but very quickly we'll try to rotate around any arbitrary axis.

Thus, it's important that you rotate before you translate. The nice thing though is that you as a graphics programmer have control of that order, so if you want to go backwards you totally can. For the assignment, it' recommended to go "rotate, scale, translate", but for this class and in general you'll want to think about the order of your transforms and how they differ.

Using glm

We'll want to use a matrix library to efficiently compute our matrices on the fly.

OpenGL Pipeline Review

Again, look at the graphics pipeline review:

Pasted image 20240123135637.png

The raster operations was just the rasterizer from P1
The fragment processor deals with a pixel with depth, in pixel coordinates. We usually haven't run the depth yet, so it's prior to that.
What's missing here is the vertex shader, which applies the matrix transformations we've talked about and gets the raw vertices/edges we needed to feed the rasterizer.

We have a more simple model as:

Single Composite Matrix

Okay we have many different matrices to combine to get the positions/colors we want. For instance:

S (x, y, z) = [\begin{matrix} s_{x} & 0 & 0 \\ 0 & s_{y} & 0 \\ 0 & 0 & s_{z} \end{matrix}]

is the scaling matrix. But translation requires us to have 4D as we can't translate in 3D matrices, so then we get:

T (x, y, z) = [\begin{matrix} 1 & 0 & 0 & t_{x} \\ 0 & 1 & 0 & t_{y} \\ 0 & 0 & 1 & t_{z} \\ 0 & 0 & 0 & 1 \end{matrix}]

Since if we multiply $(x, y, z, 1)$ by this we get $(t_{x} + x, t_{y} + y, t_{z} + z, 1)$ which is what we want.

Column Major in OpenGL

When passing an array to OpenGL to represent a matrix, we use column major format, where we count down the columns, and then move to the next row:

[\begin{matrix} 0 & 4 & 8 & 12 \\ 1 & 5 & 9 & 13 \\ 2 & 6 & 10 & 14 \\ 3 & 7 & 11 & 15 \end{matrix}]

So then we also get:

R_{x} = [\begin{matrix} 1 & 0 & 0 \\ 0 & \cos (θ) & - \sin (θ) \\ 0 & \sin (θ) & \cos (θ) \end{matrix}], R_{y} = [\begin{matrix} \cos (θ) & 0 & \sin (θ) \\ 0 & 1 & 0 \\ - \sin (θ) & 0 & \cos (θ) \end{matrix}], R_{z} = [\begin{matrix} \cos (θ) & - \sin (θ) & 0 \\ \sin (θ) & \cos (θ) & 0 \\ 0 & 0 & 1 \end{matrix}]

where remember to extend to 4D, just make the last column:

R_{x} = [\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & \cos (θ) & - \sin (θ) & 0 \\ 0 & \sin (θ) & \cos (θ) & 0 \\ 0 & 0 & 0 & 1 \end{matrix}]

and similar for the other transformations.

So to rotate about an objects own $y$ -axis:

Translate to the origin
Rotate around $y$
Translate it back

So we get the matrix $T (x, y, z) R_{y} T (- x, - y, - z)$ is the composite matrix.

Using glm

You can call glm methods either ON the GPU via glsl, or on the CPU for quick calculations via:

glm::mat4 trans1 = glm::translatevec3(t_x, t_y, t_z);