<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>Bài 1 – TỔNG QUAN KỸ THUẬT ĐỒ HỌA VÀ THỰC TẠI ẢO Mục tiêu-yêu cầu- kết quả </b>

<b>Mục tiêu:</b> Bài học nhằm cung cấp các kiến thức về Kỹ thuật đồ họa và thực tại ảo, các khái niệm cơ bản của hệ đồ họa

<b>Yêu cầu:</b> Sinh viên nắm vững các kiến thức cơ bản liên quan như kỹ thuật đồ họa điểm, kỹ thuật đồ họa vector, mơ hình màu

<b>Kết quả đạt được:</b> Sinh viên hiểu thế nào là một hệ đồ họa máy tính, các loại mơ hình màu, các thiết bị phần cứng, phần mềm hệ đồ họa, các ứng dụng của đồ họa máy tính hiện nay.

<b>1. Sơ lược lịch sử </b>

• 1960 William Fetter (Thuật ngữ kỹ thuật đồ hoạ máy tính (Computer Graphics) • 1960 - SAGE (Semi-Automatic Ground Environment System) Bút sáng

• 1960-1963 Dự án Sketchpad tại MIT

• 1963 Ivan shutherland (hội nghị Fall Joint Computer - lần đầu tiên khả năng tạo mới, hiển thị và thay đổi được thực hiện trong thời gian thực trên màn CRT)

• Wireframe graphics • Display Processors

• Luận văn tiến sỹ của Ivan Sutherland tại MIT

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

– Vấn đề tương tác người máy – Loop

Hiển thị

Người dùng sử dụng bút ánh sáng Máy tính hiển thị hình ảnh mới

– Sutherland tạo ra rất nhiều thuật toán cho CG

• 1966 Ralph Baer tạo các sản phẩm thương mại hướng người sử dụng đầu tiên – Odyssey Pinball

• 1967 GE đưa ra hệ thống mơ phỏng bay trên màn hình hiển thị màu đầu tiên cho NASA • Raster Graphics

• Bắt đầu cung cấp các tiêu chuẩn đồ họa – IFIPS • GKS: European – 2D, trở thành tiêu chuẩn ISO

• Core: North American – 3D, tuy nhiên không được trở thành tiêu chuẩn ISO • Michael Crichton’s “West World” với đồ họa 2D (1973)

• Lần đầu tiên máy tính được sử dụng để mơ phỏng hình ảnh • 1974 Intel phát triển bộ xử lý 8080.

• 1975 Bill Gates sáng lập Microsoft

• 1976 Steve Jobs và Steve Wozniak sáng lập Apple.

• 1977 Viện Hàn Lâm Điện Ảnh và Khoa Học đưa ra hạng mục Hiệu ứng Hình ảnh cho Oscar

• 1977 Star Wars dành giải Oscar về Hiệu ứng hình ảnh •1978 Superman

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

o VLSI xây dựng graphics pipeline – Các tiêu chuẩn công nghiệp

PHIGS RenderMan

– Networked graphics: X Window System – Tương tác Người - Máy (HCI)

Accumulation, stencil buffer CGraphics: 2000-03

– Photorealism

– Card đồ họa cho máy tính chiếm lĩnh thị trường – Nvidia, ATI, 3DLabs

– CGraphics trở thành công cụ cho công nghiệp sản xuất phim: Maya, Lightwave

<b>2. Khái niệm về đồ họa máy tính </b>

Đồ họa máy tính là những gì liên quan đến việc tạo, lưu trữ, xử lý và hiển thị hình ảnh hay mơ hình trên máy vi tính

Thuật ngữ Computer Graphics được William Fetter đặt ra vào năm 1960 nhằm mô tả cách thiết kế mới khi làm việc trong hãng Boeing. Đồ họa máy tính được ứng dụng để thiết kế buồng lái của phi cơng

Đồ họa máy tính là hướng phát triển rất nhanh chóng vì có rất nhiều ứng dụng: Cơ bản nhất như hiển thị phục vụ cho việc tương tác giữa người với máy tính khi làm việc

Thiết kế kỹ thuật, mỹ thuật

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Mô phỏng cơ học, mạch điện tử Trực quan hóa thơng tin khoa học Gaming, Virtual Reality,…

Phân tích thơng tin đầu vào cho các thiết bị thông minh như robot, thiết bị nhận dạng,…

<b>3. Các kỹ thuật đồ họa </b>

<i><b>3.1 Kỹ thuật đồ họa điểm </b></i>

Ngun lý: các mơ hình, hình ảnh đối tượng được hiển thị như một lưới điểm (grid) các pixel rời rạc, các pixel có vị trí xác định, hiển thị với một giá trị rời rạc (số nguyên) như thông số màu sắc hay độ sáng. Tập hợp các pixel tạo nên mơ hình, hình ảnh

<i><b>Phương pháp tạo: </b></i>

PP1: dùng phần mềm vẽ trực tiếp từng pixel dựa trên các lý thuyết mô phỏng (Fractal) để xây dựng nên đối tượng

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

PP2: rời rạc hóa hình ảnh thực của đối tượng, sau đó có thể sửa đổi hoặc xử lý mảng các pixel thu được dựa theo các phương pháp khác nhau để thu được hình ảnh đặc trưng của đối tượng

<i><b>3.2 Kỹ thuật đồ họa vector </b></i>

Nguyên lý: xây dựng mơ hình hình học cho đối tượng, xác định thuộc tính sau đó thực hiện tơ trát (rendering) để hiển thị từng điểm hình ảnh thực của đối tượng. Kỹ thuật này chỉ lưu trữ mơ tả tốn học của các thành phần trong mơ hình hình học cùng các thuộc tính mà khơng lưu tồn bộ các pixel hình ảnh tơ trát

<i><b>Sự khác biệt giữa Đồ họa điểm và Đồ họa vector: </b></i>

Đồ họa điểm có thể copy được các pixel qua lại giữa các hình ảnh

Đồ họa vector khơng thay đổi thuộc tính từng điểm mà có thể xử lý với từng thành phần hình học cơ sở của nó

Có thể quan sát hình ảnh ở nhiều góc độ khác nhau bằng cách thay đổi điểm và góc nhìn

<b>4. Phân loại của đồ họa máy tính </b>

Phân loại theo các lĩnh vực của đồ hoạ máy tính

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

Phân loại theo hệ toạ độ

- Kỹ thuật đồ hoạ hai chiều: là kỹ thuật đồ hoạ máy tính sử dụng hệ toạ độ hai chiều (hệ toạ độ phẳng), sử dụng rất nhiều trong kỹ thuật xử lý bản đồ, đồ thị.

- Kỹ thuật đồ hoạ ba chiều: là kỹ thuật đồ hoạ máy tính sử dụng hệ toạ độ ba chiều, địi hỏi rất nhiều tính tốn và phức tạp hơn nhiều so với kỹ thuật đồ hoạ hai chiều.

<i><b>Các lĩnh vực của đồ hoạ máy tính: </b></i>

- Các hệ CAD/CAM (Computer Aided Design/Computer Aided Manufacture System): kỹ thuật đồ hoạ tập hợp các công cụ, các kỹ thuật trợ giúp cho thiết kế các chi tiết và các hệ thống khác nhau: hệ thống cơ, hệ thống điện, hệ thống điện tử….

- Đồ hoạ minh hoạ (Presentation Graphics): gồm các công cụ giúp hiển thị các số liệu thí nghiệm một cách trực quan, dựa trên các mẫu đồ thị hoặc các thuật tốn có sẵn.

- Đồ hoạ hoạt hình và nghệ thuật: bao gồm các công cụ giúp cho các hoạ sĩ, các nhà thiết kế phim hoạt hình chuyên nghiệp làm các kỹ xảo hoạt hình, vẽ tranh... Ví dụ: phần mềm 3D Studio, 3D Animation, 3D Studio Max.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

- Kỹ thuật xử lý ảnh (Computer Imaging): sau quá trình xử lý ảnh cho ta ảnh số của đối tượng. Trong quá trình xử lý ảnh sử dụng rất nhiều các kỹ thuật phức tạp: kỹ thuật khôi phục ảnh, kỹ thuật làm nổi ảnh, kỹ thuật xác định biên ảnh.

- Kỹ thuật nhận dạng (Pattern Recognition): từ những ảnh mẫu có sẵn ta phân loại theo cấu trúc, hoặc theo các tiêu trí được xác định từ trước và bằng các thuật tốn chọn lọc để có thể phân tích hay tổng hợp ảnh đã cho thành một tập hợp các ảnh gốc, các ảnh gốc này được lưu trong một thư viện và căn cứ vào thư viện này ta xây dựng được các thuật giải phân tích và tổ hợp ảnh.

- Kỹ thuật tổng hợp ảnh (Image Synthesis): là lĩnh vực xây dựng mơ hình và hình ảnh của các vật thể dựa trên các đối tượng và mối quan hệ giữa chúng.

<b>5. Một số ứng dụng của đồ hoạ máy tính </b>

Đồ hoạ máy tính là một trong những lĩnh vực lý thú nhất và phát triển nhanh nhất của tin học. Ngay từ khi xuất hiện nó đã có sức lơi cuốn mãnh liệt, cuốn hút rất nhiều người ở nhiều lĩnh vực khác nhau như khoa học, nghệ thuật, kinh doanh, quản lý...Tính hấp dẫn của nó có thể được minh hoạ rất trực quan thơng qua các ứng dụng của nó.

- Xây dựng giao diện người dùng (User Interface)

Giao diện đồ hoạ thực sự là cuộc cách mạng mang lại sự thuận tiện và thoải mái cho người dùng ứng dụng. Giao diện WYSIWYG và WIMP đang được đa số người dùng ưu thích nhờ tính thân thiện, dễ sử dụng của nó.

- Tạo các biểu đồ trong thương mại, khoa học, kỹ thuật

Các ứng dụng này thường được dùng để tóm lược các dữ liệu về tài chính, thống kê, kinh tế, khoa học, toán học... giúp cho nghiên cứu, quản lý... một cách có hiệu quả.

- Tự động hố văn phòng và chế bản điện tử

- Thiết kế với sự trợ giúp của máy tính (CAD_CAM) - Lĩnh vực giải trí, nghệ thuật và mơ phỏng

- Điều khiển các quá trình sản xuất (Process Control) - Lĩnh vực bản đồ (Cartography)

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

- Giáo dục và đào tạo

<b>6. Các chuẩn giao diện của hệ đồ hoạ </b>

Mục tiêu căn bản của phần mềm đồ hoạ được chuẩn là tính tương thích. Khi các cơng cụ được thiết kế với hàm đồ hoạ chuẩn, phần mềm có thể được di chuyển một cách dễ dàng từ hệ phần cứng này sang hệ phần cứng khác và được dùng trong nhiều cài đặt và ứng dụng khác nhau.

<b>GKS (Graphics Kernel System): chuẩn xác định các hàm đồ hoạ chuẩn, được thiết </b>

kế như một tập hợp các công cụ đồ hoạ hai chiều và ba chiều.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

GKS Functional Description, ANSI X3.124 - 1985.GKS - 3D Functional Description, ISO Doc #8805:1988.

<b>CGI (Computer Graphics Interface System):</b> hệ chuẩn cho các phương pháp giao tiếp với các thiết bị ngoại vi.

<b>CGM (Computer Graphics Metafile):</b> xác định các chuẩn cho việc lưu trữ và chuyển đổi hình ảnh.

<b>VRML (Virtual Reality Modeling Language): ngôn ngữ thực tại ảo, một hướng </b>

phát triển trong công nghệ hiển thị được đề xuất bởi hãng Silicon Graphics, sau đó đã được chuẩn hóa như một chuẩn công nghiệp.

<b>PHIGS (Programmers Hierarchical Interactive Graphics Standard): </b>xác định các phương pháp chuẩn cho các mơ hình thời gian thực và lập trình hướng đối tượng. PHIGS Functional Description, ANSI X3.144 - 1985.+ Functional Description, 1988, 1992.

<b>OPENGL</b> thư viện đồ họa của hãng Silicon Graphics, được xây dựng theo đúng chuẩn của một hệ đồ họa năm 1993.

<b>DIRECTX</b> thư viện đồ hoạ của hãng Microsoft, Direct X/Direct3D 1997

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>7. Phần cứng đồ họa (Graphics Hardware) </b>

<i><b>7.1. Các thành phần phần cứng của hệ đồ hoạ tương tác </b></i>

CPU: thực hiện các chương trình ứng dụng.

Bộ xử lý hiển thị (Display Processor): thực hiện công việc hiển thị dữ liệu đồ hoạ. Bộ nhớ hệ thống (System Memory): chứa các chương trình và dữ liệu đang thực hiện.

Gói phần mềm đồ hoạ (Graphics Package): cung cấp các hàm đồ hoạ cho chương trình ứng

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

GPU: thành phần xử lý chính trên bo mạch đồ họa với mục đich tăng tốc và phù hợp với các phần mềm đồ họa.

<i><b>Đặc điểm: </b></i>

– Programmability ( khả năng lập trình) – Precision (độ chính xác)

– Power

<i><b>Ưu điểm </b></i>

• Modern GPUs có khả năng lập trình

– Lập trình trên pixel, vertex, video engines – Hỗ trợ lập trình với các ngơn ngũ bậc cao • Modern GPUs hỗ trợ độ chính xác cao

– Hỗ trợ 32 bit floating point trên pipeline – Bộ nhớ

<i><b>Nhược điểm </b></i>

• GPUs được thiết kế chuyên cho video games

– Mơ hình lập trình đặc biệt theo hướng computer graphics – Mơi trường lập trình chặt chẽ về cú pháp và câu lệnh • Kiến trúc mức thấp:

– Thường song song – Phát triển liên tục

– Cơng nghệ bí mật của các hãng • Khơng đơn giản như viết code cho CPU

<i><b>7.2. Thiết bị vào ra dữ liệu </b></i>

<b>Máy in </b>

Sử dụng các công nghệ khác nhau như in kim, in phun, in laser

Dot size: đường kính của một điểm in bé nhất mà máy in có thể in được

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

Addressability: khả năng địa chỉ hố các điểm in có thể có trên một đơn vị độ dài (dot per inch)

Số lượng màu có thể vẽ trên một điểm:

Dùng để chỉ và chọn các chức năng phù hợp yêu cầu

<b>Máy quét ảnh, máy quét laser,… </b>

<i><b>7.3. Thiết bị hiển thị </b></i>

<b>Màn hình </b>

<b>CRT (Cathode Ray Tube) </b>

Một chùm các tia điện tử (tia âm cực) phát ra từ một súng điện tử, vượt qua cuộn lái tia dẫn đến vị trí xác định trên màn hình được phủ một lớp phosphor. Tại mỗi vị trí tương tác với tia điện tử hạt phosphor sẽ phát lên một chấm sáng nhỏ. Nhưng chấm sáng sẽ mờ dần rất nhanh nên cần có cách nào nó duy trì ảnh trên màn hình. Một trong các cách là: lặp đi lặp lại nhiều lần việc vẽ lại ảnh thật nhanh bằng cách hướng các tia điện tử trở lại ví trí cũ. Gọi là làm tươi (refresh CRT).

Số lượng tối đa các điểm có thể hiển thị trên một CRT được gọi là độ phân giải (Resolution). Hay độ phân giải là số lượng các điểm trên một cm mà có thể được vẽ theo chiều ngang và chiều dọc (được xem như tổng số điểm theo mỗi hướng).

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Kích thước vật lý của màn hình đồ hoạ được tính từ độ dài của đường chéo màn hình. Thường dao động từ 12-27 inch, hoặc lớn hơn.

Thuộc tính khác của màn hình là tỷ số phương (aspect ratio). Nó là tỷ lệ của các điểm dọc và các điểm ngang cần để phát sinh các đoạn thẳng có độ dài đơn vị theo cả hai hướng trên màn hình. Màn hình có tỷ số phương khác một, thì hình vng hiển thị trên đó thành hình chữ nhật cịn hình trịn thành hình ellipse.

Màn hình dạng điểm (Raster Display): thường gặp nhất trong số các dạng màn hình sử dụng CRT trên cơng nghệ truyền hình. Mỗi điểm trên màn hình được gọi là pixel. Các thơng tin về ảnh hiển thị trên màn hình được lưu trữ trong một vùng bộ nhớ gọi là vùng đệm làm tươi (Refresh buffer) hay là vùng đệm khung (Frame Buffer). Vùng lưu trữ tập các giá trị cường độ sáng của toàn bộ các điểm trên màn hình và ln tồn tại một cách song ánh giữa mỗi điểm trên màn hình và mỗi phần tử trong vùng này.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

Để tạo ra hình ảnh đen trắng, đơn giản chỉ cần lưu thông tin của mỗi Pixel là một bít (0,1). Trong trường hợp ảnh nhiều màu thì cần nhiều bít hơn, nếu thơng tin mỗi pixel được lưu bằng b bít thì ta có thể có 2<small>b</small>

giá trị mầu phân biệt cho pixel đó. Trong các màn hình màu, người ta định nghĩa tập các màu làm việc trong một bảng tra (LookUp Table - LUT). Mỗi phần tử của LUT được định nghĩa một bộ ba giá trị (RGB) mơ tả một màu nào đó. Khi cần sử dụng một màu, ta chỉ cần chỉ định số thứ tự (index) tương ứng của màu đó trong LUT, số phần tử trong bảng LUT chính là số màu có thể được hiển thị cùng một lúc trên màn hình

Ví dụ mơ hình đồ họa điểm ngôi nhà và ngôi sao

<i>Song ánh giữa vùng đệm khung và màn hình </i>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<small>X: 0¸ Xmax2 màu/ 1 bit </small>

<small>Y: 0¸ Ymax16 màu/ 4 bit; 256 màu/ 8bit 2 </small>¹⁶<small> màu/ 16 bit ; 2</small>²⁴<small> màu/ 24 bit </small>

<small>640 x 480 x 16 → Video RAM = 2MB 1024 x 1024 x 24 → Video RAM = 24MB </small>

Việc làm tươi trên màn hình dạng này được thực hiện ở tốc độ 60 - 80 frame/giây. Đôi khi tốc độ làm tươi còn được biểu diễn bằng đơn vị Hertz (Hz - số chu kỳ trên/giây), trong đó một chu kỳ tương ứng với một frame. Vậy tốc độ làm tươi 60 frame/giây đơn giản là 60 Hz. Khi đạt đến cuối mỗi dòng quét, tia điện tử quay trở lại bên trái của màn hình để bắt đầu dịng qt kế tiếp. Việc quay trở về bên trái màn hình sau khi làm tươi mỗi dòng quét được gọi là tia hồi ngang (Horizontal retrace). Và tới cuối mỗi frame, tia điện tử (tia hồi dọc - Vertical retrace) quay trở lại góc bên trái của màn hình để chuẩn bị bắt đầu frame kế tiếp

<b>LCD - Màn hình tinh thể lỏng (Liquid Crystal Display) </b>

Dựa vào công nghệ truyền ánh sáng qua điện cực mà đặt giữa là cuộn dây xoắn. Khi chưa có từ trường (chưa có dịng điện) ở cuộn dây thì ánh sáng truyền thẳng, khi có từ trường thì ánh sáng truyền đổi chiều.

<b>Phân loại: </b>có 2 loại là Active và passive

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

Công nghệ truyền ánh sáng trong màn hình tinh thể lỏng

<b>Passive: </b>

Khơng sử dụng ánh sáng nền. Rất tiết kiệm năng lượng.

Tuy nhiên phải sử dụng trong mơi trường có ánh sáng ngồi.

Thường được sử dụng trong các thiết bị như máy tính bỏ túi, đồng hồ điện tử đeo tay.

<b>Thiết bị hiển thị đồ họa </b>

<i><b>Thiết bị đồ họa vector:</b></i> tạo hình ảnh từ những đoạn thẳng Ưu điểm: nhanh

Khuyết điểm: không tô màu cho vùng được Các loại thiết bị vector thường gặp

Máy vẽ:

Máy vẽ flatbed Máy cắt decal Màn hình vector

<i><b>Thiết bị raster: </b></i>Tạo hình ảnh từ ma trận điểm

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

Phân loại:

Màn hình video Màn hình tấm phẳng Các thiết bị sao chép cứng

Máy in kim Máy in laser Máy in phun

<b>8. Phần mềm đồ họa (Graphics Software) </b>

Ứng dụng: Photoshop, Corel, AutoCAD, Flash,…Lập trình: DirectX, OpenGL, GDI, GTK, Graph.tpu…

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>Mơ hình HSL/HSV </b>

Được biểu diễn bằng 3 giá trị: Hue (Tông màu), Saturation (Độ bảo hòa màu), Lightness (Độ sáng)

Hue: dùng để phân biệt sự khác nhau giữa các màu như xanh, đỏ, vàng...

Saturation: chỉ ra mức độ thuần của một màu hay khoảng cách của màu tới điểm có cường độ cân bằng(màu xám)

Lightness: hiện thân về mô tả cường độ sáng từ ánh sáng phản xạ nhận được từ đối tượng.

<b>Mơ hình CMY </b>

Được dùng chủ yếu trong in ấn, là ba màu tương ứng với ba màu chính của mực in, gọi là những màu gốc để trừ vì những màu trong mơ hình CMY được tạo ra thơng qua việc hấp

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

thụ độ sáng. Cyal hấp thu sự chiếu sáng của màu đỏ, Magenta hấp thu chiếu sáng của màu xanh lục, Yellow hấp thu chiếu sáng của xanh dương.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>Bài 2 – CÁC ĐỐI TƯỢNG ĐỒ HỌA CỞ SỞ Mục tiêu-yêu cầu- kết quả </b>

<b>Mục tiêu:</b> Bài học nhằm cung cấp các khái niệm về hệ tọa độ, vẽ đường thẳng, đường trịn, hình ellippse.

<b>u cầu:</b> Sinh viên nắm vững các kiến thức liên quan đến toán học như dạng tổng qt phương trình đường thẳng, hệ số góc, tung độ dốc<b>, </b>phương trình đường trịn

<b>Kết quả đạt được:</b> Sinh viên có nắm được thế nào là một hệ tọa độ, thiết kế và cài đặt được các thủ tục vẽ các đường cơ bản như đường thẳng, đường trịn, ellípe

<b>1. Các đối tượng đồ họa cơ sở </b>

- Miền hiển thị : nằm trong miền điều khiển nhưng phân biệt với miền thực. Chỉ có số nguyên 16 bits mới nằm trong miền hiển thị.

Trong lĩnh vực kỹ thuật đồ họa, chúng ta phải hiểu được rằng thực chất của đồ họa là làm thế nào để có thể mơ tả và biến đổi được các đối tượng trong thế giới thực trên máy tính. Bởi vì, các đối tượng trong thế giới thực được mô tả bằng tọa độ thực. Trong khi đó, hệ tọa độ thiết bị lại sử dụng hệ tọa độ nguyên để hiển thị các hình ảnh. Đây chính là vấn đề cơ bản cần giải quyết. Ngồi ra, cịn có một khó khăn khác nữa là với các thiết bị khác nhau thì có các định nghĩa khác nhau. Do đó, cần có một phương pháp chuyển đổi tương ứng giữa các hệ tọa độ và đối tượng phải được định nghĩa bởi các thành phần đơn giản như thế nào để có thể mơ tả gần đúng với hình ảnh thực bên ngồi.

Hai mơ hình cơ bản của ứng dụng đồ họa là dựa trên mẫu số hóa và dựa trên đặc trưng hình học. Trong ứng dụng đồ họa dựa trên mẫu số hóa thì các đối tượng đồ họa được tạo ra bởi lưới các pixel rời rạc. Các pixel này có thể đuợc tạo ra bằng các chương

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

trình vẽ, máy qt, ... Các pixel này mơ tả tọa độ xác định vị trí và giá trị mẫu. Thuận lợi của ứng dụng này là dể dàng thay đổi ảnh bằng cách thay đổi màu sắc hay vị trí của các pixel, hoặc di chuyển vùng ảnh từ nơi này sang nơi khác. Tuy nhiên, điều bất lợi là khơng thể xem xét đối tượng từ các góc nhìn khác nhau. Ứng dụng đồ họa dựa trên đặc trưng hình học bao gồm các đối tượng đồ họa cơ sở như đoạn thẳng, đa giác,... . Chúng được lưu trữ bằng các mơ hình và các thuộc tính. Ví dụ: đoạn thẳng được mơ hình bằng hai điểm đầu và cuối, có thuộc tính như màu sắc, độ dày. Người sử dụng không thao tác trực tiếp trên các pixel mà thao tác trên các thành phần hình học của đối tượng.

<b>Hệ toạ độ thế giới thực (WCS: World Coordinate System) </b>

WCS hay hệ toạ độ thực là hệ toạ độ được dùng mô tả các đối tượng trong thế giới thực. Một trong hệ toạ độ thực được dùng nhiều nhất là hệ toạ độ Descartes. Bất kì điểm nào trong mặt phẳng được mơ tả bằng cặp toạ độ (x_p,y_p) trong đó x_p,y_p € R. Gốc toạ độ là điểm O có toạ độ (0,0), Ox,Oy lần lượt là trục hoành và trục tung và x,y là hoành độ và tung độ.

Các toạ độ thế giới thực cho phép người sử dụng bất kì một thứ nguyên (dimension) qui ước: foot, cm, nm, km, inch....tuỳ ý.

<b> Hệ toạ độ thiết bị (DCS: Device Coordinate System) </b>

Hệ toạ độ thiết bị là hệ toạ độ được dùng bởi một thiết bị xuất cụ thể nào đó như máy in, màn hình...

Các điểm được biểu diễn bởi cặp toạ độ (x,y), nhưng x,y €N. Điểm trong toạ độ thực được định nghĩa liên tục, còn trong toạ độ thiết bị thì rời

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

rạc do tính chất của tập các số tự nhiên.

Các toạ độ (x,y) có giới hạn trong một khoảng nào đó.

<b>Hệ tọa độ thiết bị chuẩn (Normalized device coordinates) </b>

Do cách định nghĩa các hệ tọa độ thiết bị khác nhau nên một hình ảnh hiển thị được trên thiết bị này là chính xác thì chưa chắc hiển thị chính xác trên thíết bị khác. Người ta xây dựng một hệ tọa độ thiết bị chuẩn đại diện chung cho tất cả các thiết bị để có thể mơ tả các hình ảnh mà khơng phụ thuộc vào bất kỳ thiết bị nào.

Trong hệ tọa độ chuẩn, các tọa độ x, y sẽ được gán các giá trị trong đoạn từ [0,1]. Như vậy, vùng không gian của hệ tọa độ chuẩn chính là hình vng đơn vị có góc trái dưới (0, 0) và góc phải trên là (1, 1).

Q trình mơ tả các đối tượng thực như sau

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<i><b>1.2 Điểm </b></i>

Là thành phần cơ sở được định nghĩa trong một hệ tọa độ, đối với hệ tọa độ 2 chiều mỗi điểm được xác định bởi hồnh độ và tung độ. Ngồi thơng tin tọa độ, điểm cịn có thơng tin màu sắc.

<b>Ví dụ: Trong mặt phẳng điểm là một cặp (x,y) </b>

Trong không gian ba chiều, điểm là bộ ba (x,y,z)

Trên màn hình máy tính, một điểm là một vị trí trong vùng nhớ màn hình dùng để lưu trữ các thông tin vầ độ sáng của điểm tương ứng trên màn hình

Số điểm trên màn hình gọi là độ phân giải cùa màn hình (480*600,600*800,1024*1024..)

<i><b>1.3 Đường thẳng, đường gấp khúc và đa giác </b></i>

Đường thẳng xác định qua 2 điểm, đoạn thẳng bị giới hạn bởi 2 điểm đầu và cuối. Điểm đầu (x1, y1) và điểm cuối (x2, y2)

<i>Phương trình tham số: </i>

Khi t thuộc [0,1] ta có các điểm x, y thuộc về đoạn thẳng giới hạn bởi (x1, y1) và (x2, y2).

Khi t thuộc [-∞ ,+∞] ta có tồn bộ đường thẳng.

Đường gấp khúc: là tập các đoạn thẳng nối với nhau một cách tuần tự, các đoạn không nhất thiết phải tạo thành hình khép kín và có thể cắt nhau. Giao của hai đoạn thẳng là đỉnh, đỉnh đầu và đỉnh cuối của đa giác trùng nhau.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

Đoạn thẳng, đường thẳng có thuộc tính màu sắc, độ rộng, kiểu nét Đa giác là đường gấp khúc có điểm đầu trùng điểm cuối

<i><b>1.4 Vùng tô </b></i>

Bao gồm đường biên và vùng bên trong, đường biên là đường khép kín như đa giác lồi

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>Vùng tơ có thuộc tính của đường thẳng, và thuộc tính riêng là mầu tơ và mẫu tơ </b>

<i><b>1.5 Kí tự, chuỗi kí tự </b></i>

Ký tự cho phép hiển thị thông tin theo ngôn ngữ nào đó

Ký tự có thuộc tính màu sắc, kiểu chữ, cỡ chữ, khoảng cách giữa các ký tự, hướng hiển thị ký tự...

<i><b>Theo định dạng bitmap:</b></i> mỗi ký tự được biểu diễn bằng một ma trận với kích thước ngang dọc nhất định.

Ký tự „B‟ được biểu điễn bằng ma trận 8x8 với các phần tử là các bit 0 hoặc 1 Các font bitmap có khuyết điểm là chất lượng thấp khi hiển thị ở kích thước lớn Việc xử lý và lưu trữ tương đối đơn giản

<i><b>Theo dạng vector (Truetype font):</b></i>

Thông tin về ký tự được biểu diễn dưới dạng các thành phần hình học như đoạn thẳng, cung tròn…

Ưu điểm của cách biểu diễn này là khơng giới hạn kích thước khi hiển thị.

<b>2. Các thuật toán vẽ đường thẳng </b>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

Xét đoạn thẳng y = m.x +b có hệ số góc 0<m<1, ta chọn điểm đầu và điểm cuối sao cho dx =x2-x1>0. Làm sao để vẽ đoạn thẳng nối (x1,y1) (x2,y2) trong khi ta chỉ có thể ra lệnh cho màn hình vẽ từng điểm ảnh (kiểu như PutPixel của TP)?

Bản chất của quá trình này là sự rời rạc hóa và nguyên hóa một đối tượng thực (ở đây là đoạn thẳng thực - đoạn thẳng tốn học) trên màn hình sao cho cuối cùng ta có tập các Pixel trơng “giống” đối tượng nhất.

Bản chất của các thuật toán vẽ đoạn thẳng là đi tìm tập các pixel liền nhau sao cho trông chúng “giống” với đoạn thẳng thực nhất

Thế nào là giống ?

- Liên tục (không đứt đoạn)

- Gần với đoạn thẳng thực (đoạn thẳng toán học) nhất

Hơn nữa, còn vấn đề tối ưu tốc độ, nghĩa là thuật tốn phải tơ các pixel trong thời gian nhanh nhất

<b>Bài toán: ta phải vẽ đoạn thẳng y = m.x +b có hệ số góc 0<m<1, dx>0 (các trường </b>

hợp khác đều có thể quy về trường hợp này)

Đầu tiên ta nhận xét, với các đoạn thẳng dạng này, nếu (x_i, y_i) là điểm ảnh đã vẽ được ở bước thứ i (điểm màu đen) thì

- chắc chắn x_i+1 = x_i +1 - y_i+1 =y_i hoặc y_i+1 =y_i+1

do đó điểm ảnh ở bước (i+1) tiếp theo chỉ có thể là 1 trong 2 trường hợp như hình vẽ. Vấn đề quy về việc chọn điểm nào trong hai điểm đó.

<small>y1 y2 </small>

<small>Làm sao vẽ đoạn thẳng nối 2 điểm này </small>

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>2.1 Thuật toán DDA (Digital Differential Analyzer) </b>

Là thuật toán tính tốn các điểm vẽ dọc theo đường thẳng dựa vào hệ số góc của

Nhận thấy tọa độ của điểm x sẽ tăng 1 đơn vị trên mỗi điểm vẽ, còn việc quyết định chọn yi +1 là yi +1 hay yi sẽ phụ thuộc vào giá trị sau khi làm trịn của tung độ y. Tuy nhiên, nếu tính trực tiếp giá trị thực của y ở mỗi bước từ phương trình y = mx+b thì cần một phép tốn nhân và một phép toán cộng số thực: yi +1 = mxi +1 + b = m(xi + 1) + b = mxi + b + m

Để cải thiện tốc độ, người ta khử phép nhân trên số thực. Ta có: <small>1 </small>

<small>2 </small>

(x_i+1, y_i) (x_i+1, y_i+1)

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

y_i = mx_i + b ⇒ y_{i +1} = y_i + m → int(y_i +1) Có 2 khả năng:

 0<m<=1:

x_{i +1}= x_i + 1,

y_{i +1} = y_i + m→ int(y_{i +1})  m>1:

x_{i +1}= x_i + 1/m → int(x_i+1), y_{i +1} = y_i + 1

Hai trường hợp này dùng để vẽ một điểm bắt đầu từ bên trái đến điểm cuối cùng bên phải của đường thẳng (xem hình). Nếu điểm bắt đầu từ bên phải đến điểm cuối cùng bên trái thì xét ngược lại :

 0<m<=1: x_{i +1}= x_i - 1, y_{i +1} = y_i - m → int(y_{i +1})  m>1: x_{i +1}= x_i - 1/m → int(x_i+1), y_{i +1} = y_i - 1

<b>Hai dạng đường thẳng có 0<m<1 và và m>1 </b>

Tương tự, có thể tính tốn các điểm vẽ cho trường hợp m<0: khi |m|<=1 hoặc |m|>1

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

<small>#define Round(a) int(a+0.5) int Color = GREEN; </small>

<small>void LineDDA (int x1, int y1, int x2, int y2) </small>

<small>{ </small>

<small> int x = x1; float y = y1; </small>

<small> float m = float(y2-y1)/(x2-x1); putpixel(x, Round(y), Color); for(int i=x1; i<x2; i++) { </small>

<small> x++; y +=m; </small>

<small> putpixel(x, Round(y), Color); } </small>

<small>} </small>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

Ví dụ: Áp dụng thuật tốn DDA vẽ đoạn thẳng từ điểm (2,2) đến điểm (8,4) m=2/6=0.33

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>2.2 Thuật toán Bresenham </b>

Trong hình vẽ (x_i+1,y) là điểm thuộc đoạn thẳng thực, ta có: y = m(x_i+1) + b. Giả sử ở bước i ta đã xác định được điểm (x_i,y_i).

Đặt

d₁ = y – y₁ ; d₂ = (y_i +1) - y ;

Việc chọn điểm tiếp theo (x_i+1, y_i+1) là S hay P tùy thuộc vào việc d₁ lớn hơn hay nhỏ hơn d₂, nói cách khác là phụ thuộc vào dấu của (d₁ – d₂)

Thay y = mx_i+b = dy(x_i+1)/dx + b vào ta có p_i = 2dx [dy(x_i+1)/dx +b] – 2y_idx –dx

x_i+1 <small>S </small>y

x_iy_i+1

d₁d₂(x_i+1,y)

<small>P </small>

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

Thay giá trị của c vào, chú ý rằng điểm đầu (x₀, y₀) cũng thuộc đoạn thẳng thực nên y₀ = mx₀ + b = x₀dy/dx + b, suy ra p₀ = 2dy –dx

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

Ví dụ:

Cho A(12,20) và B(22,27), ta có dx = 22 – 12 = 10 ; dy = 27 – 20 = 7; c1 = 2dy = 14 ; c2 = 2(dy-dx) = -6; p₀ = 2Dy – dx = 4

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

<small>void LineBresenham(int x1, int y1, int x2, int y2, int color) { </small>

<small>int Dx = x2 – x1, Dy = y2 – y1; int x = x1, y = y1; </small>

<small>int p = 2 * Dy – Dx; </small>

<small>int const1 = 2 * Dy, const2 = 2 * (Dy-Dx); </small>

<small>putpixel(x, y, color); while (x < x2) { </small>

<small>if (p < 0) { </small>

<small>p += const1; } else { </small>

<small>p += const2; y++; </small>

<b><small>} </small></b>

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

<b>2.3 Thuật toán MidPoint </b>

Jack Bresenham 1965 / Pitteway 1967, áp dụng cho việc sinh các đường thẳng và đường tròn 1985.

 F(x,y) <0 nếu điểm (x,y) nằm phía trên đường thẳng  F(x,y) =0 nếu điểm (x,y) thuộc đường thẳng

 F(x,y) >0 nếu điểm (x,y) nằm phía dưới đường thẳng

vì vậy, vấn đề quy về việc xét dấu của p_i = 2F(O) = 2F(x_i +1,y_i +1/2)  Nếu p_i <0 tức là O nằm phía trên đường thẳng  ta chọn S  Nếu p_i >0 tức là O nằm phía dưới đường thẳng  ta chọn P

Làm sao để tính p<small>i</small> ? tương tự như thuật tốn Bresenham, ta cũng dùng phương pháp “lũy tiến”, dùng giá trị ở bước trước p_i để tính giá trị ở bước tiếp theo p_i+1

x_i+1 <small>S </small>x_i

y_i+1

<small>P </small>

<small>O: điểm giữa </small>

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

Ta có: p_i+1 – p_i =2F(x_i+1 +1,y_i+1 +1/2) - 2F(x_i +1,y_i +1/2) = 2[A(x_i+1+1)+B(y_i+1+1/2)+C] - 2[A(x_i+1)+B(y_i+1/2)+C] = 2dy – 2dx(y_i+1 – y_i)

Như vậy

 Nếu p_i <0 thì ta chọn y_i+1 = y_i , do đó p_i+1 = p_i +2dy

 Nếu p_i >0 thì ta chọn y_i+1 = y_i+1 , do đó p_i+1 = p_i +2dy – 2dx

Cuối cùng, giá trị đầu p₀ được tính như sau: nhận xét rằng điểm đầu (x₀, y₀) thuộc đoạn thẳng thực tức là Ax₀ + By₀ +C = 0

p₀ = 2F(x₀+1,y₀+1/2) = 2[A(x₀+1)+B(y₀+1/2)+C] = 2(Ax₀ + By₀ +C) + 2A +B = 2A+B

<b>= 2dy –dx </b>

<b>3. Các thuật toán vẽ đường trịn </b>

<i><b>3.1 Thuật tốn MidPoint </b></i>

Đầu tiên ta nhận xét rằng, do tính đối xứng của đường tròn nên ta chỉ cần vẽ được cung AB là cung 1/8 đường trịn, sau đó lấy đối xứng qua các trục và các đường phân giác ta sẽ có cả đường trịn. Chẳng hạn như ở hình vẽ trên nếu xác định được điểm (x,y), lấy

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

đối xứng qua đường phân giác của góc phần tư thứ nhất ta thu được điểm (y,x), lấy đối xứng qua trục hoành ta thu được 2 điểm (y,-x) và (x,-y) ... Nếu ta chia thành 16,32 ... phần thì việc xác định tọa độ 15,31... điểm đối xứng cịn lại sẽ rất khó. Cịn nếu chia thành 4 hay 2 phần thì số điểm lân cận cần phải loại trừ có thể nhiều hơn 2 điểm.

Gọi R là bán kính đường trịn, ta xuất phát từ điểm A (0,R) để vẽ cung AB. Nhìn hình vẽ ta thấy, nếu (x_i, y_i) là điểm ảnh đã vẽ được ở bước thứ i thì điểm ảnh (x_i+1, y_i+1) ở bước tiếp theo chỉ có thể là S hoặc P, tức là

 x_i+1 = x_i + 1  y_i+1 {y_i, y_i-1}

Giống như thuật toán vẽ đoạn thẳng, ý tưởng chính để lựa chọn giữa S và P ở đây là căn cứ vào vị trí tương đối của điểm giữa M của SP với đường tròn. Nếu M nằm bên trong đường trịn như hình vẽ thì ta sẽ chọn S vì nó gần điểm thực Q hơn so với P. Ngược lại nếu M nằm ngồi đường trịn thì P sẽ được chọn.

 Nếu p_i<0 tức là M nằm trong đường tròn, ta sẽ chọn S, tức là y_i+1 = y_i  Nếu p<small>i</small>0 ta sẽ chọn P, tức là y_i+1 = y_i -1

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

Cách tính giá trị của p_i cũng tương tự như ở thuật toán vẽ đoạn thẳng. Ta có: p_i+1 – p_i = F[x_i+1+1,y_i+1 – ½] - F[(x_i+1,y_i – ½)]

= [(x_i+1+1)²+(y_i+1 – ½)²- R²] - [(x_i+1)²+(y_i – ½)² - R²] = 2x_i +3+(y_i+1² – y_i²) – (y_i+1 - y_i)

Do đó

 Nếu p_i <0 ta chọn y_i+1 = y_i p_i+1 = p_i + 2x_i +3  Nếu p_i0 ta chọn y_i+1 = y_i-1  p_i+1 = p_i + 2x_i -2y_i+5 Cuối cùng ta tính giá trị đầu p₀ ứng với điểm A(0,R)

p₀=F(x₀+1,y₀<b>-1/2) = F(0,R-1/2) = 5/4 -R </b>

<small>Yes Begin </small>

<small>x < y ? Yes </small>

<small>No </small>

<small>End </small>

<small>x:=x+1; PutPixel(x,y); </small>

<small>p:=5/4 -R; x:=0; y:=R ; </small>

<small>p < 0 ? </small>

<small>p:=p+2x+3; p:=p+2(x-y); y:=y-1; No </small>

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

<i><b>3.2 Thuật toán Bresenham </b></i>

 Tương tự thuật toán vẽ đường thẳng Bresenham, các vị trí ứng với các tọa độ nguyên nằm trên đường trịn có thể

tính được bằng cách xác định một trong hai pixel gần nhất với đường trịn hơn trong mỗi bước.

 Phương trình đường tròn: y<small>2</small>

= R² –x² Giả sử vẽ được điểm (x_i,y_i)

 Vấn đề: Chọn điểm tiếp theo

<b>- Không thể là Q(x</b>_i+1,y)

<b>- Mà là: S</b>₁(x_i+1,y_i) hoặc S₂(x_i+1,y_i-1)  Đặt

<b>- d1 = QS1 - d2 = QS2 </b>

 Tư tưởng: So sánh d<small>1</small> với d₂

<b>- d1<d2: Chọn S1 - d1>=d2: Chọn S2 </b>

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

P_i = 2(y_i)² -2R²+ 2 (x_i)² +4x_i+ 2- 2y_i+1

P_i+1 – P_i=2(y_i+1)² -2R²+ 2(x_i)²+8x_i+8-2y_i+1 + 1 <small> </small>

-(2(y_i)² -2R²+ 2 (x_i)² +4x_i+ 2- 2y_i+1)P_i+1 – P_i=2(y_i+1)² -2R²+ 2(x_i)²+8x_i+8-2y_i+1 + 1

P₁ = R² -2R²+ 2+ R² -2R +1

<b>P₁ = 3 -2R </b>

</div>