INTRODUCTION TO COMPUTER GRAPHICS Geometric Transformations 2D and 3D Andries van Dam 1 How do we use Geometric Transformations? (1/2) Objects in a scene are a collection of points… These objects have location, orientation, size Corresponds to transformations, Translation (푻), Rotation (푹), and Scaling (푺) 2 How do we use Geometric Transformations? (2/2) A scene has a camera/view point from which the scene is viewed The camera has some location and some orientation in 3-space … These correspond to Translation and Rotation transformations Need other types of viewing transformations as well - learn about them shortly 3 Some Linear Algebra Concepts... 3D Coordinate geometry Vectors in 2 space and 3 space Dot product and cross product – definitions and uses Vector and matrix notation and algebra Identity Matrix Multiplicative associativity E.g. A(BC) = (AB)C Matrix transpose and inverse – definition, use, and calculation Homogeneous coordinates (푥, 푦, 푧, 풘) You will need to understand these concepts! 4 Linear Transformations (1/3) We represent vectors as bold-italic letters (풗) and scalars as just italicized letters (c) Any vector in plane can be defined as b addition of two non-collinear basis vectors in the plane a 풗 = a + b Recall that a basis is a set of vectors with the following two properties: The vectors are linearly independent Any vector in the vector space can be generated by a linear combination of the basis vectors Scalar constants can be used to adjust magnitude and direction of resultant vector 5 Linear Transformations (2/3) Definition of a linear function, f: f 풗 + 풘 = f 풗 + f(풘) where domain and co-domain of f are identical function of a vector addition is equivalent to addition of function applied to each of the vectors f 푐풗 = 푐f 풗 function of a scalar multiplication with a vector is scalar multiplied by function applied to vector Both of these properties must be satisfied in order for f to be a linear operator 6 Linear Transformations (3/3) Graphical Use: transformations of points around the origin (leaves the origin invariant) These include Scaling and Rotations (but not translation), Translation is not a linear function (moves the origin) Any linear transformation of a point will result in another point in the same coordinate system, transformed about the origin 7 Linear Transformations as Matrices (1/2) Linear Transformations can be represented as non-singular (invertible) matrices Let’s start with 2D transformations: 푎 푏 푻 = 푐 푑 The matrix 푻 can also be written as: 푎 푏 푻 푒1 푻 푒2 , where 푻 푒1 = , 푻 푒2 = 푐 푑 Where 푒1 and 푒2 are the standard unit basis vectors along the x and y vectors: 1 0 푒1 = , 푒2 = 0 1 Why is this important? This means we can compute the columns of a transformation matrix one by one by determining how our transformation effects each of the standard unit vectors. Thus 푻 푎 “sends 푒1 to = “ 푐 Use this strategy to derive transformation matrices 8 Linear Transformations as Matrices (2/2) 푥 A transformation of an arbitrary column vector 푦 has form: 푥 푎 푏 푥 푻 = 푦 푐 푑 푦 1 푥 1 푎 푏 1 푎 Let’s substitute for : 푻 = = 0 푦 0 푐 푑 0 푐 1 transformation applied to is 1st column of 푻 0 0 푥 0 푎 푏 0 푏 Now substitute for : 푻 = = 1 푦 1 푐 푑 1 푑 0 transformation applied to is 2nd column of 푻 1 9 Scaling in 2D (1/2) Scale 푥 by 3, 푦 by 2 (Sx = 3, Sy = 2) Side effect: House shifts 푥 푥′ position relative to origin 풗 = (original vertex); 풗’ = (new vertex) 푦 푦′ 풗’ = 푺 풗 Derive 푺 by determining how 푒1 and 푒2 6 9 should be transformed 2 2 1 푠푥 2 3 푒1 = 푠 * 푒1 = (Scale in X by 푠 ) , the 1 0 푥 0 푥 1 first column of 푺 0 0 푒2 = 푠 * 푒2 = (Scale in Y by 푠 ), the 1 푦 푠푦 푦 second column of 푺 푠푥 0 Thus we obtain 푺: 0 푠푦 10 Scaling in 2D (2/2) 푺 is a diagonal matrix - can confirm our Other properties of scaling: derivation by simply looking at does not preserve lengths in objects properties of diagonal matrices: does not preserve angles between parts 푎 0 푥 푎푥 of objects (except when scaling is 푫풗 = 푦 = 푏푦 = 풗’ 0 푏 uniform,푠푥 = 푠푦) where 푫 is some diagonal matrix if not at origin, translates house relative 푡ℎ 푡ℎ 푖 entry of 풗’ = (푖 entry along to origin– often not desired… 푡ℎ diagonal of 푫 ∗ 푖 entry of 풗 ) 푺 multiplies each coordinate of a 풗 by scaling factors (푠푥, 푠푦) specified by the entries along the diagonal, as expected 푠푥 = 푎, 푠푦 = 푏 11 Rotation in 2D (1/2) Rotate by 휃 about origin 풗’ = 푺 풗 where 푥 풗 = 푦 (original vertex) 푥′ 풗’= (new vertex) 푦′ Derive 푹Ө by determining how 푒1 and 푒2 should be transformed 1 cosӨ 푒1 = , first column of 푹 0 sinӨ Ө 0 −sinӨ 푒2 = , second column of 푹 1 cosӨ Ө cos 휃 −푠푖푛휃 Thus we obtain 푹 : Ө 푠푖푛휃 푐표푠휃 12 Rotation in 2D (2/2) Let’s try matrix-vector multiplication cos 휃 −푠푖푛휃 푥 x cos Ө – y sin Ө 푥′ 푹 ∗ 풗 = = = = 풗’ 휃 푠푖푛휃 푐표푠휃 푦 x sin Ө + y cos Ө 푦′ 푥′ = 푥 cos 휃 − 푦 sin 휃 푦′ = 푥 sin 휃 + 푦 cos 휃 Other properties of rotation: preserves lengths in objects, and angles between parts of objects rotation is rigid-body for objects not at the origin, again a translation may be unwanted (i.e., this rotates about origin, not about house’s center of rotation) 13 What about translation? Translation not a linear If we could treat all transformations transformation (not centered about in a consistent manner, i.e., with origin) matrix representation, then could Can’t be represented as a 2x2 combine transformations by invertible matrix … composing their matrices Question: Is there another solution? Let’s try using a Matrix again Answer: Yes, 풗′ = 풗 + 풕, where How? Homogeneous Coordinates: 푑푥 add an additional dimension, the w- 풕 = 푑푦 axis, and an extra coordinate, the w- Addition for translation – this is component inconsistent thus 2D -> 3D (effectively the hyperspace for embedding 2D space) 14 Homogeneous Coordinates (1/3) Allows expression of all three 2D transformations as 3x3 matrices We start with the point 푃2푑 on the 푥푦 plane and apply a mapping to bring it to the 푤-plane in hyperspace 푃2푑 푥, 푦 → 푃ℎ 푤푥, 푤푦, 푤 , 푤 ≠ 0 The resulting (푥’, 푦’) coordinates in our new point 푃ℎ are different from the original (푥, 푦) , where 푥’ = 푤푥, 푦’ = 푤푦 ′ ′ 푃ℎ 푥 , 푦 , 푤 , 푤 ≠ 0 15 Homogeneous Coordinates (2/3) Once we have this point we can apply a homogenized version of our transformation matrices (next slides) to it to get a new point in hyperspace Finally, want to obtain resulting point in 2D-space again so perform a reverse of previous mapping (divide all entries by 푤) This converts our point in hyperspace to a corresponding point in 2D space 푥′ 푦′ 푃2푑 푥, 푦 = 푃2푑 , 푥푤 푤 The vertex 풗 = is now represented 푥 푦 as 풗 = 푦 1 16 Homogeneous Coordinates (3/3) Make transformations map points in hyperplane to another point in hyperplane. Transformations applied to a point in the hyperplane will always yield a result also in the same hyperplane (mathematical closure) 푥 푥′ Transformation 푻 applied to 풗 = 푦 maps to 풗′ = 푦′ 1 1 How do we apply this to our transformation matrices? For linear transformations, maintain 2x2 sub-matrix, expand the matrix as follows, where for 2D transformations, the upper left submatrix is the embedding of either the scale or the rotation matrix derived earlier: 푎 푏 0 푐 푑 0 0 0 1 17 Back to Translation Our translation matrix (푻) can now be represented by embedding the translation vector in the rightcolumn at the top as: 1 0 푑푥 0 1 푑푦 0 0 1 푥 Try it - multiply it by our homogenized vertex 푦 1 1 0 푑푥 푥 푥 + 푑푥 푻 풗 = 0 1 푑푦 푦 = 푦 + 푑푦 = 풗’ 0 0 1 1 1 Coordinates have been translated, 풗’ still homogeneous 18 Transformations Homogenized Translation uses a 3x3 Matrix, but Scaling and Rotation are 2x2 Matrices Let’s homogenize! Doesn’t affect linearity property of scaling and rotation Our new transformation matrices look like this… Transformation Matrix Scaling 푠푥 0 0 0 푠푦 0 0 0 1 Rotation cos휃 −푠푖푛휃 0 푠푖푛휃 푐표푠휃 0 0 0 1 1 0 푑푥 Translation 0 1 푑푦 0 0 1 Note: These 3 transformations are called affine transformations 19 Examples Scaling: Scale by 15 in the 푥 direction, 17 in the 푦 15 0 0 0 17 0 0 0 1 Rotation: Rotate by 123° cos(123) −sin (123) 0 sin (123) cos (123) 0 0 0 1 Translation: Translate by -16 in the 푥, +18 in the 푦 1 0 −16 0 1 18 0 0 1 20 Before we continue! Vectors vs. Points Up until now, we’ve only used the notion of a point in our 2D space We now present a distinction between points and vectors We used Homogeneous coordinates to more conveniently represent translation; hence points are represented as (x, y, 1)T A vector can be rotated/scaled, not translated (always starts at origin), don’t use the Homogeneous coordinate, (x, y, 0)T For now, let’s focus on just our points (typically vertices) 21 Inverses How do we find the inverse of a transformation? Take the inverse of the transformation matrix (thanks to homogenization, they’re all invertible!): Transformation Matrix Inverse Does it make sense? 1/푠푥 0 0 If you scale something by factor X, the Scaling inverse is scaling by 1/X 0 1/푠 0 푦 0 0 1 cos휃 푠푖푛휃 0 Not so obvious, but can use math! Rotation −푠푖푛휃 푐표푠휃 0 Rotation Matrix is orthonormal, so inverse should just be the transpose 0 0 1 1 0 −푑푥 If you translate by X, the inverse is Translation 0 1 −푑푦 translating by -X 0 0 1 22 Composition of Transformations (2D) (1/2) We now have a number of tools at our disposal, we can combine them! An object in a scene uses many transformations in sequence, how do we represent this in terms of functions? Transformation is a function; by associativity we can compose functions: (푓 ° 푔) 푖 This is the same as first applying 푔 to some input 푖 and then applying 푓: (푓(푔(푖))) Consider our functions 푓 and 푔 as matrices (푀1 and 푀2 respectively) and our input as a vector (풗) Our composition is equivalent to 푀1푀2푣 23 Composition of Transformations (2D) (2/2) We can now form compositions of transformation matrices to form a more complex transformation For example, 푻푹푺풗, which scales point, then rotates, then translates: 1 0 푑푥 cos휃 −푠푖푛휃 0 s푥 0 0 푥 0 1 푑푦 푠푖푛휃 푐표푠휃 0 0 s푦 0 푦 0 0 1 0 0 1 0 0 1 1 Note that we apply the matrices in sequence right to left, but practically, given associativity, we can compose them and apply the composite to all the vertices in, say, a mesh.