Bài giảng Đồ họa máy tính - Ngô Quốc Việt

Nội dung text: Bài giảng Đồ họa máy tính - Ngô Quốc Việt

1. CÁC KHÁI NIỆM CƠ BẢN NGÔ QUỐC VIỆT 2011
2. 1. Thiết bị hiển thị 2. Các đối tượng đồ họa cơ bản 3. Không gian màu 4. Nhắc lại đại số tuyến tính 5. Hệ toạ độ 6. Cách sử dụng OpenGL Đồ hoạ máy tính-Ngô Quốc Việt 2
3. Vector: plotter. Raster: màn hình, máy in. Đồ hoạ máy tính-Ngô Quốc Việt 3
4. CRT Đồ hoạ máy tính-Ngô Quốc Việt 4
5. LCD (Liquid Crystal Displays) Đồ hoạ máy tính-Ngô Quốc Việt 5
6. Plasma: nguyên lý giống CRT nhưng tác động bởi gas thay vì súng phóng tia. Đồ hoạ máy tính-Ngô Quốc Việt 6
7. Pixel: điểm ảnh trong thiết bị raster. . Sắc xám (từ 0 255), hoặc màu thể hiện bởi bộ ba (hay bộ bốn) giá trị 0 255. Độ phân giải: từ 320x200 2000x1500. Khái niệm điểm (point): tọa độ (x, y, z) vị trí trong không gian. Đường gấp khúc (polyline): dãy tọa độ {(x, y, z)}. Polygon: đường gấp khúc khép kín. Đồ hoạ máy tính-Ngô Quốc Việt 7
8. Phần cứng đồ hoạ . Chứa frame buffer Frame buffer Cartesian . Liên kết trực tiếp với Coordinates video controller CPU System Frame Video Monitor Memory Buffer Controller System Bus Đồ hoạ máy tính-Ngô Quốc Việt 8
9. current previous Cần đồng bộ •Sử dụng double buffering CPU System Double Video Monitor Memory Buffer Controller synchronized System Bus Đồ hoạ máy tính-Ngô Quốc Việt 9
10. I/O Devices System Bus Display System CPU Processor Memory Frame Video Monitor Buffer Controller Figure 2.29 from Hearn and Baker Đồ hoạ máy tính-Ngô Quốc Việt 10
11. Trích từ Foley et al Đồ hoạ máy tính-Ngô Quốc Việt 11
12. Lưu trữ cường độ của R, G, và B trong frame buffer. 24 bits per pixel = 8 bits red, 8 bits green, 8 bits blue DAC Đồ hoạ máy tính-Ngô Quốc Việt 12
13. Là phương pháp để xác định màu Ví dụ: người cảm nhận màu sắc qua . Màu (Hue): phân biệt đỏ, vàng, xanh, v.v . Độ bão hòa (Saturation): nhạt/đậm hơn bao nhiêu so với màu bão hòa. . Độ sáng (Lightness): cường độ sáng. Đôi khi còn gọi là brightness nếu đối tượng phát (như TV luôn gọi là brightness) Máy tính mô tả màu với (R, G, B) Đồ hoạ máy tính-Ngô Quốc Việt 13
14. Do đáp ứng tuỳ thuộc vào những ứng dụng khác nhau. Do gắn chặt với thiết bị Một không gian màu số sử dụng độ đo tuyến tính. Máy tính không sử dụng màu tuyến tính. Một số cần biểu diễn trực giác. Các không gian màu phổ biến: RGB, CMYK, HSL, YIQ, YUV, YCbCr, YCC, CIE (CIELab, CIELuv). Đồ hoạ máy tính-Ngô Quốc Việt 14
15. Biết rõ các không gian màu sẽ có ưu thế khi thực hiện các ứng dụng đồ hoạ, xử lý ảnh Ví dụ: nén ảnh có thể chuyển về không gian thích hợp sẽ nén tốt hơn. Nhận dạng: với không gian màu thích hợp sẽ thuận lợi hơn (bài toán color matching). Không phải không gian màu nào cũng phủ tối ưu màu. Đồ hoạ máy tính-Ngô Quốc Việt 15
16. Tần số ánh sáng có thể thấy được trong khoảng . Đỏ = 4.3 x 1014 hertz (700nm) . Tím = 7.5 x 1014 hertz (400nm) • Thấy rõ nhất: yellow-green ở 550 nm • Thấy yếu nhất: blue ở 440nm. Đồ hoạ máy tính-Ngô Quốc Việt 16
17. Humans có sắc tố cảm nhận ánh sáng được gọi là L, M, and S Mỗi cái có phổ khác nhau L L()E()d M M()E()d S S()E()d Đồ hoạ máy tính-Ngô Quốc Việt 17
18. Màu cộng (RGB) Màu trừ (CMYK) Shining colored lights Mixing paint colors and on a white ball illuminating with white light Đồ hoạ máy tính-Ngô Quốc Việt 18
19. Gần với cảm nhận mắt Hue (H): góc quay quanh trục đứng Saturation (S): giá trị từ 0 đến 1 chỉ ra độ bão hòa. Value (V): chiều cao của hình nón Đồ hoạ máy tính-Ngô Quốc Việt 19
20. Quan sát nón HSV từ trên xuống H S V Color 0 1.0 1.0 Red 120 1.0 1.0 Green 240 1.0 1.0 Blue * 0.0 1.0 White * 0.0 0.5 Gray * * 0.0 Black 60 1.0 1.0 ? 270 0.5 1.0 ? 270 0.0 0.7 ? Đồ hoạ máy tính-Ngô Quốc Việt 20
21. Tập 3 bước sóng có thể được kết hợp để tạo ra các bước sóng khác. The CIE (Commission Internationale d’Eclairage) xác định 3 d nguồn sáng X,Y, Z: Ý tưởng: bước sóng  có thể được tạo ra từ sự kết hợp của X,Y, và Z. Gần như tuyến tính với cảm nhận màu sắc. Đồ hoạ máy tính-Ngô Quốc Việt 21
22. Định nghĩa theo hình khối vuông dạng Khối vuông RGB nằm trong không gian CIE theo dạng Đồ hoạ máy tính-Ngô Quốc Việt 22
23. YIQ mô hình màu dùng cho ti vi màu ở America. Y: độ sáng; I (orange-cyan); Q (green-magenta). Nếu chỉ dùngY => ti vi trắng đen. Chuyển từ màu sang trắng/đen băng cách chỉ xét giá trị R. Chuyển đổi từ RGB sangYIQ Y 0.30 0.59 0.11 R I 0.60 0.28 0.32 G Q 0.21 0.52 0.31 B Đồ hoạ máy tính-Ngô Quốc Việt 23
24. Cyan, magenta, và yellow là phần bù của red, green, và blue . Có dạng là mằu trắng trừ đi thành phần màu tương ứng. . Giống như RGB, nhưng gốc ở màu white thay vì black. Thuận tiện cho thiết bị hardcopy như máy in laser . Nếu thêm mực cyan vào tran in, ánh sáng đỏ không bị phản chiếu . Thêm màu đen là một thành phần (CMYK) để tạo cân bằng giữa CMY. C 1 R M 1 G Y 1 B Đồ hoạ máy tính-Ngô Quốc Việt 24
25. Sử dụng chỉ số màu thay vì RGBA. . 2màu: chỉ số 0, 1. . 4 màu: chỉ số 0, 1, 2, 3. . 256 màu: chỉ số 0, 1, , 255. . Sử dụng bảng màu ánh xạ cho các chỉ số màu. . Ví dụ: ảnh 256 sắc màu, sử dụng bảng 256 màu. Ví dụ: ảnh sắc xám, ảnh “trắng đen”. Ưu điểm và nhược điểm? Đồ hoạ máy tính-Ngô Quốc Việt 25
26. Brightness: lượng ánh sáng (phát ra) Lightness: ‘trắng’ cỡ nào (nhận được) Ô trắng sẽ bị tối khi bị bóng đen chiếu vào nó. Đồ hoạ máy tính-Ngô Quốc Việt 26
27. Điểm: toạ độ (x, y). . Vị trí trong hệ toạ độ: điểm mốc, cột đèn, v.v. Đoạn thẳng: nối giữa hai điểm. Đường gấp khúc (polyline): nối nhiều đỉnh (vertex, endpoint). . Kiểu đường: biên giới, hàng rào. Đồ hoạ máy tính-Ngô Quốc Việt 27
28. Đường gấp khúc khép kín (polygon) Câu hỏi : tính diện tích đa giác và thuật giải thực hiện. Câu hỏi: tính tâm của đa giác. Viết cấu trúc thể hiện các đối tượng: điểm, polyline, polygon. Đồ hoạ máy tính-Ngô Quốc Việt 28
29. Đường ellipse, arc, đường bậc 2, bậc 3, Trích: Wikipedia Chú ý: các đối tượng đặc biệt đều được chuyển thành polyline hay polygon khi vẽ lên thiết bị. Đồ hoạ máy tính-Ngô Quốc Việt 29
30. Dot product: đo độ tương quan hai vector Đồ hoạ máy tính-Ngô Quốc Việt 30
31. Cross product của hai vector A, B là vector C trực giao với mặt phẳng chứa A và B. Hướng của C theo nguyên tác bàn tay phải a b a b sin.nˆ Chuẩn của C: Đồ hoạ máy tính-Ngô Quốc Việt 31
32. Định thức ma trận: Cộng từ trái sang phải. Trừ từ phải sang trái Đồ hoạ máy tính-Ngô Quốc Việt 32
33. Thế giới thực: kinh độ, vĩ độ, mét, kilômét; Toạ độ đối tượng: xe hơi, máy bay, nhà (đâu cần biết kinh, vĩ độ). Hệ toạ độ nhìn: mình quan sát mọi thứ ra sao (từ đâu, góc nhìn thế nào). Hệ toạ độ chiếu: phóng to, thu nhỏ, v.v. Toạ độ thiết bị: pixel. Đồ hoạ máy tính-Ngô Quốc Việt 33
34. Mọi vật thể đều quy về các toạ độ, màu sắc, ánh sáng. Qua các bước trung gian nhằm: tăng tốc độ, vẽ cho đẹp, thực tế, đa dạng. Render ra toạ độ thiết bị (pixel). Đồ hoạ máy tính-Ngô Quốc Việt 34
35. Download GLUT: Kết hợp với Visual C++. Copy files vào các folder sau: . glut.h VC/include/gl/ . glut32.lib VC/lib/ . glut32.dll windows/system32/ Header Files, luôn đưa các include sau vào đầu file header có sử dụng OpenGL. . #include Lib Files: Glu32.lib; GLaux.lib và OpenGL32.lib (nếu là GLUT cũ). Đồ hoạ máy tính-Ngô Quốc Việt 35
36. Đọc thêm về các không gian màu và cách chuyển đổi. Trình bày tham luận chi tiết về một không gian màu (định nghĩa, ưu nhược điểm, ứng dụng). Đọc thêm thuật giải Bresemham vẽ đường thẳng/cong trong thiết bị raster. Đồ hoạ máy tính-Ngô Quốc Việt 36
37. 1. Cài đặt: trò chơi nổ bóng (hay ảnh)gần nhau. 2. Cài đặt: minh hoạ một vài vấn đề của hình không gian (2 nhóm) dựa trên thư viện 3D OpenGL. 3. Cài đặt: lập trình minh họa các công thức phân tử hoá học với thư viện PaperVision 3D. 4. Cài đặt: viết một ứng dụng web (dùng Flex hoặc SilverLight) minh hoạ ứng dụng đồ hoạ 3D bất kỳ. 5. Cài đặt: tìm hiểu và cài đặt đồ hoạ 3D trên thiết bị di động (Android hoặc Windows Mobile) 6. Lý thuyết: radiosity - thuật giải render. 7. Lý thuyết: morphing-kỹ thuật biến hình. Đồ hoạ máy tính-Ngô Quốc Việt 37