Bài giảng Computer graphics and virtual reality - Bài 5: Nguyên lý về 3D và phép chiếu - Projection - Lê Tấn Hùng

Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
1
1
Bài 5
Nguyên lý về 3D và
phép chiếu-Projection
Lê Tấn Hùng
0913030731
hunglt@it-hut.edu.vn
2
Nguyên lý về 3D
z Ðồ họa 3 chiều - 3D computer graphics bao gồm việc bổ
xung kích thước về chiều sâu của đối tượng, cho phép ta
biểu diễn chúng trong thế giới thực một cách chính xác
và sinh động hơn.
z Tuy nhiên các thiết bị truy xuất hiện tại đều là 2 chiều, Do 
vậy việc biểu diễn được thực thi thông qua phép tô chát
– render để gây ảo giác illusion về độ sâu
z 3D Graphics là việc chyển thế giới tự nhiên dưới dạng
các mô hình biểu diễn trên các thiết bị hiển thị thông qua 
kỹ thuật tô chát (rendering).
3
Ðặc điểm của kỹ thuật đồ hoạ 3D
Có các đối tượng phức tapj hơn các đối tượng
trong không gian 2D
– Bao bởi các mặt phẳng hay các bề mặt
– Có các thành phần trong và ngoài
z Các phép biến đổi hình học phức tạp
z Các phép biến đổi hệ toạ độ phức tạp hơn
z Thường xuyên phải bổ xung thêm phép chiếu từ
không gian 3D vào không gian 2D
z Luôn phải xác định các bề mặt hiển thị
4
Các phương pháp hiển thị 3D
z Với các thiết bị hiển thị 2D:
– 3D viewing positions
– Kỹ thuật chiếu - projection: orthographic/perspective
– Kỹ thuật đánh dấu độ sâu - depth cueing
– Nét khuất - visible line/surface identification
– Tô chát bề mặt-surface rendering
– Cắt lát - exploded/cutaway scenes, cross-sections
z Thiết bị hiển thị 3D:
– Kính stereo - Stereoscopic displays*
– Màn hình 3D - Holograms
5
Different views of a 3D model
Shadows as depth cues
Perspective and 
Depth of Field
Exploded/cutaway scenes
6
Stereo Projections
z In OpenGL we can produce 
stereo views by creating two 
side-by-side viewports with 
slightly different viewing 
angles.
z The lookat point stays the 
same but the location of the 
eye moves.
z Human eyes are about 3 
inches apart, therefore a good 
value for D is 1.5
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
2
7
Stereo Projections
eye=(0,-1,2.5) eye=(0.5,-1,2.5)
8
3D GRAPHICS PIPELINE
WORLD SCENE/OBJECT
3D MODELLING
3D CLIPPING
PROJECTION
RASTERIZATION 
2D PIXELMAP DISPLAY
Modelling coordinates:
- world coordinate system, 
- object coordinate system
Camera coordinates
Screen/Window coordinates
Device coordinates
VIEWING
9
3D - Modelling
3D Modelling
Parametric
Polygonal
Particles
Implicit
2222 rzyx =++
θ
θ
2
4
cos
sin
=
=
y
x
10
Clipping 3D
view frustrum
outside view so
must be clipped
11
Viewing and Projection
viewport
3d models
camera setup
12
Rasterization
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
3
13
Phép chiếu
Định nghĩa về phép chiếu
Một cách tổng quát, phép chiếu là phép chuyển đổi những
điểm của đối tượng trong hệ thống tọa độ n chiều thành
những điểm trong hệ thống tọa độ có số chiều nhỏ hơn n. 
Định nghĩa về hình chiếu
Ảnh của đối tượng trên mặt phẳng chiếu được hình thành từ
phép chiếu bởi các đường thẳng gọi là tia chiếu (projector) 
xuất phát từ một điểm gọi là tâm chiếu (center of
projection) đi qua các điểm của đối tượng giao với mặt
chiếu (projection plan).
14
Các bước xây dựng hình chiếu
z 1. đối tượng trong không gian 3D với tọa độ thực được cắt theo một không
gian xác định gọi là view volume. 
z 2. view volume được chiếu lên mặt phẳng chiếu. Diện tích choán bởi view
volume trên mặt phẳng chiếu đó sẽ cho chúng ta khung nhìn. 
z 3. là việc ánh xạ khung nhìn vào trong một cổng nhìn bất kỳ cho trước trên
màn hình để hiển thị hình ảnh
C¾t theo view
volum
PhÐp chiÕu trªn
mÆt ph¼ng chiÕu
PhÐp biÕn ®æi vμo
cæng nh×n cña
täa ®é thiÕt bÞ
täa ®é thùc
3D
täa ®é theo vïng
c¾t khung nh×n
täa ®é thiÕt
bÞ
15 16
Phép chiếu song song
Parallel Projections
ƒ Phép chiếu song song - Parallel 
Projections là phép chiếu mà ở đó các tia
chiếu song song với nhau hay xuất phát từ
điểm vô cùng
ƒ Phân loại phép chiếu song song dựa trên
hướng của tia chiếu Direction Of Projection
và mặt phẳng chiếu -projection plane 
z Points on the object are projected to the 
viewing plane along parallel lines
z Preserves relative dimensions of the 
object but does not give a realistic 
presentation
A
D
C
B
projectio
n plane
D
’ C
’
B
’
A
’
centre of 
projection 
at infinity
17
ƒ Phép chiếu trực giao (Orthographic 
projection) là phép chiếu song song và 
tia chiếu vuông góc với mặt phẳng 
chiếu thường dùng mặt phẳng z=0
ƒ Ứng với mỗi mặt phẳng chiếu ta có 1 
ma trận chiếu tương ứng
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
0000
0010
0001
][ zT
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
0100
0000
0001
][ yT
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
0100
0010
0000
][ xT
18
Taxonomy of Projections
z Orthographic Projections
– Multiview Orthographic
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
4
19
Phép chiếu trục lượng (Axonometric)
z Phép chiếu trục lượng là phép chiếu mà hình chiếu thu được
z Phép chiếu Trimetric
z Là phép chiếu hình thành từ việc quay tự do đối tượng trên một trục
hay tất cả các trục của hệ tọa độ và chiếu đối tượng đó bằng phép
chiếu song song lên mặt phẳng chiếu (thường là mặt phẳng z = 0) 
vuông góc với tia chiếu
z trên cơ sở tỉ lệ co - SF của ảnh đối tượng trên mỗi trục là khác nhau.
⎥⎥
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢⎢
⎢
⎣
⎡
=
⎥⎥
⎥
⎦
⎤
⎢⎢
⎢
⎣
⎡
=
1000
10
10
10
][
1100
1010
1001
][ ''
''
''
zz
yy
xx
yx
yx
yx
TU
20
Trimetric
[ U ] :là ma trận vector đơn vị
của các trục x, y, z bất biến
[ T ] : là ma trận chiếu tổng hợp
tương ứng
SF- tỉ lệ co theo các trục là:
2
x
2
xx 'y'xf +=
2
y
2
yy 'y'xf +=
2
z
2
zz 'y'xf +=
21
Phép chiếu Dimetric
]][][[][ PzRxRyT =
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡ −
=
1000
0000
0010
0001
1000
00
00
0001
1000
00
0010
00
.
cossin
sincos
.
cossin
sincos
ϕϕ
ϕϕ
φφ
φφ
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−=
1000
00sincossin
00cos0
00sinsincos
][ ϕφφ
ϕ
ϕφφ
T
Là phép chiếu Trimetric với 2 hệ
số tỉ lệ co bằng nhau, giá trị thứ 3 
còn lại là tuỳ ý.
•Quay đối tượng quanh trục y theo
một góc φ,
•Quay quanh x theo một góc ψ
•Chiếu trên mặt phẳng z = 0 với tâm
chiếu tại điểm vô hạn
22
ϕ2222 cos)( '' =+= yyy yxf
ϕφφ 222222 sincossin)( '' +=+= zzz yxf
)(sin
2
1 zf±= −ϕ
)(sin
2
1
2 z
z
f
f
−
±= −φ
23
Phép chiếu Isometric
z Là phép chiếu trục lượng
mà ở đó hệ số co cạnh
trên 3 trục là bằng nhau
z Góc quay tương ứng là
35.26 và 45
z Ðược ứng dụng nhiều
trong việc xây dựng các
góc quan sát chuẩn cho
đối tượng trong các hệ
soạn thảo đồ họa
ϕ
ϕφ
2
2
2
1 sin
sinsin −=
ϕ
ϕφ
2
2
2
1
21
sin
sinsin −
−=
3
1±=ϕsin
045
026.35
±=
±=
φ
ϕ
21
311
31
1 2
2
2 /
/
/
sin
sinsin =−=−= ϕ
ϕφ
8165.03/2cos2 === ϕf
24
. 
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
5
25
Taxonomy of Projections
z Oblique Projections
26
Parallel Projections
axonometric
orthographic
oblique
isometric
27
Taxonomy of Projections
z Oblique Projections
– Combine the properties of Orthographic and 
Axonometric
– Preserves the object face; and
– Gives a better sense of the 3D nature.
28
Phép chiếu xiên - Oblique
z Phép chiếu Cavalier
z Phép chiếu Cabinet
29
Phép chiếu Cavalier
GPhép chiếu cavalier là phép chiếu xiên được tạo thành khi các
tia chiếu làm thành với mặt phẳng chiếu một góc 450
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−−=
1000
00
0010
0001
]''[
ba
T
α
α
sinfb
f
=
= cos a
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−−=
1000
00sincos
0010
0001
][ αα ffT
30
– f = 0, β = 900 phép
chiếu sẽ trở thành
phép chiếu trực giao. 
– Còn với f = 1 kích
thước của hình chiếu
bằng kích thước của
đối tượng => cavalier
– Phép chiếu Cavalier 
cho phép giá trị của α
biến đổi một cách tự
do α = 300 và 450
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
6
31
Phép chiếu Cabinet
– Phép chiếu xiên với hệ số co tỉ lệ f = 1/2 
0
22
1
22
1
435.63)
)21(1
2
1
(cos
)
1
(cos
=
+
=
+
=
−
−
f
fβ
32
Oblique Projections
D/2
D
D
D
Cavalier ProjectCabinet Projection
33
Phép chiếu phối cảnh
Perspective Projection
z Phép chiếu phối cảnh là phép chiếu mà các tia chiếu không song 
song với nhau mà xuất phát từ 1 điểm gọi là tâm chiếu.Phép chiếu
phối cảnh tạo ra hiệu ứng về luật xa gần tạo cảm giác về độ sâu của
đối tượng trong thế giới thật mà phép chiếu song song không lột tả
được.
z Các đoạn thẳng song song của mô hình 3D sau phép chiếu hội tụ tại 1 
điểm gọi là điểm triệt tiêu - vanishing point
z Phân loại phép chiếu phối cảnh dựa vào tâm chiếu - Centre Of 
Projection (COP) và mặt phẳng chiếu projection plane
34
Vanishing points
z Each set of parallel lines (=direction) meets at a 
different point: The vanishing point for this direction
z Sets of parallel lines on the same plane lead to 
collinear vanishing points: the horizon for that plane
z Easy examples 
– corridor
– higher = further away
z Good way to spot faked images
35
Điểm triệt tiêu
Vanishing point
z Nếu điểm triệt tiêu nằm trên trục tọa độ thì điểm 
đó được gọi là điểm triệt tiêu quy tắc - principle 
vanishing point
z The number of principal vanishing points is determined 
by the number of principal axes cut by the projection 
plane. 
z If the plane only cut the z axis (most common), there is 
only 1 vanishing point. 
z 2-points sometimes used in architecture and 
engineering. 3-points seldom used  add little extra 
realism
36
Perspective Projections
3-point perspective
2-point perspective
1-point perspective
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
7
37
Phép chiếu phối cảnh
38
Phép biến đổi phối cảnh
z Phép chiếu phối ca?nh của
các điểm trên đối tượng lên
trên mặt phẳng 2D thu được
từ phép chiếu trực giao và
phép biến đổi phối cảnh
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
100
0010
0001
][
r
Tr
⎥⎦
⎤⎢⎣
⎡
+++= 1111]1'''[ rz
z
rz
y
rz
xzyx
39
Perspective Projections
z Tham số:
– centre of projection (COP)
– field of view (θ, φ)
– projection direction
– up direction
40
Perspective Projections
z Projecting a 3D Point
z We use similar triangles to project the point onto the plane 
in the line of the eye.
– x’/x = N/-z (z in the negative direction)
– y’/y = N/-z
– Once projected onto a 2D plane the z coordinate is not needed.
near plane
N z
(x,y,z)
(x’,y’)
41
Perspective Projections
Consider a perspective projection with the viewpoint at the origin
and a viewing direction oriented along the positive -z axis and the
view-plane located at z = -d
y
yp
dz
yy
d
y
z
y
P
P =⇒=
-z
d
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−=⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−↔
⎥⎥
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎢⎢
⎣
⎡
−
=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
10100
0100
0010
0001
1
1
z
y
x
ddz
z
y
x
d
dz
y
dz
x
z
y
x
P
P
P
divide by homogenous ordinate to
map back to 3D space
a similar construction for xp⇒
42
Perspective Projection Details
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−↔
⎥⎥
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎢⎢
⎣
⎡
−
=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
dz
z
y
x
d
dz
y
dz
x
z
y
x
P
P
P
1
1
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−=⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
−
10000
0100
0010
0001
1
z
y
x
z
y
x
Flip z to transform to a left handed co-ordinate
system ⇒ increasing z values mean increasing
distance from the viewer.
PROJECTION
matrix
perspective
division
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
8
43
Phép chiếu phối cảnh 1 tâm
Giả sử khi mặt phẳng được đặt tại z = 0 và tâm phép chiếu
nằm trên trục z , cách trục z một khoảng zc = -1/r.
Nếu đối tượng cũng nằm trên mặt phẳng z = 0 thì đối tượng
sẽ cho hình ảnh thật. 
Phương trình biến đổi: 
[ x y z 1 ][ Tr ] = [ x y z rz+1 ] 
ma trận biến đổi một điểm phối cảnh [ Tr ] có dạng:
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
100
0010
0001
][
r
Tr
44
y
H G
D C
E F 
x
A B
z
y’
D’ C’
H’ G’
A’ E’ F’ B x
phép chiếu phối cảnh 1 tâm
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
000
0010
0001
1000
0000
0010
0001
1000
100
0010
0001
rr
[ ] [ ]10
1000
000
0010
0001
1 +=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
rzyx
r
zyx [ ] ⎥⎦
⎤⎢⎣
⎡
++= 10111''' rz
y
rz
xzyx
45
Phép chiếu phối cảnh 2 tâm
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
0100
010
001
][
q
p
Tpq [ ] [ ])1(
1000
0100
010
001
1 ++=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
qypxzyx
q
p
zyx
Y’
VP ≡ y = 10
D’ H’
C’,G’
VP
X=10
A’, E’B’, F’x’
VP (y=10)
D’, H’C’, G’
VP( x = 10)
A’, E’B’, F’
46
z [ Tc ] = [ Tpq ][ Tz ]
z 2 tâm chiếu:
z [ -1/p 0 0 1 ]
z [ 0 -1/q 0 1 ] 
z VP (Vanishing point) tương ứng trên 2 trục x và y là
điểm: [ 1/p 0 0 1 ] và [ 0 1/q 0 1 ].
[ ] ⎥⎦
⎤⎢⎣
⎡
++++++= 1)1()1()1(1''' qypx
z
qypx
y
qypx
xzyx
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
0000
010
001
1000
0000
0010
0001
1000
0100
010
001
q
p
q
p
47
Phép chiếu phối cảnh 3 tâm chiếu
z [ Tpqr ] = [Tp ][Tq ][Tr ]
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
100
010
001
1000
100
0010
0001
1000
0100
010
0001
1000
0100
0010
001
r
q
p
r
q
p
[ ] [ ])1(
1000
100
010
001
1 +++=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
rzqypxzyx
r
q
p
zyx
48
[ ] ⎥⎦
⎤⎢⎣
⎡
+++++++++= 1)1()1()1(1''' rzqypx
z
rzqypx
y
rzqypx
xzyx
y'
x'
D'
H' C'
G'
A', E' F' B'
VP ( y = 10)
VP ( x = 10 )
VP ( z = 10 )
y'
x'z'
A'
B'
C'
D'
H'
G'
F'
E'
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
9
49
z 3 tâm chiếu: 
– trên trục x tại điểm [ -1/p 0 0 1 ],
– y tại điểm [ 0 -1/q 0 1 ]
– z tại điểm [ 0 0 -1/r 1 ]. 
z VP sẽ tương ứng với các giá trị :
– [ 1/p 0 0 1 ], [ 0 1/q 0 1 ] [ 0 0 1/r 1 ]
z [ Tc ] = [ Tpqr ][ Tz ]
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
⎥⎥
⎥⎥
⎦
⎤
⎢⎢
⎢⎢
⎣
⎡
=
1000
000
010
001
1000
0000
0010
0001
.
1000
100
010
001
r
q
p
r
q
p
50
Đặc tính của phép chiếu phối cảnh
1. Parallel lines in 3D will 
meet at a vanishing point
2. Lines that pass behind the 
eye of the camera cause a 
catastropic “passage 
through infinity”.
3. Perspective projections 
usually produce 
geometrically realistic 
pictures.
51
Taxonomy of Projections
z Perspective
– Three Point
M.C. Escher: Ascending and Descending 
52
Classical Projections
Angel Figure 5.3
53
Phân loại các phép chiếu
PhÐp chiÕu h×nh häc
ph¼ng
PhÐp chiÕu song
song PhÐp chiÕu phèi c¶nh
Mét ®iÓm
Ba ®iÓm
Hai ®iÓm
Trùc giao PhÐp chiÕu
Xiªn
Cavalier
Cabinet
PhÐp chiÕu
kh¸c
ChiÕu
®øng
ChiÕu
c¹nh
Axonometric
Trimetric
Dimetric
Isometric
ChiÕu
b»ng
54
Viewing in OpenGL
z OpenGL has multiple matrix stacks - transformation 
functions right-multiply the top of the stack
z Two most important stacks: GL_MODELVIEW and 
GL_PROJECTION
z Points get multiplied by the modelview matrix first, and 
then the projection matrix
z GL_MODELVIEW: Object->Camera
z GL_PROJECTION: Camera->Screen
z glViewport(0,0,w,h): Screen->Device
Khoa CNTT – DHBK Hanoi
hunglt@it-hut.edu.vn
8682595
10
55
OpenGL Example
void SetUpViewing()
{
// The viewport isn’t a matrix, it’s just state...
glViewport( 0, 0, window_width, window_height );
// Set up camera->screen transformation first
glMatrixMode( GL_PROJECTION );
glLoadIdentity();
gluPerspective( 60, 1, 1, 1000 ); // fov, aspect, near, far
// Set up the model->camera transformation
glMatrixMode( GL_MODELVIEW );
gluLookAt( 3, 3, 2, // eye point
0, 0, 0, // look at point
0, 0, 1 ); // up vector
glRotatef( theta, 0, 0, 1 ); // rotate the model
glScalef( zoom, zoom, zoom ); // scale the model
}
56
Stereo Projections
z Faking depth in a 2D image
z Based on natural stereoscopic eye-brain system.
z Objects are not viewed with just one eye, but two 
eyes.
z Each eye looks at the object from a slightly 
different location.
57
Stereo Projections