Computer Graphics
Jochen Lang
jlang@uottawa.ca
Faculté de génie | Faculty of Engineering
Jochen Lang, EECS jlang@uOttawa.ca
This Lecture
• 2D Transformation
– Tomas Akenine-Möller et al., Chapter 4.1
– Marschner and Shirley, Chapters 6.1, 5.2-5.3
– 2D Transformation
– Translations and homogenous transforms
– Matrix composition and decomposition
– 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
Why Spatial Transformations in Graphics?
• Spatial transformations are essential in the first two steps in the rasterization pipeline.
– Modelling (mostly a pre-process) • uses model coordinates
– Geometry processing
• change to normalized device coordinates • viewport transform
Jochen Lang, EECS jlang@uOttawa.ca
Spatial Transformations to Place Objects into Images?
• Example: Triangle (2D)
Triangle
?
Image or Graphic Viewport
Jochen Lang, EECS jlang@uOttawa.ca
Graphics and Coordinate Systems
• Computer Graphics creates (synthetic) images
– Individual pixels (or objects) must be addressed
– Put a coordinate system on to the graphics window
Position:
Jochen Lang, EECS jlang@uOttawa.ca
2D Triangle Example
• Modelling
– Model coordinates
–a,b,c
• Geometric Processing
– Normalized device coordinates
–a,b,c
• Geometric Processing – Viewport transform
–a,b,c
Jochen Lang, EECS jlang@uOttawa.ca
Linear 2D Transformations
• Matrices can represent transformations • In2D:
• Choose appropriate values of a11 to a22 for 2D Scaling, 2D Shearing and 2D Rotation
– We will see later how to chose these
Jochen Lang, EECS jlang@uOttawa.ca
Step 1: Orienting and Sizing the Object
– Scaling in x and y, e.g.
– Shearing along x or along y, e.g.
– Rotation, e.g.
– After scaling, shearing and rotation:
But we also like the triangle moved!
Jochen Lang, EECS jlang@uOttawa.ca
Step 2: Placing the Object
• Translation
• Can we use another linear transform?
– We will answer this after we discussed linear transformations
Jochen Lang, EECS jlang@uOttawa.ca
2D Transformations
• Matrices can represent transformations • In2D:
• Our coordinate frame convention:
Jochen Lang, EECS jlang@uOttawa.ca
Scaling
• Halfinxandy:
Jochen Lang, EECS jlang@uOttawa.ca
Scaling
• Halfinxandy:
• with matrix on host and set as uniform
– with glMatrix in js
var uMat2 = mat2.fromValues(0.5,0.0,0.0,0.5);
– or with glm in C++
glm::mat2 uMat2 = glm::mat2(0.5f,0.0f,0.0f,0.5f); or glm::mat2 uMat2 = glm::mat2(0.5);
– in vertex shader: vec2 np = uMat2 * position; • or hardcoded in vertex shader
const mat2 cMat2 = mat2( 0.5, 0, 0, 0.5 ); or const mat2 cMat2 = mat2(0.5);
vec2 np = cMat2 * position;
Jochen Lang, EECS jlang@uOttawa.ca
Non-Uniform Scaling
• e.g.:
Jochen Lang, EECS jlang@uOttawa.ca
Shearing
• Shear in X:
Jochen Lang, EECS jlang@uOttawa.ca
Rotation Example
• How to rotate vectors?
Jochen Lang, EECS jlang@uOttawa.ca
Rotation
• Rotate vector a by
Jochen Lang, EECS jlang@uOttawa.ca
Rotation (cont’d)
Jochen Lang, EECS jlang@eecs.uOttawa.ca
Rotation Example
• Rotateby :
Jochen Lang, EECS jlang@uOttawa.ca
Rotation Example
• Rotateby :
• Use glm and a uniform
float theta = 3.1415f/180.0 * 60.0f;
glm::mat2 uMat2 = glm::mat2(cos(theta),-sin(theta),
sin(theta),cos(theta)); in vertex shader: vec2 np = uMat2 * position;
– Note: glUniformMatrix2fv has a bool argument to switch between column and row major ordering.
Jochen Lang, EECS jlang@uOttawa.ca
Composition of Transforms
• Transformations can be combined (it is just linear algebra):
Jochen Lang, EECS jlang@uOttawa.ca
Order is Important
• Matrix multiplication is associative and distributive but not commutative!
Jochen Lang, EECS jlang@uOttawa.ca
Arbitrary Matrix
– Effect of a general 2D matrix on an image • Example:
Consider the axes x, y
Jochen Lang, EECS jlang@uOttawa.ca
Decomposition of Transformation Matrices
– Transformation matrices can be combined by multiplication, e.g.,
– Can we take them apart?
• Recall Linear Algebra
– Eigenvectors and Eigenvalues
– Eigendecomposition
– Others, e.g., Singular Value Decomposition (SVD)
Jochen Lang, EECS jlang@uOttawa.ca
Review: Symmetric Matrices
– If , then has only real Eigenvalues.
– If Eigenvalues are distinct, then the Eigenvectors are
orthogonal:
– Eigenvectors are the columns of ;
– Eigenvalues are the diagonal elements in D.
Jochen Lang, EECS jlang@uOttawa.ca
Eigen Decomposition in Pictures
• Example Pictures:
Jochen Lang, EECS jlang@uOttawa.ca
Eigen Decomposition Proof
but since 𝟏 𝟐 𝒏are Eigen Vectors and write it as matrix
𝟏𝟐𝐧𝒏
𝟏𝟐𝒏
Jochen Lang, EECS jlang@uOttawa.ca
Review:
Singular Value Decomposition (SVD)
• Orthogonal matrices:
– and orthonormal if A is a square matrix
• Diagonal matrix:
Jochen Lang, EECS jlang@uOttawa.ca
Review: Relationship between Singular Values and Eigenvalues
– Assume SVD of A exists and let’s calculate a square
matrix
– apply the SVD to both matrices
𝐓𝐓𝐓𝑻
– and multiply out assuming A is square and hence U,V are orthonormal matrices
𝐓 𝐓𝐓 𝐓𝐓𝐓𝐓𝐓 𝐓𝐓𝐓 𝟐𝐓
– we have an orthonormal matrix times a diagonal matrix times an orthonormal matrix transposed, i.e., same as the unique Eigen decomposition of
𝐓𝐓𝐓𝑻𝟐𝑻
– and hence (but only in this case).
Jochen Lang, EECS jlang@uOttawa.ca
𝐓
SVD of a 2D Transformation
Random Transform A:
Jochen Lang, EECS jlang@uOttawa.ca
SVD (cont’d)
Jochen Lang, EECS jlang@eecs.uOttawa.ca
SVD in Pictures
Jochen Lang, EECS jlang@eecs.uOttawa.ca
Next 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