Tổng quan về kỹ thuật đồ họa máy tính

MỞ ĐẦU 3D 3D – ,n 3D công nghệ phát triển Silverlight chƣơng: - Chƣơng 1: T máy tính - Chƣơng 3D - - Chƣơng 4: Xây dựng Album ảnh 3D Silverlight CHƢƠNG : TỔNG QUAN VỀ KỸ THUẬT ĐỒ HỌA MÁY TÍNH 1.1 Các khái niệm tổng quan kỹ thuật đồ họa máy tính Definition (ISO): Phƣơng pháp cơng nghệ chuyển đổi liệu từ thiết bị đồ hoạ sang máy tính Thuật ngữ đồ họa máy tính (computer graphics) William Fetter đặt năm 1960 để mô tả cách thiết kế làm việc hãng Boeing Với cách giúp tạo nhiều ảnh sử dụng lại để dễ dàng thiết kế buồng lái phi công theo ý muốn Computer Graphics phƣơng tiện đa mạnh giao tiếp ngƣời máy tính Computer Graphics (Kỹ thuật đồ hoạ máy tính) ng tập hợp cơng cụ thơn (mơ hình lý thuyết phần mềm) khác nhau: kiến tạo, xây dựng, lƣu trữ, xử lý mơ hình (model) hình ảnh (image) đối tƣợng Các mơ hình hình ảnh kết thu đƣợc từ lĩnh vực khác nhiều ngành khoa học (vật lý, toán học, thiên văn học…) Hình 1.1: Đồ họa máy tính Đồ họa máy tính (computer graphics) đƣợc hiểu nhƣ tất liên quan đến việc tạo ảnh (image) máy tính Chúng bao gồm: tạo, lƣu trữ, thao tác mơ hình (model) ảnh 1.2 Tổng quan hệ đồ họa - Các thành phần phần cứng :  Thiết bị nhập : chuột, bàn phím,  Thiết bị hiển thị: hình, máy in, - Các cơng cụ phần mềm:  Công cụ ứng dụng (application package) : thiết kế cho ngƣời sử dụng để tạo hình ảnh mà khơng cần quan tâm tới thao tác bên hoạt động mhƣ Ví dụ: AutoCAD, Adobe Photoshop, 3D Studio,  Công cụ lập trình (programming package) : Cung cấp tập hàm đồ họa đƣợc dùng ngơn ngữ lập trình cấp cao nhƣ C, Pascal, Ví dụ : GRAPH.TPU, GRAPHICS.LIB, Open GL, - Các chuẩn phần mềm :  Ra đời để đáp ứng tính tƣơng thích : Nếu phần mềm đuợc thiết kế với hàm đồ họa chuẩn chúng dùng đƣợc cho nhiều hệ phần cứng môi trƣờng làm việc khác  GKS (Graphics Kernel System) chuẩn đời cho việc phát triển phần mềm đồ họa Ban đầu GKS đƣợc thiết kế dùng cho tập công cụ đồ họa hai chiều, sau đƣợc mở rộng cho đồ họa ba chiều  Các hàm GKS thực sực mô tả trừu tƣợng, độc lập với ngơn ngữ lập trình Để cài đặt chuẩn đồ hoạ cho ngôn ngữ cụ thể nào, cú pháp tƣơng ứng đƣợc xác định cụ thể hóa - Các thành phần cơng cụ lập trình:  Tập cơng cụ tạo đối tƣợng đồ họa sở nhƣ điểm, đoạn thẳng, đuờng cong, vùng tơ, kí tự,  Tập cơng cụ thay đổi thuộc tính đối tƣợng sở kể nhƣ màu sắc, kiểu đƣờng, kiểu chữ, mầu tô,  Tập công cụ thực phép biến đổi hình học dùng để thay đổi kích thƣớc, vị trí, hƣớng,  Tập cơng cụ biến đổi hệ quan sát dùng để xác định vị trí quan sát đối tƣợng vị trí thiết bị hiển thị đối tƣợng  Tập công cụ nhập liệu : ứng dụng đồ họa sử dụng nhiều loại thiết bị nhập khác nhƣ chuột, bàn phím, bút vẽ, bảng, để điều khiển xử lí dịng liệu nhập  Tập công cụ chứa thao tác dùng cho quản lí điều khiển nhƣ khởi tạo đóng chế độ đồ họa, xóa tồn hình, Hình 1.2: Hình ảnh minh họa 1.3 Các kỹ thuật đồ họa 1.3.1 Kỹ thuật đồ họa điểm Các mơ hình, hình ảnh đối tƣợng đƣợc hiển thị thông qua pixel (từng mẫu rời rạc) Đặc điểm: thay đổi thuộc tính Xố pixel mơ hình hình ảnh đối tƣợng Các mơ hình hình ảnh đƣợc hiển thị nhƣ lƣới điểm (grid) pixel rời rạc Từng pixel có vị trí xác định, đƣợc hiển thị với giá trị rời rạc (số nguyên) thông số hiển thị (màu sắc độ sáng) Tập hợp tất pixel grid cho mơ hình, hình ảnh đối tƣợng mà muốn hiển thị Hình 1.3: Ảnh đồ họa điểm Phƣơng pháp để tạo pixel: Phƣơng pháp dùng phần mềm để vẽ trực tiếp pixel Dựa lý thuyết mô (lý thuyết Fractal, v.v) để xây dựng nên hình ảnh mơ vật Phƣơng pháp rời rạc hóa (số hóa) hình ảnh thực đối tƣợng Có thể sửa đổi (image editing) xử lý (image processing) mảng pixel thu đƣợc theo phƣơng pháp khác đ thu đƣợc hình ảnh đặc trƣng đối tƣợng 1.3.2 Kỹ thuật đồ họa vector Hình 1.4: Mơ hình đồ họa vector Mơ hình hình học (geometrical model) cho mơ hình hình ảnh đối tƣợng Xác định thuộc tính mơ hình hình học Q trình tơ trát (rendering) để hiển thị điểm mơ hình, hình ảnh thực đối tƣợng Có thể định nghĩa đồ họa vector: Đồ họa vector = geometrical model + rendering So sánh đồ họa điểm đồ họa vector Đồ họa điểm(Raster Graphics) Ðồ hoạ vector(Vector Graphics) Hình ảnh mơ hình Khơng thay đổi thuộc tính vật thể đƣợc biểu diễn tập điểm trực tiếp hợp điểm lƣới (grid) Xử lý với th Thay đổi thuộc tính học sở thực pixel phần hình q trình tơ trát hiển thị lại thay đổi phần hình ảnh mơ hình vùng hình ảnh Quan s Copy đƣợc pixel từ hình ảnh vật nhiều hình ảnh sang hình ảnh góc độ khác thay khác đổi điểm nhìn góc nhìn Ví dụ hình ảnh đồ họa vector: Hình 1.5: Ví dụ đồ họa vector 1.3.3 Phân loại đồ họa máy tính Phân loại theo lĩnh vực hoạt động đồ họa máy tính: CAD/CAM System Kiến tạo đồ họa Đồ họa minh họa Đồ họa hoạt hình nghệ thuật Kỹ thuật đồ họa Xử lý ảnh Xử lý đồ họa Kỹ thuật nhận dạng Kỹ thuật phân tích tạo ảnh Phân loại theo hệ tọa độ: Kỹ thuật đồ họa chiều Kỹ thuật đồ họa Kỹ thuật đồ họa chiều Kỹ thuật đồ họa chiều: kỹ thuật đồ họa máy tính sử dụng hệ tọa độ hai chiều (hệ tọa độ thẳng), sử dụng nhiều kỹ thuật xử lý đồ, đồ thị Kỹ thuật đồ họa chiều: kỹ thuật đồ họa máy tính sử dụng hệ tọa độ ba chiều, địi hỏi nhiều tính tốn phức tạp nhiều so với kỹ thuật đồ họa hai chiều Các lĩnh vực đồ họa máy tính: Kỹ thuật xử lý ảnh (Computer Imaging): sau trình xử lý ảnh cho ta ảnh số đối tƣợng, Trong trình xử lý ảnh sử dụng nhiều kỹ thuật phức tạp: kỹ thuật khôi phục ảnh, kỹ thuật làm ảnh, kỹ thuật xác định biên ảnh Kỹ thuật nhận dạng (Pattern Recognition): từ ảnh mẫu có sẵn ta phân loại theo cấu trúc, theo tiêu trí đƣợc xác định từ trƣớc thuật tốn chọn lọc để phân tích hay tổng hợp ảnh gốc, ảnh gốc đƣợc lƣu thƣ viện vào thƣ viện ta xây dựng đƣợc thuật giải phân tích tổ hợp ảnh Kỹ thuật tổng hợp ảnh (Image Synthesis): lĩnh vực xây dựng mơ hình hình ảnh vật thể dựa đối tƣợng mối quan hệ chúng Các hệ CAD/CAM (Computer Aided Design/Computer Aided Manufacture System): kỹ thuật đồ họa tâp hợp công cụ, kỹ thuật trợ giúp cho thiết kế chi tiết hệ thống khác nhau: hệ thống cơ, hệ thống điện, hệ thống điện tử… Đồ họa minh họa (Presentation Graphics): gồm cơng cụ giúp hiển thị số liệu thí nghiệm cách trực quan, dựa mẫu đồ thị thuật tốn có sẵn Đồ họa hoạt hình nghệ thuật: bao gồm cơng cụ giúp cho họa sĩ, nhà thiết kế phim hoạt hình chuyên nghiệp làm kỹ xảo hoạt hình, vẽ tranh… ví dụ: phần mềm Studio, 3D Animation, 3D Studio Max 1.4 Các ứng dụng tiêu biểu kỹ thuật đồ họa Ðồ họa máy tính lĩnh vực lý thú phát triển nhanh tin học Ngay từ xuất có sức lơi mãnh liệt, hút nhiều ngƣời nhiều lĩnh vực khác nhƣ khoa học nghệ thuật, kinh doanh, quản lý Tính hấp dẫn đƣợc minh họa trực quan thơng qua ứng dụng Xây dựng giao diện ngƣời dùng (User Interface): Giao diện đồ hoạ thực cách mạng mang lại thuận tiện thoải mái cho ngƣời dùng ứng dụng Giao diện WYSIWYG WIMP đƣợc đa số ngƣời dùng ƣa thích nhƣ tính thân thiện, dễ sử dụng Tạo biểu đồ thƣơng mại, khoa học, kỹ thuật: Các ứng dụng thƣờng đƣợc dùng để tóm lƣợc liệu 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ý… cách có hiệu Tự động hóa văn phịng chế bán điện tử Thiết kế với trợ giúp máy tính (CAD_CAM) Lĩnh vực giải trí, nghệ thuật mơ Điều khiển q trình sản xuất (Process Control) Lĩnh vực đồ (Cartography) Giáo dục đào tạo CHƢƠNG 2: TỔNG QUAN VỀ KỸ THUẬT ĐỒ HỌA 3D 2.1 Giới thiệu 3D graphics Hình ảnh 3D xuất từ năm 1833 lần hình đƣợc giới thiệu ngài Charlets Wheastone Và ngày hiển thị chiều ngày trở lên phổ biến, số lĩnh vực đặc biệt Do thiết bị kĩ thuật số ngày rẻ phổ biến hơn, cải thiện băng thông mạng chuẩn nén, tiến công nghệ hiển thị, 3D lên nhƣ công nghệ tƣơng lai Hiển thị lập thể có ích nhiều lĩnh vực ứng dụng nhƣ: Các hệ thống ứng dụng nhƣ: Các hệ thống mô phỏng, hệ thống y học, hệ thống robot học, thiết kế hỗ trợ máy tính, viễn thơng giải trí Dƣới số hình ảnh minh hoạ cho ứng dụng 3D: Hình 2.1 : 3D giải trí (Games) 10 Trong thƣ mục ClientBin web project (HelloWorld.Web) chứa ứng dụng silverlight đƣợc đóng gói dƣới dạng file HelloWorld.xap project silverlight(HelloWorld) Tồn hình ứng dụng bạn đƣợc nhìn thấy nhƣ sau: - Chúng ta làm phƣơng pháp viết code C# code ứng dụng, hai viết trực tiếp XAML 3.7.1 Viết chƣơng trình Code C# - Trong file Page.xaml.cs bắt đầu với việc tạo nút theo dòng lệnh dƣới - Để tạo kiện cho nút cần thêm dòng lệnh sau vào 51 - Bấm F5 để chạy chƣơng trình 3.7.2 Viết chƣơng trình XAML Lƣu ý, với project trên, muốn viết đặc tả XAML tƣơng đƣơng ta cần xóa bỏ phần mã trình C# cũ đi, C# XAML khơng thể sinh đối tƣợng - Bấm F5 để chạy ứng dụng Cả hai phƣơng thức viết cho kết nhƣ hình vẽ sau: 52 CHƢƠNG 4: XÂY DỰNG ALBUM ẢNH 3D BẰNG SILVERLIGHT 4.1 Giới thiệu ứng dụng Silverlight tung loạt tính có sẵn cho ngƣời dùng phát triển, cung cấp cấp độ thiết kế giao diện ngƣời dùng việc giới thiệu quan điểm 3D Tính cho phép ngƣời dùng áp dụng cho UIElement để cung cấp cho hiển thị chiều Trong chƣơng này, xây dựng FlipBook đơn giản cho phép ngƣời dùng lƣớt qua hình ảnh nhƣ đƣợc chuyển sang trang sách Khi ngƣời dùng nhấp vào hình ảnh trang “biến” để lộ hình ảnh 4.2 Đoạn mã xử lý 53 using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; namespace Projection3D { public partial class MainPage : UserControl { // Holds the current zIndex Used to make sure images // that are being flipped are on top of all other images private int _zIndex = 10; public MainPage() { InitializeComponent(); } private void FlipImage(object sender, MouseButtonEventArgs e) 54 { Image image = sender as Image; // Make sure the image is on top of all other images image.SetValue(Canvas.ZIndexProperty, _zIndex++); // Create the storyboard Storyboard flip = new Storyboard(); // Create animation and set the duration to second DoubleAnimation animation = new DoubleAnimation() { Duration = new TimeSpan(0, 0, 1) }; // Add the animation to the storyboard flip.Children.Add(animation); // Create a projection for the image if it doesn't have one if (image.Projection == null) { // Set the center of rotation to -0.01, which will put a little space // between the images when they're flipped image.Projection = new PlaneProjection() { CenterOfRotationX = -0.01 }; } PlaneProjection projection = image.Projection as PlaneProjection; // Set the from and to properties based on the current flip direction of // the image if (projection.RotationY == 0) { animation.To = 180; } else { animation.From = 180; animation.To = 0; 55 } // Tell the animation to animation the image's PlaneProjection object Storyboard.SetTarget(animation, projection); // Tell the animation to animation the RotationYProperty Storyboard.SetTargetProperty(animation, new PropertyPath(PlaneProjection.RotationYProperty)); flip.Begin(); } } } 4.3 Giao diện ứng dụng Ban đầu ta cảm nhận nhƣ Album đặt trƣớc mặt: Hình 4.1 Giao diện chƣơng trình ban đầu 56 Khi lật sang trang trƣớc để xem ảnh, ta có cảm giác khơng khác mở Album bình thƣờng (sử dụng phép quay quanh trục 0y góc 180o) : Hình 4.2: Giao diện chƣơng trình lật trang 57 Mỗi trang đƣợc thiết kế đặc biệt gồm hai mặt (mặt bên phép soi gƣơng mặt bên kia): Hình 4.3 : Giao diện trang 58 TÀI LIỆU THAM KHẢO [1] Christian Wenz, Essential Silverlight, O’Reilly [2] Adam Nathan, Silverlight Unleashed, SAMS [3] Silverlight Vietnamese.rar, Silverlight-step by step.rar [4] http://www.silverlight.net [5] Khóa luận tốt nghiệp Đại học “3D Streaming”, Nguyễn Khắc Thắng – Trƣờng Đại học Công Nghệ - Đại học Quốc gia Hà Nội [6] Đồ án tốt nghiệp “Tìm hiểu ”, Nguyễn Phi Hùng – Trƣờng Đại Học Dân Lập Hải Phòng [7] Silverlight Visual Essentials, Matthew MacDonald [8] Introducing Silverlight 2, Laurence Moroney [9] beginning Web Development Silverlight and ASP.NET AJAX, Laurence Moroney 59 LỜI CẢM ƠN Trƣớc hết em xin chân thành cảm ơn thầy Trần Ngọc Thái giáo viên hƣớng dẫn em tình thực tập Thầy giúp em nhiều cung cấp cho em nhiều tài liệu quan trọng phục vụ cho trình tìm hiểu đề tài “Đồ họa 3D với Silverlight” Thứ hai, em xin chân thành cảm ơn thầy cô môn công nghệ thông tin bảo em trình học rèn luyện năm học vừa qua Đồng thời em cảm ơn bạn sinh viên lớp CT1001 gắn bó với em trình rèn luyện trƣờng Cuối em xin chân thành cảm ơn ban giám hiệu trƣờng Đại Học Dân Lập Hải Phòng tạo điều kiện cho em có kiến thức, thƣ viện trƣờng nơi mà sinh viên trƣờng thu thập tài liệu trợ giúp cho giảng lớp Đồng thời thầy cô trƣờng giảng dạy cho sinh viên kinh nghiệm sống Với kiến thức kinh nghiệm giúp em cho cơng việc sống sau Em xin chân thành cảm ơn! Hải Phòng, ngày 10 tháng 07 năm 2010 Sinh viên thực Vũ Hoài Nam 60 MỤC LỤC CHƢƠNG : TỔNG QUAN VỀ KỸ THUẬT ĐỒ HỌA MÁY TÍNH 1.1 Các khái niệm tổng quan kỹ thuật đồ họa máy tính………………… 1.2 Tổng quan hệ đồ họa…………………………………………… 1.3 Các kỹ thuật đồ họa……………………………………………………….5 1.3.1 Kỹ thuật đồ họa điểm 1.3.2 Kỹ thuật đồ họa vector 1.3.3 Phân loại đồ họa máy tính 1.4 Các ứng dụng tiêu biểu kỹ thuật đồ họa…………………………… CHƢƠNG 2: TỔNG QUAN VỀ KỸ THUẬT ĐỒ HỌA 3D 10 2.1 Giới thiệu 3D graphics………………………………………………… 10 2.2 Nhận thức 3D 13 2.3 2D + Phối cảnh = 3D 14 2.4 Loại bỏ đƣờng ẩn (Hidden Line Removal) 15 2.5 Color shading 16 2.6 Light shadows 17 2.7 Hệ thống toạ độ (Coordinate Systems) 18 2.7.1 Hệ toạ độ đề 2D 18 2.7.2 Coordinate clipping 19 2.7.3 Cổng nhìn, cửa sổ bạn đến 3D 20 2.7.4 Vẽ hình (Primitives) 21 2.7.5 Toạ độ đề 3D 22 2.8 Các phép biến đổi hình học chiều 22 2.8.1 Hệ tọa độ 22 2.8.2 Phép tịnh tiến 23 2.8.3 Phép tỷ lệ 23 2.8.4 Phép biến dạng 24 2.8.5 Phép quay chiều 24 2.9 Phép chiếu chất ba chiều 26 2.9.1 Phép chiếu 27 61 2.9.2 Phép chiếu song song (Parallel Projections) 28 2.9.2.1 Phép chiếu trực giao (Orthographic projection) 28 2.9.2.2 Phép chiếu trục lƣợng (Axonometric) 29 2.9.3 Phép chiếu phối cảnh (Perspective Projection) 29 2.9.3.1 Phép chiếu phối cảnh tâm chiếu 30 2.9.3.2 Phép chiếu phối cảnh hai tâm chiếu 31 2.9.3.3 Phép chiếu phối cảnh ba tâm chiếu 32 33 ung quanh 33 34 2.10.3 35 36 CHƢƠNG 3: TỔNG QUAN VỀ SILVERLIGHT 39 3.1 Sự đời Silverlight 39 3.2 Định nghĩa Silverlight 39 3.3 Đặc tính Silverlight 40 3.3.1 Sự kết hợp WPF XAML 40 3.3.3 Sự tích hợp với ứng dụng có 41 3.3.4 Sử dụng mơ hình ngơn ngữ lập trình tảng Net Framework công cụ để kết hợp 41 3.3.5 Hỗ trợ mạng 41 3.3.6 Hỗ trợ ngơn ngữ tích hợp truy vấn 41 3.4.1 Kiến trúc thành phần 41 3.4.2 Các mơ hình lập trình silverlight 46 3.4.2.1 Javascript API 46 3.4.2.2 Managed API 46 3.5 Khả hỗ trợ trình duyệt, hệ điều hành công nghệ liên quan 47 3.5.1 Hỗ trợ hệ điều hành trình duyệt đƣợc mô tả bảng dƣới 47 3.5.2 Các công nghệ công cụ liên quan Silverlight 47 3.6 Hƣớng dẫn cài đặt sử dụng công cụ Silverlight visual studio 2008 48 CHƢƠNG 4: XÂY DỰNG ALBUM ẢNH 3D BẰNG SILVERLIGHT 53 62 4.1 Giới thiệu ứng dụng 53 4.2 Đoạn mã xử lý 53 4.3 Giao diện ứng dụng 56 TÀI LIỆU THAM KHẢO 59 LỜI CẢM ƠN 60 63 DANH MỤC HÌNH VẼ Hình 1.1: Đồ họa máy tính Hình 1.2: Hình ảnh minh họa Hình 1.3: Ảnh đồ họa điểm Hình 1.4: Mơ hình đồ họa vector Hình 1.5: Ví dụ đồ họa vector Hình 2.1 : 3D giải trí (Games) 10 Hình 2.2: 3D Y học (Medical Imaging) 11 Hình 2.3: 3D hoạt hình (Animation) 11 Hình 2.4: 3D thiết kế (Computer Aided) 12 Hình 2.5: 3D mô khoa học 12 Hình 2.6: Quy trình hiển thị 13 Hình 2.7: Cách đơi mắt nhìn thấy kích thƣớc 14 Hình 2.8: Phối cảnh hình lập phƣơng 15 Hình 2.9: Hình lập phƣơng sau loại bỏ đƣờng ẩn 16 Hình 2.10: Hình lập phƣơng có mầu khơng có shading 16 Hình 2.11: Hình lập phƣơng với đánh bóng khác mặt 17 Hình 2.12: Hình lập phƣơng đặc đƣợc chiếu sáng ánh sáng đơn 17 Hình 2.13: Mặt phẳng đề 19 Hình 2.14 : Hai clipping areas 19 Hình 2.15: Cổng nhìn đƣợc xác định lần clipping area 20 Hình 2.16: Cổng nhìn có kích thƣớc với clipping area 21 Hình 2.17: Toạ độ đề ba chiều 22 Hình 2.18: Một ảnh đƣợc chiếu lên bề mặt 2D 26 64 Hình 2.19: Mơ hình ngun lý tiến trình biểu diễn đối tƣợng 3D 27 Hình 2.20: Phép chiếu trực giao 28 Hình 2.21: Phép biến đổi phối cảnh 30 Hình 2.22 : Phép chiếu phối cảnh tâm chiếu 30 Hình 2.23: Phép chiếu phối cảnh hai tâm chiếu 31 Hình 2.24 : Phép chiếu phối cảnh ba tâm chiếu 32 Hình2.25: Hình đƣợc chiếu sáng 33 34 34 36 37 38 Hình 3.1 : Ứng dụng Silverlight 40 Hình 3.2: Thành phần kiến trúc Slverlight 43 Hình 3.3: Bảng mơ tả hỗ trợ trình duyệt hệ diều hành 47 Hình 4.1 Giao diện chƣơng trình ban đầu 56 Hình 4.2: Giao diện chƣơng trình lật trang 57 Hình 4.3 : Giao diện trang 58 65