Transformations, Projections (02) RNDr. Martin Madaras, PhD. - - PowerPoint PPT Presentation

Fundamentals of Computer Graphics and Image Processing

Transformations, Projections (02)

• RNDr. Martin Madaras, PhD.

madaras@skeletex.xyz

Overview

2

 2D Transformations

 Basic 2D transformations  Matrix representation  Matrix composition

 3D Transformations

 Basic 3D transformations  Same as 2D

3

• Ask questions, please!!!
• Be communicative
• www.slido.com #ZPGSO02
• More active you are, the better for you!
• We will go into depth as far, as there are no questions

How the lectures should look like #1

Geometry space

4

 Scene

 Virtual representation of world

 Objects

 Visible objects

(“real world”)

 Invisible objects

(e.g. lights, cameras, etc.)

Full scene definition

5

 Objects

 What objects, where, how transformed

 To be discussed early during course

 How they look – color, material, texture...

 To be discussed later during course

 Camera

 Position, target, camera parameters

Coordinate system

6

 Cartesian coordinates in 2D

 Origin  x axis  y axis (5,3)

Coordinate systems

7

 Global

 One for whole scene

 Local

 Individual for every model  Pivot point

 Camera coordinates  Window coordinates  Units may differ  Conversion between coordinate spaces

Global/local/camera coords.

8

9

Essential basic algebra

Point

10

 Position in space  Cartesian coordinates  Homogeneous coordinates

 Subtraction of points  Translation

 Notation: P, A, …

) , ( y x ) , , ( z y x ) 1 , , , ( z y x ) 1 , , ( y x

Vector

11

 Direction in space  Has no position  Subtraction of 2 points  Cartesian coordinates  Homogeneous coordinates  Notation:

) , ( y x ) , , ( z y x ) , , , ( z y x

) , , ( y x

n v u    , ,

Vector

12

 Addition

Point + vector = point Vector + vector = vector

 Subtraction

Point – point = vector Point – vector = point + (-vector) = point Vector – vector = vector + (-vector) = vector

 Multiplication

Multiplier * vector = vector

13

• Ask questions, please!!!
• Be communicative
• www.slido.com #PPGSO02
• More active you are, the better for you!

Ask questions

14

Transformations

2D Modeling Transformations

15

 Modeling space and World space

2D Modeling Transformations

16

 Transformed instances

2D Modeling Transformations

17

 Transformation identity

2D Modeling Transformations

18

 Scaling applied…

2D Modeling Transformations

19

 Scaling and rotation applied…

2D Modeling Transformations

20

 Scaling, rotation and translation applied…

2D Modeling Transformations

21

 Translation:

 x’ = x + 𝑢𝑦  y’ = y + 𝑢𝑧

 Scale:

 x’ = x * 𝑡𝑦  y’ = y * 𝑡𝑧

 Rotation:

 x’ = x*cosΘ - y*sinΘ  y’ = x*sinΘ + y*cosΘ

2D Modeling Transformations

22

 Translation:

 x’ = x + 𝑢𝑦  y’ = y + 𝑢𝑧

 Scale:

 x’ = x * 𝑡𝑦  y’ = y * 𝑡𝑧

 Rotation:

 x’ = x*cosΘ - y*sinΘ  y’ = x*sinΘ + y*cosΘ

2D Modeling Transformations

23

 Translation:

 x’ = x + 𝑢𝑦  y’ = y + 𝑢𝑧

 Scale:

 x’ = x * 𝑡𝑦  y’ = y * 𝑡𝑧

 Rotation:

 x’ = x*cosΘ - y*sinΘ  y’ = x*sinΘ + y*cosΘ

2D Modeling Transformations

24

 Translation:

 x’ = x + 𝑢𝑦  y’ = y + 𝑢𝑧

 Scale:

 x’ = x * 𝑡𝑦  y’ = y * 𝑡𝑧

 Rotation:

 x’ = x*cosΘ - y*sinΘ  y’ = x*sinΘ + y*cosΘ

2D Modeling Transformations

25

 Translation:

 x’ = x + 𝑢𝑦  y’ = y + 𝑢𝑧

 Scale:

 x’ = x * 𝑡𝑦  y’ = y * 𝑡𝑧

 Rotation:

 x’ = x*cosΘ - y*sinΘ  y’ = x*sinΘ + y*cosΘ

2D Modeling Transformations

26

 Translation:

 x’ = x + 𝑢𝑦  y’ = y + 𝑢𝑧

 Scale:

 x’ = x * 𝑡𝑦  y’ = y * 𝑡𝑧

 Rotation:

 x’ = x*cosΘ - y*sinΘ  y’ = x*sinΘ + y*cosΘ

Overview

27

 2D Transformations

 Basic 2D transformations  Matrix representation  Matrix composition

 3D Transformations

 Basic 3D transformations  Same as 2D

Matrix Representation

28

 Represent 2D transformation by a matrix

𝑏 𝑐 𝑑 𝑒

 Multiply matrix by column vector ⇔ transformation of a point

𝑦′ 𝑧′ = 𝑏 𝑐 𝑑 𝑒 𝑦 𝑧 𝑦′ = 𝑏𝑦 + 𝑐𝑧 𝑧′ = 𝑑𝑦 + 𝑒𝑧

Matrix Representation

29

 Transformations combined by multiplication

𝑦′ 𝑧′ = 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 𝑕 ℎ 𝑗 𝑘 𝑙 𝑚 𝑦 𝑧 Matrices are a convenient and efficient way to represent a sequence of transformations!

2x2 Matrices

30

 What transformations can be represented by a 2x2

matrix?

 2D Identity?

𝑦′ = 𝑦 𝑧 = 𝑧 𝑦′ 𝑧′ = 1 1 𝑦 𝑧

 2D Scale around origin (0,0)?

𝑦′ = 𝑡𝑦 ∗ 𝑦 𝑧 = 𝑡𝑧 ∗ 𝑧 𝑦′ 𝑧′ = 𝑡𝑦 𝑡𝑧 𝑦 𝑧

2x2 Matrices

31

 What transformations can be represented by a 2x2 matrix?

 2D Rotate around origin (0,0)?

𝑦′ = x ∗ cos 𝜄 − y ∗ sin 𝜄 𝑧′ = x ∗ 𝑡𝑗𝑜 𝜄 + y ∗ 𝑑𝑝𝑡 𝜄 𝑦′ 𝑧′ = cos 𝜄 − sin 𝜄 𝑡𝑗𝑜 𝜄 𝑑𝑝𝑡 𝜄 𝑦 𝑧

 2D Shear?

𝑦′ = 𝑦 + 𝑡ℎ𝑦 ∗ 𝑧 𝑧′ = 𝑡ℎ𝑧 ∗ 𝑦 + 𝑧 𝑦′ 𝑧′ = 1 𝑡ℎ𝑦 𝑡ℎ𝑧 1 𝑦 𝑧

2x2 Matrices

32

 What transformations can be represented by a 2x2

matrix?

 2D Mirror over Y axis?

𝑦′ = −𝑦 𝑧′ = 𝑧 𝑦′ 𝑧′ = −1 1 𝑦 𝑧

 2D Mirror over (0,0)?

𝑦′ = −𝑦 𝑧′ = −𝑧 𝑦′ 𝑧′ = −1 −1 𝑦 𝑧

2x2 Matrices

33

 What transformations can be represented by a 2x2

matrix?

 2D Translation?

𝑦′ = 𝑦 + 𝑢𝑦 𝑧′ = 𝑧 + 𝑢𝑧 𝑦′ 𝑧′ = ? ? ? ? 𝑦 𝑧

Only a linear 2D transformations can be represented by a 2x2 matrix

Linear Transformations

34

 Linear transformations are combinations of ..

 Scale  Rotation  Shear  Mirror

 Properties of linear transformations:

 Satisfies:

𝑈 𝑡1𝑞1 + 𝑡2𝑞2 = 𝑡1𝑈 𝑞1 + 𝑡2𝑈(𝑞1)

 Origin maps to origin  Lines map to lines  Parallel lines remain parallel  Ratios are preserved  Closed under composition

2D Translation

35

 2D translation represented by a 3x3 matrix  Point represented in homogenous coordinates

𝑦′ = 𝑦 + 𝑢𝑦 𝑧′ = 𝑧 + 𝑢𝑧 𝑦′ 𝑧′ 1 = 1 𝑢𝑦 1 𝑢𝑧 1 𝑦 𝑧 1

Homogenous Coordinates

36

 Add a 3rd coordinate to every 2D point

 (x,y,w) represents a point at location (x/w, y/w)  (x,y,0) represents a point at infinity  (0,0,0) is not allowed

Basic 2D Transformations

37

 Basic 2D transformations as 3x3 matrices

𝑦′ 𝑧′ 1 = 1 𝑢𝑦 1 𝑢𝑧 1 𝑦 𝑧 1 𝑦′ 𝑧′ 1 = 𝑡𝑦 𝑡𝑧 1 𝑦 𝑧 1 Translate Scale 𝑦′ 𝑧′ 1 = cos 𝜄 −sin 𝜄 sin 𝜄 cos 𝜄 1 𝑦 𝑧 1 𝑦′ 𝑧′ 1 = 1 𝑡ℎ𝑦 𝑡ℎ𝑧 1 1 𝑦 𝑧 1 Rotate Shear

Affine Transformations

38

 Affine transformations are combinations of...

 Linear transformations, and  Translations

𝑦′ 𝑧′ 𝑥′ = 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 1 𝑦 𝑧 𝑥

 Properties of affine transformations:

 Origin does not necessarily map to origin

 Lines map to lines  Parallel lines remain parallel  Ratios are preserved  Closed under composition

Projective Transformations

39

 Projective transformations:

𝑦′ 𝑧′ 𝑥′ = 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 𝑕 ℎ 𝑗 𝑦 𝑧 𝑥

 Properties of projective transformations:

 Origin does not necessarily map to origin

 Lines map to lines  Parallel lines do not necessarily remain parallel  Ratios are not preserved  Closed under composition

Overview

40

 2D Transformations

 Basic 2D transformations  Matrix representation  Matrix composition

 3D Transformations

 Basic 3D transformations  Same as 2D

Matrix Composition

41

 Transformations can be combined by matrix

multiplication P’ = T(𝑢𝑦, 𝑢𝑧) R(𝜄) S(𝑡𝑦, 𝑡𝑧) P

𝑦′ 𝑧′ 𝑥′ = 1 𝑢𝑦 1 𝑢𝑧 1 cos 𝜄 −sin 𝜄 sin 𝜄 cos 𝜄 1 𝑡𝑦 𝑡𝑧 1 𝑦 𝑧 𝑥

Matrix Composition

42

 Matrices are a convenient and efficient way to represent a

sequence of transformations

 General purpose representation  Hardware matrix multiply  Efficiency with premultiplication

 Matrix multiplication is associative

P’ = (T * (S * (R * p))) P’ = (T * S * R) * p

Matrix Composition

43

 Be aware: order of transformations matters

 Matrix multiplication is not commutative

transformation order

P’ = T * S * R * p

“Global” “Local”

Matrix Composition

44

 Be aware: order of transformations matters

 Matrix multiplication is not commutative

Problem: local rotation

45

angle φ

Matrix Composition

46

 Rotate around an arbitrary point (a,b)

 Translate (a,b) to the origin  Rotate around origin  Translate back

Matrix Composition

47

 Rotate around an arbitrary point (a,b)

 Translate (a,b) to the origin  Rotate around origin  Translate back

M = T(a, b) * R(𝜄) * T(-a, -b)

Matrix Composition

48

1.

translate rotation center to origin: t(tx,ty)

2.

rotate by φ

3.

inverse translate by t´(-tx,-ty) Matrix notation:

            − −           −             = 1 1 1 1 cos sin sin cos 1 1 1 ) 1 , , ( ) 1 , ' , ' ( y t x t y t x t y x y x    

Matrix Composition

49

 Scale by sx, sy around arbitrary point (a, b)

 Use the same approach …

Matrix Composition

50

 Scale by sx, sy around arbitrary point (a, b)

 Use the same approach …

M = T(a, b) * S(𝑡𝑦, 𝑡𝑧) * T(-a, -b)

Overview

51

 2D Transformations

 Basic 2D transformations  Matrix representation  Matrix composition

 3D Transformations

 Basic 3D transformations  Same as 2D

3D Transformations

52

 Right-handed coordinate system  Left-handed coordinate system  rotation direction

3D Transformations

53

 Same idea as 2D transformations

 Homogenous coordinates (x,y,z,w)  4x4 transformation matrices

𝑦′ 𝑧′ 𝑨′ 𝑥′ = 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 𝑕 ℎ 𝑗 𝑘 𝑙 𝑚 𝑛 𝑜 𝑝 𝑞 𝑦 𝑧 𝑨 𝑥

Basic 3D Transformations

54

Identity Scale Translation Mirror over X 𝑦′ 𝑧′ 𝑨′ 𝑥′ = 1 1 1 1 𝑦 𝑧 𝑨 𝑥 𝑦′ 𝑧′ 𝑨′ 𝑥′ = 1 𝑢𝑦 1 𝑢𝑧 1 𝑢𝑨 1 𝑦 𝑧 𝑨 𝑥 𝑦′ 𝑧′ 𝑨′ 𝑥′ = 𝑡𝑦 𝑡𝑧 𝑡𝑨 1 𝑦 𝑧 𝑨 𝑥 𝑦′ 𝑧′ 𝑨′ 𝑥′ = 1 −1 −1 1 𝑦 𝑧 𝑨 𝑥

Basic 3D Transformations

55  Rotation around Z axis  Rotation around

Y axis

 Rotation around X axis

𝑦′ 𝑧′ 𝑨′ 𝑥′ = cos 𝜄 −sin 𝜄 sin 𝜄 cos 𝜄 1 1 𝑦 𝑧 𝑨 𝑥 𝑦′ 𝑧′ 𝑨′ 𝑥′ = cos 𝜄 sin 𝜄 1 −sin 𝜄 cos 𝜄 1 𝑦 𝑧 𝑨 𝑥 𝑦′ 𝑧′ 𝑨′ 𝑥′ = 1 cos 𝜄 −sin 𝜄 sin 𝜄 cos 𝜄 1 𝑦 𝑧 𝑨 𝑥

Same as 2D

56

 Everything else is the same as 2D

 In fact 2D is actually 3D in OpenGL

 z is either 0 or ignored

57

• Ask questions, please!!!
• Be communicative
• www.slido.com #PPGSO02
• More active you are, the better for you!

How the lectures should look like #3

58

Projections

Projection

59

 General definition:

 Maps points in n-space to m-space (m<n)

 In Computer Graphics:

 Map 3D camera coordinates to 2D screen coordinates

Viewing transformation

60



Convert from local/world coordinates to camera/viewport coordinates

1.

rotate scene so that camera lies in z-axis

2.

projection transformation

3.

viewport transformation

Stage 0

61

Stage 1 - translate P→P’

62

Stage 2 - rotate P’→P’’→P’’’

63

Stage 2 - rotate P’→P’’→P’’’

64

Orthogonal projection

65

Orthogonal projection

66

 𝑦𝑄 = x’’’  𝑧𝑄 = y’’’  z’’’ is simply left out  Matrix notation

              = 1 1 1 ) 1 , ' ' ' , ' ' ' , ' ' ' ( ) 1 , , , ( z y x z y x

p P P

Perspective projection

67

Taxonomy of Projections

68

Taxonomy of Projections

69

Parallel Projection

70

 Center of projection is at infinity  Direction of projection (DOP) same for all points

Orthographic Projections

71

 DOP perpendicular to view plane

Oblique Projections

72

 DOP not perpendicular to view plane

Parallel Projection View Volume

73

Parallel Projection Matrix

74

 General parallel projection transformation

Taxonomy of Projections

75

Perspective Projection

76

 Maps points onto a view plane along projectors emitting

from center of projection (COP)

Perspective Projection

77

 N-point perspective

 How many vanishing points? 3-point perspective 2-point perspective 1-point perspective

Perspective Projection

78

 Compute 2D coordinates from 3D coordinates using

triangle similarity principle

Perspective Projection

79

 Compute 2D coordinates from 3D coordinates using

triangle similarity principle

Perspective Projection

80

 4x4 matrix representation

 𝑦𝑇 = 𝑦𝐷𝐸/𝑨𝐷  𝑧𝑇 = 𝑧𝐷𝐸/𝑨𝐷  𝑨𝑇 = 𝐸  𝑥𝑇 = 1

𝑦𝑡 𝑧𝑡 𝑨𝑡 𝑥𝑡

= 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 𝑕 ℎ 𝑗 𝑘 𝑙 𝑚 𝑛 𝑜 𝑝 𝑞

𝑦𝑑 𝑧𝑑 𝑨𝑑

1

Perspective Projection

81

 4x4 matrix representation

 𝑦𝑇 = 𝑦𝐷𝐸/𝑨𝐷

𝑦𝑇 = 𝑦𝐷

 𝑧𝑇 = 𝑧𝐷𝐸/𝑨𝐷

𝑧𝑇 = 𝑧𝐷

 𝑨𝑇 = 𝐸

depth is stored 𝑨𝑇 = 𝑨𝐷

 𝑥𝑇 = 1

𝑥𝑇 = 𝑨𝐷/𝐸

𝑦𝑡 𝑧𝑡 𝑨𝑡 𝑥𝑡

= 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 𝑕 ℎ 𝑗 𝑘 𝑙 𝑚 𝑛 𝑜 𝑝 𝑞

𝑦𝑑 𝑧𝑑 𝑨𝑑

1

Perspective Projection

82

 4x4 matrix representation

 𝑦𝑇 = 𝑦𝐷𝐸/𝑨𝐷

𝑦𝑇 = 𝑦𝐷

 𝑧𝑇 = 𝑧𝐷𝐸/𝑨𝐷

𝑧𝑇 = 𝑧𝐷

 𝑨𝑇 = 𝐸

𝑨𝑇 = 𝑨𝐷

 𝑥𝑇 = 1

𝑥𝑇 = 𝑨𝐷/𝐸

𝑦𝑡 𝑧𝑡 𝑨𝑡 𝑥𝑡

= 1 𝑓 𝑔 𝑕 ℎ 𝑗 𝑘 𝑙 𝑚 𝑛 𝑜 𝑝 𝑞

𝑦𝑑 𝑧𝑑 𝑨𝑑

1

Perspective Projection

83

 4x4 matrix representation

 𝑦𝑇 = 𝑦𝐷𝐸/𝑨𝐷

𝑦𝑇 = 𝑦𝐷

 𝑧𝑇 = 𝑧𝐷𝐸/𝑨𝐷

𝑧𝑇 = 𝑧𝐷

 𝑨𝑇 = 𝐸

𝑨𝑇 = 𝑨𝐷

 𝑥𝑇 = 1

𝑥𝑇 = 𝑨𝐷/𝐸

𝑦𝑡 𝑧𝑡 𝑨𝑡 𝑥𝑡

= 1 1 𝑗 𝑘 𝑙 𝑚 𝑛 𝑜 𝑝 𝑞

𝑦𝑑 𝑧𝑑 𝑨𝑑

1

Perspective Projection

84

 4x4 matrix representation

 𝑦𝑇 = 𝑦𝐷𝐸/𝑨𝐷

𝑦𝑇 = 𝑦𝐷

 𝑧𝑇 = 𝑧𝐷𝐸/𝑨𝐷

𝑧𝑇 = 𝑧𝐷

 𝑨𝑇 = 𝐸

𝑨𝑇 = 𝑨𝐷

 𝑥𝑇 = 1

𝑥𝑇 = 𝑨𝐷/𝐸

𝑦𝑡 𝑧𝑡 𝑨𝑡 𝑥𝑡

= 1 1 1 𝑛 𝑜 𝑝 𝑞

𝑦𝑑 𝑧𝑑 𝑨𝑑

1

Perspective Projection

85

 4x4 matrix representation

 𝑦𝑇 = 𝑦𝐷𝐸/𝑨𝐷

𝑦𝑇 = 𝑦𝐷

 𝑧𝑇 = 𝑧𝐷𝐸/𝑨𝐷

𝑧𝑇 = 𝑧𝐷

 𝑨𝑇 = 𝐸

𝑨𝑇 = 𝑨𝐷

 𝑥𝑇 = 1

𝑥𝑇 = 𝑨𝐷/𝐸

𝑦𝑡 𝑧𝑡 𝑨𝑡 𝑥𝑡

= 1 1 1 1/𝐸

𝑦𝑑 𝑧𝑑 𝑨𝑑

1

Perspective vs. Parallel

86

 Perspective Projection

 + Size varies inversely with distance - looks realistic  - Distance and angles are not (in general) preserved  - Parallel lines do not (in general) remain parallel

 Parallel Projection

 + Good for exact measurements  + Parallel lines remain parallel  - Angles are not (in general) preserved  - Less realistic looking

Classical Projections

87

Viewport transformation

88

Viewport transformation

89

 sx, sy – scale factors  Matrix notation

min max min max

xc xc xv xv sx − − =

min max min max

yc yc yv yv sy − − =

          + − + − = 1 ) 1 , , ( ) 1 , , (

min min min min

yv yc s xv xc s s s y x y x

y x y x p p v v

Welcome to the matrix!

90

1.

local → global coordinates



translate, rotate, scale, translate

2.

global → camera



translate, rotate, rotate, project

3.

camera → viewport



translate, scale, translate



Transformation combine = matrix multiply

3D rendering pipeline

91

3D polygons Modeling Transformation Lighting Viewing Transformation Projection Transformation Clipping Scan Conversion 2D Image

1 Model transformation local → global / world coordinates Viewport transformation global → camera Projection transformation global → normalized device Clipping Rasterization Texturing & Lighting

92

• Ask questions, please!!!
• Be communicative
• www.slido.com #ZPGSO02
• More active you are, the better for you!

How the lectures should look like #2

93

Rasterization Rendering Pipeline

Next Week

94

Acknowledgements

 Thanks to all the people, whose work is shown here and whose

slides were used as a material for creation of these slides:

Matej Novotný, GSVM lectures at FMFI UK Peter Drahoš, PPGSO lectures at FIIT STU Output of all the publications and great team work Very best data from 3D cameras

95

www.skeletex.xyz madaras@skeletex.xyz

Questions ?!