4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
2
Taøi lieäu moân hoïc
ª Saùch chính:– Computer Graphics, F. S. Hill, Macmillan Publishing
Company, 1990ª http://www.dit.hcmut.edu.vn/~minhle/dohoamaytinh
– slides– ...
ª Thoâng tin, thaûo luaän:– Taïo Yahoo groups?
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
3
Phaàn cöùng ñoà hoïa
ª Thieát bò hieån thò ñoà hoïa– Cathode-ray tube (CRT)– Liquid crystal display (LCD)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
4
Cô cheá hoaït ñoäng cuûa monitor ñoà hoïa moät maøu
ª refresh CRT (cathode-ray tube)
– Ñieàu khieån cöôøng ñoä (soá electron) cuûa tia electron– Ñieàu khieån vò trí tia electron chaïm lôùp phuû
phosphor
suùng electron
caùc taám hoäi tuïlôùp phuû phosphor
tia electron
caùc cuoän daây ñieàu khieånhöôùng ngang vaø ñöùng
connectorpins
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
5
Caùch hoaït ñoäng cuûa monitor ñoà hoïa maøu
ª Ñieàu khieån cöôøng ñoä cuûa tia electron
caëp ba caùc chaám phosphor
3 suùng electron
maøn hình
shadow mask
R
GB
R
BG
R: redG: greenB: blue
vaøng: R + Btraéng: R + G + B
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
6
Frame buffer
Frame buffer
ª Frame buffer laø boä nhôù ñeå tröõ aûnh caàn ñöôïc hieån thò leân monitor
ª Ví duï moät caáu truùc frame buffer ñôn giaûn nhaát: 1 bit cho moãi pixel
ª True color: 24 bits cho moãi pixel
Maøn hình
Video controllerSystem bus
0 1 1 00 0 1 00 0 1 00 0 1 0
moät pixel
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
7
Kieán truùc cuûa moät heä thoáng ñoà hoïa raster ñôn giaûn
ª Frame buffer laø moät phaàn cuûa system memory.ª Video controller truy caäp frame buffer phaûi thoâng
qua system bus
System memor
y
Video controll
erCPU
System bus
Monitor
I/O devices
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
8
Kieán truùc cuûa moät heä thoáng ñoà hoïa raster
ª Ñeå traùnh caùc nhöôïc ñieåm cuûa heä thoáng ñoà hoïa raster ñôn giaûn ñaõ thaáy, duøng– Display processor, ñeå thöïc thi moät soá thao taùc
ñoà hoïa– Frame buffer rieâng bieät
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
9
Kieán truùc cuûa moät heä thoáng ñoà hoïa raster (tieáp)
System memor
yCPU
System bus
I/O devices
Displayprocess
or memory
Video controlle
rMonitor
Frame
buffer
Display processor
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
10
LCD
ª Maøn hình tinh theå loûng: LCD (Liquid Crystal Display)ª Maøn hình LCD ñang nhanh choùng thay theá maøn
hình CRT.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
11
ÖÙng duïng cuûa ñoà hoïa maùy tính
ª Presentation graphics: MS PowerPoint
ª Paint system: MS Paintª Scientific data presentationª Interactive logic circuit designª Interactive architectural designª Design of mechanical structuresª Geographic information systemsª Process control visualizationª Flight simulatorª Graphics in image processingª Virtual reality
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
12
Trình baøy döõ lieäu khoa hoïc
Compressible flow aroundSpace shuttlescience.gmu.edu
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
13
Paint system
ª SuperPaint system: Richard Shoup, Alvy Ray Smith (PARC, 1973-79)
ª Photoshop
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
14
AÛnh gioáng nhö hình chuïp
ª AÛnh gioáng nhö hình chuïp (photorealistic image)ª AÛnh beân traùi coù ñöôïc do rendering (xaây döïng,
taïo ra) töø moät moät moâ hình 3D treân maùy tính, coøn aûnh beân phaûi laø aûnh chuïp.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
15
AÛnh gioáng nhö hình chuïp
ª Taïo aûnh gioáng nhö hình chuïp vôùi hieäu öùng ñaëc bieät (aûnh nhoøe do chuyeån ñoäng)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
16
Taïo aûnh khoâng gioáng nhö hình chuïp
ª Taïo aûnh khoâng gioáng nhö hình chuïp (non-photorealistic rendering)
ª Drebin et al. (1988), Levoy (1988), Haeberli (1990), Salesin et al. (1994-), Meier (1996)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
17
Caùc vaán ñeà cô baûn khi thieát keá öùng duïng ñoà hoïa
x
ª Moät ví duï thieát keá chöông trình ñoà hoïa maùy tính
y
Logo caàn veõLayout cuûa Logo:- thaønh phaàn hình hoïc- toïa ñoä, kích thöôùc- maøu- caùc thuoäc tính khaùc
Phaân tích thaønh caùc thaønhphaàn ñôn giaûn
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
18
Caùc thuû tuïc cô baûn cuûa thö vieän ñoà hoïa
ª Coù theå veõ Logo duøng caùc thuû tuïc sau
procedure Circle(cx, cy, radius : real; filled : boolean);procedure Rectangle(px, py, width, height, angle : real;
filled : boolean)(px, py): toïa ñoä goác döôùi beân traùi cuûa hình chöõ nhaät
angle: goùc giöõa hình chöõ nhaät vaø truïc x
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
19
Caáu truùc cô baûn cuûa moät chöông trình ñoà hoïa
ª Chöông trình veõ Logo
program DrawLogo(input, output);...begin
Enter_Graphics; {khôûi chaïy thieát bò ñoà hoïa}
Set_Color(black); {set the drawing color to black}
Circle(0.0, 5.0, 1.6, true); {veõ caùi ñaàu}{Caùc goïi Circle( ) khaùc}Rectangle(3.0, -0.4, 3.4, 1.2, 45.0, true); {tay traùi}{Caùc goïi Rectangle( ) khaùc}Exit_Graphics; {hoaøn taát laøm vieäc
vôùi thieát bò ñoà hoïa, thoaùt khoûi cheá ñoä ñoà
hoïa}end.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
20
Caùc thuû tuïc cô baûn
ª Enter_Graphics
– Khôûi ñoäng graphics modeª Exit_Graphics
– hoaøn taát graphics modeª LineNDC( )
– veõ ñoaïn thaúng trong NDC
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
21
API ñoà hoïa
ª Moät API (Application Programming Interface) ñoà hoïa laø moät giao dieän phaàn meàm (software interface) –khoâng phuï thuoäc platform (phaàn cöùng/heä ñieàu haønh)– cho caùc thao taùc ñoà hoïa cô baûn nhö veõ ñoaïn thaúng.– Moät API seõ coù moät hieän thöïc rieâng bieät treân
moät platform rieâng bieät.ª Duøng API ñoà hoïa ñeå xaây döïng caùc öùng duïng
ñoà hoïaª Hai API ñoà hoïa thoâng duïng hieän thôøi
– Direct3D– OpenGL
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
23
OpenGL
ª Caùc chöùc naêng cuûa OpenGL ñaõ ñöôïc hieän thöïc treân caùc neàn– X Window (Linux,...)– Microsoft Windows– ...
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
24
OpenGL (tieáp)
ª Ví duï: duøng OpenGL ñeå hieån thò hình sauª Caùc leänh cuûa OpenGL baét ñaàu baèng gl Caùc haèng baét ñaàu baèng GL_#include <whateverYouNeed.h>
main() {OpenAWindowPlease();
glClearColor(0.0, 0.0, 0.0, 0.0);glClear(GL_COLOR_BUFFER_BIT);glColor3f(1.0, 1.0, 1.0);glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);glBegin(GL_POLYGON);
glVertex2f(-0.5, -0.5);glVertex2f(-0.5, 0.5);glVertex2f(0.5, 0.5);glVertex2f(0.5, -0.5);
glEnd();glFlush();
KeepTheWindowOnThe ScreenForAWhile();}
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
25
Giao tieáp vôùi thieát bò ñoà hoïa
ª Device driver: moät taäp caùc routines ñeå lieân laïc vaø ñieàu khieån phaàn cöùng
ª Muïc ñích khi thieát keá vaø hieän thöïc device driver– Giaûm phuï thuoäc thieát bò– Taêng ñoäc laäp thieát bò
° API thoáng nhaát cho caùc loaïi thieát bò khaùc nhau
° Bao boïc phaàn laøm vieäc vôùi phaàn cöùng moät caùch thích hôïp
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
26
Giao tieáp vôùi thieát bò ñoà hoïa (tieáp)
ª Ví duï
– Duøng moät thieát bò khaùc thay file maõ nguoàn töông öùng cho ddLine, khoâng caàn thay ñoåi Line
procedure Line(x1, y1, x2, y2 : real);var xa, ya, xb, yb : real;begin
<Kieåm tra vaø ñieàu chænh laïi caùc ñieåm bieân neáu caàn>ddLine(xa, ya, xb, yb) {ñeå ddLine veõ thöïc söï}
end;
(sau ñaây, ddLine laø “device driver Line”)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
27
Khoâng gian maøu RGB
ª Maøu coù ñöôïc baèng caùch “troän” ba maøu caên baûn laø red, green, blue.
ª Ñaëc taû maøu: moãi thaønh phaàn maøu töông öùng vôùi moät soá naèm giöõa 0 vaø 1.
ª Caùc maøu quen thuoäc:– black = (0, 0, 0)– red = (1, 0, 0)– green = (0, 1, 0)– blue = (0, 0, 1)– yellow = (1, 1, 0)– white = (1, 1, 1)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
28
Khoâng gian maøu RGB (tieáp)
ª Hình khoái maøu RGB trong 3D– Ba truïc r, g, b cho caùc maøu caên baûn (red, green,
blue)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
29
Khoâng gian maøu RGB (tieáp)
ª Hình khoái maøu RGB trong 3D– Ba truïc r, g, b cho caùc maøu caên baûn (red, green,
blue)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
30
Khoâng gian maøu RGB (tieáp)
ª Coù theå duøng moät soá nguyeân khaùc 1 ñeå chæ möùc toái ña cuûa moãi thaønh phaàn maøu trong khoâng gian maøu RGB.– Thí duï:
° Ñaëc taû moãi thaønh phaàn maøu baèng moät soá nguyeân naèm giöõa 0 vaø 255.
Duøng 1 byte ñeå ñaëc taû moät thaønh phaàn maøu
Duøng 3 byte ñeå ñaëc taû moät maøu° “maøu 24 bit” (true color)
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
31
Löu aûnh
ª Coù theå löu aûnh döôùi caùc daïng– gif– jpeg– tiff– ppm (portable pixmap file format)
ª Trong moân hoïc naøy, seõ sinh aûnh vaø löu döôùi daïng ppm.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
32
Format cuûa file PPM
ª Phaàn ñaàu cuûa file PPM goàm
- A "magic number" for identifying the file type. A ppm file's magic number is the two characters "P3".
- Whitespace (blanks, TABs, CRs, LFs).- A width, formatted as ASCII characters in decimal.- Whitespace.- A height, again in ASCII decimal.- Whitespace.- The maximum color-component value, again in ASCII decimal.- Whitespace.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
33
Format cuûa file PPM (tieáp)
ª Phaàn thaân cuûa file PPM goàm
- Width height pixels each three ASCII decimal values between 0 and the specified
maximum value, starting at the top-left corner of the pixmap, proceeding in normal English reading order.
The three values for each pixel represent red, green, and blue, respectively; a value of 0 means that color is off, and the
maximum value means that color is maxxed out.- Characters from a "#" to the next end-of-line are ignored
(comments).- No line should be longer than 70 characters.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
34
Format cuûa file PPM (tieáp)
ª There is also a variant on the format, available by setting the RAWBITS option at compile time.
- The "magic number" is "P6" instead of "P3".- The pixel values are stored as plain bytes, instead of ASCII
decimal.- Whitespace is not allowed in the pixels area, and only a single
character of whitespace (typically a newline) is allowed after the maxval.- The files are smaller and many times faster to read and write.
Note that this raw format can only be used for maxvals less than or equal to 255.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
35
File PPM: moät ví duï
ª Here is an example of a small pixmap in this format:
P3 # feep.ppm 4 4 15 0 0 0 0 0 0 0 0 0 15 0 15 0 0 0 0 15 7 0 0 0 0 0 0 0 0 0 0 0 0 0 15 7 0 0 015 0 15 0 0 0 0 0 0 0 0 0
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
36
Xem aûnh daïng ppm
Phaàn meàm hieån thò aûnh daïng ppmª Pic2Pic v1.2, neàn MS Windows
– Input file formats: BMP, EMF, GIF, ICO, JPEG, JPG, PBM, PCX, PGM, PNG, PPM, TIF, TIFF, TGA, WMF
– Output file formats: BMP, JPG, PBM, PGM, PNG, PPM, TGA, TIF
– Download taïi www.wavelsoftware.com
ª Moät soá phaàn meàm khaùc treân neàn X Window (treân Linux,...), MS Windows.
4.9.2004 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính
37
Baøi thí nghieäm/thöïc haønh 1
ª 1. Caøi ñaët phaàn meàm ñeå xem aûnh daïng ppm treân moät neàn töï choïn (X Window treân Linux, MS Windows,...)
ª 2. Taïo baèng tay moät vaøi file daïng ppm ñeå thöû nghieäm.ª 3. Phaân tích, thieát keá, caøi ñaët, vaø kieåm tra caùc thuû
tuïc cô baûn cho moät thö vieän ñoà hoïa maø frame buffer ñöôïc bieåu dieãn baèng moät file daïng ppm.– Enter_Graphics, Exit_Graphics
– SetPixel, GetPixel– Bresenham– MichCirc
Ngoân ngöõ laäp trình: töï choïn (Pascal, C, C++,...) Neàn: töï choïn (X Window treân Linux, MS Windows,...)