[SOLVED] CS Computer Graphics

Computer Graphics
Jochen Lang
[email protected]
Faculte de genie | Faculty of Engineering
Jochen Lang, EECS [email protected]

This Lecture
Homogeneous Transformations and Transformations in 3D
Tomas Akenine-Moller 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 [email protected]

Reminder: Step 2 Placing the Object
Translation
Can we use another linear transform?
Jochen Lang, EECS [email protected]

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 [email protected]

Homogeneous Transformations
Trick: Add an extra dimension Example 2D:
Homogenous transform is three dimensional and linearizes translations
Jochen Lang, EECS [email protected]

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 [email protected]

Homogenization of a 2D Point
Jochen Lang, EECS [email protected]

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 [email protected]

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 [email protected]

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 [email protected]

Rotations around x,y,z
Jochen Lang, EECS [email protected]

Rotations around Arbitrary Axis
Fixed pipeline glRotate Rodriques Formula:
Jochen Lang, EECS [email protected]

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 [email protected]

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 [email protected]

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 [email protected]

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 [email protected]

Next Weeks Lectures
Coordinate and Viewing Transformations Inverse transforms
Normal transforms
Coordinate transforms
Scenegraph transforms
Viewing and canonical viewing volume
Jochen Lang, EECS [email protected]