Nhân bản – Phụng sự – Khai phóng

3D Graphics
Computer Graphics
 CONTENTs

• Các phép biến đổi 3D

• Mô hình 3D

• Phép chiếu

• Quan sát đối tượng 3D

Computer Graphics 2
 CONTENTs

• Các phép biến đổi 3D

• Mô hình 3D

• Phép chiếu

• Quan sát đối tượng 3D

Computer Graphics 3
 Biến đổi 3D

• Các phép biến đổi hình học cơ sở

• Phép biến đổi ngược

• Kết hợp các phép biến đổi

Computer Graphics 4
 ...Biến đổi 3D

Heä toaï ñoä thuaàn nhaát

Pheùp bieán ñoåi affine 3D bieán ñieåm P(x,y,z) thaønh ñieåm Q(x’, y’, z’) coù
daïng:
Q=P.M
Trong ñoù, ma traän bieán ñoåi M:

Quay , tæ leä

Tònh tieán

Computer Graphics 5
 ...Biến đổi 3D

Các phép biến đổi hình học cơ sở

Ma traän cuûa pheùp bieán ñoåi tònh tieán:

y
Q(x’,y’,z’)

P(x,y,z)

z x

Computer Graphics 6
 ...Biến đổi 3D

Các phép biến đổi hình học cơ sở

Ñoái xöùng qua maët phaúng xy:

Ñoái xöùng qua maët phaúng xz:

Ñoái xöùng qua maët phaúng yz:

Computer Graphics 7
 ...Biến đổi 3D

Các phép biến đổi hình học cơ sở

Ñoái xöùng qua qua goác toïa ñoä:

Computer Graphics 8
 ...Biến đổi 3D
Các phép biến đổi hình học cơ sở

Ma traän cuûa pheùp bieán ñoåi tæ leä laø: y

z x
sx, sy, sz laø caùc heä soá tæ leä
Khi sx= sy= sz =s ta coù pheùp bieán ñoåi ñoàng daïng.
Trong pheùp bieán ñoåi treân, goác toaï ñoä O seõ coù aûnh laø chính noù. Khi
ñoù O laø taâm cuûa pheùp bieán ñoåi.

Computer Graphics 9
 ...Biến đổi 3D
Các phép biến đổi hình học cơ sở
Pheùp bieán ñoåi tæ leä, taâm (x0, y0, z0) ñöôïc moâ taû baèng daõy ba pheùp
bieán ñoåi sau:
• Tònh tieán taâm (x0, y0, z0) veà goác toaï ñoä.
• Bieán ñoåi tæ leä coù taâm ôû goác toaï ñoä.
• Tònh tieán ngöôïc taâm töø goác toaï ñoä veà laïi vò trí ban ñaàu.
Ma traän cuûa pheùp bieán ñoåi theo taâm (x0, y0, z0) nhö sau:

Computer Graphics 10
 ...Biến đổi 3D
Các phép biến đổi hình học cơ sở
Quay quanh moät truïc toaï ñoä
y
 Qui ước: Quay ngược chiều kim
đồng hồ theo trục sẽ tạo thành góc x
z
dương nếu nhìn về gốc tọa độ từ
nửa trục dương.

Quay quanh trục z:

z

Computer Graphics 11
 ...Biến đổi 3D
Các phép biến đổi hình học cơ sở
Quay quanh moät truïc toaï ñoä
Caùc ma traän bieåu dieãn pheùp quay quanh truïc x, y, z moät goùc  laàn löôït laø
R(x, ), R(y, ), R(z, ) nhö sau:

Quay quanh truïc x:

Quay quanh truïc y:

Quay quanh truïc z:

Computer Graphics 12
 ...Biến đổi 3D
y P1
Các phép biến đổi hình học cơ sở k
P0
Quay quanh moät truïc baát kyø kz
k’ x
d
Giaû söû truïc quay ñöôïc bieåu dieãn bôûi ñöôøng thaúng k ñi ky   k’’
qua 2 ñieåm P0 vaø P1. kx
z
Ñeå thöïc hieän pheùp quay quanh k, ta thöïc hieän moät chuoãi caùc thao taùc:
• Thöïc hieän moät soá pheùp tònh tieán, quay ñeå k truøng truïc z nhö sau:
• Tònh tieán k veà goác toaï ñoä (thaønh truïc k’) vôùi ma traän bieán ñoåi laø Tr(-P0).
• Quay quanh truïc x moät goùc  ñeå ñaëït k’leân maët phaúng xy (thaønh truïc k’’)
vôùi ma traän bieán ñoåi laø: R(x, ) .
• Quay quanh truïc y moät goùc  ñeå ñöa k’’veà truïc z vôùi mt bieán ñoåi laø: R(y,-).
• Quay quanh truïc z moät goùc  vôùi ma traän bieán ñoåi laø: R(z, ).
• Thöïc hieän ngöôïc laïi caùc pheùp bieán ñoåi sao cho k trôû veà vò trí ban ñaàu, caùc ma
traän bieán ñoåi laàn löôït laø: R(y,), R(x,-), Tr(P0).
Computer Graphics 13
 ...Biến đổi 3D
Các phép biến đổi hình học cơ sở y P1
k
P0
Quay quanh moät truïc baát kyø
kz
k’ x
d
Vaäy pheùp quay moät ñieåm quanh ky   k’’
kx
truïc k baát kyø vôùi moät goùc  ñöôïc z
phaân tích thaønh caùc chuoãi bieán ñoåi sau:
Tr(-P0).R(x, ).R(y,-). R(z, ).R(y,), R(x, -), Tr(P0).

Trong ñoù goùc quay ,  ñöôïc xaùc ñònh döïa treân cô sôû chieáu k’ leân maët phaúng
yz, ta coù:
k=P0P1 ;
cos()=kz/d ; sin()=ky/d
Computer Graphics
cos()=kz/k ; sin()=kx/k 14
 ...Biến đổi 3D
Phép biến đổi ngược

Taát caû caùc pheùp bieán ñoåi ñeàu coù ma traän nghòch ñaûo

• Ma traän nghòch ñaûo cuûa pheùp tònh tieán coù ñöôïc baèng
caùch thay caùc heä soá tx, ty, tz baèng -tx, -ty, -tz.

• Ma traän nghòch ñaûo cuûa pheùp bieán ñoåi tæ leä coù ñöôïc
baèng caùch thay caùc heä soá sx, sy, sz baèng 1/sx, 1/sy, 1/sz

• Ma traän nghòch ñaûo cuûa pheùp quay coù ñöôïc baèng caùch
thay goùc  baèng -.

Computer Graphics 15
 ...Biến đổi 3D
Kết hợp các phép biến đổi

Töông töï nhö trong tröôøng hôïp bieán ñoåi 2D.

Neáu M1 beán ñoåi P thaønh P’vaø M2 bieán ñoåi P’ thaønh Q thì

M=M1M2 seõ bieán ñoåi P thaønh Q.

 Ma traän cuûa pheùp bieán ñoåi keát hôïp coù theå ñöôïc tính töø
tích caùc ma traän cuûa caùc pheùp bieán ñoåi thaønh phaàn.

Computer Graphics 16
 ...Biến đổi 3D
Bài tập

1. Một hình chóp A(0, 0, 0), B(1, 0, 0), C(0, 1, 0) và D(0, 0, 1) được xoay
một góc 450 quanh đoạn thẳng L được xác định theo hướng V= j + k và
đi qua đỉnh C. Xác định tọa độ các đỉnh sau phép xoay.

y
2. Tìm các tọa độ mới của khối vuông đơn vị (1, 1, 0)
(0, 1, 0)
như hình bên đây, sau khi xoay quanh một trục
(0, 1, 1) (1, 1, 1)
xác định bởi điểm A(2, 1, 0) và B(3, 3, 1).
(1, 0, 0)
Góc xoay là 900 ngược chiều kim đồng hồ. (0, 0, 0) x

z (0, 0, 1) (1, 0, 1)

Computer Graphics 17
 CONTENTs

• Các phép biến đổi 3D

• Mô hình 3D
• Phép chiếu

• Quan sát đối tượng 3D

Computer Graphics 18
 Mô hình 3D

• Mô hình khung kết nối

• Mô hình các mặt đa giác

Computer Graphics 19
 …Mô hình 3D

Mô hình khung kết nối

Moâ hình khung keát nối (WF-WireFrame model) theå hieän hình daùng cuûa
moät ñoái töôïng 3D bôûi 2 danh saùch:

• Danh saùch caùc ñænh (vertices): löu toaï ñoä caùc ñænh.

• Danh saùch caùc caïnh (edges): löu 2 ñænh ñaàu vaø cuoái cuûa töøng
caïnh.

Computer Graphics 20
 …Mô hình 3D
Danh sách cạnh
Mô hình khung kết nối Cạnh Đầu Cuối
1 1 2
2 2 3
3 3 4
4 4 5
Danh sách đỉnh 5 5 1
z 6 6 7
Đỉnh x y z 7 7 8
4
3 1 0 0 0 8 8 9
5 2 0 1 0 9 9 10
9
10 8 3 0 1 1 10 10 6
1 4 0 0.5 1.5 11 1 6
5 0 0 1 12 2 7
6 1 0 0 13 3 8
1 2 y
7 1 1 0 14 4 9
6 1 8 1 1 1 15 5 10
7 9 1 0.5 1.5 16 2 5
x 1
10 1 0 1 17 1 3

Computer Graphics 21
 …Mô hình 3D
Mô hình khung kết nối
Danh sách đỉnh Danh sách cạnh
Z
Đỉnh X Y Z Cạnh Đầu Cuối
12
(-1,-1,3) 1 1 1 -3 1 1 5
10 (-1,-1,2) 2 -1 1 -3 2 2 6
11 3 -1 -1 -3 3 3 12
(1,-1,3)
4 1 -1 -3 4 4 11
9
(1,-1,2) 7
(-1,-1,0)
1 6 5 1 1 0 5 5 6
(-1,1,0)
6 -1 1 0 6 6 7
1 Y 7 -1 -1 0 7 7 8
8
(1,-1,0) 5 8 1 -1 0 8 8 5
(1,1,0)
9 1 -1 2 9 9 10
3 2 10 -1 -1 2 10 11 12
X (-1,-1,-3) (-1,1,-3)
11 1 -1 3
4
(1,-1,-3)
1 12 -1 -1 3
(1,1,-3)

Computer Graphics 22
 …Mô hình 3D
Mô hình khung kết nối
typedef struct 3DPoint{
int x; int y; int z;
};
typedef struct EdgeType{
int beginP;
int endP;
};

typedef struct WireFrame{

int numVertex, numEdge;
3DPoint vertex[MAX];
EdgeType edge[MAX];
};

Computer Graphics 23
 …Mô hình 3D

Mô hình mặt đa giác

Moâ hình caùc maët ña giaùc (Polygon Mesh model) theå hieän hình daùng
cuûa moät ñoái töôïng 3D bôûi 2 danh saùch:

• Danh saùch caùc ñænh: löu toaï ñoä caùc ñænh.

• Danh saùch caùc maët: löu thöù töï caùc ñænh taïo neân maët ñoù.

Computer Graphics 24
 …Mô hình 3D

Mô hình mặt đa giác

Ví dụ: Mô tả vật thể như trong hình vẽ sau:

Danh sách đỉnh Danh sách mặt Mặt 1

2
Đỉnh X Y Z mặt 1
1 x1 y1 z1 1 1,3,2 Mặt 5

2 x2 y2 z2 2 4,5,6 Mặt 4
3 x3 y3 z3 3 1,4,6,3 Mặt 3 3
4 x4 y4 z4 4 3,6,5,2 5
5 x5 y5 z5 5 1,2,5,4
4
6 x6 y6 z6
Mặt 2
6

Computer Graphics 25
 …Mô hình 3D

Mô hình mặt đa giác

typedef struct 3DPoint{

int x; int y; int z;
};
typedef struct FaceType{
int nFace;
int indexFace[MAX];
};

typedef struct FaceModel{

int numVertex, numFace;
3DPoint vertex[MAX];
FaceType face[MAX];
};

Computer Graphics 26
 CONTENTs

• Các phép biến đổi 3D

• Mô hình 3D

• Phép chiếu
• Quan sát đối tượng 3D

Computer Graphics 27
 Phép chiếu

• Chiếu (Projection) là biến đổi hệ tọa độ n-chiều sang hệ tọa độ m-chiều,

trong đó m<n.
• Trong đồ họa máy tính thường sử dụng biến đổi 3D -> 2D

• Các khái niệm liên quan

• Tia chiếu: đi qua các điểm trên đối tượng đến mặt phẳng để tạo ảnh 2D
• Mặt phẳng chiếu: nơi hình thành ảnh 2D của các đối tượng 3D

Computer Graphics 28
 …Phép chiếu
Hai nhóm phép chiếu đối tượng 3D sang 2D cơ bản
 Chiếu song song (parallel projection)
 Chiếu các điểm trên đối tượng theo đường song song
 Sử dụng nhiều trong đồ họa máy tính, vẽ kỹ thuật

 Chiếu phối cảnh (perspective projection)

 Chiếu các điểm trên đối tượng theo đường hội tụ đến tâm chiếu
 Sử dụng nhiều trong các trò chơi (cảm giác thực hơn)

Maët phaúng chieáu Maët phaúng chieáu

Taâm chieáu
Tia chieáu

Computer Graphics 29
 …Phép chiếu
Phép chiếu song song (Parallel projective)

Höôùng cuûa tia chieáu vuoâng goùc vôùi maët phaúng chieáu ta coù pheùp chieáu
tröïc giao (orthographic projection), Ngöôïc laïi, ta coù pheùp chieáu xieân (oblique
projection).

z z
a
P(x, y, z)
P(x, y, z)
x’
Maët phaúng chieáu x
Maët phaúng chieáu 
o P’(x’, y’) o P’’  Q
y
y’
x y x
y

Computer Graphics 30
 …Phép chiếu
z a
Phép chiếu song song (Parallel projective)
P(x, y, z)

Pheùp chieáu tröïc giao

ñeå chieáu ñieåm P(x, y, z) leân maët phaúng Maët phaúng
chieáu o P’(x’, y’)
chieáu thaønh P’(x’, y’), caùch ñôn giaûn laø
boû ñi thaønh phaàn z.
x y

z y
Nhìn töø z
phía treân

x
z x
y
Nhìn töø
x Nhìn töø Maët beân
phía tröôùc
y
Computer Graphics 31
 …Phép chiếu
Phép chiếu song song (Parallel projective) z
P(x, y, z)
Pheùp chieáu xieân
x’
Maët phaúng chieáu x

o P’’  Q
Đieåm P(x,y,z) seõ coù aûnh laø ñieåm P’. Trong ñoù: y
y’
• P’’ laø hình chieáu cuûa P qua pheùp chieáu tröïc giao. x
y
•  laø goùc taïo bôûi tia chieáu vaø P’P’’
•  laø goùc taïo bôûi P’P’’vôùi truïc y.
Bieát P, ,  ta coù theå xaùc ñònh ñöôïc ñieåm cheáu P’(x’,y’,z’).

 Pheùp chieáu song song baûo toaøn ñöôïc moái quan heä giöõa caùc chieàu cuûa ñoái
töôïng.
Tuy nhieân pheùp chieáu song song khoâng bieåu dieãn thöïc cuûa ñoái töôïng ba
chieàu.
Computer Graphics 32
 …Phép chiếu
Phép chiếu song song (Parallel projective)

Chiếu xiên: Chiếu lên mặt xy

xp=x
yp=y
z =0

Chiếu trực giao

Computer Graphics 33
 …Phép chiếu
Phép chiếu phối cảnh (Perspective projection)

 Các tia chiếu gặp nhau tại tâm chiếu (vanishing point)

1 tâm chiếu: Mặt chiếu song song

với hai trục tọa độ
3 tâm chiếu: Mặt chiếu không song song
với bất kỳ trục tọa độ nào

2 tâm chiếu: Mặt chiếu song song

với một trục tọa độ
Computer Graphics 34
 …Phép chiếu
Phép chiếu phối cảnh (Perspective projection)
Caùc tia chieáu hoäi tuï veà moät ñieåm duy nhaát goïi laø maét nhìn. Pheùp
chieáu phuï thuoäc vaøo vò trí töông ñoái cuûa maét nhìn vaø maët phaúng
quan saùt. y
P(x,y,z)
Giaû söû maët phaúng ñöôïcñaët taïi z=0,
y’ P’
taâm pheùp chieáu ñöôïc ñaët treân truïc z z
vôùi khoaûng caùch e vaø P naèm tröôùc maét nhìn
x’ x
z x
E(0,0,e)

Ta coù:

Töông töï vaø z’= 0

Computer Graphics 35
 …Phép chiếu
Phép chiếu phối cảnh (Perspective projection)

Maët phaúng chieáu Maët phaúng chieáu

Taâm chieáu
Tia chieáu

Nhận xét:
• Phép chiếu phối cảnh không giữ nguyên hình dạng của vật thể.
• Vật ở trước mặt phẳng chiếu thì được phóng lớn, sau mặt phẳng chiếu thì bị thu nhỏ.
Vât ở xa thì trông nhỏ, ở gần thì trông lớn.
• Ta có thể xem phép chiếu song song như là một phép chiếu phối cảnh nhưng có
tâm chiếu ở xa vô cực

Computer Graphics 36
 CONTENTs

• Các phép biến đổi 3D

• Mô hình 3D

• Phép chiếu

• Quan sát đối tượng 3D

Computer Graphics 37
 Quan sát đối tượng 3D

Khi mô tả việc quan sát một vật thể trong không gian ta cần lưu ý :
 Vật thể được chiếu lên một hệ theo quy tắc bàn tay phải (O,X,Y,Z)
 Mắt nằm ở gốc của một hệ theo quy tắc bàn tay trái (O’,X0,Y0,Z0)
 Mặt phẳng chiếu vuông góc với đường thẳng OO’
Trục Z0 hệ toạ độ thứ 2 hướng vào O. Hệ toạ độ thứ hai gọi là hệ toạ độ quan sát.

Z Y0 X0

X O’(M,N,P)
Y
Z0
O 
Y

X Màn hình

phép biến đổi một điểm P(x,y,z) trong hệ toạ độ thứ nhất sang P’(x0,y0,z0)
trong hệ toạ độ thứ hai rồi chuyển sang toạ độ trên mặt phẳng quan sát ?
Computer Graphics 38
 …Quan sát đối tượng 3D
•Bước 1: Tịnh tiến gốc O thành O’.
Z Z1

Ma trận của phép tịnh tiến (Lấy nghịch đảo): O’

Y1
O 
X1 Y
A= 

Hệ (X,Y,Z) biến đổi thành hệ (X1,Y1,Z1).

Computer Graphics 39
 …Quan sát đối tượng 3D

•Bước 2: Quay hệ (X1,Y1,Z1) một góc -‘ (‘=900 - ) quanh trục Z1 theo
kim đồng hồ. Phép quay này làm cho trục âm của Y1 cắt trục Z.

Z Z1 Z Z2

O’ O’

-’ Y1
O O X2 Y2
 Y
 X1 Y 

X
X

Computer Graphics 40
 …Quan sát đối tượng 3D
•Bước 2: Gọi Rz là ma trận tổng quát của phép quay quanh trục Z.
Vì đây là phép quay hệ trục nên phải dùng ma trận nghịch đảo R-1z.
Z Z2
R-1z =
O’
Y2
O X2
 Y
Thay a = -‘ . Theo các phép toán lượng giác: 
X
Sin(-') = -Sin(') = -Sin(900 - ) = -Cos()
Cos(-') = Cos(') = Cos(900-) = Sin()

Nên ma trận của phép quay tìm được sẽ có dạng: B =

hệ (X1,Y1,Z1) biến đổi thành hệ (X2,Y2,Z2).

Computer Graphics 41
 …Quan sát đối tượng 3D

• Bước 3: Quay hệ (X2,Y2,Z2) một góc 900 +  quanh trục X2. Phép biến đổi này
sẽ làm cho trục Z2 hướng đến gốc O.

Y3
Z Z2 Z

900 +

O’ O’
Y2 Z3
O X2 O X3
 Y
  Y

X
X

Computer Graphics 42
 …Quan sát đối tượng 3D
• Bước 3:

Ta có: R-1x =
Y3
Z

Thay góc a = 900 +  , O’

ta có: Cos(900 + ) = -Sin() Z3
và Sin(900 + ) = Cos() O X3
 Y
Nên ma trận tìm được sẽ có dạng: 
X

C=

 hệ (X2,Y2,Z2) biến đổi thành hệ (X3,Y2,Z3).

Computer Graphics 43
 …Quan sát đối tượng 3D
• Bước 4: Biến đổi hệ trực tiếp (X3,Y3,Z3) thành hệ gián tiếp.

Đổi hướng trục X3 bằng cách đổi dấu các phần tử của cột X.
Ta nhận được ma trận:
Z Y0

 −1 0 0 0 X0
 
 0 1 0 0
D=  0 0 1 0 O’
  O Z0
 0 1
 0 0 
 Y


 hệ (X3,Y3,Z3) biến đổi thành hệ (X0,Y0,Z0).

Computer Graphics 44
 …Quan sát đối tượng 3D

TÓM LẠI
Một điểm trong không gian biểu diễn trong hệ quan sát có dạng:
(x0 ,y0 ,z0 ,1) = (x, y, z, 1).A.B.C.D
Z Y0

Gọi T = A.B.C.D, ta tính được: X0

O’
O Z0
T= Y
 

Vậy: x0 = -x.Sin() + y.Cos()

y0 = -x.Cos().Sin() - y.Sin().Sin() + z.Cos()
z0 = -x.Cos().Cos() - y.Sin().Cos() - z.Sin() + R

Computer Graphics 45
 …Quan sát đối tượng 3D
Chiếu ảnh trong hệ quan sát lên màn hình
• Phép chiếu phối cảnh
Y0 P0
Y0 y'
P0(x0 ,y0 ,z0 )
O z0 Z0
D
P’(x’,y’) Mặt chiếu
O’ D Z0 O z0 Z0
z0
x’ x'
P0
x0 X0
X0 Mặt chiếu

Gọi D là khoảng cách từ mặt phẳng chiếu đến mắt(gốc tọa độ).
Ta có: x'/x0 = D/z0 và y’/y0 = D/z0
hay x’= x0.D/z0 và y’= y0.D/z0
Computer Graphics 46
 …Quan sát đối tượng 3D

Chiếu ảnh của hệ quan sát lên màn hình

• Phép chiếu phối cảnh
Nếu z>D thì ảnh thu nhỏ (hội tụ), ngược lại ảnh được phóng lớn.

Thu nhỏ Phóng to

Mắt
Vật thể

Màn hình Màn hình

Computer Graphics 47
 …Quan sát đối tượng 3D
Chiếu ảnh của hệ quan sát lên màn hình
• Phép chiếu phối cảnh
Y0 P0
Y0 y'
P0(x0 ,y0 ,z0 )
O z0 Z0
D
P’(x’,y’) Mặt chiếu
O’ D Z0 O z0
z0 Z0
x’
x0 x' P0
Mặt chiếu X0
X0

Gọi D là khoảng cách từ mặt phẳng chiếu đến mắt(gốc tọa độ).
Ta có: x'/x0 = D/z0 và y’/y0 = D/z0
hay x’= x0 .D/z0 và y’= y0 .D/z0
• Phép chiếu song song: Xem như tâm chiếu ở xa vô cực, ta có:
x' = x0 và y’ = y0
Computer Graphics 48
 …Quan sát đối tượng 3D
• 4 giá trị ảnh hưởng đến phép chiếu vật thể 3D:
+ Các góc  , 
+ Khoảng cách R từ O đến O’
+ Khoảng cách D từ O’ đến mặt phẳng quan sát.

Z Y0 X0

X O’(M,N,P)
Y
Z0
O 
Y

X Màn hình

•Như vậy:
-Tăng giảm  sẽ quay vật thể trong mặt phẳng (XY).
-Tăng giảm  sẽ quay vật thể lên xuống.
-Tăng giảm R để quan sát vật từ xa hay gần.
-Tăng giảm D để phóng to hay thu nhỏ ảnh.
Computer Graphics 49
 SUMMARY

• Các phép biến đổi 3D

• Mô hình 3D

• Phép chiếu

• Quan sát đối tượng 3D

Computer Graphics 50
 Nhân bản – Phụng sự – Khai phóng

Enjoy the Course…!

Computer Graphics 51