transforms 16:9
1
Intro CG @ NCSU
Ben Watson
cgclass.csc.ncsu.edu
http://cgclass.csc.ncsu.edu/
2
transforms
go-vxlab.csc.ncsu.edu/
transformslides
http://go-vxlab.csc.ncsu.edu/raytracingslides
http://go-vxlab.csc.ncsu.edu/transformslides
3
go-vxlab.csc.ncsu.edu / webgldiscussion
http://go-vxlab.csc.ncsu.edu/webgldiscussion
4
5
6
7
http://takahirox.github.io/three.js/examples/webgl_animation_scene.html
http://takahirox.github.io/three.js/examples/webgl_animation_scene.html
http://takahirox.github.io/three.js/examples/webgl_animation_scene.html
8
webglfundamentals.org/webgl/
webgl-2d-geometry-matrix-transform-simpler-functions.html
https://webglfundamentals.org/webgl/webgl-2d-geometry-matrix-transform-simpler-functions.html
https://webglfundamentals.org/webgl/webgl-2d-geometry-matrix-transform-simpler-functions.html
https://webglfundamentals.org/webgl/webgl-2d-geometry-matrix-transform-simpler-functions.html
9
matrices
10
T(v) = Mt(v) = M • v = v’
11
I • v = v’ = v
12
translate & scale
13
14
T(X,Y,Z)(v) = T • v = v’
15
16
S(SX,XY,SZ)(v) = S • v = v’
17
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
18
https://threejs.org/examples/#misc_controls_transform
https://threejs.org/examples/#misc_controls_transform
https://threejs.org/examples/#misc_controls_transform
19
rotate
20
21
Rx(𝜽)(v) = Rx • v = v’
22
Ry(𝜽)(v) = Ry • v = v’
23
Rz(𝜽)(v) = Rz • v = v’
24
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
25
https://threejs.org/examples/#misc_controls_transform
https://threejs.org/examples/#misc_controls_transform
https://threejs.org/examples/#misc_controls_transform
26
↖
ask your
questions
BREAK
TIME
listen to
tunes
↓
♬
27
combinations
28
rodger.global-linguist.com/webgl/ch09/MultiJointModel_segment.html
http://rodger.global-linguist.com/webgl/ch09/MultiJointModel_segment.html
http://rodger.global-linguist.com/webgl/ch09/MultiJointModel_segment.html
29
Rx(𝜽x)( Ry(𝜽y)(v) ) = Rx • Ry • v
30
M1 • M2 = M’
31
M1 • M2 =
M’
M1 • M2 =
M’
32
rotate 1st, translate 2nd, then scale 3rd
=
=
S( T( R( v ) ) )
S • T • R • v
33
T = S( T( R( v ) ) )
T-1 = R-1( T-1( S-1( v ) ) )
S-1(x,y,z) = S(1/x,1/y,1/z)
T-1(x,y,z) = T(-x,-y,-z)
R-1(𝜽) = R(-𝜽)
34
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
35
translate -ctr, scale, translate ctr
T(ctr)( S( T(-ctr)( v ) ) )
36
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transforms-2d.html
37
translate -ctr, rotate translate ctr
T(ctr)( R( T(-ctr)( v ) ) )
38
combining rotations
39
rotate in z, rotate in y, rotate in x
Rx( Ry( Rz( v ) ) ) = ?!
40
41
42
www.realtimerendering.com/udacity/?load=demo/unit4-euler_angles.js
https://www.realtimerendering.com/udacity/?load=demo/unit4-euler_angles.js
http://www.realtimerendering.com/udacity/?load=demo/unit4-euler_angles.js
43
xx
xz
xy
oxyx
yz
yy oy
zx
zz
zy
oz
0 00 1
[ x x
x y
x z
]
[ z
x z
y z
z ]
[ y
x
y y
y z
]
[ 1 0 0 ]
[ 0
1
0
]
[ 0
0 1
]
( 0,0,0 )
( o
x , o
y , o
z )
related page
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
44
math.hws.edu/graphicsbook/demos/c2/transform-equivalence-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transform-equivalence-2d.html
http://math.hws.edu/graphicsbook/demos/c2/transform-equivalence-2d.html
45
46
Θ
A
to rotate around axis A by angle Θ…
47
change coordinate frame to align with A…
Θ
48
rotate by Θ around the new Y
Θ
49
change coordinate frame back to original state.
50
homogeneous coordinates
51
a cb d
e gf h
i kj l
0 00 1
a cb
d fe
0 10
for 3D, use 4×4 for 2D, use 3×3
52
a cb d
e gf h
i kj l
0 00 1
a cb
d fe
0 10
for 3D, use 4×4 for 2D, use 3×3
53
x
y
z
3D
x/w
y/w
z/w
x
y
z
1
homogeneous
x
y
z
w
points
54
x
y
z
w
x
y
z
0
x/w
y/w
z/w
x
y
z
3D homogeneous
vectors
55
translation
56
perspective divide
/
/
/
more detail
57
why matrices?
58
transform matrix
T(X,Y)(x,y)
S(X,Y)(x,y)
R(𝜃)(x,y)
algebra
x’ = x + X
y’ = y + Y
x
y
1
1 0 X
0 1 Y
0 0 1
x’
y’
1
=
x’ = Xx
y’ = Yy
x’ = cos(𝜃)x – sin(𝜃)y
y’ = sin(𝜃)x + cos(𝜃)y
x
y
1
X 0 0
0 Y 0
0 0 1
x’
y’
1
=
x
y
1
cos(θ) -sin(θ) 0
sin(θ) cos(θ) 0
0 0 1
x’
y’
1
=
59
R(𝜃)( S(Xs,Ys)( T(Xt,Yt)( x,y ) ) )
x’ = cos(𝜃)(Xs(x + Xt)) – sin(𝜃)(Ys(y + Yt))
y’ = sin(𝜃)(Xs(x + Xt)) + cos(𝜃)(Ys(y + Yt))
1 0 X
t
0 1 Y
t
0 0 1
X
s
0 0
0 Y
s
0
0 0
1
x
y
1
cos(θ) -sin(θ) 0
sin(θ) cos(θ) 0
0 0 1
x’
y’
1
=
a b c
d e f
0 0 1
x
y
1
x’
y’
1
=
60
R(𝜃)( S(Xs,Ys)( T(Xt,Yt)( x,y ) ) )
var tVector = vec2.fromValues(Xt,Yt); // xt and yt
var matrix = mat3.fromTranslation(tVector); // T transform
var sVector = vec2.fromValues(Xs,Ys); // xs and ys
mat3.multiply(matrix,mat3.fromScale(vec2.fromValues(sVector)),matrix); // S transform
mat3.multiply(matrix,mat3.fromRotation(𝜃),matrix); // R transform
1 0 X
t
0 1 Y
t
0 0 1
X
s
0 0
0 Y
s
0
0 0
1
x
y
1
cos(θ) -sin(θ) 0
sin(θ) cos(θ) 0
0 0 1
x’
y’
1
=
a b c
d e f
0 0 1
x
y
1
x’
y’
1
=
61
types of transforms
62
rigid body
translation rotation
63
rigid body
translation rotation
affine
scale
64
rigid body
translation rotation
affine
scale
transforms
perspective
65
https://goo.gl/forms/w1ryBBhpC1NGEwH22
https://goo.gl/ASDs6S
66
go deeper with readings…
sites.google.com/view/cgwiki-ncsu/topics/triangles-transforms
post reactions and… we might discuss them next time
log them and… get reading credit
https://sites.google.com/view/cgwiki-ncsu/topics/triangles-transforms
http://go-vxlab.csc.ncsu.edu/cgclassforumreadings
http://go-vxlab.csc.ncsu.edu/cgclassreadinglog
67
…and with videos
cgclass.csc.ncsu.edu/p/topic-notes.html#transforms
(youtube)
https://cgclass.csc.ncsu.edu/p/topic-notes.html#transforms
68
Requests, questions, thoughts?
go-vxlab.csc.ncsu.edu / transformsdiscussion
post them and… we’ll discuss them next time
log them and… get participation credit
http://go-vxlab.csc.ncsu.edu/transformsdiscussion
69