Transformation CS 148: Summer 2016 Introduction of Graphics and - - PowerPoint PPT Presentation

▶
transformation
SMART_READER_LITE
LIVE PREVIEW

Transformation CS 148: Summer 2016 Introduction of Graphics and - - PowerPoint PPT Presentation

Mar 26, 2023 727 likes •1.49k views

Transformation CS 148: Summer 2016 Introduction of Graphics and Imaging Zahid Hossain http://www.pling.org.uk/cs/cgv.html Placement of Objects Fisher et al. (2012) 2 CS 148: Introduction to Computer Graphics and Imaging (Summer 2016)

slide-1
SLIDE 1

CS 148: Summer 2016 Introduction of Graphics and Imaging Zahid Hossain

Transformation

http://www.pling.org.uk/cs/cgv.html

slide-2
SLIDE 2

Fisher et al. (2012)

Placement of Objects

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 2

slide-3
SLIDE 3

Fisher et al. (2012)

Placement of Objects

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 3

Oriented

slide-4
SLIDE 4

Fisher et al. (2012)

Placements of Objects

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 4

Translated

slide-5
SLIDE 5

Points and Vectors

5

p

Origin x y z

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain

slide-6
SLIDE 6

Points and Vectors

6

Origin x y z Vector Points

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain

slide-7
SLIDE 7

Transformations

  • What? Just functions acting on points:
  • Why?
  • Viewing:
  • Convert between coordinates systems
  • Virtual camera, e.g. perspective projections
  • Modeling:
  • Create objects in a convenient orientation
  • Use multiple instances of a given shape
  • Kinematics – characters/robots

7

slide-8
SLIDE 8

Linear Transformation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 8

slide-9
SLIDE 9

Linear Transformation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 9

slide-10
SLIDE 10

Linear Transformation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 10

slide-11
SLIDE 11

Linear Transformation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 11

Lines Map to Lines

slide-12
SLIDE 12

Common Transformation

12

Rotate Scale Shear

slide-13
SLIDE 13

13

slide-14
SLIDE 14

Composing Transformations

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 14

First Rotate 45°

slide-15
SLIDE 15

Composing Transformations

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 15

Then Scale 2x along y

slide-16
SLIDE 16

Composing Transformations

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 16

Rotation Scale Order of transformations

slide-17
SLIDE 17

Composing Transformation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 17

Rotate -> Scale Scale -> Rotate

Not Commutative

slide-18
SLIDE 18

Translation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 18

slide-19
SLIDE 19

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 19

For any non-zero c

slide-20
SLIDE 20

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 20

slide-21
SLIDE 21

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 21

slide-22
SLIDE 22

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 22

4D Homogenous Coordinate 3D Cartesian Coordinate

slide-23
SLIDE 23

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 23

w=1 w-axis x,y-axis (x,y,w) (x/w,y/w,1)

slide-24
SLIDE 24

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 24

z=1 z-axis x,y-axis

Decrease w

slide-25
SLIDE 25

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 25

z=1 z-axis x,y-axis

Decrease w

slide-26
SLIDE 26

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 26

slide-27
SLIDE 27

Homogenous Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 27

Represents a Vector!

(Homogenous Coordinates express both Vectors and Points)

slide-28
SLIDE 28

Back to Translation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 28

Homogenous Coordinate Homogenous Coordinate

slide-29
SLIDE 29

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 29

(3,4,2) :

Convert 3D Cartesian Coordinate to Homogenous Coordinate

slide-30
SLIDE 30

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 30

(3,4,2) : (3,4,2,1)

Convert 3D Cartesian Coordinate to Homogenous Coordinate

slide-31
SLIDE 31

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 31

(3,4,2) : (3,4,2,1)

Convert 3D Cartesian Coordinate to Homogenous Coordinate Convert Homogenous Coordinate to Cartesian Coordinate

(3,4,2,2) :

slide-32
SLIDE 32

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 32

(3,4,2) : (3,4,2,1)

Convert 3D Cartesian Coordinate to Homogenous Coordinate Convert Homogenous Coordinate to Cartesian Coordinate

(3,4,2,2) : (1.5,2,1)

slide-33
SLIDE 33

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 33

Rotate about the center of the box

slide-34
SLIDE 34

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 34

Translate to center

slide-35
SLIDE 35

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 35

Rotate

slide-36
SLIDE 36

Some Exercise

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 36

Translate back

slide-37
SLIDE 37

Coordinate System

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 37

slide-38
SLIDE 38

Coordinate System

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 38

slide-39
SLIDE 39

Coordinate System

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 39

slide-40
SLIDE 40

Coordinate System: Rotation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 40

slide-41
SLIDE 41

Coordinate System: Rotation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 41

slide-42
SLIDE 42

Coordinate System: Rotation

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 42

slide-43
SLIDE 43

Coordinate System: Hierarchy

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 43

slide-44
SLIDE 44

Coordinate System: Hierarchy

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 44

slide-45
SLIDE 45

Coordinate System: Hierarchy

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 45

slide-46
SLIDE 46

Interpreting Transformations

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 46

slide-47
SLIDE 47

Two Interpretations

  • With respect to Global Frame
  • With respect to Local Frame

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 47

slide-48
SLIDE 48

Coordinate System: Hierarchy

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 48

slide-49
SLIDE 49

w.r.t Global Frame

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 49

Combined = Translate(0,1) Rotate(45°) Translate(1,1) Translate(1,1) Rotate(45°) Translate(0,1) Order of Transforms

slide-50
SLIDE 50

w.r.t Local Frame

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 50

Combined = Translate(0,1) Rotate(45°) Translate(1,1) Translate(0,1) Rotate(45°) Translate(1,1) Order of Transform

slide-51
SLIDE 51

w.r.t Local Frame

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 51

Combined = Translate(0,1) Rotate(45°) Translate(1,1) Translate(0,1) Rotate(45°) Translate(1,1) Order of Transform

Both interpretations are equivalent

slide-52
SLIDE 52

Hierarchical Modeling

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 52 translate(0,4) drawTorso() pushMatrix() translate(1.5,0) rotateX(leftHipRotate) drawThigh() pushMatrix() translate(0,-2) rotateX(leftKneeRotate) drawLeg() ... popMatrix() popMatrix() pushMatrix() translate(-1.5,0) rotateX(rightHipRotate) // Draw the right side ... ...

x y

CurrentMatrix = Translate(0,4) Matrix Stack

slide-53
SLIDE 53

Hierarchical Modeling

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 53 translate(0,4) drawTorso() pushMatrix() translate(1.5,0) rotateX(leftHipRotate) drawThigh() pushMatrix() translate(0,-2) rotateX(leftKneeRotate) drawLeg() ... popMatrix() popMatrix() pushMatrix() translate(-1.5,0) rotateX(rightHipRotate) // Draw the right side ... ...

x y

CurrentMatrix = Translate(0,4) Matrix Stack Translate(0,4)

slide-54
SLIDE 54

Hierarchical Modeling

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 54 translate(0,4) drawTorso() pushMatrix() translate(1.5,0) rotateX(leftHipRotate) drawThigh() pushMatrix() translate(0,-2) rotateX(leftKneeRotate) drawLeg() ... popMatrix() popMatrix() pushMatrix() translate(-1.5,0) rotateX(rightHipRotate) // Draw the right side ... ...

x y

CurrentMatrix = translate(0,4) translate(1.5,0) rotateX(leftHipRotate) translate(0,-2) rotate(leftKneeRotate) Matrix Stack

translate(0,4) translate(0,4) translate(1.5,0) rotateX(leftHipRotate)

slide-55
SLIDE 55

Hierarchical Modeling

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 55 translate(0,4) drawTorso() pushMatrix() translate(1.5,0) rotateX(leftHipRotate) drawThigh() pushMatrix() translate(0,-2) rotateX(leftKneeRotate) drawLeg() ... popMatrix() popMatrix() pushMatrix() translate(-1.5,0) rotateX(rightHipRotate) // Draw the right side ... ...

x y

CurrentMatrix = translate(0,4) translate(1.5,0) rotateX(leftHipRotate) Matrix Stack

translate(0,4)

slide-56
SLIDE 56

Hierarchical Modeling

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 56 translate(0,4) drawTorso() pushMatrix() translate(1.5,0) rotateX(leftHipRotate) drawThigh() pushMatrix() translate(0,-2) rotateX(leftKneeRotate) drawLeg() ... popMatrix() popMatrix() pushMatrix() translate(-1.5,0) rotateX(rightHipRotate) // Draw the right side ... ...

x y

CurrentMatrix = translate(0,4) Matrix Stack

slide-57
SLIDE 57

Hierarchical Modeling

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 57 translate(0,4) drawTorso() pushMatrix() translate(1.5,0) rotateX(leftHipRotate) drawThigh() pushMatrix() translate(0,-2) rotateX(leftKneeRotate) drawLeg() ... popMatrix() popMatrix() pushMatrix() translate(-1.5,0) rotateX(rightHipRotate) // Draw the right side ... ...

x y

CurrentMatrix = translate(0,4) translate(-1.5,0) rotateX(rightHipRotate) Matrix Stack

translate(0,4)

slide-58
SLIDE 58

Hierarchical Modeling

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 58

x y

Torso RightThigh RightLeg translate(0,4) translate(1.5,0) rotateX(rightHipRotate) translate(0,-2) rotateX(rightLegRotate) popMatrix()

Left Side

pushMatrix() pushMatrix() pushMatrix()

slide-59
SLIDE 59

Camera and Projection Matrices

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 59

slide-60
SLIDE 60

3D to 2D Conversion

  • The world is in 3D
  • But our Screen is in 2D
  • Imagine our screen is a camera looking out into the

world.

  • Tasks
  • 1. Convert 3D world coordinates to Camera Coordinates
  • 2. Project the Camera Coordinate on 2D screen

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 60

slide-61
SLIDE 61

Camera Matrix

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 61

slide-62
SLIDE 62

Camera Matrix

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 62

Homework!

slide-63
SLIDE 63

Projection Matrix (Basic)

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 63

slide-64
SLIDE 64

Projection Matrix (Basic)

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 64

slide-65
SLIDE 65

Normalized Device Coordinates

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 65

http://www.songho.ca/opengl/gl_projectionmatrix.html

NDC (Normalized Device Coordinate)

slide-66
SLIDE 66

OpenGL Projection Matrix

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 66

Note the –n and –f (to be consistent with OpenGL)

slide-67
SLIDE 67

OpenGL Projection Matrix

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 67

slide-68
SLIDE 68

OpenGL Projection Matrix

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 68

Similarly for y

slide-69
SLIDE 69

OpenGL Projection Matrix

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 69

z’ is a little tricky

Solving for A and B

slide-70
SLIDE 70

OpenGL Projection Matrix

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 70

slide-71
SLIDE 71

Non-Linearity in Z

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 71

  • 8
  • 6
  • 4
  • 2
  • 1.0
  • 0.5

0.5 1.0

  • 1. Monotonic: values keeps increasing as z goes in –ve direction
  • 2. Resolution decreases as z decrease (along –ve) or depth increases
slide-72
SLIDE 72

Non-Linearity in Z

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 72

  • 8
  • 6
  • 4
  • 2
  • 1.0
  • 0.5

0.5 1.0

  • 1. Monotonic: values keeps increasing as z goes in –ve direction
  • 2. Resolution decreases as z decrease (along –ve) or depth increases

For Later: Has interesting effects in Depth Buffering

slide-73
SLIDE 73

Start Learning OpenGL Now

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 73

slide-74
SLIDE 74

Start Learning OpenGL Now

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 74

Suggestions Only For OpenGL 3.3: http://learnopengl.com For OpenGL < 2.0: Any GLUT or FreeGLUT tutorial

slide-75
SLIDE 75

CS 148: Summer 2016 Introduction of Graphics and Imaging Zahid Hossain

Transformation

http://www.pling.org.uk/cs/cgv.html