This lab is an introduction to Matrix Transformation
After the lab lecture, you have one week to modify the files in Lab3.zip:
The classic OpenGL pipeline had two main stages of vertex transformation, each with its own transformation matrix. These were built into the graphics hardware. These days, other transformation pipelines have become possible since transformations are done in the vertex shader. However, in this lab, as in the textbook, we will try to implement the classic pipeline.
Each vertex in the scene passes through two main stages of transformations:
- Model view transformation (translation, rotation, and scaling of objects, 3D viewing transformation)
- Projection (perspective or orthographic)
There is one global matrix internally for each of the two stage above:
- M_{modelview}
- M_{projection}
Given a 3D vertex of a polygon, P = [x, y, z, 1]^{T}, in homogeneous coordinates, applying the model view transformation matrix to it will yield a vertex in eye relative coordinates:
P’ = [x’, y’, z’, 1]^{T} = M_{modelview}*P.
By applying projection to P’, a 2D coordinate in homogeneous form is produced:
P” = [x”, y”, 1]^{T} = M_{projection}*P’.
The final coordinate [x”, y”] is in a normalized coordinate form and can be easily mapped to a location on the screen to be drawn.
Setting Up The Modelview and Projection Matrices in your shader
Since OpenGL Core Profile always uses shaders, neither the modelview nor the projection matrix is available. You have to set them up yourself. The matrices will be allocated and given their values in the main program, and they will be applied to vertices in the shader program.
To help us create and manipulate matrices in our main program we will use the matrix classes and helper functions in mat.h . Each matrix will be initialized to identity if you use the default constructor. So to create our initial modelview and projection matrices we would declare two mat4 objects like so:
let mv = new mat4(); // create a modelview matrix and set it to the identity matrix. let p = new mat4(); // create a projection matrix and set it to the identity matrix.
These two matrices can be modified either by assigning or post-multiplying transformation matrices on to them like this:
p = perspective(45.0f, aspect, 0.1f, 10.0f); // Set the projection matrix to // a perspective transformation mv = mult( mv, rotateY(45) ); // Rotate the modelview matrix by 45 degrees // around the Y axis.
As in this example, we will usually set the projection matrix p by assignment, and accumulate transformations in the modelview matrix mv by post multiplying.
You will use uniforms to send your transformations to the vertex shader and apply them to incoming vertices. Last lab you did this for colours by making vector type uniforms and for point sizes by making a float uniform. Uniforms can also be matrices.
//other declarations //... //Uniform declarations uniform mat4 mv; //declare modelview matrix in shader uniform mat4 p; //declare projection matrix in shader void main() { //other shader code //... //apply transformations to incoming points (vPosition) gl_Position = p * mv * vPosition; //other shader code //... }
To set the value of uniform shader variables you must first request their location like this:
//Global matrix variables let projLoc; let mvLoc; //In your init code // Get location of projection matrix in shader projLoc = gl.getUniformLocation(program, "p"); // Get location of modelview matrix in shader mvLoc = gl.getUniformLocation(program, "mv");
Then, you use a uniformMatrix* function with the uniform location and a local variable to set their value. Do this whenever you need to update a matrix - usually when the window is resized or right before you draw something. To set the value of our 4x4 float type matrices we will use the form uniformMatrix4fv:
//in display routine, after applying transformations to mv //and before drawing a new object: gl.uniformMatrix4fv(mvLoc, gl.FALSE, flatten(transpose(mv))); // copy mv to uniform value in shader //after calculating a new projection matrix //or as needed to achieve special effects gl.uniformMatrix4fv(projLoc, gl.FALSE, flatten(transpose(p))); // copy p to uniform value in shader
Important: Notice that we use the
flatten()
andtranspose()
functions fromMVnew.js
. You are probably used toflatten()
by now. Thetranspose()
function is necessary because most CPU oriented languages expect matrices to be in Row Major order, but your GPU and GLSL expect matrices to be in Column Major. Some Javascript math matrix libraries are written to match GLSL, butMVnew.js
is not. In a full featured OpenGL, the second argument can be set totrue
to ask for a transpose, but the OpenGL ES and WebGL standards require that argument to be false.
translate(dx, dy, dz);
Where [dx, dy, dz] is the translation vector.
The effect of calling this function is to create the translation matrix defined by the parameters [dx, dy, dz] which you should concatenate to the global model view matrix:
M_{modelview} = M_{modelview} * T(dx, dy, dz);
Where
In general, a new transformation matrix is always concatenated to the global matrix from the right. This is often called post-multiplication.
mv = mult( mv, translate(0,0,-6) ); //Translate by -6 units on z-axis
There are two forms of rotation in MVnew.js.
Form 1rotate(angle, vec3(x, y, z));
The first is similar to the only one available in classic OpenGL. It is capable of rotating by angle degrees about an arbitrary vector. However, it is often easier to rotate about only one of the major axes:
- the x-axis: vec3(1,0,0)
- the y-axis: vec3(0,1,0)
- the z-axis: vec3(0,0,1)
These simple rotations are then concatenated to produce the arbitrary rotation desired. For example:
mv = mult( mv, rotate(20,vec3(0,1,0)) ); // Rotate 20 degrees CCW around Y axis
Form 2Rotating around only one axis at a time is so common that many matrix libraries provide special functions dedicated to each axis:
rotateX(angle)
rotateY(angle)
rotateZ(angle)
In the second form, angle is the angle of counterclockwise rotation in degrees, and the axis is determined by choosing one of X, Y or Z.
The method for calling a rotation matrix is similar to translation. For example, this:
mv = mult( mv, rotateX(a) );
will have the following effect:
M_{modelview} = M_{modelview} * R_{x}(a);
Where R_{x}(a) denotes the rotation matrix about the x-axis for degree a:
Applying rotation around the y-axis or z-axis can be achieved respectively by these function calls:
mv = mult( mv, rotateY(a) ); // rotation about the y-axis mv = mult( mv, rotateZ(a) ); // rotation about the z-axis
scale(sx, sy, sz);
where sx, sy and sz are the scaling factors along each axis with respect to the local coordinate system of the model.
The scaling transformation allows a transformation matrix to change the dimensions of an object by shrinking or stretching along the major axes centered on the origin. The matrix for 3D scaling is defined as:
Example: to make the wire cube in this week's sample code three times as high, we can stretch it along the y-axis by a factor of 3 by using the following commands.
// make the y dimension 3 times larger mv = mult( mv, scale(1, 3, 1)); //Send mv to the shader gl.uniformMatrix4fv(mvLoc, gl.FALSE, flatten(transpose(mv))); // draw the cube shapes.cube.draw();
- It should be noted that the scaling is always about the origin along each dimension with the respective scaling factors. This means that if the object being scaled does not overlap the origin, it will move farther away if it is scaled up, and closer if it is scaled down.
- The effect of concatenating the resulting matrix to the global model view matrix is similar to translation and rotation.
Example: Suppose we want to rotate a cube 30 degrees and place it 5 units away from the camera for drawing. You might write the program intuitively as below:
// first rotate about the x axis by 30 degrees
mv = mult( mv, rotateX(30));
// then translate back 5
mv = mult( mv, translate(0, 0, -5));
// Copy mv to the shader
gl.uniformMatrix4fv(mvLoc, gl.FALSE, flatten(transpose(mv)));
// Draw a cube model centered at the origin
shapes.wireCube.draw();
The following figure shows the effect of these transforms:
If you run this program, you might be surprised to find that nothing appears in the picture! Think about WHY.
If we modify the program slightly as below:
// first translate back 5
mv = mult( mv, translate(0, 0, -5) );
// then rotate about the x axis by 30 degrees
mv = mult( mv, rotateX(30) );
// Copy mv to the shader
gl.uniformMatrix4fv(mvLoc, gl.FALSE, flatten(transpose(mv)));
// Draw a cube modelcentered at the origin
shapes.wireCube.draw();
The following figure shows the new result:
mat4 lookAt (vec3 eye, vec3 at, vec3 up)
The lookAt() function defines a viewing transformation
Parameters
- eye: specifies the position of the eye point
- at: specifies the position of the reference point
- up: specifies the direction of the up vector
The lookAt() function makes it easy to move both the "from" and the "to" points in a linear manner. For example, if you need to pan along the wall of a building located away from the origin and aligned along no axes in particular, you could simply take the "to" point to be one corner of the building and calculate the "from" as a constant distance from the "to" point. To pan along the building, just vary the "to" point.
M_{modelview} = M_{viewing} * M_{modeling}
What this means is that your viewing transformations must be entered into the Modelview matrix before modeling transformations.
Whichever method you use, you will almost always need to either reset the matrix to the identity matrix, or save and restore a previous matrix state. To reset to the identity matrix use code like this:
mv = mat4(); //restore mv to the identity matrix
To save and restore a matrix you can use a matrix stack. Classic OpenGL had one built in, but, like the rest of the matrix functions, it is missing in modern OpenGL varieties and must be provided by an external library. You can use any stack-like data structure that can handle your math library's matrix class. Javascript's arrays, which provide .push() and .pop() functions, are perfect.
To make a matrix stack in Javascript, write code like this:
//global modelview matrix stack
let matStack = [];
matStack.push(mv);
//Apply transforms to modelview matrix
//Draw objects
//... etc ...
//restore old modelview matrix
mv = matStack.pop();
You can store any mat4 matrix on the matrix stack so long as you remember to pop back to the correct matrices in the correct sequence.
Once you have learned Modelview transformations, the next step is to understand projection modes and viewport mapping.
The gl.viewport()
function is used to specify a viewport, or the drawable area in
your WebGL canvas. It can be cause your draws to use all or only a portion
of the canvas. It is best to call it at least as often as the canvas
changes size and only after you know the size of the canvas. In WebGL, that means it
could be in your init() function, but if you are using a variable sized
canvas it would be best to call gl.viewport()
as part of rendering.
gl.viewport(x, y, width, height)
- x, y: specify the lower left corner of the viewport in canvas coordinates.
- width, height: specify the width and height of the viewport in canvas coordinates.
Example:
// Correctly uses the size of the canvas as stored in the gl context // to set a full size viewport gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
There are two basic methods of converting 3D images into 2D ones.
Projection is handled by the M_{Projection} matrix. You do not usually concatenate to the projection matrix as you do with the modelview matrix.
ortho()
void ortho( left, right, bottom, top, near, far )
Parameters:
- left, right: Specify the coordinates for the left and right vertical clipping planes;
- bottom, top: Specify the coordinates for the bottom and top horizontal clipping planes;
- near, far: Specify the distances to the near and far depth clipping planes. Both distances must be positive.
ortho() describes an orthographic projection matrix. (left, bottom, -near) and (right, top, -near) specify the points on the near clipping plane that are mapped to the lower left and upper right corners of the window, respectively, assuming that the eye is located at (0, 0, 0). -far specifies the location of the far clipping plane. Both near and far must be positive.
The following figure approximates an orthographic (actually it is for frustum() - see below) volume and the ortho() parameters
perspective()
In old OpenGL systems, a function with the same parameters as ortho() could create perspective transformations. It was called frustum() and though it was powerful, it was not very intuitive. There is a much simpler perspective command, called perspective(). Like frustum() it generates a perspective viewing volume but only a simple one. It lacks the flexibility of frustum which can be manipulated to achieve special effects.
Parameters: fovy: Specifies the field of view angle, in degrees, in the y direction; aspect: Specifies the aspect ratio that determines the field of view in the x direction. The aspect ratio is the ratio of x (width) to y (height); zNear: Specifies the distance from the viewer to the near clipping plane (always positive); zFar: Specifies the distance from the viewer to the far clipping plane (always positive).void perspective( fovy, aspect, zNear, zFar )
perspective() specifies a viewing frustum into the world coordinate system. In general, the aspect ratio in perspective should match the aspect ratio of the associated viewport. For example, aspect=2.0 means the viewer's angle of view is twice as wide in x as it is in y. If the viewport is twice as wide as it is tall, it displays the image without distortion.
The following shows perspective viewing volume and the perspective() parameters
Start with boxes.html and boxes.js from Lab3.zip.
As written, this program draws a basic coordinate system with a green x-axis, a red y-axis, and a blue z-axis. These will be referred to in the instructions as the axes
With the initial camera settings you are looking directly down the z-axis so you will not see it.
Make the following changes. Write your answers to the questions in steps 1, 2, 4 and 10.
/5 marks
Start with robot_arm.html and robot_arm.js from Lab3.zip.
You can interact with this sample solution to see how your arm might work. Click on it and use the keys described above. I have also added some additional controls:
/5 marks