geometric transformations - fabio...
TRANSCRIPT
![Page 1: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/1.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Geometric Transformations
1
![Page 2: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/2.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
2D Transformations
2
![Page 3: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/3.jpg)
• Define a functions that maps a plane to another plane
• Transforming parametric curves
• Transforming implicit curves
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Transforming geometry
3
�p|f(p) = 0
!
�X(p)|f(p) = 0
=�p|f(X�1p) = 0
�f(t)|t 2 D
!
�X(f(t))|t 2 D
S !�X(p)|p 2 S
![Page 4: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/4.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Translation
4
Tt(p) = p+ t
T�1t (p) = p� t
![Page 5: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/5.jpg)
• Define a transformation by matrix multiplication
• Such transformations are linear
• Depending on the matrix, we have different transformations
– uniform scale
– non-uniform scale
– rotation
– shear
– reflection
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Linear transformations
5
XM (p) = Mp
XM (ap+ bq) = aMp+ bMq = aXM (p) + bXM (q)
![Page 6: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/6.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Uniform scale
6
Ss(p) =
s 00 s
� pxpy
�=
spxspy
�
S�1s (p) = S1/s(p)
![Page 7: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/7.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Non-uniform scale
7
Ss(p) =
sx 00 sy
� pxpy
�=
sxpxsypy
�
S�1s (p) = S{1/sx,1/sy}(p)
![Page 8: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/8.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Rotation
8
R✓(p) =
cos ✓ sin ✓� sin ✓ cos ✓
� pxpy
�=
px cos ✓ + py sin ✓�px sin ✓ + py cos ✓
�
R�1✓ (p) = R�✓(p)
![Page 9: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/9.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Reflection
9
Mx(p) =
�1 00 1
� pxpy
�=
�pxpy
�
My(p) =
1 00 �1
� pxpy
�=
px�py
�
Mo(p) =
�1 00 �1
� pxpy
�=
�px�py
�
M�1x (p) = Mx(p)
M�1y (p) = Mx(p)
M�1o (p) = Mo(p)
![Page 10: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/10.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Shear
10
Sxa(p) =
1 a0 1
� pxpy
�=
px + apy
py
�
Sya(p) =
1 0a 1
� pxpy
�=
px
apx + py
�
![Page 11: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/11.jpg)
• Combination of a linear transformation and a translation
• Straight lines preserved; parallel lines preserved
• Ratios of lengths along lines preserved (midpoints preserved)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Affine transformations
11
A{M,t}(p) = Mp+ t
![Page 12: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/12.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing Transformations
12
![Page 13: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/13.jpg)
• To apply transformations in a sequence
• we need to represent the “composition” S o T
• We would like to use the same representation as for S and T
– use the same transformation machinery
– compose as times as we want
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing transformations
13
p ! X1(p) ! X2(X1(p)) = (X2 �X1)(p)
![Page 14: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/14.jpg)
• The composition of two translation is a translation
• Composed translation is the sum of the operands translations
• Proof by substitution
• Composition is commutative
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing translations
14
Tt1(p) = p+ t1 Tt2(p) = p+ t2 )(Tt2 � Tt1)(p) = Tt2(Tt1(p)) = Tt2(p+ t1) = p+ t1 + t2 )(Tt2 � Tt1) = Tt1+t2
![Page 15: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/15.jpg)
• The composition of linear transformations is a linear transform
• The composed matrix is the product of the operands matrices
• Only sometimes commutative
– e.g. rotations & uniform scales
– e.g. non-uniform scales w/o rotation
• Note the order of the matrices M2M1: M1 first, then M2
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing linear transforms
15
LM1(p) = M1p LM2(p) = M2p )(LM2 � LM1)(p) = LM2(LM1(p)) = LM2(M1p) = M2M1p )(LM2 � LM1) = LM2M1
![Page 16: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/16.jpg)
• The composition of affine transformations is an affine transform
• Linear component multiplies, while translation are summed bur corrected with the linear part
• Proof by substitution
• This works but the notation is awkward
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Combining affines
16
A{M1,t1}(p) = M1p+ t1 A{M2,t2}(p) = M2p+ t2 )(A{M2,t2} �A{M2,t2})(p) = A{M1,t1}(A{M1,t1}(p)) =
= A{M2,t2}(M1p+ t1) =
= M2M1p+ (M2t1 + t2) )(A{M2,t2} �A{M1,t1}) = A{M2M1,M2t1+t2}
![Page 17: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/17.jpg)
• A notation for representing previous equations more elegantly
• Extra component w for vectors, extra row/column for matrices
– for affine, can always keep w = 1
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Homogeneous coordinates
17
p ⌘
2
4pxpy1
3
5 ⌘
2
4pxpwpypwpw
3
5
![Page 18: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/18.jpg)
• Represent transformations with one extra row and column
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Homogeneous coordinates
18
LM (p) =
2
4M11 M12 0M21 M22 00 0 1
3
5
2
4pxpy1
3
5 =
M 00 1
� p1
�= Mp
Tt(p) =
2
41 0 tx0 1 ty0 0 1
3
5
2
4pxpy1
3
5 =
I t0 1
� p1
�= p+ t
A{M,t}(p) =
2
4M11 M12 txM21 M22 ty0 0 1
3
5
2
4pxpy1
3
5 =
M t0 1
� p1
�= Mp+ t
![Page 19: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/19.jpg)
• Composition of affine just works by 3x3 matrix multiplication
• This is exactly the same as carrying around M and t, but cleaner and generalizes in useful ways as we’ll see later
• Generally, transformations contain elements of multiple types
– often define them as composition of canonical transforms
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing affines
19
(A{M2,t2} �A{M1,t1})(p) =
M2 t20 1
� M1 t10 1
� p1
�=
=
M2M1 M2t1 + t2
0 1
� p1
�==
M2M1p+M2t1 + t2
1
�
![Page 20: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/20.jpg)
• In general not commutative: order matters!
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
rotate, then translate translate, then rotate
Composing affines
20
![Page 21: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/21.jpg)
• In general not commutative: order matters!
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
rotate, then translate translate, then rotate
Composing affines
20
![Page 22: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/22.jpg)
• In general not commutative: order matters!
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
rotate, then translate translate, then rotate
Composing affines
20
![Page 23: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/23.jpg)
• In general not commutative: order matters!
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
rotate, then translate translate, then rotate
Composing affines
20
![Page 24: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/24.jpg)
• Another example
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
scale, then rotate rotate, then scale
Composing affines
21
![Page 25: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/25.jpg)
• Another example
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
scale, then rotate rotate, then scale
Composing affines
21
![Page 26: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/26.jpg)
• Another example
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
scale, then rotate rotate, then scale
Composing affines
21
![Page 27: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/27.jpg)
• Another example
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
scale, then rotate rotate, then scale
Composing affines
21
![Page 28: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/28.jpg)
• Want to rotate about a particular point
• Option 1: work out formulas directly, but this is hard
• Option 2: Since we know how to rotate about the origin, translate that point to the origin
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
22
![Page 29: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/29.jpg)
• Want to rotate about a particular point
• Option 1: work out formulas directly, but this is hard
• Option 2: Since we know how to rotate about the origin, translate that point to the origin
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
22
![Page 30: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/30.jpg)
• Want to rotate about a particular point
• Option 1: work out formulas directly, but this is hard
• Option 2: Since we know how to rotate about the origin, translate that point to the origin
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
22
![Page 31: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/31.jpg)
• Want to rotate about a particular point
• Option 1: work out formulas directly, but this is hard
• Option 2: Since we know how to rotate about the origin, translate that point to the origin
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
22
![Page 32: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/32.jpg)
• Want to scale along a particular axis and point
• Since we know how to scale along the y axis at the origin, translate to the origin and rotate to align axes
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
23
![Page 33: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/33.jpg)
• Want to scale along a particular axis and point
• Since we know how to scale along the y axis at the origin, translate to the origin and rotate to align axes
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
23
![Page 34: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/34.jpg)
• Want to scale along a particular axis and point
• Since we know how to scale along the y axis at the origin, translate to the origin and rotate to align axes
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
23
![Page 35: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/35.jpg)
• Want to scale along a particular axis and point
• Since we know how to scale along the y axis at the origin, translate to the origin and rotate to align axes
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
23
![Page 36: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/36.jpg)
• Want to scale along a particular axis and point
• Since we know how to scale along the y axis at the origin, translate to the origin and rotate to align axes
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
23
![Page 37: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/37.jpg)
• Want to scale along a particular axis and point
• Since we know how to scale along the y axis at the origin, translate to the origin and rotate to align axes
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Composing to change axes
23
![Page 38: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/38.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Rigid Transforms and Frames
24
![Page 39: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/39.jpg)
• Rigid transformation: translation and rotation only
• A coordinate frame can also be written as an homogenous matrix
• Frames and rigid body transformations are equivalent
– they correspond to a geometric and algebraic view
– columns of the rotation matrix are the axes of a coord. system
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Rigid transforms and frames
25
F =
R t0 1
�
F =
x y o0 0 1
�
R =⇥x y
⇤t = o
![Page 40: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/40.jpg)
• In this notation, transformations to and from the frame are matrix multiplies
• We compute the inverse of rigid body transforms using the fact that rotations are orthonormal
• The inverted matrix represent the frame from word to local
• Arbitrary transformations can also be expressed w.r.t frames
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Rigid transforms and frames
26
p = Fpl pl = F�1p
F�1F =
RT �RTp0 1
� R p0 1
�= I
T = FT lF�1 T l = F�1TF
![Page 41: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/41.jpg)
• If the axis are not orthonormal, we have a more general change of coordinates with non-orthogonal axis
• Can interpret many transformations in this manner, e.g. shear
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Affine change of coordinates
27
![Page 42: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/42.jpg)
• A new way to “read off” the matrix
– e.g. shear from earlier
– can look at picture, see effect on basis vectors, writedown matrix
• Also an easy way to construct transforms
– e. g. scale by 2 across direction (1,2)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Affine change of coordinates
28
![Page 43: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/43.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
3D Transformations
29
![Page 44: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/44.jpg)
• Most of what we cover before works just the same
• Extend homogenous coordinates notation with one more value
– most equations written in matrix block notation are the same
• Transforms, combination, affines have similar properties
• Rotations are the main difference
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
From 2D to 3D
30
![Page 45: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/45.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Translation
31
Tt =
2
664
1 0 0 tx0 1 0 ty0 0 1 tz0 0 0 1
3
775 =
I t0 1
�
![Page 46: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/46.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scaling
32
Ss =
2
664
s 0 0 00 s 0 00 0 s 00 0 0 1
3
775 =
sI 00 1
�
![Page 47: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/47.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scaling
33
Ss =
2
664
sx 0 0 00 sy 0 00 0 sz 00 0 0 1
3
775 =
diag(s) 0
0 1
�
![Page 48: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/48.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Rotation about z axis
34
Rz✓ =
2
664
cos ✓ sin ✓ 0 0� sin ✓ cos ✓ 0 0
0 0 1 00 0 0 1
3
775
![Page 49: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/49.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Rotation about x axis
35
Rz✓ =
2
664
1 0 0 00 cos ✓ � sin ✓ 00 sin ✓ cos ✓ 00 0 0 1
3
775
![Page 50: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/50.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Rotation about y axis
36
Ry✓ =
2
664
cos ✓ 0 sin ✓ 00 1 0 0
� sin ✓ 0 cos ✓ 00 0 0 1
3
775
![Page 51: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/51.jpg)
• Frame matrix is now extended to 3 axes, linear part is a rotation
• Transforming points works the same
• Frame inversion works the same
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Transformations and Frames
37
p = Fpl pl = F�1p
F�1F =
RT �RTp0 1
� R p0 1
�= I
F =
R o0 1
�=
x y z o0 0 0 1
�
![Page 52: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/52.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
3D Rotations
38
![Page 53: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/53.jpg)
• A rotation in 2D is around a point
• A rotation in 3D is around an axis
– so 3D rotation is w.r.t a line, not just a point
– there are many more 3D rotations than 2D
– a 3D space around a given point, not just 1D
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
2D 3D
General Rotation Matrices
39
![Page 54: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/54.jpg)
• In 2D, a rotation has just an angle
• In 3D, many equivalent representations
– Axis (direction) and angle
– Euler angles: 3 angles about 3 axes
– Quaternions
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Specifying rotations
40
[Wik
imed
iaC
omm
ons]
![Page 55: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/55.jpg)
• Express arbitrary rotations as combinations of three rotation around canonical axes
• Depends on the chosen axes and order, e.g.
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
41
Rxyz{✓x,✓y,✓z} = Rx
✓xRy✓yRz
✓z
[Wik
imed
iaC
omm
ons]
![Page 56: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/56.jpg)
• Express arbitrary rotations as combinations of three rotation around canonical axes
• Depends on the chosen axes and order, e.g.
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
41
Rxyz{✓x,✓y,✓z} = Rx
✓xRy✓yRz
✓z
[Wik
imed
iaC
omm
ons]
![Page 57: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/57.jpg)
• Used in real-life applications
– yaw, pitch, roll in airplanes
– pan, tilt, roll in cameras
• Used in user interfaces
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
42
[Ble
nder
]
[Wik
imed
iaC
omm
ons]
![Page 58: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/58.jpg)
• Gimbal lock: loss of a degree of freedom if one axis goes on top of another
• Major issue in user interfaces, e.g. FPS cameras, and animation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
43
[Wik
imed
iaC
omm
ons]
![Page 59: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/59.jpg)
• Gimbal lock: loss of a degree of freedom if one axis goes on top of another
• Major issue in user interfaces, e.g. FPS cameras, and animation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
43
[Wik
imed
iaC
omm
ons]
![Page 60: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/60.jpg)
• Gimbal lock: loss of a degree of freedom if one axis goes on top of another
• Major issue in user interfaces, e.g. FPS cameras, and animation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
43
[Wik
imed
iaC
omm
ons]
![Page 61: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/61.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
44
[CG
Gor
illa/
YouT
ube]
![Page 62: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/62.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Euler angles representation
44
[CG
Gor
illa/
YouT
ube]
![Page 63: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/63.jpg)
• Represent rotations as a normalized axis e and an angle θ• Compared to Euler angles: no gimbal lock, easier to differentiate
• Conversion to matrix by construction: create a frame that aligns the rotation axis with the x axis, then combine transforms
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Axis-angle representation
45
[Wik
imed
iaC
omm
ons]
R{e,✓} = FeRx✓F
�1e
![Page 64: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/64.jpg)
• The combination of two rotations is a rotation
– can prove with linear algebra
• Combine rotation matrices: just matrix multiply
• For other representation it is harder
• Option 1: convert to rotation matrices and back
– slow and numerically not well behaved
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Combining rotations
46
R = R2R1
![Page 65: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/65.jpg)
• Option 2: find closed form equations
– combination of Euler angles is hard in this manner
• Combination of axis-angles can be done analytically
– but with cumbersome notation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Combining rotations
47
R{e,✓} = R{e1,✓1} �R{e2,✓2} )
cos✓
2= cos
✓12cos
✓22
� sin✓12sin
✓22(e1 · e2)
sin✓
2e = sin
✓12cos
✓22e1 + cos
✓12sin
✓22e2 � sin
✓12sin
✓22(e1 ⇥ e2)
![Page 66: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/66.jpg)
• Quaternions introduce a more convenient notation for rotations
• Quaternions are 4-dimensional entities defined in a special space that can be though of as associating a scalar and a 3D vector
• We define addition and multiplication operations as
• The quaternion conjugate is written as
• We define the quaternion norm as the product with its conjugate
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Quaternions
48
q = (w, x, y, z) = (s,v) q 2 H, s 2 R,v 2 R2
q1 + q2 = (s1 + s2,v1 + v2)
q1q2 = (s1s2 � v1 · v2, s1v2 + s2v1 + v1 ⇥ v2)
q̄ = (s,�v)
|q| =pqq̄ =
ps2 + |v|2
![Page 67: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/67.jpg)
• Quaternions of unit length represent axis-angle rotations
– the advantage is in the notation used
– note that not all quaternions are rotations
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Quaternions
49
R{e,✓} ) q = (sin , cos v̂) with =✓
2, v̂ =
e
|e|
![Page 68: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/68.jpg)
• We can rotate a vector p by a unit quaternion q using quaternion multiplication and conjugation
• Combining two rotations is done with quaternion multiplication
– same order as matrix multiplies
• This gives us a notation to manipulate combinations of rotations
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Quaternions
50
p0 = qpq̄
q = q2q1
![Page 69: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/69.jpg)
• We can convert a quaternion back to an axis-angle with
• Conversion to a matrix is more complex
– derived via algebraic manipulations
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Quaternions
51
q = (s,v) ) R{e,✓} with ✓ = atan2(|v|, s), e =v
|v|
Rq =
2
41� 2(q2y + q2z) 2(qxqy � qzqw) 2(qxqz + qwqy)2(qxqy + qwqz) 1� 2(q2x + q2z) 2(qyqz � qwqx)2(qxqz � qwqy) 2(qyqz + qwqx) 1� 2(q2x + q2y)
3
5
![Page 70: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/70.jpg)
• Fast operations
• More concise notation for rotation composition
• Numerically stable for small increments
• Can convert to matrices and axis-angle
• Main reason: very useful in animation (see later)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Why quaternions
52
![Page 71: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/71.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Vectors and normals
53
![Page 72: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/72.jpg)
• Recall the distinction points vs. vectors
– vectors are just offsets, or differences, between points
– points have a location, represented by vector offset from a fixed origin
• Points and vectors transform differently
• Points respond to translation; vectors do not
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Transforming vectors
54
![Page 73: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/73.jpg)
• In homogeneous coordinates, let us exclude translation
– just put 0 rather than 1 in the last place
– and note that subtracting two points cancels the extra coordinate, resulting in a vector
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Transforming vectors
55
![Page 74: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/74.jpg)
• Differences of points (and therefore tangents) transform OK
• Normals do not -> use inverse transpose matrix
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Transforming normal vectors
56
![Page 75: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/75.jpg)
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Transformation Hierarchies
57
![Page 76: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/76.jpg)
• Represents a complex scene
• Option 1: List of objects
• Store a transform for each object
– transform applies to points of object
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Transforms data structures
58
![Page 77: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/77.jpg)
• Can represent drawing with flat list
– sometimes good for rendering
– but editing operations require updating many transforms
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as list of objects
59
![Page 78: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/78.jpg)
• Can represent drawing with flat list
– sometimes good for rendering
– but editing operations require updating many transforms
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as list of objects
59
![Page 79: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/79.jpg)
• Treat a set of objects as one
• Introduce new structure type: “group” or “node”
– contains references to other nodes or objects (meshes)
• This makes the scene into a tree
– interior nodes = groups or nodes
– leaf nodes = objects
– edges = membership of objects/nodes in groups
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as groups of objects
60
![Page 80: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/80.jpg)
• Add group as a new object type
– lets the data structure reflect the drawing structure
– enables high-level editing by changing just one node
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as groups of objects
61
![Page 81: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/81.jpg)
• Add group as a new object type
– lets the data structure reflect the drawing structure
– enables high-level editing by changing just one node
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as groups of objects
61
![Page 82: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/82.jpg)
• A name given to various kinds of graph structures (nodes connected together) used to represent scenes
• Simplest form: tree (just saw this)
– every node has one parent
– leaf nodes are identified with objects in the scene
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene graph
62
![Page 83: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/83.jpg)
• Transforms associated with nodes or edges
• Each transform applies to all geometry below it
– want group transform to transform each member
• Object transform is product of all matrices along path from root
– each object’s transform describes relationship between its local coordinates and its group’s coordinates
– frame-to-canonical transform is the result of repeatedly changing coordinates from group to containing group
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Concatenation and hierarchy
63
![Page 84: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/84.jpg)
• Parenting
– allow any object to have child objects
– every object is effectively also a group
– common in 3D modeling packages
• Instancing
– allow objects to belong to multiple parents/groups
– creates multiple “copies” of geometry by reference
– the base of all renderers and game engines
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Variants of the Scene Graph
64
![Page 85: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/85.jpg)
• Allow an object to be a member of more than one group at once
– transform different in each case
– leads to linked copies
– single editing operation changes all instances
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Instances
65
![Page 86: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/86.jpg)
• Allow multiple references to nodes
– reflects more of drawing structure
– allows editing of repeated parts in one operation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as tree of instances
66
![Page 87: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/87.jpg)
• Allow multiple references to nodes
– reflects more of drawing structure
– allows editing of repeated parts in one operation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as tree of instances
66
![Page 88: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/88.jpg)
• Allow multiple references to nodes
– reflects more of drawing structure
– allows editing of repeated parts in one operation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene as tree of instances
66
![Page 89: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/89.jpg)
• With instances, there is no more tree: an object that is instanced multiple times has more than one parent
• Transform tree becomes DAG: directed acyclic graph
– groups cannot contain themselves, even indirectly
• Transforms still accumulate along path from root
– now paths from root to leaves are identified with scene objects
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Scene with tree of instances
67
![Page 90: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/90.jpg)
• Affine transforms: flexible transformation including scaling
• Frames (rigid transforms): do not later physical properties such as (lighting power, body mass and moment of inertia
• Generic graphics applications store 4x4 generic matrices
– but if these are not well formed bad things happen
• Physically-based graphics: store frames
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Frames vs Transforms
68
![Page 91: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/91.jpg)
• Object-oriented with virtual functions
– not very common in real software
• References as pointers
– natural and easy to use
• References as indices
– better serialization, partial scene loading
– harder to code
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Implementing a hierarchy
69
struct node { frame3f xform; vector<mesh*> meshes; vector<node*> nodes; };
![Page 92: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/92.jpg)
• Pass a transform down the hierarchy, concatenate before drawing
• For trees, cache the world transform in the node
– more efficient, especially with animation
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Implementing traversal
70
void draw(node* nde, frame3f parent_xform) { auto xform = parent_xform * nde->xform; for(auto msh : nde->meshes) draw(msh, xform); for(auto child : nde->children) draw(child, xform); }
void update(node* nde, frame3f parent_xform) { nde->world_xform = parent_xform * nde->xform; for(auto child : nde->children) update(child, nde->world_xform); }
![Page 93: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/93.jpg)
• Editing a transformation
– good to present usable UI
• Getting transform of object in canonical (world) frame
– traverse path from root to leaf
• Grouping and ungrouping
– can do these operations without moving anything
– group: insert identity node
– ungroup: remove node, push transform to children
• Reparenting
– move node from one parent to another
– can do without altering position
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Basic scene graph operations
71
![Page 94: Geometric Transformations - Fabio Pellacinipellacini.di.uniroma1.it/teaching/graphics17a/lectures/07... · • Define a transformation by matrix multiplication • Such transformations](https://reader035.vdocuments.us/reader035/viewer/2022062317/5b84a5d17f8b9a317e8c3f57/html5/thumbnails/94.jpg)
• Objects have properties besides shape
– color, shading parameters
– approximation parameters (e.g. precision of subdividing curved surfaces into triangles)
– behavior in response to user input
– …
• Setting properties for entire groups is useful
– paint entire window green
• Some systems include some kind of property nodes
– in traversal they are read as, e.g., “set current color”
© 2017 Fabio Pellacini and Steve Marschner • Computer Graphics
Properties inheritance
72