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. Important: Order Matters! Matrix Multiplication is not commutative. Be sure to check out the Transformation Game at http://www.cs.brown.edu/exploratories/freeSoftware/repository/edu/brown/cs/explor atories/applets/transformationGame/transformation_game_guide.html Let’s see an example…
24 Not commutative
6 Translate by 5 4 푥=6, 푦=0 then 3 2 rotate by 45º 1 0 1 2 3 4 5 6 7 8 9 10
Y 6 5 Rotate by 45º 4 3 then translate 2 1
by 푥=6, 푦=0 0 1 2 3 4 5 6 7 8 9 10 X
25 Composition (an example) (2D) (1/2) Start: Goal: Rotate 90° Uniform Scale 3x Both around object’s center, not the origin
Important concept: Make the problem simpler Translate object to origin first, scale , rotate, and translate back: 1 0 3 cos90 −푠푖푛90 0 3 0 0 1 0 −3 푻−ퟏ푹푺푻 = 0 1 3 푠푖푛90 푐표푠90 0 0 3 0 0 1 −3 0 0 1 0 0 1 0 0 1 0 0 1 Apply to all vertices
26
Composition (an example) (2D) (2/2)
푻−ퟏ푹푺푻 But what if we mixed up the order? Let’s try 푹푻−ퟏ푺푻 cos90 −푠푖푛90 0 1 0 3 3 0 0 1 0 −3 푠푖푛90 푐표푠90 0 0 1 3 0 3 0 0 1 −3 0 0 1 0 0 1 0 0 1 0 0 1
Oops! We managed to scale it properly but when we rotated it we rotated the object about the origin, not its own center, shifting its position…Order Matters!
27 Inverses Revisited What is the inverse of a sequence of transformations? −ퟏ −ퟏ −ퟏ 푴ퟏ푴ퟐ … 푴풏 = 푴풏 푴풏−ퟏ … 푴ퟏ Inverse of a sequence of transformations is the composition of the inverses of each transformation in reverse order
Say we want to do the opposite transform of the example on Slide 26, what will our sequence look like? −ퟏ 푻−ퟏ푹푺푻 = 푻−ퟏ푺−ퟏ푹−ퟏ푻 1 0 3 1/3 0 0 cos90 푠푖푛90 0 1 0 −3 0 1 3 0 1/3 0 −푠푖푛90 푐표푠90 0 0 1 −3 0 0 1 0 0 1 0 0 1 0 0 1 We still translate to origin first, then translate back at the end!
28
Dimension++ (3D!)
How should we treat geometric transformations in 3D? Just add one more coordinate/axis!
푥 A point is represented as 푦 푧 A matrix for a linear transformation 푻 can be represented as 0 푻(푒1) 푻(푒2) 푻(푒3) where 푒3 corresponds to the z-coordinate, 0 1 But remember to use homogeneous coordinates! Thus embed the scale and rotation matrices upper left submatrix, translation vector upper right column
29 Transformations in 3D
Transformation Matrix Comments
푠푥 0 0 0 Looks just like the 2D version right? We 0 푠푦 0 0 just added an sz term. Scaling 0 0 푠푧 0 0 0 0 1
This one’s more complicated. In 2D there is only one axis of rotation. In 3D there are See next slide infinitely many, thus the matrix has to take Rotation into account all possible axes. See next slide…
1 0 0 푑푥 Similar to the 2D version, we just have one 0 1 0 푑푦 more term, 푑푧, representing change in
Translation 0 0 1 푑푧 the 푧 axis 0 0 0 1
30 Rodrigues’s Formula…
풖풙 Rotation by angle 휃 around vector 풖 = 풖풚 풖풛 Note: This is an arbitrary unit vector 풖 in 푥푦푧 space Here’s a not so friendly rotation matrix:
This is called the coordinate form of Rodrigues’s formula Let’s try a different way…
31 Rotating axis by axis (1/2) Every rotation can be represented as the composition of 3 different angles of counter- clockwise rotation around 3 axes, namely 푥-axis in the 푦푧 plane by 휓 푦-axis in the 푥푧 plane by 휃 푧-axis in the 푥푦 plane by 휙 Also known as Euler angles, makes problem of rotation much easier
푅푥푦(휙) 푅푦푧 휓 푅푥푧 휃
푐표푠휙 −푠푖푛휙 0 0 1 0 0 0 푐표푠휃 0 푠푖푛휃 0 푠푖푛휙 푐표푠휙 0 0 0 푐표푠휓 −푠푖푛휓 0 0 1 0 0
0 0 1 0 0 푠푖푛휓 푐표푠휓 0 −푠푖푛휃 0 푐표푠휃 0 0 0 0 1 0 0 0 1 0 0 0 1
푹풚풛 : rotation around 푥 axis, 푹풙풛 : rotation about 푦 axis, 푹풙풚 : rotation about 푧 axis Note these differ only in where the 3x3 submatrix is embedded in the homogeneous matrix You can compose these matrices to form a composite rotation matrix 32 Rotating axis by axis (2/2)
It would still be difficult to find the 3 angles to rotate by, given arbitrary axis 풖 and specified angle 휓 Solution? Make the problem easier by mapping u to one of the principal axes
Step 1: Find a 휃 to rotate around 푦 axis to put 풖 in the 푥푦 plane
Step 2: Then find a 흓 to rotate around the 푧 axis to align 풖 with the 푥 axis
Step 3: Rotate by 휓 around 푥 axis = coincident 풖 axis
Step 4: Finally, undo the alignment rotations (inverse)
−ퟏ −ퟏ Rotation Matrix: 푴 = 푹풙풛 휽 푹풙풚 (흓)푹풚풛 흍 푹풙풚 흓 푹풙풛 휽
33 Inverses and Composition in 3D!
Inverses are once again parallel to their 2D versions… Transformation Matrix Inverse 1/푠푥 0 0 0 Scaling 0 1/푠 0 0 푦 0 0 1/푠푧 0 0 0 0 1 1 0 0 0 푐표푠휙 푠푖푛휙 0 0 푐표푠휃 0 −푠푖푛휃 0 Rotation 0 푐표푠휓 푠푖푛휓 0 −푠푖푛휙 푐표푠휙 0 0 0 1 0 0
0 −푠푖푛휓 푐표푠휓 0 0 0 1 0 푠푖푛휃 0 푐표푠휃 0 0 0 0 1 0 0 0 1 0 0 0 1
1 0 0 −푑푥 Translation 0 1 0 −푑푦
0 0 1 −푑푧 0 0 0 1 Composition works exactly the same way…
34
Example in 3D! Let’s take some 3D object, say a cube, centered at (2,2,2) Rotate in object’s space by 30° around 푥 axis, 60° around 푦 and 90° around 푧 Scale in object space by 1 in the 푥, 2 in the 푦, 3 in the 푧 Translate by (2,2,4) in world space −ퟏ Transformation Sequence: 푻푻ퟎ 푺풙풚푹풙풚푹풙풛푹풚풛푻ퟎ , where 푻ퟎ translates to (0,0)
1 0 0 2 1 0 0 2 1 0 0 0 푐표푠90 푠푖푛90 0 0 0 1 0 2 0 1 0 2 0 2 0 0 −푠푖푛90 푐표푠90 0 0 0 0 1 4 0 0 1 2 0 0 3 0 0 0 1 0 0 0 0 1 0 0 0 1 0 0 0 1 0 0 0 1 푐표푠60 0 푠푖푛60 0 1 0 0 0 1 0 0 −2 0 1 0 0 0 푐표푠30 푠푖푛30 0 0 1 0 −2
−푠푖푛60 0 푐표푠60 0 0 −푠푖푛30 푐표푠30 0 0 0 1 −2 0 0 0 1 0 0 0 1 0 0 0 1
35 Transformations and the scene graph (1/4) Objects can be complex: Scene Graph ROBOT upper body lower body
stanchion base head trunk arm arm
3D scenes are often stored in a directed acyclic graph (DAG) called a scene graph WPF Open Scene Graph Sun’s Java3D™ X3D ™ (VRML ™ was a precursor to X3D) Typical scene graph format: objects (cubes, sphere, cone, polyhedra etc.): stored as nodes (default: unit size at origin) attributes (color, texture map, etc.) stored as separate nodes transformations are also nodes
36 Transformations and the scene graph (2/4) For your assignments use simplified format: Attributes stored as a components of each object node (no separate attribute node) Transform node affects its subtree Only leaf nodes are graphical objects All internal nodes that are not transform nodes are group nodes Step 1: Various transformations are Represents a transformation applied to each of the leaves (object primitives—head, base, etc.) Step 2: Transformations are then applied to groups of these objects as a whole (upper body, lower body)
Together this hierarchy of transformations forms the “robot” scene as a whole
37 Transformations and the scene graph (3/4) Notion of a cumulative transformation matrix that builds as you move up the tree 푴 푴 (푪푻푴), appending higher level ퟏ ퟐ transformation matrices to the front of your sequence 푴ퟑ 푴ퟒ
Example: 푴ퟓ For o1, 푪푻푴 = 푴ퟏ For o2, 푪푻푴 = 푴ퟐ 푴ퟑ For o3, 푪푻푴 = 푴ퟐ 푴ퟒ푴ퟓ object nodes (geometry) For a vertex v in o3, position in world transformation nodes (root) coordinate system is: group nodes 푪푻푴 풗 = (푴ퟐ푴ퟒ푴ퟓ) 풗
38 Transformations and the scene graph (4/4)
You can reuse groups of objects (sub- trees) if they have been defined Group 3 has been used twice here root group3 Transformations defined within 푻 푻ퟔ group 3 itself are the same 푻ퟎ ퟓ group1 Different 푪푻푴s for each use of group obj3 obj4 3 as a whole 푻ퟏ 푻ퟐ 푻ퟎ푻ퟏ 푣푠. 푻ퟎ푻ퟐ푻ퟒ obj1 group3 group2
푻ퟑ 푻ퟒ
obj2 group3
39