Bài giảng Đồ họa máy tính - Chương 5: Biến đổi hình

ĐỒ HỌA MÁY TÍNH 
Trường Đại Học Bách Khoa TP Hồ Chí Minh 
Khoa Khoa học & Kỹ thuật Máy tính 
CHƯƠNG 5: 
BIẾN ĐỔI HÌNH 
NỘI DUNG TRÌNH BÀY 
Giới thiệu những khái niệm cơ bản của phép biến đổi affine. 
Phép biến đổi hình 2D 
Phép biến đổi hình 3D 
Biến đổi hệ trục tọa độ 
Sử dụng phép biến đổi affine trong chương trình 
Vẽ khung cảnh 3D với OpenGL 
CÁC KHÁI NIỆM CƠ BẢN 
Phép biến đổi affine là khái niệm cơ bản nhất của đồ họa máy tính , là trọng tâm của OpenGL. 
Dùng khung tọa độ và hệ tọa độ đồng nhất . 
Phép biến đổi affine tổng thể là hợp của 3 phép biến đổi affine cơ bản : phép biến đổi tỷ lệ , phép quay và phép tịnh tiến . 
x 
y 
x 
y 
z 
trước khi 
biến đổi 
sau khi 
biến đổi 
sau khi 
biến đổi 
trước khi 
biến đổi 
a) 
b) 
CÁC KHÁI NIỆM CƠ BẢN 
Ứng dụng của phép biến đổi 
Tạo khung cảnh 3D từ những đối tượng đơn giản 
dùng hình mẫu 
12 lần 
Tạo đối tượng phức tạp từ đối tượng đơn giản 
CÁC KHÁI NIỆM CƠ BẢN 
Ứng dụng của phép biến đổi 
# 
# 
Nhìn khung cảnh ở những góc nhìn khác nhau bằng cách thay đổi hướng , vị trí của camera 
Tạo hoạt hình bằng cách di chuyển và quay hệ tọa độ riêng của từng đối tượng 
CÁC KHÁI NIỆM CƠ BẢN 
Sử dụng phép biến đổi trong OpenGL 
x 
x 
y 
y 
z 
z 
P 3 
P 1 
P 2 
CT 
Xử lý & 
hiển thị 
P 1 , P 2 ,... 
Q 1 , Q 2 ,... 
glBegin(GL_LINES ); 
	glVertex3f(. . .); // gửi P1 đến đường ống 
	glVertex3f(. . .); // gửi P2 đến đường ống 
	glVertex3f(. . .); // gửi P3 đến đường ống 
glEnd (); 
Đường ống đồ họa : là một loạt những thao tác được áp dụng cho các điểm gửi xuống đường ống . 
CÁC KHÁI NIỆM CƠ BẢN 
Biến đổi đối tượng và biến đổi hệ trục tọa độ 
Biến đổi đối tượng : hệ trục tọa độ giữ nguyên , biến đổi đối tượng . 
Biến đổi hệ trục tọa độ : biến đổi hệ trục tọa độ , biểu diễn đối tượng trong hệ trục mới . 
CÁC KHÁI NIỆM CƠ BẢN 
Định nghĩa phép biến đổi tổng quát 
Phép biến đổi làm thay đổi điểm P trong không gian 2D ( hoặc 3D) thành một điểm Q bằng một công thức hay thuật toán T nào đó . 
x 
y 
x 
y 
z 
P 
Q 
T 
0 
P 
Q 
a) 
b) 
P = ( Px , Py , 1); Q = ( Qx , Qy , 1) ( Q - ảnh ) 
( Qx , Qy , 1) = T ( Px , Py , 1)	 ( T – phép biến đổi ) 
Q = T(P). 
CÁC KHÁI NIỆM CƠ BẢN 
Phép biến đổi affine 
Là phép biến đổi thông dụng trong đồ họa máy tính 
Có dạng đơn giản : tọa độ của Q là tổ hợp tuyến tính các tọa độ của P. 
 Q x = m 11 P x +m 12 P y +m 13 
 Q y = m 21 P x +m 22 P y +m 23 
T 
hàng thứ 3 luôn là (0, 0, 1) 
PHÉP BIẾN ĐỔI HÌNH 2D 
Phép tịnh tiến 
Q x = P x + m 13 
Q y = P y + m 23 
x 
y 
x 
y 
2 
1 
PHÉP BIẾN ĐỔI HÌNH 2D 
Phép biến đổi tỷ lệ 
Q x = S x P x 
Q y = S y P y 
x 
y 
x 
y 
x 
y 
Phép biến đổi tỷ lệ đều 
Phép biến đổi tỷ lệ không đều 
PHÉP BIẾN ĐỔI HÌNH 2D 
Phép biến đổi tỷ lệ ( phép đối xứng ) 
y 
y 
x 
y 
x 
x 
PHÉP BIẾN ĐỔI HÌNH 2D 
Phép biến đổi tỷ lệ ( phép đối xứng ) 
x 
y 
PHÉP BIẾN ĐỔI HÌNH 2D 
Phép quay 
	 Q x = P x cos (  ) – P y sin(  ) 
	 Q y = P x sin(  ) + P y cos (  ) 
y 
x 
y 
x 
60 0 
PHÉP BIẾN ĐỔI HÌNH 2D 
Phép quay ( chứng minh ) 
x 
y 
P 
Q 
R 
 
 
PHÉP BIẾN ĐỔI HÌNH 2D 
Phép trượt 
y 
x 
y 
x 
y 
x 
y 
x 
PHÉP BIẾN ĐỔI HÌNH 2D 
Nghịch đảo của phép biến đổi affine 
x 
y 
x 
y 
z 
P 
Q 
T 
0 
P 
Q 
a) 
b) 
T’ 
T 
T’ 
P = T‘Q = M -1 Q 
det M = m 11 m 22 – m 12 m 21 
đa số các trường hợp cột thứ 3 là (0, 0, 1) 
PHÉP BIẾN ĐỔI HÌNH 2D 
Nghịch đảo của phép biến đổi affine 
Phép biến đổi tỷ lệ 
Phép quay 
Phép trượt 
Phép tịnh tiến 
PHÉP BIẾN ĐỔI HÌNH 2D 
Hợp các phép biến đổi 
x 
y 
P 
Q 
W 
T 2 () 
T 1 () 
T () 
T 2 (T 1 P) = (T 2 T 1 )P 
Q’ 
Q 
P 
V 
P’ 
 
 
Tịnh tiến điểm P với vector v = (- V x , -V y ) 
Quay xung quanh gốc tọa độ góc  . 
Tịnh tiến điểm P về vị trí cũ. 
PHÉP BIẾN ĐỔI HÌNH 2D 
Tính chất của phép biến đổi affine 
Bảo toàn tổ hợp affine của các điểm 
T(a 1 P 1 + a 2 P 2 ) = a 1 T(P 1 ) + a 2 T(P 2 ) với a 1 + a 2 = 1	 
Bảo toàn đường thẳng và mặt phẳng 
Bảo toàn tính song song 
Ảnh hưởng đến diện tích : 
Bảo toàn tỷ lệ khoảng cách 
A 
B 
P 
t 
1 - t 
T ( B ) 
T ( A ) 
T ( P ) 
t 
1 - t 
T 
PHÉP BIẾN ĐỔI HÌNH 2D 
Tính chất của phép biến đổi affine 
Cột của ma trận M là khung tọa độ sau khi biến đổi 
x 
y 
 
i 
j 
m 1 
m 2 
m 3 
(-2, 3) 
Phép quay xung quanh điểm (-2, 3) với góc quay 30 0 
 Mỗi PBĐ affine là hợp của những PBĐ affine đơn giản 	 M = (tịnh tiến)(trượt)(tỷ lệ)(quay) 
m 1 = M i , m 2 = M j , m 3 = M 
PHÉP BIẾN ĐỔI HÌNH 3D 
Công thức tổng quát 
PHÉP BIẾN ĐỔI HÌNH 3D 
Phép tịnh tiến 
 Phép biến đổi tỷ lệ 
x 
y 
z 
z 
y 
x 
PHÉP BIẾN ĐỔI HÌNH 3D 
Phép trượt 
Phép quay 
x 
z 
y 
P 
Q 
P’ 
Q’ 
P’’ 
Q’’ 
Q = (P x , fP x + P y , P z ) 
 x-roll, y-roll, z-roll 
 khi góc quay là 90 0 : 
z-roll: x y 
x-roll: yz 
y-roll: zx 
PHÉP BIẾN ĐỔI HÌNH 3D 
Phép quay 
c) quay quanh trục y (30 0 ) 
d) quay quanh trục z (- 90 0 ) 
x 
x 
y 
y 
z 
z 
a) ngôi nhà 
b) quay quanh trục x (- 70 0 ) 
x 
x 
z 
z 
y 
y 
PHÉP BIẾN ĐỔI HÌNH 3D 
Hợp các phép biến đổi 
Phép quay xung quanh một trục bất kỳ 
x 
y 
z 
Q 
P 
 
 
 
u 
u  x. 
Quay xung quanh trục x với góc quay  . 
Khôi phục u. 
R u (  )=R y (-  )R z (  )R x (  )R z (-  )R y (  ) 
BIẾN ĐỔI HỆ TRỤC TỌA ĐỘ 
x 
y 
a 
b 
c 
d 
P 
 
 ’ 
i 
j 
i’ 
j’ 
( P x , P y , 1) T  
BIẾN ĐỔI HỆ TRỤC TỌA ĐỘ 
Hợp của nhiều phép biến đổi hệ trục tọa độ 
x 
y 
a 
b 
P 
c 
d 
e 
f 
T 1 
T 2 
Hệ tọa độ #1 
Hệ tọa độ #3 
Hệ tọa độ #2 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
x 
y 
32 
25 
#1 
#2 
glBegin(GL_LINES ); 
 glVertex2d(V[0].x, V[0].y);	 glVertex2d(V[1].x, V[1].y); 
	glVertex2d(V[2].x, V[2].y); 
	...// những điểm còn lại 
glEnd(); 
cvs.moveTo(V[0]); 
cvs.lineTo(V[1]); 
cvs.lineTo(V[2]); 
...// những điểm còn lại 
cvs.setWindow(...); 
cvs.setViewport(...); 
Có 2 cách vẽ ngôi nhà #1 
Vẽ ngôi nhà #2 ??? 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
Cách làm phức tạp 
Q = transform2D(M, P); 
cvs.moveTo(transform2D(M, V[0])); 
	cvs.lineTo(transform2D(M, V[1])); 
	cvs.lineTo(transform2D(M, V[2])); 
	...// những điểm còn lại 
- Vấn đề là khó tìm ra ma trận M 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
Cách làm đơn giản 
V 
V 
Q 
Q 
CT 
S 
S 
S y 
S x 
cửa sổ 
khung nhìn 
W V 
CT được khởi gán là ma trận đơn vị : 
CT = CT *M 
glScaled(sx, sy, 1.0) glTranslated(dx, dy, 0) glRotated(angle, 0, 0, 1) 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
Cách làm đơn giản 
 cvs.setWindow(...); 	 //thiết lập cửa sổ 
	 cvs.setViewport(...); // thiết lập khung nhìn 
cvs.initCT();	 	 //bắt đầu với biến đổi đồng nhất 
house(); 	 // vẽ ngôi nhà số #1 
cvs.translate2D(32, 25); //CT bây giờ là phép biến đổi tịnh tiến 
cvs.rotate2D(-30); //CT bây giờ bao gồm phép tịnh tiến và phép quay 
house(); // vẽ ngôi nhà số #2 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
void Canvas::initCT(void){	 
	glMatrixMode(GL_MODELVIEW);	 
	glLoadIdentity(); 
} 
void Canvas::scale2D(double sx, double sy){ glMatrixMode(GL_MODELVIEW);	 
	glScaled(sx, sy, 1.0); 
} 
void Canvas::translate2D(double dx, double dy) { glMatrixMode(GL_MODELVIEW );	 
	 glTranslated(dx , dy , 0); 
} 
void Canvas::rotate2D(double angle){ glMatrixMode(GL_MODELVIEW );	 
	 glRotated(angle , 0, 0, 1.0); 
} 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
a) 
b) 
 Ví dụ 
a) 
b) 
đường thẳng 30 0 
for(count =0; count<5; count++) 
{ 
	starMotif(); 
	cvs.rotate2D(72.0); 
} 
void drawFlake (){ 
 for(count =0; count<6;count++) 
 { 
	 flakeMotif (); 
	cvs.scale2D(1.0, -1.0); 
	 flakeMotif (); 
	cvs.scale2D(1.0, -1.0); 
	cvs.rotate2D(60.0); 
 } 
} 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
Lưu giữ CT để sau này dùng đến 
CT1 
CT2 
CT3 
CT1 
CT2 
CT3 
CT4 
CT1 
CT2 
CT3 
CT4 
CT1 
CT2 
CT3 
a) trước 
b) sau khi pushCT () 
c) sau khi rotate2D() 
d) sau khi 
popCT () 
CT3.rotate 
void Canvas::pushCT (){ 
 glMatrixMode(GL_MODELVIEW ); 
 glPushMatrix (); 
} 
void Canvas::popCT (){ 
 glMatrixMode(GL_MODELVIEW ); 
 glPopMatrix (); 
} 
SỬ DỤNG PHÉP BIẾN ĐỔI TRONG CHƯƠNG TRÌNH 
Ví dụ 
a) 
b) 
W 
H 
D 
L 
cvs.pushCT (); // so we can return here 
cvs.translate2D(W, H); // position for the first motif 
for(row = 0; row < 3; row++){ // draw each row 
 pushCT (); 
 for(col = 0 ; col < 3; col ++){ 
 motif(); 
 cvs.translate2D(L, 0);} //move to the right 
 cvs.popCT (); // back to the start of this row 
 cvs.translate2D(0, D); } //move up to the next row 
cvs.popCT (); //back to where we started