Geometrical Transformation TongYee Lee positive rotation 1 3

Geometrical Transformation Tong-Yee Lee positive rotation 1

3 D Graphics Pipeline

Outline General Geometry Transform • Scaling, rotation, translation etc scale

Modeling Transform Specify transformation for objects Allow definitions of objects in own local coordinate systems Allow use of object definition multiple times in a scene Insert each local object into different locations of world coordinate 4

Basic Concept Local coordinate systems v. s. global coordinate system 5

Overview 2 D transformations Basic 2 -D transformations Matrix representation Matrix composition 3 D transformations Basic 3 -D transformation Same as 2 -D Transformation Hierarchies Scene graphs Viewing Transformation 6

Rotate C 1: will globally change locations but relatively not change local relationship C 2 and C 3 7

2 -D Transformations Model is defined in a local coordinate Move each local coordinate to a world coordinate 8

2 -D Transformations 9

2 -D Transformations a. Usually, (0, 0) point is used to align local and world coordinates First b. (0, 0) will not changed for scaling and rotation 10

2 -D Transformations 11

2 -D Transformations 12

2 -D Transformations 13

Basic 2 D Transformations 14

Basic 2 D Transformations Sx>1 Sy>1 15

Scaling Around A Point 16

Scaling Expand or contract along each axis (fixed point of origin) Sx=0. 5 Sy=1. 5 Sz=1. 0 x’=sxx y’=syy z’=szz p’=Sp S = S(sx, sy, sz) = Sx=Sy=Sz=0. 5 17 Angel: Interactive Computer Graphics 5 E © Addison-Wesley 2009

Reflection corresponds to negative scale factors sx = -1 sy = 1 original sx = -1 sy = -1 sx = 1 sy = -1 18 Angel: Interactive Computer Graphics 5 E © Addison-Wesley 2009

Move to origin April 2010 Scale Move back 19

Basic 2 D Transformations 20

Rotation around the origin (2 -D) Ex: polar coordinate (極座標) 21

Rotation around the origin (2 -D) Counterclockwise i. e. , 逆時針方向 (positive) 22

Rotation around the origin (2 -D) 23

Rotation (3 -D) 24

Rotation (3 -D) Counterclockwise i. e. , 逆時針方向 (positive)

26

Basic 2 D Transformations 27

28

2 D Rotation at any pivot 樞軸；支點 29

Basic 2 D Transformations 30

Translation Although we can move a point to a new location in infinite ways, when we move many points there is usually one way object 31 translation: every point displaced by same vector Angel: Interactive Computer Graphics 5 E © Addison-Wesley 2009

Basic 2 D Transformations 32

General 2 D Rotation at (Xr, Yr) Move to origin April 2010 Rotate Move back 33

Matrix Representation 34

Matrix Representation 35

2 x 2 Matrix 36

2 x 2 Matrix 37

Shear (2 -D) 38

Shear (3 -D) 39

2 x 2 Matrix 40

2 x 2 Matrix 41

2 D Reflections April 2010 42

2 x 2 Matrix 43

2 D Translation Ex: (x, y) is represented by (x, y, 1) in homogenous coordinate 44

Basic 2 D Transformations 45

Homogeneous Coordinates i. e. , projection, w is related to depth from eye i. e. , vector (x 1, y 1, 1) – (x 2, y 2, 1) = (x 1 -x 2. y 1 -y 2, 0) i. e. depth in w coordinate 46

Matrix Composition w=1 47

Matrix Composition i. e. 1 point is OK i. e. if many points are used, matries are composed first 48

Matrix Composition (交換律) T*R*P != RT*P 49

Matrix Composition i. e. , M= T(a, b)*R(Q)*T(-a, -b) P’=M*P i. e. , M= T(a, b)*S(Q)*T(-a, -b) P’=M*P 50

3 D Transformations w=1 51

Basic 3 D Transformations w=1 52

Basic 3 D Transformations 53

General rotation about an axis 54

Developing the General Rotation Matrix → t= <Xv, Yv, Zv> 55

56

57

58

59

60

61

Developing the General Rotation Matrix Be careful ………… X (+, +) Z (-, -) In both cases, tan(y/x) are positive. So, we need to carefully choose it by checking the signs of x and y 62

Open. GL transformation Matrices object glut. Solid. Sphere(1. 0, 50); (4, 5, 6)

Example -1 planet. c Control: • • • ‘d’day ; 自轉 ‘y’year ; 公轉 along sun ‘a’; 自轉 & 公轉 ‘A’ ESC 64

Example void GL_display() // GLUT display function { // clear t he buffer gl. Clear(GL_COLOR_BUFFER_BIT); gl. Color 3 f(1. 0, 1. 0); gl. Push. Matrix(); glut. Wire. Sphere(1. 0, 20, 16); gl. Rotatef(year, 0. 0, 1. 0, 0. 0); gl. Translatef(3. 0, 0. 0); gl. Rotatef(day, 0. 0, 1. 0, 0. 0); glut. Wire. Sphere(0. 5, 10, 8); Adding more ………………. . gl. Pop. Matrix(); Call GL_ display once Push (original) i. e. , 0 Rotate angles Pop() to the original, i. e. , 0 // the Sun // the Planet // swap the front and back buffers glut. Swap. Buffers(); } 65

Example -4 void GL_idle() // GLUT idle function { day += 10. 0; if(day > 360. 0) day -= 360. 0; year += 1. 0; if(year > 360. 0) year -= 360. 0; (i. e. , planet self-rotation +10 degrees, faster) (i. e. , planet rotate sun + 1 degree, slower) // recall GL_display() function glut. Post. Redisplay(); (i. e. , call run display function) } 66

Example -5 void GL_keyboard(unsigned char key, int x, int y) // GLUT keyboard function { switch(key) { case 'd': day += 10. 0; if(day > 360. 0) day -= 360. 0; glut. Post. Redisplay(); break; case 'y': year += 1. 0; if(year > 360. 0) year -= 360. 0; glut. Post. Redisplay(); break; case 'a': glut. Idle. Func(GL_idle); // assign idle function break; case 'A': glut. Idle. Func(0); break; case 27: exit(0); } } 67

Example -6 int main(int argc, char** argv) { glut. Init(&argc, argv); glut. Init. Window. Size(500, 500); glut. Init. Window. Position(0, 0); glut. Init. Display. Mode(GLUT_DOUBLE | GLUT_RGB); glut. Create. Window("Planet"); init(); glut. Display. Func(GL_display); glut. Reshape. Func(GL_reshape); glut. Keyboard. Func(GL_keyboard); glut. Main. Loop(); return 0; } 68

Example void GL_display() // GLUT display function { // clear t he buffer gl. Clear(GL_COLOR_BUFFER_BIT); gl. Color 3 f(1. 0, 1. 0); gl. Push. Matrix(); glut. Wire. Sphere(1. 0, 20, 16); gl. Rotatef(year, 0. 0, 1. 0, 0. 0); gl. Translatef(3. 0, 0. 0); Add more gl. Rotatef(day, 0. 0, 1. 0, 0. 0); like moon glut. Wire. Sphere(0. 5, 10, 8); Adding more ………………. . gl. Pop. Matrix(); Add more like 土星 // the Sun // the Planet // swap the front and back buffers glut. Swap. Buffers(); } Call GL_ display once Push (original) i. e. , 0 Rotate angles Pop() to the original, i. e. , 0 69

70

child is transformed relative to its parent lower upper 71

child is transformed relative to its parent’s new position 72

3 D Example: A robot arm 73

74

Open. GL better implementation changed 75

A More Complex Example: Human Figure torso

A More Complex Example: Human Figure torso What’s the most efficient way to draw this figure?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

A More Complex Example: Human Figure torso What’s the most sensible way to traverse this tree?

Transformation Hierarchies Scene graphs Store first Recover Root Rotate Head Rotate first and then translate Transfor translate Torso Rotate 88

Open. GL transformation Matrices 89

A more complex example 90

91

n p 0 t 2 t 1 p 2 p 1 92

p. s. vector will not be changed by translation matrix 93

94

Inverse Transformation 95

Open. GL transformation Matrices 96

97

98

99

100

101

102

103

104

105

106

107

Animated Spider using Hierarchical Transformations in Open. GL https: //youtu. be/PA_e 9 Eyz. He 0 A project where a spider is modeled in Open. GL using the glu. Sphere and glu. Cylinder and is animated using hierarchical transformations. Note: The animation is not meant to be realistic 108

Open. GL Skeletal Animation Tutorial https: //www. youtube. com/watch? v=f 3 Cr 8 Yx 3 GGA https: //drive. google. com/drive/folders/0 B 4_Sg. VGf. Vt. FWVUN 5 MGF 6 SWpta 00 109

110

111

Angular displacement gl. Rotate(q, Ax, Ay, Az) Step 1: Separate x vector Note: vector a is a unit vector i. e: cos(90 -Ɵ) = sin(Ɵ) (a) (b) 112

The above formula is a matrix form, so we can use Matrix to compute rotation In above equation, v=(x, y, z)T and n=(ax, ay, az)T 113

114