Bài giảng Đồ họa và hiện thực ảo - Lesson 4: Các phép biến đổi Đồ hoạ

Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
1
1
Bài 4 Các phép biến đổi Đồ hoạ
Transformations
Le Tan Hung
Email: hunglt@it-hut.edu.vn
2
Phép biến đổi - Transformations 
z Trong kỹ thuật đồ hoạ 3 bước: Mô hình, Tô trát 
và Hiên thị (modeling, rendering, displaying)
z Với Modeling ( Mô hình hóa) :
z Transformation: là phép ánh xạ tọa độ điểm hay 
vector thành tọa độ hay vector khác
modeling 
coordinate Modeling 
transformation
Viewing 
transformation
world 
coordinate
viewing 
coordinate (eye 
coordinate)
3
Phép biến đổi Transformations
z Biến đổi mô hình hoá - Modeling transformations
– build complex models by positioning simple 
components
z Biến đổi tạo góc nhìn - Viewing transformations
– placing virtual camera in the world
– transformation from world coordinates to camera 
coordinates
z Biến Phép chiếu – Projection Transform
4
Transformations - Modeling
world
5
Phép biến đổi Affine
Affine Transformations?
z Phép biến đổi Affine là phép biến đổi tọa độ
điểm đặc trưng của đối tượng thành tập tương
ứng các điểm mới để tạo ra các hiệu ứng cho
toàn đối tượng.
– Ví dụ: phép biến đổi tọa độ với chỉ 2 điểm đầu cuối của
đoạn thẳng tạo thành 2 điểm mới mà khi nối chúng với
nhau tạo thành đoạn thẳng mới.
zCác điểm nằm trên đoạn thẳng sẽ có kết quả là
điểm nằm trên đoạn thẳng mới với cùng phép biến
đổi thông qua phép nội suy.
6
Modeling Transformations
Transform 
objects/points
Transform coordinate system
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
2
7
Biểu diễn Ma trận
z Việc biến đối các đối tượng làm thay đổi các 
điểm P thành các điểm Q theo thuật toán
z Việc biến đổi P sử dụng tọa độ của P (Px,Py) ánh 
xạ thành các tọa độ mới Q (Qx,Qy)
z Việc biến đổi có thể biểu diễn thông qua hàm T, 
hàm ánh xạ của điểm:
– T(Px,Py) = (Qx,Qy) 
– or:
– T(P) = Q
8
Matrix Representation
z Phép biến đổi đồ họa - affine transformation T ánh xạ 
tập P sang tập Q:
–
–
– where a, b, c, d, tx and ty là các hệ số
z Biểu diễn ma trận:
z i.e. 
⎟⎟⎠
⎞
⎜⎜⎝
⎛+⎟⎟⎠
⎞
⎜⎜⎝
⎛
⎟⎟⎠
⎞
⎜⎜⎝
⎛=⎟⎟⎠
⎞
⎜⎜⎝
⎛
y
x
y
x
y
x
t
t
P
P
dc
ba
Q
Q
xxxx t bP aP Q ++=
yyyy t dP cP Q ++=
Tr MP Q +=
9
Các phép biến đổi hình học hai
chiều
z Phương pháp biểu diễn đối tượng P = [ x y ]
z Phép biến đổi vị trí điểm
z Thực thi phép biến đổi đúng trên 1 điểm ảnh sẽ đúng
trên toàn bộ đối tượng
⎥⎦
⎤⎢⎣
⎡=
dc
ba
T
[ ] [ ] [ ] ( ) ( )[ ] [ ]'' y dybx *y * xcyax
dc
ba
xTX =++=⎥⎦
⎤⎢⎣
⎡=
y
x
z
pM
pW
10
Phép biến đổi
z Phép bất biến
z Phép biến đổi tỉ lệ - Scaling
z A scaling changes the size of an object with two scale 
factors, Sx and Sy
z Phép biến dạng
z A shearing shears an object in a particular direction, (in 
2D, it’s either in the x or in the y direction
⎥⎦
⎤⎢⎣
⎡=
10
01
T
[ ] [ ] [ ] ( )[ ] [ ]''
10
0
** yxyax
a
yxTX ==⎥⎦
⎤⎢⎣
⎡=
[ ] [ ] [ ] [ ] [ ]''
10
1
** yxdybx
b
yxTX =+=⎥⎦
⎤⎢⎣
⎡=
xz
y
11
Phép quay- Rotation
x = ρ cos α, y = ρ sin α ;
x’ = ρ cos (θ +α ), y’ = ρ sin (θ +α ) ;
x’ = ρ ( cosθ cosα - sinθ sinα )
= x cosθ - y sinθ
y’ = ρ ( sinθ cosα + cosθ sinα )
= x sinθ + y cosθ
[x' y']= [xcosθ - ysinθ xsinθ + ycosθ]
y
( x, y )
xα
ρθ
ρ
( x’, y’ )
⎥⎦
⎤⎢⎣
⎡
−= θθ
θθ
cossin
sincos
][T
12
Thuộc tính cơ bản của phép biến 
đổi Affine Transformations
z Preservation of lines:
– They preserve lines, so the image of a straight line is 
another straight line.
– This vastly simplifies drawing transformed line 
segments. 
– We need only compute the image of the two endpoints 
of the original line and then draw a straight line between 
them
– Preservation of collinearity guarantees that polygons will 
transform into polygons
– Affine transformations map lines to lines;
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
3
13
Thuộc tính 
z Preservation of parallelism 
– Preservation of parallelism guarantees that 
parallelograms will transform into parallelograms
z Preservation of proportional distances
– Preservation of proportional distances means that mid-
points of lines remain mid-points
z Affine transformations change volume by | 
Det(M) |;
14
Kết hợp các phép biến đổi
Composition of Affine Transforms
z Any affine transformation can be 
decomposed into elementary 
transformations.
z Mọi phép biến đổi phức tạp đều
có thể tạo thành từ các phép biến
đổi cơ sở như:
– Dịch chuyển - Translation
– Tỉ lệ - Scaling
– Quay- Rotation
– Biến dạng - Shearing
15
Affine transformations preserve 
affine combinations
z It is rare that we want to perform just one elementary 
transformation.
z Usually an application requires that we build a 
complex transformation out of several elementary 
ones
– e.g. translate an object, rotate it, and scale it, all in one move
z These individual transformations combine into one 
overall transformation
z This is called the composition of transformations.
z The composition of two or more affine transformations 
is also an affine transformation
16
Thuộc tính 
z Tác động lên tập các điểm đặc trưng của đối 
tượng tạo thành phép biến đổi cho đối tượng
z We have defined each transformation by their effects on 
single points
z In practice these will be applied to multiple points to 
transfer entire scenes or objects made up of many 
defining points
T
17
Điểm gốc - Pivotal points
Cho phép quay và tỉ lệ Rotation and Scaling
z The simple versions of rotation and scaling have been based around the 
origin.
z This means that when we rotate or scale, the object will also move, with 
respect to the origin
z Translate all points through (-c1,-c2)
z Rotate all points about the origin by
z Translate all points back through (c1,c2)
(c1,c2)
(0,0) 18
Pivotal points
z Often we wish to rotate or scale with respect to some 
pivotal point, not the origin
z Most significantly, we often wish to rotate or scale an 
object about its centre, or midpoint
z In this way, the object’s locat ... o P1P3 nằm trên mặt phẳng
(y, z)
z Euler’s Theorem: Every rotation around the origin 
can be decomposed into a rotation around the x-axis 
followed by a rotation around the y-axis followed by a 
rotation around the z-axis.
38
Biến đổi góc nhìn
Viewing Transformation
Lê Tấn Hùng
39
Nội dung
z Phép biến đổi nhìn cơ bản
z Biến đổi hệ thống tọa độ
z Camera
z Biến đổi 3D viewing
z Ví dụ
40
Hệ tọa độ thực
(WCS-World Coordinate System)
z Là hệ tọa độ của đối tượng
được các chương trình
ứng dụng sử dụng để mô
tả tọa độ của các đối
tượng trong thế giới thực. 
z Đơn vị trong hệ thống tọa
độ phụ thuộc vào không
gian và kích thước của đối
tượng được mô tả, có thể
từ A0, nm, mm ... đến m, 
km ...
z Modeling Coordinate
41
Hệ tọa độ thiết bị
(DCS-Device Coordinate System)
z Là hệ thống tọa độ của thiết bị nơi hiển thị
hình ảnh và không gian của đối tượng mà
ứng dụng mô tả. 
ThiÕt bÞ hiÓn thÞ
subselect.me
Vïng täa ®é thiÕt bÞ
VGA=640x480
42
Hệ tọa độ chuẩn
(NCS - Normalized Coordinate System)
z Chuyển đổi hệ tọa độ
z Giải quyết vấn đề khi ứng dụng chạy trên các
thiết bị khác nhau
z Có kích thước 1x1
Wcs
chuyÓn ®æi 1
NCS Dcs
chuyÓn ®æi 2
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
8
43
Phép biến đổi nhìn cơ bản
Basic Viewing Transform
z Phép biến đổi góc nhìn cơ bản là chuyển đổi từ 
hệ tọa độ mô hình sang hệ tọa độ mà hình 
(Modelling co-ordinates to Screen Coordinates)
z Vấn đề:
z Thay đổi tỷ lệ hình ảnh
z Hiệu ứng về tỉ lệ khi Zoom hình ảnh
z Phần nào của hình vẽ sẽ hiển thị ?
z Hiển thị tại đâu trên màn hình ?
z Chuyển đổi sẽ được thực hiện ra sao?
44
2-Dimensional Views
z A Window : Cửa sổ, Phần hình ảnh của thế giới 
thực sẽ được hiển thị
z A Viewport : Cổng nhìn, vùng màn hình nơi hình 
ảnh thế giới thực sẽ hiển thị
(wxmin,wymin)
(wxmax,wymax)
(vxmin,vymin)
(vxmax,vymax)
(wx,wy) (vx,vy)
45
Phép chuyển đổi
46
Phép biến đổi theo ma trận
z Ma trận chuyển vị theo Window
z Ma trận biến đổi tỉ lệ
z Ma trận chuyển vị theo tọa độ viewport
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
−−
=
1
010
001
1
YwXw
T ][
⎥⎥
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎢⎢
⎣
⎡
−
−=
100
0
minmax
minmax0
00
Xwmin-Xwmax
Xvmin-Xvmax
]1[
YwYw
YvYvS
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1
010
001
]2[
YyXv
T
47
Ma trận biến đổi tổng hợp của phép chuyển đổi
tọa độ
⎥
⎥
⎥
⎥
⎥
⎥
⎦
⎤
⎢
⎢
⎢
⎢
⎢
⎢
⎣
⎡
−
−−−
−
−=
=
1
minmax
minmax
minmin
Xwmin-Xwmax
Xvmin-Xvmax
minmin
0
minmax
minmax
0
00
Xwmin-Xwmax
Xvmin-Xvmax
][
]2[]1[]1[][
YwYw
YvYv
YwYvXwXv
YwYw
YvYv
T
TxSxTT
48
Ví dụ OpenGL - Windows and Viewports
z Plotting a function revisted..
//set the viewing coordinates
setWindow(xmin, xmax, ymin, 
ymax);
setViewport(0,640,0,480);
glBegin(GL_POINTS);
for(GLdouble x = xmin; x 
< xmax; x+=0.005 )
{
glVertex2d(x, pow(2.7183,-x) 
*cos(2*3.14*x));
}
glEnd();
//--------------- setWindow ---------------------
void setWindow(GLdouble left, Gldouble 
right, GLdouble bottom, GLdouble top)
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(left, right, bottom, top); 
}
//---------------- setViewport ------------------
void setViewport(GLdouble left, Gldouble 
right, GLdouble bottom, GLdouble top)
{
glViewport(left, bottom, right – left, top -
bottom);}
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
9
49
Biến đổi hệ tọa độ
Coordinate Transforms
(1,1)
u’
v’
(1,1)
u
v
x
yHệ tọa độ cục bộ
Đối tượng sau biến đổi trên tđ toàn 
cục 
z Là phép biến đổi trên hệ tọa độ của đối tượng. Việc thay 
đổi hệ tọa độ của đối tượng với hệ thống tọa độ chung 
tao nên sự thay đổi toàn cảnh
50
x
y
x
y
Các phép biến đổi
P
100
010
001
Q
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
(1,1)
u
v
(1,1)
u’
v’
51
x
y
Translation
x
y
P
100
10
01
Q
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
= ty
tx
(1,1)
u
v
(1+tx,1+ty)
u’
v’
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
11
0
0
ty
tx
ty
tx
100
10
01
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡ +
=
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
1
1
1
0
1
ty
tx
ty
tx
100
10
01
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
+=
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
1
1
1
1
0
ty
tx
ty
tx
100
10
01
origin v (1, 0, 0) u (0, 1, 0)
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1
ty
tx
O
52
x
y
Rotation
x
y
P
100
0
0
Q
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡ −
= θθ
θθ
cossin
sincos
(1,1)
u
v
u’
v’
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1
sin
cos
θ
θ
v
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡−
=
1
cos
sin
θ
θ
u
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1
0
0
O
53
x
y
Scaling
x
y
P
100
0
0
Q
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
= sy
sx
0
0
(1,1)
u
v
(sx*1,sy*1)
u
v
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1
0
0
O
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1
0
syu
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1
0
sx
v
54
Composite Transformations
⎟⎟
⎟
⎠
⎞
⎜⎜
⎜
⎝
⎛
−−
+−−
=
100
sin)cos1(cossin
sin)cos1(sincos
11
11
θθθθ
θθθθ
xy
yx
M
x
y
x
y
(1,1)
u
v
u’
v
’
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
−−
+−
1
sin)cos1(
sin)cos1(
11
11
θθ
θθ
yy
yx
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
−−+
+−+
1
sin)cos1(sin
sin)cos1(cos
11
11
θθθ
θθθ
yy
yx
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
−−+
+−+−
1
sin)cos1(cos
sin)cos1(sin
11
11
θθθ
θθθ
yy
yx
O = 
v = 
u = 
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
10
55
+
=
+
transform +transform
+
transform
Obviously we want 
something more 
versatile
56
Quan sát 3D - 3D Viewing
z Hiển thị hình ảnh 3D trên các thiết bị 
2D
z Mỗi 1 quan sát 3D trên cùng 1 đối 
tượng chỉ ra trạng thái chiếu của 
điểm quan sát đó.
– HÌnh ảnh chiếu 2D của đối tượng 3D
phụ thuộc vào người quan sát
z Các quan sát khác nhau được phân 
biệt bởi thông số: vị trí position, hướng 
orientation, và vùng nhìn field of view
57
Viewing
xW
zW
yW
yM
xM
zM
pM
yV
xV
-zV pV
pW
modeling 
coordinate Modeling 
transformation
world 
coordinate
viewing 
coordinate (eye coordinate)Viewing 
transformation
58
The Viewing Process
z Để tạo 1 cảnh nhìn gồm các bước
– Mô tả biểu diễn hình học 
– Định nghĩa điểm nhìn – Camera
z Chuyển đổi từ đối tượng 3D sang 2D
z Xác định vùng hiển thị của đố tượng
z Xác định camera để có thể tạo thành phép 
chiếu từ 3D thành 2D.
59
Khái quát về - Camera Analogy
z Khái niệm
z camera location: Vị trí trong thế 
giới thực
z viewing direction: Hướng chiếu 
của Camera. 
z up vector: Hướng phía trên của 
Camera
z aperture size: Vùng nhìn thấy của 
Camera
60
Viewing Coordinates
z Có thể sử dụng mô hình hệ 
thống tọa độ quan sát trên các 
thông số gồm:
– Điểm nhìn (VRP View Reference 
Point ): điểm gốc quan sát. Vị trí của 
Camera)
– Vector mặt phẳng quan sát (VPN 
View Plane Normal vector ): viewing 
direction)
– Vector hướng quan sát (VUP View 
UP vector ): establishes orientation of 
“camera”
),,( 321 nnn== N
Nn
),,( 321 uuu=×
×=
NV
NVu
),,( 321 vvv=×= unv
Three mutually orthogonal 
basis vectors:
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
11
61 61
Ví dụ: Viewing Transformation
(i) simple cases ( always view along negative z-axis )
(0, 0, z)
Điểm nhìn trên trục Z
zW -axis
zW
xW
yW
n
MWC,VC = T (0, 0, z,)
(a, b, c)
Nhìn ở vị trí (a, b, c) theo trục Z và 
ngược hướng zW-axis 
MWC,VC = T (-a, -b, -c )
zW
xW
yW
62 62
.and , , 
3
2
1
3
2
1
3
2
1
⎟⎟
⎟⎟
⎠
⎞
⎜⎜
⎜⎜
⎝
⎛
=
⎟⎟
⎟⎟
⎠
⎞
⎜⎜
⎜⎜
⎝
⎛
=
⎟⎟
⎟⎟
⎠
⎞
⎜⎜
⎜⎜
⎝
⎛
=
n
n
n
v
v
v
u
u
u
nvu
Ma trận biến đổi tọa độ thế giới sang tọa độ quan sát :
MWC,VC = R T
(xw, yw, zw) and (u, v, n) 2 hệ tọa độ với cùng 1 gốc.
Vector đơn vị (u, v, n) được định nghĩa theo WCS
63
3D Viewing Transformation
z Với điểm quan sát VRPoint (x0, y0, z0) the Viewing 
Transformation can be defined by composition of the 
following two transformations:
⎟⎟
⎟⎟
⎟
⎠
⎞
⎜⎜
⎜⎜
⎜
⎝
⎛
−
−
−
=
1000
100
010
001
0
0
0
z
y
x
T
⎟⎟
⎟⎟
⎟
⎠
⎞
⎜⎜
⎜⎜
⎜
⎝
⎛
=
1000
0
0
0
321
321
321
nnn
vvv
uuu
R
TRM •=VCWC ,
This is used to determine the location of each vertex in the 
camera co-ordinate system
xx vcwc
rr
,M=′
64
Viewing Transformation
z We might also achieve this in terms of the following 
transformation sequence:
– Translate the view reference point to the origin of the world co-
ordinate system
– Apply Rotations to align xv, yv and zv, axes, respectively
(x0, y0, z0)
⎟⎟
⎟⎟
⎟
⎠
⎞
⎜⎜
⎜⎜
⎜
⎝
⎛
−
−
−
1000
100
010
001
0
0
0
z
y
x
65 65
where ,
1000
0
0
0
321
321
321
⎟⎟
⎟⎟
⎟⎟
⎠
⎞
⎜⎜
⎜⎜
⎜⎜
⎝
⎛
=
nnn
vvv
uuu
R
Verification: etc , ? =
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
= 
1
3
2
1
u
u
u
R uR 
pV = MWC,VC pW
xW
zW
yW
pM
pW
pV
yV
xV -zV
66
• Recall we’ve re-expressed our world geometry in eye’s frame 
reference.
• To do projection, we use a synthetic camera by introducing a 
viewing frustum after the viewing transformation. 
66
xW
zW
yW
yM
xMzM
pM
yV
xV
-zV pV
pW
xW
zW
yW
pM
pW
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
12
67
Camera trong OpenGL
z Các hàm cơ bản
– glOrtho() and gluLookAt()
– these created parallel projections
z We now want to modify a scene to give us 
perspective projections.
– lines converge as they get further away
68 68
Demo : Viewing
from Nate Robins 
(Utah)
69
The Camera
z Khởi tạo Camera với phép 
chiếu phối cảnh
– Thay cho glOrtho() bằng:
– gluPerspective()
z gluPerspective
– viewAngle
– aspectRatio (W/H)
– near plane 
– far plane
70
The Camera
z The Perspective Camera
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(viewAngle, aspectRatio, N, F);
71
The Camera
z Positioning the Camera
– The camera is positioned using a combination 
of translations and rotations.
– Think if the camera being in the same location 
as the viewers eye.
72
The Camera
eye(x,y,z)
lookat(x,y,z)
up(x,y,z)
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
13
73
The Camera
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(eye.x, eye.y, eye.z, 
look.x, look.y, look.z, 
up.x, up.y, up.z);
74
The Camera
z The camera can have an arbitrary orientation and 
position.
z Therefore we can think of the camera having its own 
axes.
75
Camera Movement
z A camera has six degrees of freedom:
1. slid in 3 directions; and
2. rotated in 3 directions
z Camera Movement
– The camera can move along its axes.
– This is called sliding the camera.
76
The Camera
z Camera Movement
– To move the camera along the u axis you would simply perform 
z eye = eye + Du
– To move slide the camera in any direction:
eye.x = dU*u.x + dV*v.x + dN*n.x
eye.y = dU*u.y + dV*v.y + dN*n.y
eye.z = dU*u.z + dV*v.z + dN*n.z
z Camera Movement
– Besides physically moving the camera to another location
– the camera can be tilted in different directions to look at 
different parts of the scene.
u
v
n
77
The Camera
z Camera Movement
– Besides physically moving the camera to another 
location
– the camera can be tilted in different directions to look 
at different parts of the scene.
78
The Camera - Camera Movement
We use a plane analogy to describe the cameras 
movement.
z a rotation from the horizontal along the length is called PITCH
z a rotation from the horizontal along the width is called ROLL
z a rotation around the vertical is called YAW
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
14
79
The Camera
z Pitch
v’ = cos(θ)v – sin(θ)n
n’ = sin(θ)n + cos(θ)v
n
v
80
The Camera
z Roll
u’ = cos(θ)u + sin(θ)v
v’ = cos(θ)v - sin(θ)u
u
v
81
The Camera
z Yaw
n’ = cos(θ)n - sin(θ)u
u’ = sin(θ)n + cos(θ)u
u
n
82
A 3D Scene
z Notice the presence of
the camera, the
projection plane, and 
the world
coordinate axes
z Viewing transformations define how to acquire the image 
on the projection plane
83
Viewing Transformations
z Create a camera-centered view
z Camera is at origin
z Camera is looking along negative z-axis
z Camera’s ‘up’ is aligned with y-axis
84
2 Basic Steps
z Align the two coordinate frames by rotation
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
15
85
2 Basic Steps
z Translate to align origins
86
Creating Camera Coordinate 
Space
z Specify a point where the camera is located in world 
space, the eye point
z Specify a point in world space that we wish to become 
the center of view, the lookat point
z Specify a vector in world
space that we wish to 
point up in camera 
image, the up vector
z Intuitive camera 
movement
87
Constructing Viewing 
Transformation, V
z Create a vector from eye-point to lookat-point
z Normalize the vector
z Desired rotation matrix should map this 
vector to [0, 0, -1]T Why?
88
Constructing Viewing 
Transformation, V
z Construct another important vector from the 
cross product of the lookat-vector and the vup-
vector
z This vector, when normalized, should align with 
[1, 0, 0]T Why?
89
Constructing Viewing 
Transformation, V
z One more vector to define
z This vector, when normalized, should align with [0, 1, 0]T
z Now let’s compose the results
90
Compositing Vectors to Form V
z We know the three world axis vectors (x, y, z)
z We know the three camera axis vectors (r, u, l)
z Viewing transformation, V, must convert from world to 
camera coordinate systems
Khoa CNTT - DDHBK Hà nội
hunglt@it-hut.edu.vn
8682595
16
91
Compositing Vectors to Form V
z Remember
– Each camera axis vector is unit length.
– Each camera axis vector is perpendicular to others
z Camera matrix is orthogonal and normalized
– Orthonormal
z Therefore, M-1 = MT
92
Compositing Vectors to Form V
z Therefore, rotation component of viewing 
transformation is just transpose of computed 
vectors
93
Compositing Vectors to Form V
z Translation component too
z Multiply it through
94
Final Viewing Transformation, V
z To transform vertices, use this matrix:
z And you get this: