Computer Graphics
Jochen Lang
jlang@uottawa.ca
Faculté de génie | Faculty of Engineering
Jochen Lang, EECS jlang@uOttawa.ca
This Lecture
• Homogeneous Transformations and Transformations in 3D
– Tomas Akenine-Möller et al., Chapter 4.1
– Marschner and Shirley, Chapters 6.2-6.3, 5.4
– Translations and homogenous transformations
– 3D Transformation
– Self-Study: Basic linear algebra
• Your favorite notes from first year.
– On-line resources:
• http://immersivemath.com/ila/index.html
– http://chortle.ccsu.edu/vectorlessons/vectorIndex. html#10
Jochen Lang, EECS jlang@uOttawa.ca
Reminder: Step 2 – Placing the Object
• Translation
• Can we use another linear transform?
Jochen Lang, EECS jlang@uOttawa.ca
Translation
• Can we use another linear transform?
• Scaling, shearing, rotation – all leave the origin in place:
– Need a translation
– Translations can not be expressed by a matrix multiplication (there are not linear operations)
• Translation:
Jochen Lang, EECS jlang@uOttawa.ca
Homogeneous Transformations
– Trick: Add an extra dimension • Example 2D:
• Homogenous transform is three dimensional and linearizes translations
Jochen Lang, EECS jlang@uOttawa.ca
Homogeneous Coordinates
– The extra dimension is the homogenous coordinate w
– A point or direction vector may be represented in homogenous coordinates
• Points (positions) are typically encoded with w=1
• Directions are encoded with w=0 (not affected by translations)
– Homogenization gets the Cartesian Coordinates of a Point
Jochen Lang, EECS jlang@uOttawa.ca
Homogenization of a 2D Point
Jochen Lang, EECS jlang@eecs.uOttawa.ca
3D Transformations
• Extensions of 2D Transforms:
– Scale in Cartesian Coordinates – Rotate around x-axis
– Rotate around y-axis
– Rotate around z-axis
– Shear along x
– Shear along y
– Shear along z
– Translation
• But also:
– Rotation around arbitrary axis
Jochen Lang, EECS jlang@uOttawa.ca
Cartesian Scaling Matrix
– Can use glm library and vertex shader as in 2D but can also use glScale (fixed pipeline) like glm function
– Uses homogeneous coordinates
// Load identity
glm::mat4 uMat4 = glm::mat4(1.0f);
// Functions will multiply matrix from left and //
return result
uMat4 = glm::scale( uMat4,
glm::vec3(0.75f, 1.5f, 0.4f ));
Jochen Lang, EECS jlang@uOttawa.ca
Scaling in Three.js
• Three.js
var m = new THREE.Matrix4();
m.scale(0.75, 1.5, 0.4 );
• Can set Object3D.matrix
– Object3D is the base class of most scenegraph nodes
– The local matrix is stored at Object3D.matrix
var mesh = new THREE.Mesh( geometry, material
);
mesh.matrix.copy(m);
Jochen Lang, EECS jlang@uOttawa.ca
Rotations around x,y,z
Jochen Lang, EECS jlang@eecs.uOttawa.ca
Rotations around Arbitrary Axis
– Fixed pipeline glRotate • Rodriques’ Formula:
Jochen Lang, EECS jlang@uOttawa.ca
Rotations around Arbitrary Axis
– Also implemented by glm::rotate
// Load identity
glm::mat4 uMat4 = glm::mat4(1.0f);
// MV = glm::rotate(MV, , glm::vec3( ));
// glm::rotate will normalize the rotation axis // rotation angle in radians
uMat4 = glm::rotate( uMat4, 3.1415f/180.0f*37.5f,
glm::vec3(0.5f, 1.0f, 0.4f ));
Jochen Lang, EECS jlang@uOttawa.ca
Rotation in Three.js
• Rotation matrices can be set in different ways
Matrix4.makeRotationZ(angle)
Matrix4.makeRotationAxis(axis,angle)
Matrix4.makeRotationFromQuaternion(quat)
Matrix4.makeRotationFromEuler(eulerAngles)
• Equivalent Axis
– We can get the same as on the previous slide by
var axis = new THREE.Vector3(0.5, 1.0, 0.4);
var m = new THREE.Matrix4();
m.makeRotationAxis(axis,Math.PI/180.0*37.5);
Jochen Lang, EECS jlang@uOttawa.ca
Translation in 3D
• Translation in 3D is also handled with homogeneous coordinates
• with glm and a uniform
glm::mat4 uMat4 = glm::mat4(1.0f);
uMat4 = glm::translate(uMat4,
glm::vec3(0.4f, -0.2f, 0.5f)); in vertex shader: vec4 np = uMat4 * position;
• or hardcoded in vertex shader
const mat4 cMat4 = mat4( 1.0, 0, 0, 0.4, 0.0,1.0,0.0,-0.2,
0.0,0.0,1.0,0.5,
0.0,0.0,0.0,1.0);
vec4 np = cMat4 * position;
Jochen Lang, EECS jlang@uOttawa.ca
Translation in Three.js
• Making a translation matrices
Matrix4.makeTranslation(x,y,z)
• Setting the translation component of a matrix
Matrix4.setTranslation(trans)
• Example:
– We can get the same as on the previous slide by
var trans = new THREE.Vector3(0.4,-0.2,0.5);
var m = new THREE.Matrix4();
m.identity();
m.setTranslation(trans);
Jochen Lang, EECS jlang@uOttawa.ca
Next Week’s Lectures
• Coordinate and Viewing Transformations – Inverse transforms
– Normal transforms
– Coordinate transforms
– Scenegraph transforms
– Viewing and canonical viewing volume
Jochen Lang, EECS jlang@uOttawa.ca