Giôùi thieäu ñoà hoïa maùy tính

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? 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) 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 caùc cuoän daây ñieàu khieån höôùng ngang vaø ñöùng suùng electron connector pins tia electron caùc taám hoäi tuï lôùp phuû phosphor 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 3 suùng electron shadow mask B G R caëp ba caùc chaám phosphor R G B maøn hình R: red G: green B: blue vaøng: R + B traéng: R + G + B Chöông 1: Giôùi thieäu ñoà hoïa maùy tính

6. 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 moät pixel 0 1 1 0 System bus 0 0 1 0 Video controller 0 0 1 0 0 0 1 0 Maøn hình Frame buffer 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 CPU System memory Video controller Monitor System bus I/O devices 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 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) CPU System memory I/O devices System bus Display processor Display processor memory Frame buffer Video controller Monitor 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. 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 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 around Space shuttle science.gmu.edu 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 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. 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) 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) 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 • Moät ví duï thieát keá chöông trình ñoà hoïa maùy tính y Phaân tích thaønh caùc thaønh phaàn ñôn giaûn x 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 Logo caàn veõ 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 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. 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 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 Chöông 1: Giôùi thieäu ñoà hoïa maùy tính

22. Direct3D • Microsoft Windows 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 • ... 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(); } 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 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) (sau ñaây, ddLine laø “device driver Line”) • 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; 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) 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) 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) 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) 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. 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. 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. 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. 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 0 15 0 15 0 0 0 0 0 0 0 0 0 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. 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,...) Chöông 1: Giôùi thieäu ñoà hoïa maùy tính