TÌM HIỂU LẬP TRÌNH ĐỒ HỌA 3D TRONG WINDOWS · PDF fileBỘ GIÁO DỤC VÀ ĐÀO T ... tích hợp sẵn DirectX giúp người lập trình phát triển ứng dụng 3D

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP

TÌM HIỂU LẬP TRÌNH ĐỒ HỌA 3D TRONG

WINDOWS PRESENTATION FOUNDATION

Giảng viên hướng dẫn: ThS.TRẦN MINH THÁI

Sinh viên thực hiện:

TRẦN THỊ DÂN MSSV: 3.07.01.488

Ngành: Công nghệ phần mềm

Khóa 2007 – 2010

Tp. Hồ Chí Minh, tháng 07 năm 2010

MỞ ĐẦU

Ngày nay, công nghệ thông tin phát triển mạnh mẽ, trong các ứng dụng hiện đại, giao

diện người dùng trực quan chiếm vị trí hết sức quan trọng. Việc trình diễn đúng thông tin, theo

đúng cách và vào đúng thời điểm có thể đem lại những giá trị kinh tế xã hội đáng kể. Với

những ứng dụng thương mại, chẳng hạn một ứng dụng bán hàng trực tuyến, việc cung cấp một

giao diện người dùng mạnh có thể tạo nên sự khác biệt giữa một công ty với các đối thủ cạnh

tranh, góp phần làm tăng tăng doanh số và giá trị thương hiệu của hãng này so với hãng khác.

Để có được một giao diện người dùng như vậy, việc tích hợp đồ họa, media, văn bản và các

thành phần trực quan khác như một thể thống nhất đóng đóng vai trò mấu chốt và WPF đã làm

được điều này.

Điểm nổi bật nhất của WPF là hiển thị hình ảnh bằng đồ họa 3D, WPF giúp cho những ai

đam mê đồ họa 3D mà không thể tiếp cận nó trên công cụ phức tạp OpenGL hay DirectX. WPF

tích hợp sẵn DirectX giúp người lập trình phát triển ứng dụng 3D một cách dễ dàng mà khôn

phải quan tâm đến sự phức tạp của DirectX.

WPF là sản phẩm của Microsoft, một tổ chức nghiên cứu đông đảo và đội ngũ kỹ thuật

cao, WPF đang dần lang rộng khắp thế giới và trong tương lai không xa WPF sẽ trở thành một

trong những công nghệ phổ biến nhất trong thế giới lập trình ứng dụng. Xuất phát từ các lý do

trên em nghiên cứu về công nghệ WPF này nhằm cung cấp cho mọi người một sự hiểu biết nhất

định về công nghệ sẽ phát triển trong một tương lai không xa. Rất mong sự đóng góp ý kiến của

quý thầy cô để em có thêm kinh nghiệm cũng như những ý tưởng hay trong công nghệ mà mình

nghiên cứu.

LỜI CẢM ƠN

Lời đầu tiên em xin bày tỏ lòng biết ơn chân thành nhất đến quý Thầy Cô trong Khoa

Công Nghệ Thông Tin, trường Cao Đẳng Công Nghệ Thông Tin Tp.Hô Chí Minh đã tận tình

giảng dạy, hướng dẫn, giúp đỡ và tạo điều kiện cho em trong suốt thời gian học tập tại trường.

Em xin chân thành cảm ơn thầy Trần Minh Thái – Người đã tận tình hướng dẫn, giúp đỡ

em trong suốt thời gian thực hiện luận văn này.

Và con xin chân thành cảm ơn gia đình đã luôn động viên, ủng hộ vật chất lẫn tin thần

trong suốt thời gian qua.

Em xin cảm ơn sự quan tâm, giúp đỡ và ủng hộ của anh chị, bạn bè trong quá trình thực

hiện khóa luận.

Cuối cùng, em xin chúc quý Thầy Cô trường Cao đẳng công nghệ thông tin Tp.HCM,

Thầy Trần Minh Thái, lời chúc sức khỏe và luôn gặt hái được nhiều thành công trong cuộc

sống.

Tp.Hồ Chí Minh, tháng 07 năm 2010

NHẬN XÉT

CỦA GIÁO VIÊN HƢỚNG DẪN

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

Ngày … tháng … năm 2010

Ký tên

NHẬN XÉT

CỦA GIÁO VIÊN PHẢN BIỆN

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

...........................................................................................................................................................

Ngày … tháng … năm 2010

Ký tên

MỤC LỤC

MỞ ĐẦU ............................................................................................................................................... 1

PHẦN I: TỔNG QUAN ..................................................................................................................... 4

VỀ WINDOWS PRESENTATION FOUNDATION.................................................................. 4

1. Giới thiệu ....................................................................................................................................... 4

2. Sự ra đời của Windows Presentation Foundation(WPF) ................................................... 4

3. Ứng dụng của WPF ..................................................................................................................... 6

4. Ƣu điểm nổi bật của WPF.......................................................................................................... 8

5. Bộ thƣ viện của WPF ................................................................................................................ 10

PHẦN II: GIỚI THIỆU VỀ 3D ..................................................................................................... 11

CHƢƠNG 1: GIỚI THIỆU GÓC NHÌN, ÁNH SÁNG VÀ MÔ TẢ KHÔNG GIAN TỌA

ĐỘ......................................................................................................................................................... 14

1. Tổng quan .................................................................................................................................... 14

1.1. Tọa độ ba chiều..................................................................................................................... 15

1.2. Điểm trong không gian ........................................................................................................ 16

2. Góc nhìn (Camera) .................................................................................................................... 18

3. Ánh sáng (Light) ........................................................................................................................ 24

3.1. DirectionalLight ................................................................................................................... 25

3.2. PointLight .............................................................................................................................. 26

3.3. SpotLight ............................................................................................................................... 26

3.4. AmbientLight ........................................................................................................................ 27

4. Mô tả không gian tọa độ ........................................................................................................... 27

1. Hình ảnh động ............................................................................................................................ 32

2. Phép biến đổi hình ..................................................................................................................... 36

2.1. Phép dịch chuyển (TranslateTranform3D)........................................................................ 38

2.2. Phép biến đổi kích thước (ScaleTransform3D) ................................................................ 42

2.3. Phép xoay (RotateTransform3D) ....................................................................................... 45

2.4. Phép biến đổi bằng ma trận (MatrixTransform3)............................................................. 57

CHƢƠNG 3: TÔ MÀU CHO HÌNH 3D ...................................................................................... 64

1. Sử dụng cọ vẽ Gradient ............................................................................................................ 64

2. Sử dụng cọ vẽ Tile...................................................................................................................... 70

2.1. ImageBrush ........................................................................................................................... 71

2.2. DrawingBrush ....................................................................................................................... 77

2.3. VisualBrush........................................................................................................................... 85

CHƢƠNG 4: ỨNG DỤNG.............................................................................................................. 92

1. Giới thiệu ..................................................................................................................................... 92

2. Phân tích ...................................................................................................................................... 92

3. Giao diện ứng dụng ................................................................................................................... 93

4. Các dòng sự kiện chính............................................................................................................. 97

KẾT LUẬN......................................................................................................................................... 98

TÀI LIỆU THAM KHẢO ............................................................................................................... 99

DANH MỤC CÁC HÌNH, BẢNG BIỂU VÀ SƠ ĐỒ

Hình 1: Hình hộp có sử dụng Light. ........................................................................................................13

Hình 2: Hình hộp không sử dụng Light. .................................................................................................13

Hình 1-1: Hình tròn. ..................................................................................................................................14

Hình 1-2: Hình quả bóng. .........................................................................................................................14

Hình 1.1-1: Hệ trục tọa độ. .......................................................................................................................15

Hình 2-1: Camera với góc nhìn 50mm....................................................................................................19

Hình 2-2: Camera với góc nhìn 100mm..................................................................................................19

Hình 2-3: Camera với góc nhìn 25mm....................................................................................................20

Hình 2-4: Camera với góc nhìn 45 độ. ....................................................................................................20

Hình 2-5: Hình hộp sử dụng PerspectiveCamera...................................................................................22

Hình 2-6:Cách xác định OrthographicAerialView. ...............................................................................23

Hình 2-7: Hình hộp sử dụng OrthographicCamera. ..............................................................................24

Hình 3.1-1: Hình minh họa sử dụng DirectionalLight. .........................................................................25

Hình 3.2-1: Hình minh họa sử dụng PoinLight......................................................................................26

Hình 3.3-1: Hình minh họa sử dụng SpotLight......................................................................................27

Hình 3.4-1: Hình minh họa sử dụng AmbientLight. .............................................................................27

Hình 4-1: Hình ảnh tam giác trên mặt phẳng. ........................................................................................28

Hình 4-2: Cách xác định các đỉnh dựa trên hệ trục tọa độ Oxyz. ........................................................29

Hình 4-3: Mặt trước của hình vuông Hình 4-4: Mặt sau của hình vuông ...........................................30

Bảng 3: Các thuộc tính biến đổi. ..............................................................................................................37

Hình 2.1-1: Cách tham chiếu trên hệ trục tọa độ để vẽ một vật thể. ...................................................38

Hình 2.1-2: Hình ảnh được vẽ bằng cách nói các đoạn thẳng..............................................................39

Hình 2.3.1-1: Vật thể được xoay với một góc 30 độ. ............................................................................47

Hình 2.3.1-2: Vật thể được xoay với một góc -30 độ............................................................................47

Hình 2.3.2-1: Các điểm x, y trên hệ trục tọa độ Oxy. ...........................................................................52

Hình 2.3.2-2: Góc và đường thẳng của điểm x,y trên hệ trục Oxy......................................................52

Hình 2.3.2-3: Cách khác để xác định 2 điểm x,y. .................................................................................53

Hình 2.3.2-4: Số phức trên hệ trục tọa độ số phức. ..............................................................................53

Hình 2.3.2-5: Số phức với góc θ. .............................................................................................................54

Hình 1-1: Tọa độ dùng xác định cọ vẽ. ...................................................................................................66

Hình 1-2: Chuyển đổi cọ vẽ tam giác 2 chiều sang tam giác 3 chiều. ................................................67

Hình 1-3: Vật thể sử dụng cọ vẽ Gradient. .............................................................................................70

Hình 2.1-1: Cọ vẽ sử dụng ImageBrush..................................................................................................74

Hình 2.1-2: Hình ảnh sau khi được thay đổi giá trị TextureCoordinates............................................75

Hình 2.1-3: Hình ảnh khi sử dụng ViewboxUnit. ..................................................................................76

Hình 2.1-4: Hình ảnh sau khi có sử dung thêm thuộc tính TileMode. ................................................77

Hình 2.1-5: Hình ảnh khi sử dụng thuộc tính TileMode với kiểu FlipXY. ........................................77

Hình 2.2-1: Sử dụng DrawingBrush tô theo kiểu hình ellipse lấy từ resource. .................................83

Hình 2.2-2: Sử dụng DrawingBrush tô theo kiểu hình chữ nhật lấy từ resource...............................84

Hình 2.2-3: Sử dụng DrawingBrush tô theo kiểu sọc chéo lấy từ windowns. ...................................84

Hình 2.3-1: Khối lập phương được tô bằng những khối lập phương nhỏ. .........................................91

Hình 3: Giao diện chính. ...........................................................................................................................93

Bảng 1: Thành phần giao diện theo yêu cầu và những công nghệ chuyên biệt cần thiết để tạo

chúng. ......................................................................................................................................................... 10

Bảng 2: Các thuộc tính của Light. .......................................................................................................... 25

Bảng 3: Các thuộc tính biến đổi. ............................................................................................................. 37

Bảng 4: Bảng mô tả các thành phần của giao diện. .............................................................................. 96

Sơ đồ 1: Cấu trúc đơn giản để tạo ra hình hộp 3D................................................................................ 11

Sơ đồ 2: Lớp con trong lớp Media......................................................................................................... 17

Từ gốc Từ viết tắt

Windows Presentation Foundation WPF

Extention MakeUp Language XAML

Đồ họa ba chiều trong Windows Presentation Foundation WPF 3D

User Interface UI

Bảng: Danh sách các từ viết tắt.

Trang 1

MỞ ĐẦU

Công nghệ Windows Presentation Foundation

Khi khoảng cách công nghệ giữa các nhà sản xuất không còn quá xa, khi tính năng giữa các

phần mềm không còn nhiều khác biệt thì là lúc giao diện nổi lên như là một trong những giá trị

cạnh tranh cho mỗi sản phẩm phần mềm. Dù đó là web hay là phần mềm ứng dụng thì một giao

diện hấp dẫn, thân thiện luôn là điểm nhấn cho mỗi sản phẩm đó. Windows Presentation

Foundation (WPF) là một trong những công nghệ mới với những ưu điểm nổi bật cho việc thiết kế

và lập trình giao diện.

Với công nghệ từ trước năm 2006, thì việc biểu diễn hiệu quả tất cả các tính năng hoạt động

như một ứng dụng Window riêng biệt chạy trên desktop, đồng thời có thể truy cập thông tin thông

qua trình duyệt đòi hỏi xây dựng hai phiên bản độc lập sử dụng hai công nghệ khác nhau. Và việc

hợp nhất giữa người thiết kế và người lập trình cũng gặp không ít những khó khăn. Windows

Presentation Foundation ra đời không những giải quyết được các vấn đề trên mà còn có những ưu

điểm về đồ họa, âm thanh, video… Với việc sử dụng ngôn ngữ XAML(Extention MakeUp

Language) giúp cho việc quản lý các tập tin dễ dàng hơn.

Đặc biệt, điểm nổi bật nhất của WPF là đồ họa ba chiều. Khó khăn nhất cho những lập trình

viên khi lập trình với DirectX đó chính là card đồ họa mà nhà cung cấp hỗ trợ DirectX. Và giờ

đây WPF có khả năng thực thi những công việc dựa trên những tính toán phần mềm thay vì những

đặc điểm mà nhà cung cấp phần cứng tạo ra. WPF sẽ xác đính sự hỗ trợ của phần cứng với những

hiệu ứng đồ họa được tạo ra. Và bạn không cần phải bận tâm về điều đó.

Lịch sử ra đời và tƣơng lai của WPF

Lịch sử ra đời

WPF là một trong những công nghệ mới nhất trong .NET 2008 (Framework 3.0 hay 3.5) của

Microsoft, là hệ thống API mới hỗ trợ việc xây dựng giao diện đồ hoạ trên nền Windows . WPF

được giới thiệu lần đầu tiên cùng với .NET 3.0 vào ngày 21 tháng 11 năm 2006. Và phát hình

phiên bản chính thức đầu tiên vào ngày 30 tháng 4 năm 2007.

Trang 2

Tiếp sau đó là WPF 2.0, WPF 3.0 được phát hành vào ngày 22 tháng 7 năm 2009, và vừa mới

đây là WPF 4.0(với gói Framework 4.0) được phát hành vào ngày 7 tháng 6 năm 2010 .

Tƣơng lai của WPF

Việc Microsoft chính thức ra mắt bộ công cụ Visual Studio 2010 và nền tảng phát triển

.NET 4.0 và WPF 4.0. Sự kiện này đã và đang mở ra hướng mới trong ngành công nghiệp phần

mềm, với sự linh hoạt và khả năng xây dựng ứng dụng một cách nhanh chóng mà vẫn đáp ứng

được những yêu cầu ngày các khắt khe của người dùng.

Lý do chọn đề tài

WPF được xem là thế hệ kế tiếp của Windowns, tăng cường khả năng lập trình giao diện của

lập trình viên bằng cách cung cấp API cho phép tận dụng những lợi thế về đa phương tiện hiện

đại, các công nghệ sẵn có khác nhau và lợi thế của card đồ họa. Đặc biệt sử dụng DirectX làm

công nghệ cơ sở để xây dựng nên những hiệu ứng - DirectX là công nghệ đồ họa của Microsoft,

tận dụng được khả năng của phần cứng để tăng tốc chương trình .

Là sản phẩm của Microsoft ( tìm lực tài chính mạnh mẽ, với 95% máy tính cá nhân sử dụng hệ

điều hành windows, đội ngũ kỹ thuật hàng đầu và sự thành công của các sản phẩm trong quá khứ)

nên đủ để bạn tin vào khả năng WPF sẽ trở thành một trong những công nghệ phổ biến nhất trong

thế giới lập trình ứng dụng.

Trên cơ sở đó em quyết định tìm hiểu công nghệ WPF và đi sâu vào nghiên cứu đồ họa 3D với

việc phát triển một ứng dụng mà sử dụng hầu hết các ứng dụng về đồ họa 3 chiều mà WPF đã hỗ trợ

để cung cấp cho mọi người một sự hiểu biết nhất định về đồ họa 3D với một công nghệ WPF mà

được dự đoán là sẽ phát triển trong một tương lai không xa.

Trang 3

Mục tiêu thực hiện

Về mặt lý thuyết

+ Nắm được cơ sở lý thuyết chung về công nghệ WPF cũng như việc sử dụng dồ họa

ba chiều trong WPF.

+ Tìm hiểu các ứng dụng về 3D để nắm được cách thức hoạt động và những yêu cầu

cần thiết đối với những ứng dụng.

Về mặt ứng dụng

+ Xây dụng một mô hình 3D.

+ Sử dụng các hiệu ứng các biến đổi trên mô hình.

Trang 4

Phần I: TỔNG QUAN

VỀ WINDOWS PRESENTATION FOUNDATION

1. Giới thiệu

Windows Presentation Foundation (WPF) còn được gọi dưới tên mã là Avalon, là một hệ

thống thư viện con trong bộ .Net Framework và được liên kết dưới dạng XAML. WPF được tích

hợp trong Windows Vista và Windows 2008, ngoài ra, nó còn hổ trợ đối với Windows XP SP2 và

cả Windows Server 2003. Nó cung cấp kiểu lập trình cho việc xây dựng ứng dụng và hổ trợ

1 cách trong suốt giữa giao diện người dùng và mô hình ứng dụng doanh nghiệp. Một ứng

dụng WPF có thể được triển khai trên desktop hoặc trên 1 thiết bị thông qua trình duyệt web.

Hơn thế nữa, nó còn hổ trợ các nhiều control, thiết kế và phát triển giao diện thân thiện, trực quan

bên ngoài của chương trình windows. Nó hướng đến sự hợp nhất của 1 ứng dụng dịch vụ: giao

diện người dùng, đồ họa 2D và 3D, các văn bản cố định và động, các mô hình đồ họa nâng cao, đồ

họa vector, hình ảnh động, Data Binding, Audio và Video. Mặc dù Windows Form sẽ tiếp

tục được sử dụng rộng rãi, nhưng các công ty phát triển ứng dụng WPF như là các ứng dụng

doanh nghiệp (line-of-bussiness).

Microsoft Sliverlight là một nền tảng web của WPF hoặt động như một dạng Flash và các ứng

dụng mobiles với các mô hình chương trình tương tự như là 1 ứng dụng .NET. Tính năng 3D

không được hổ trợ, tuy nhiên XPS và cơ sở đồ họa vector đã được tích hợp.

2. Sự ra đời của Windows Presentation Foundation(WPF)

Windows Presentation Foundation được phát hành chính thức vào tháng 11 năm 2006.

Vì sao WPF lại ra đời?

Đi đến tương lai bằng cái nhìn từ quá khứ, năm 2001, Microsoft cho ra đời một tập hợp các

công nghệ nền tảng, được gọi với tên chung là .NET. Hầu hết các công nghệ này đều đưa ra các

mô hình lập trình mới, hoàn toàn chưa từng xuất hiện trước đó. Lấy ví dụ:

Trang 5

1. ASP.NET Web Forms đưa mô hình lập trình Windows truyền thống lên thế giới Web, biến

Web từ môi trường state-less (client và server tách biệt hoàn toàn) thành một môi trường thống

nhất: state-full Web.

2. ADO.NET định nghĩa ra các class tổng quát như Connection, Command, DataSet để các

developer thừa kế từ chúng, mở rộng khả năng tiếp cận với nhiều loại RDMS (Relational

Database Management System) khác nhau như SQL Server, Access, Oracle, MySql…, đồng thời

nâng cao khả năng debug khi thao tác với database.

3. Common Language Runtime làm thư viện nền tảng giúp lập trình viên sử dụng nhiều ngôn

ngữ lập trình khác nhau có thể cùng làm việc với nhau trong một project. Có thể kể ra C#, J#, F#,

VB.NET, Delphi.NET, C++.NET, IronRuby, IronPython…

Tuy nhiên công nghệ mà những nhà phát triển trung thành nhất của Microsoft mong muốn

nhìn thấy bước đột phá – Windows Forms – lại chẳng có gì thay đổi. Đã hơn một thập kỷ, kể từ

khi Windows 95 ra đời, người ta vẫn phải tạo giao diện cho ứng dụng desktop bằng cách gọi các

hàm Windows API. Windows Forms tuy khoác bên ngoài giao diện kéo thả nhưng thực chất bên

dưới nó vẫn bị phụ thuộc vào các lời gọi API, nên nó không có gì là đặc sắc.

Trải qua một thời gian tồn tại dài như thế, Windows Forms đã được chuẩn hóa và mang trong

mình đầy đủ các công cụ cho phép xây dựng các chương trình dễ dàng. Tuy nhiên, do sử dụng

Windows API, nên giao diện của các control chuẩn như button, checkbox, textbox bị phụ thuộc

vào phiên bản Windows mà .NET Framework đang chạy, ví dụ 3D button trong Vista Aero khi

đem sang Windows 2000 thì lại biến thành flat button. Nhưng đó chỉ là vấn đề nhỏ, rắc rối lớn

nhất của Windows Forms chính là giao diện của các control chuẩn này lại gần như không thể

được can thiệp và thay đổi theo tư duy sáng tạo của nhà thiết kế, ngoại trừ trường hợp có ai đó

chịu khó đến nỗi ngồi viết cả tấn code bằng mô hình lập trình cấp thấp GDI/GDI+ (Graphical

Device Interface).

Trong các ứng dụng hiện đại, giao diện người dùng trực quan chiếm vị trí hết sức quan trọng.

Việc trình diễn đúng thông tin, theo đúng cách và vào đúng thời điểm có thể đem lại những giá trị

kinh tế xã hội đáng kể. Với những ứng dụng thương mại, chẳng hạn một ứng dụng bán hàng trực

tuyến, việc cung cấp một giao diện người dùng mạnh có thể tạo nên sự khác biệt giữa một công ty

với các đối thủ cạnh tranh, góp phần làm tăng doanh số và giá trị thương hiệu của hãng này so với

Trang 6

hãng khác. Để có được một giao diện người dùng như vậy, việc tích hợp đồ họa, media, văn bản

và các thành phần trực quan khác như một thể thống nhất đóng đóng vai trò mấu chốt.

WPF ra đời chính là để xây dựng một nền tảng chung giải quyết những thách thức đã nêu

trên.

3. Ứng dụng của WPF

WPF được xây dựng nhằm vào ba mục tiêu cơ bản:

1) Cung cấp một nền tảng thống nhất để xây dựng giao diện người dùng.

2) Cho phép người lập trình và người thiết kế giao diện làm việc cùng nhau một cách

dễ dàng.

3) Cung cấp một công nghệ chung để xây dựng giao diện người dùng trên cả Windows

và trình duyệt Web.

WPF là một trong 3 thành phần mới của .NET Framework 3.0 (Windows Presentation

Foundation, Windows Communication Foundation, Windows Workflow Foundation). Có thể xem

sự ra đời của WPF là một cứu cánh cho những nhà phát triển đang phải thực hiện công đoạn code

hết sức tỉ mỉ để tạo giao diện. WPF thay đổi những quan niệm lập trình giao diện cũ, xóa đi những

bất cập còn tồn tại của Windows Forms bằng cách giới thiệu một mô hình hoàn toàn mới lạ.

Trong WPF vẫn tồn tại khái niệm control chuẩn như label, radio button…, tuy nhiên thay vì gọ i

Windows API thì chúng có khả năng tự vẽ ra text, tự vẽ border, tự vẽ background cho chính bản

thân của mình. Tính đột phá là kể từ nay, không bị API cản trở, nhà phát triển có thể toàn quyền

kiểm soát các đối tượng đồ họa. WPF cung cấp các tính năng thật sự mạnh mẽ để hỗ trợ nhà phát

triển can thiệp vào quá trình xuất giao diện (render) của control ra màn hình mà không phải viết

bất kỳ dòng code nào. Một số điểm nhấn thú vị nên được kể ra đầu tiên:

1. Sử dụng đối tượng Transformation để xoay tròn, kéo dãn, thu nhỏ hay xoay nghiêng bất cứ

thứ gì thuộc về giao diện.

2. Tạo hình ảnh động (Animation) để các control trở lên lung linh chuyển động ngay trước mắt

người sử dụng.

3. Xây dựng Form có các hình thù khác lạ, hỗ trợ control có màu trong suốt để tạo vẻ mới mẻ

và chuyên nghiệp

Trang 7

WPF sử dụng DirectX làm công nghệ cơ sở để xây dựng nên những hiệu ứng thú vị như trên.

DirectX là công nghệ đồ họa của Microsoft, tận dụng được khả năng của phần cứng để tăng tốc

chương trình. Lấy ví dụ, một vấn đề đơn giản là vẽ một đoạn thẳng từ điểm (0, 0) đến điểm (10,

10).

· Trong GDI/GDI+ của Windows Forms, .NET sẽ tạo ra một danh sách các điểm nằm giữa (0,

0) và (10, 10), tức là các điểm (1, 1), (2, 2), … , (9, 9) rồi vẽ ra từng điểm này. Do vẽ nhiều điểm

kề nhau nên cuối cùng các điểm này tạo ra cảm giác là vẽ được một đoạn thẳng. Nói một cách

khác, phương pháp của Windows Forms là sử dụng phần mềm để vẽ ra một tập hợp điểm

· Đối với DirectX, nó gọi trực tiếp hàm DrawLine của card đồ họa, và card đồ họa sẽ vẽ ngay

ra một đường thẳng không cần phải tính toán đến các điểm trung gian. Đây là phương pháp sử

dụng phần cứng để vẽ ra một ảnh Vector. Nhờ DirectX mà tốc độ render được cải thiện đáng kể vì

phần cứng thì chạy nhanh hơn rất nhiều so với phần mềm cùng một chức năng.

Với WPF, nhà phát triển không còn phải đau đầu với bài toán xử lí tốc độ, nhất là đối với các

phần mềm game hiện đại ngày nay, đòi hỏi đồ họa 3D sinh động mà GDI/GDI+ khó lòng có thể

đáp ứng được. Với WPF, nhà phát triển có thể tự do sáng tạo về giao diện, tạo nên các hiệu ứng

bắt mắt mà trước đây không thể nào thực hiện được với Windows Forms.

Mặc dù người ta biết đến WPF với khả năng đồ họa tuyệt vời, với hình ảnh động, với các tính

năng 3D độc đáo, nhưng WPF vẫn có thể được dùng để xây dựng nên các ứng dụng Windows

truyền thống, sử dụng các control chuẩn như trong Windows Forms. Sự thật là khi chọn lựa kiểu

giao diện truyền thống này, thì các thao tác đối với control không khác bao nhiêu so với Windows

Forms, và nhà phát triển có thể dễ dàng làm quen ngay với môi trường mới mà không mất quá

nhiều công sức.

Có một vài cải tiến trong WPF không thuộc về phần giao diện, nhưng chúng đáng được lưu ý

khi nhà phát triển muốn phát triển một ứng dụng chuyên nghiệp và bài bản hơn. Có thể kể ra đó

là:

· Mô hình Data-Binding mới được cải thiện nhiều so với Windows Forms.

· Các class dùng để phục vụ cho việc in tài liệu và sắp xếp trình tự in ấn.

· Hệ thống tài liệu có thể hiển thị một số lượng rất lớn các văn bản được định dạng như Word,

Excel, PDF…

Trang 8

· Xây dựng ứng dụng page-based như website, có thể chạy trên Internet Explorer và môi

trường World Wide Web, không bị các cảnh báo về bảo mật và không cần thực hiện quá trình cài

đặt (Portable Applications).

4. Ƣu điểm nổi bật của WPF

Có một số các tính năng mới trong WPF mà bạn có thể tận dụng khi bạn phát triển các ứng

dụng WPF của bạn. Trước tiên, để sử dụng sức mạnh phần cứng đồ họa WPF mới thì thực hiện

một mô hình đồ họa véc tơ, dựa vào các Direct3D. Điều này cho phép công nghệ đồ họa tùy ý thu

nhỏ độ phân giải màn hình mà không mất đi chất lượng hình ảnh, cũng không thể sửa kích thước

đồ họa.

Ngoài ra, để hình dung dễ dàng giao diện người dùng (UI), WPF giới thiệu ngôn ngữ mới dựa

trên XML, được gọi là XAML. XAML cho phép các ứng dụng tự động phân tích cú pháp và thao

tác giao diện người dùng ở một trong hai yếu tố thời gian thiết kế hoặc thời gian khởi động. Nó

dùng mô hình code-behind, lập trình tương tự như ASP.NET, cho phép người thiết kế và người

phát triển làm việc song song và liền mạch công việc của mình. Tất nhiên, WPF cũng cung cấp

cho bạn những lựa chọn để không sử dụng các tập tin XAML khi bạn phát triển các ứng dụng

WPF, có nghĩa là bạn vẫn có thể phát triển các ứng dụng của bạn hoàn toàn bằng code như C#,

C/C++, hoặc Visual Basic.

Một trong những điều gây đau đầu cho những lập trình viên khi lập trình với DirectX đó là các

đặc điểm mà nhà sản xuất card đồ họa cung cấp hỗ trợ DirectX. Tuy vậy với WPF điều đó không

đáng lo ngại, bởi nó có khả năng thực thi những công việc dựa trên những tính toán phần mềm

thay vì những đặc điểm mà nhà cung cấp phần cứng tạo ra. WPF đủ thông minh để xác đính sự hỗ

trợ của phần cứng với những hiệu ứng đồ họa được tạo ra. Và bạn không cần phải bận tâm về điều

đó. Tất nhiên với những hiệu ứng animation phức tạp, nhưng được thực thi trên một nền tảng

phần cứng đã cũ thì cũng sẽ có những ảnh hưởng nhất định đối với quá trình thực thi.

Những đặc điểm đó đủ tạo ra những cải tiến hấp dẫn cho WPF, nhưng nó còn cung cấp những

thay đổi mạnh mẽ khác cho công nghệ lập trình giao diện. Và dưới đây sẽ là một loạt những hỗ

trợ mà công nghệ WPF mang lại cho người lập trình viên:

Mô hình giao diện Web (Web-like layout model): không chỉ cho phép xây dựng

những giao diện với những đối tượng cố định , WPF còn cung cấp những layout linh hoạt

Trang 9

để hiện thị, cho phép xây dựng những giao diện động theo nội dung, với những ngôn ngữ

khác nhau.

Đồ họa phong phú: Thay vì làm việc với những điểm ảnh, bạn được có thể làm việc

trực tiếp với những đối tượng hình học cơ bản: hình chữ nhật, hình eclipse. Bạn cũng có

những đặc điểm mới như điều khiển độ trong, độ mờ, cùng các hiệu ứng 3D.

Hiển thị văn bản linh hoạt: WPF có khả năng cung cấp những khả năng để hiện thị

văn bản một cách phong phú ở bất cứ đâu. Bạn có thể kết hợp văn bản với các đối tượng

khác. Hay có thể sử dụng các đặc điểm mới để hiện thị một lượng lớn văn bản một cách dễ

đọc nhất.

Các hiệu ứng Animation: Bạn có thể sử dụng bộ tính thời gian timer để vẽ lại hình.

Nhưng trong WPF với đặc điểm đã được tích hợp thành một phần của Framework. Từ đó

bạn có thể định nghĩa những hiệu ứng chuyện động cho các đối tượng đồ họa khác nhau.

Hỗ trợ video, audio file: Không giống như các công nghệ trước đó như Winform có

sự hạn chế trong việc hỗ trợ để chạy các file Audio và Video. WPF hỗ trợ chạy tất các file

mà Window Meida Player có thể đọc được, và cho phép bạn có thể chạy đồng thời một

hoặc nhiều file. Đặc biệt WPF cung cấp các tool cho phép bạn tích hợp các các nội dung

video vào giao diện, và cả các hiệu ứng 3D (ví dụ hiện thị video trên các mặt của hình hộp

3D).

Còn rất nhiều đặc điểm mạnh mẽ khác mà WPF cung cấp để hỗ trợ quá trình thiết kế và lập

trình như : Stypes and Template, Command, Pages Base Application….WPF được coi như là

công nghệ để tạo ra giao diện cho những ứng dụng Window của thế hệ tiếp theo.Độ phân giải độc

lập: cũng là một trong những đặc điểm khác tạo ra sự khác biệt cho công nghệ WPF. Nếu như các

giao diện được thiết kế bằng các công nghệ trước như Winform vốn dựa trên GDI/GDI+ sẽ gặp

nhiều phiền phức khi làm việc với những màn hình có độ phân giải khác nhau. Hình vẽ sẽ lớn hơn

với các màn hình có độ phân giải thập, hay nhỏ đi với khi độ phân giải màn hình cao. Nhưng

trong WPF điều đó không còn là vấn đề quan ngại với những người thiết kế. Bởi WPF cho phép

hiện thị các đối tượng với đúng kích cỡ khi thiết kế dưới các độ phân giải khác nhau của màn

hình.

Trang 10

Hiển thị ảnh Vector thay vì ảnh BitMap mang lại cho công nghệ WPF khả năng hiện thị linh

hoạt với nhiều kích thước khác nhau mà không lo làm “vỡ” hình ảnh những đối tượng đồ họa.Sự

độc lập giữa thiết kế và lập trình là một trong những bước tiến mà WPF mang lại. Các đối tượng

đồ họa trong WPF được thể hiện thông qua một loại mã đơn giản là XAML (Extention MakeUp

Language). Đó là một loại mã đơn giản gần giống như HTML dùng để t ạo và tinh chỉnh các đối

tượng đồ họa. Đó là một bước tiến lớn trong quá trình thiết kế và lập trình giao diện.

XAML cho phép người thiết kế có thể tạo ra các giao diện độc lập trên các công cụ thiết kế

chuyên biệt như Microsoft Expression Interactive Designer. Sau đó các giao diện đó được xuất ra

dưới dạng mã XAML và người lập trình chỉ cần import vào các tool như Visual Studio để tạo ra

giao diện cho chương trình của mình. Điều nãy rõ ràng làm giảm đi rất nhiều công sức và độ phức

tạp trong quá trình thiết kế phần mềm. Nó cho phép hai người với vai trò khác nhau có thể tiến

hành song song công việc của mình.

5. Bộ thƣ viện của WPF

Giờ đây WPF hỗ trợ nhiều tính năng lập trình giao diện trong cùng một công nghệ đơn nhất.

Điều này giúp cho quá trình tạo giao diện người dùng trở nên dễ dàng hơn đáng kể.

Windows Forms

PDF Windows Forms/ GDI+

Windows Media Player

Direct3D WPF

Giao diện đồ họa (form và các control)

x x

On-screen văn bản

x x

Fixed-format văn bản

x x

Hình ảnh x x

Video và âm thanh

x x

Đồ họa 2 chiều x x Đồ họa 3 chiều x x

Bảng 1: Thành phần giao diện theo yêu cầu và những công nghệ chuyên biệt cần thiết để tạo

chúng.

Nguồn từ: http://msdn.microsoft.com/en-us/library/aa663364.aspx

http://msdn.microsoft.com/en-us/library/aa663364.aspx

Trang 11

Phần II: GIỚI THIỆU VỀ 3D

Microsoft Windows Vista là phiên bản đầu tiên của Windows có tích hợp sẵn đồ họa 3D, và

giờ đây 3D được tích hợp với Microsoft Windows Presentation Foudation(WPF), giao diện lập

trình ứng dụng client(API) được giới thiệu trong năm 2006 như một phần của Microsoft NET

Framework. 3.0 mặc dù NET 3.0 được tích hợp trong Windows Vista, bạn cũng có thể cài đặt nó

dưới Microsoft Windows XP với Service Pack 2 hoặc Windows Server 2003 với Service Pack 1 .

Kể từ lần đầu xuất hiện(năm 1995), DirectX đã nhanh chóng phát triển cùng với sự phát triển

mạnh mẽ của game đồ họa. Giờ DirectX đã được tích hợp vào một phần của Windows. Tuy vậy

lập trình với DirectX không đơn giản và thực sự chúng khá phức tạp. Chính vì vậy nó chưa bao

giờ được sử dụng để tạo ra những giao diện đồ họa cho các phần mềm ứng dụng.

WPF ra đời và thay đổi tất cả điều đó. WPF không dựa trên nền tảng truyền thống là

GDI/GDI+. Điểm đặc biệt chính là DirectX làm nền tảng cho bất cứ giao diện nào được tạo ra. Dù

đó là hình ảnh 3D phức tạp hay đơn giản cho là một button, hiển thị text thì nó cũng thông qua

DirectX. Điều đó đồng nghĩa với việc những ứng dụng thông thường cũng có thể c ó những hiệu

ứng đồ họa phức tạp, ví dụ như những hiệu ứng trong suốt, bóng đổ. Và cũng nhờ thế mà có thể

tăng tốc xử lý đồ họa thông qua sự tương tác giữa DirectX và c ard đồ họa.

Cấu trúc đơn giản để tạo một hình ảnh 3D

Sơ đồ 1: Cấu trúc đơn giản để tạo ra hình hộp 3D

Để tạo ra được hình hộp 3D thì điều đầu tiên bạn phải làm là định nghĩa một đối tượng, một

vật thể trong không gian thông qua một đối tượng đó là MeshGeometry3D, đối tượng này bao

gồm Positions chứa các đỉnh của hình và TriangleIndices mô tả cách kết nối những đỉnh

để tạo thành một vật thể mà ta muốn định nghĩa.

Hình Hộp 3D

Camera Light MeshGeometry3D Material

Trang 12

Thứ hai là chúng ta sẽ định nghĩa màu cho đối tượng với Material hoặc có thể dùng thêm

đối tượng BackMaterial để tô màu ở mặt sau của vật thể.

Và một yếu tố mà tạo nên bề mặt nổi cho vật thể mà khi nhìn vào chúng ta có cảm giác như

một hình ảnh 3D đó là Light, nếu như không có đối tượng này thì bạn không thể thấy được hình

ảnh 3D mà thay vào đó là một hình phẳng.

Nhưng một yếu tố không kém phần quan trọng đó là Camera. Camera dùng để khai báo góc

độ nhìn cho vật thể, nếu không có đối tượng này thì bạn không thể nhìn thấy được vật thể.

Ví dụ như ta tạo một vật thể là một hình hộp:

<Window x:Class="vidu2.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="300" Width="500">

<Grid>

<Viewport3D >

<!—Camera--!>

<Viewport3D.Camera>

<PerspectiveCamera Position="5,5,5" LookDirection="-5,-5,-5"

UpDirection=" 0,1,0" NearPlaneDistance="1"/>

</Viewport3D.Camera>

<ModelVisual3D>

<ModelVisual3D.Content>

<Model3DGroup>

<!-—Light--!>

<DirectionalLight Color="White" Direction="2 -3 -1" />

<GeometryModel3D>

<!-—MeshGeomeTry--!>

<GeometryModel3D.Geometry>

<MeshGeometry3D Positions="0 0 0, 1 0 0, 1 0 1, 0 0 1,

1 0 1, 1 0 0,1 1 0, 1 1 1,

0 0 0, 0 1 0, 1 1 0, 1 0 0,

0 1 1, 1 1 1, 1 1 0, 0 1 0,

0 0 1, 0 1 1 , 0 1 0, 0 0 0,

0 0 1, 1 0 1, 1 1 1, 0 1 1"

TriangleIndices="0 1 2, 0 2 3, 4 5 6, 4 6 7, 8 9

10, 8 10 11,12 13 14,12 14 15,

16 17 18, 16 18 19, 20 21 22, 20 22 23 "/>

</GeometryModel3D.Geometry>

<!-—Material--!>

<GeometryModel3D.Material>

<DiffuseMaterial Brush="Blue"/>

</GeometryModel3D.Material>

<GeometryModel3D.BackMaterial>

<DiffuseMaterial Brush="Yellow"/>

</GeometryModel3D.BackMaterial>

</GeometryModel3D>

</Model3DGroup>

</ModelVisual3D.Content>

Trang 13

</ModelVisual3D>

</Viewport3D>

</Grid>

</Window>

Kết quả:

Hình 1: Hình hộp có sử dụng Light.

Nếu bạn không khai báo Light thì kết quả chỉ là một hình phẳng:

Hình 2: Hình hộp không sử dụng Light.

Để hiểu rõ hơn cách sử dụng từng loại đối tượng và áp dụng các đối tượng đó như thế nào để

tạo ra một vật thể mà ta mong muốn thì ta sẽ đi sâu hơn vào các chương.

(0,1,1)

(0,1,0)

(1,1,0)

(1,0,0)

(1,1,1)

(1,0,1)

(0,0,1)

(0,0,0)

Trang 14

Chƣơng 1: GIỚI THIỆU GÓC NHÌN, ÁNH SÁNG VÀ MÔ TẢ KHÔNG

GIAN TỌA ĐỘ

1. Tổng quan

Kể từ khi các nghệ sĩ của thời đại Upper Paleolithic bắt đầu tô điểm những bức tường hang

động với hình ảnh của thợ săn và con mồi của họ, người này đã cố gắng để mô tả ba chiều, thực tế

các đối tượng trên bề mặt hai chiều. Trên báo chí, tạp chí, sách, bảo tàng, album ảnh, rạp chiếu

phim, thư viện video, và máy tính đã được đầy đủ các kết quả về hình ảnh ba chiều.

Nhận thức của con người như vậy là hài hòa với không gian ba chiều của thế giới thực mà

chúng ta dễ dàng thuyết phục để chấp nhận, ngay cả bản vẽ đơn giản như là đại diện cho các đố i

tượng thực tế.

Ví dụ chỉ là một vòng tròn hình học:

Hình 1-1: Hình tròn.

Nhưng thêm một bóng nhỏ, và nó sẽ trở thành một quả bóng:

Hình 1-2: Hình quả bóng.

Trang 15

Một vòng tròn đơn giản chỉ là màu với một RadialGradientBrush. Các thay đổi từ màu đỏ

trên các cạnh đến trắng tại điểm quy định với GradientOrigin.

Các lớp thư viện đồ họa ba chiều trong Windows Presentation Foundation (viết tắt là WPF

3D) thực hiện tất cả các toán học cần thiết để thực hiện một hình ảnh ba chiều lên một bề mặt hai

chiều như một màn hình máy tính hoặc máy in. Người lập trình có thể chọn kiểu chiếu mà mình

muốn bằng cách lựa chọn một trong các lớp rút ra từ các lớp Camera được định nghĩa trong .NET

với namespace System.Windows.Media.Media3D. Hai lớp được đặt tên

OrthographicCamera và PerspectiveCamera thực hiện các phép biến đổi cần thiết cho các

chuyển đổi và chiếu theo tia nhìn. WPF 3D cũng bao gồm một lớp MatrixCamera cho các mục

đích cao cấp mà có thể thực hiện tùy ý các đối tượng ba chiều trên các bề mặt hai chiều.

Để xác định được vị trí hay góc độ nhìn thì ta dựa vào hệ trục tọa độ và các điểm thông qua hệ

trục tọa độ.

1.1. Tọa độ ba chiều

Hình 1.1-1: Hệ trục tọa độ.

Ba trục gặp nhau tại một gốc. Tăng giá trị của X là bên phải; giá trị gia tăng của Y là trở lên;

giá trị gia tăng của Z đi ra khỏi màn hình máy tính và hướng tới người xem. Điều này được biế t

đến như một bàn tay bên phải phối hợp hệ thống: Nếu bạn điểm các ngón trỏ của tay phải của bạn

Trang 16

theo hướng tăng giá trị X và điểm ngón tay giữa để tăng giá trị Y, và điểm ngón tay cái để tăng

giá trị Z.

Biểu đồ cho thấy cách phối hợp hệ thống là tùy vào từng hình, bởi vì nó thật sự phụ thuộc vào

cách bạn xem nó. Bạn có thể xem nó từ tất cả các hướng khác nhau. Thật vậy, nếu tôi định hướng

sơ đồ để trục Z chỉ chính xác đối với người xem, các trục sẽ được nhìn thấy chỉ như là một điểm.

Cũng như hai trục của hai chiều Cartesian hệ thống phân chia thành bốn mặt phẳng, ba trục

trong không gian ba chiều phân chia thành tám mặt phẳng. Tám mặt phẳng không có tên tiêu

chuẩn, nhưng ba trục được gọi là mặt phẳng YZ, mặt phẳng XZ, và mặt phẳng XY:

Mặt phẳng YZ bao gồm tất cả các điểm mà X bằng 0.

Mặt phẳng XZ bao gồm tất cả các điểm mà Y bằng 0.

Mặt phẳng XY bao gồm tất cả các điểm mà Z bằng 0.

Bạn có thể hình dung ba mặt phẳng như chia không gian trong một nửa, và định nghĩa một

cách dễ hiểu như sau:

Mặt phẳng YZ chia không gian vào bên phải(right) (X > 0) và trái(left) (X < 0).

Mặt phẳng XZ phân chia không gian vào đầu trang(top), hay trên(upper) (Y > 0),

và dưới cùng(bottom), hoặc thấp hơn(lower) (Y < 0).

Mặt phẳng XY phân chia không gian vào phía trước(front) (Z > 0) và ở phía

sau(back), hoặc phía sau(rear) (Z < 0).

Mỗi mặt phẳng trong số tám mặt phẳng sau đó có thể được mô tả với một cụm từ như "phía

dưới bên trái phía trước" . Đó là cụm từ đặc biệt dùng để chỉ tất cả các điểm trong đó X là số âm,

Y là số âm, và Z là số dương.

1.2. Điểm trong không gian

Một vị trí chính xác trong không gian ba chiều được đại diện bởi các điểm (X, Y, Z). WPF 3D

xác định cấu trúc của Point3D chứa các điểm (X, Y, Z) có thể đọc hoặc tạo các điểm X, Y, và Z

của loại Double, và một constructor tạo ra một đối tượng Point3D từ X, Y, Z và các thành phần

của nó.

Dưới đây là một số cách để tạo và khởi tạo một đối tượng Point3D bằng C#:

Point3D point = new Point3D (2.33, 1.5, -2);

Trang 17

Trong đó: X = 2.33, Y = 1.5 và Z = -2.

Trong XAML, giá trị của đối tượng Point3D được phân biệt bởi khoảng trắng hoặc dấu phẩy:

“2.33, 1.5, -2” hoặc “2.33 1.5 -2”.

Thông thường, một ứng dụng WPF 3D phải chỉ định một tâp hợp các điểm cho đối tượng

Point3D, và được sử dụng lớp Point3Dcollection, lớp này sẽ Add các điểm của đối tượng

Point3D.

Ví dụ:

Point3DCollection ptcoll = new Point3DCollection ();

ptcoll.Add (New Point3D (2.55, 1.5, -2));

ptcoll.Add (New Point3D (0, 2.5, 7));

ptcoll.Add (New Point3D (1, 1, -3));

Bên cạnh Point3DCollection, còn có Int32Collection tương tự (được định nghĩa

trong không gian tên System.Windows.Media). Cả hai Point3DCollection và

Int32Collection bắt nguồn từ một lớp có tên là Freezable.

Sơ đồ 2: Lớp con trong lớp Media.

Trong namespase System.Windows.Media.Media3D cũng bao gồm một cấu trúc có tên là

Size3D mà chứa kích thước không gian ba chiều với các thuộc tính có tên là X, Y, và Z. Mộ t

đối tượng Size3D với X, Y, và Z tất đều bằng 0 được coi là rỗng.

Cấu trúc Rect3D định nghĩa một hình chữ nhật trong khôsng gian 3D là một sự kết hợp của

một đối tượng vị trí (Point3D) và một cấu trúc kích thước (Size3D). Ba thành phần của thuộc

kích thước phải không âm, vị trí luôn luôn ở góc lower-left-rear của hình chữ nhật. Rect3D cũng

System.Windows.Media

Point3DCollection

Freezable

System.Windows.Media

Point3DCollection Int32Collection

Trang 18

định nghĩa các thuộc tính X, Y, và Z, trong đó các thuộc tính X, Y, Z giống thuộc tính của đố i

tượng Point3D.

2. Góc nhìn (Camera)

Camera dùng để tạo góc nhìn cho vật thể, ta có 2 cách để xem vật thể thông qua Camera đó là

PerspectiveCamera và OrthographicCamera .

Đầu tiên, ta sử dụng một PerspectiveCamera, nó tương tự như cách mà mắt con người hay

một máy ảnh thông thường hay làm việc. Đối tượng xa máy ảnh hơn thì xuất hiện nhỏ hơn.

Chiếc máy ảnh này phải nằm trong một vị trí cụ thể trong không gian 3D, mà bạn chỉ ra bằng

cách thiết lập các thuộc tính Position cho một đối tượng của loại Point3D. Thông thường vị trí

máy ảnh đặt một nơi nào đó trong nửa Z dương của không gian 3D. Đối với những cảnh đơn giản,

máy ảnh này thường nằm ngay trên trục Z dương, có nghĩa là X và Y có tọa độ là 0. Ví dụ này, tôi

muốn đặt một máy ảnh ra xa trung tâm với tọa độ X = -2, Y =0, Z = 5 và nằm về bên trái của trục

Z:

<PerspectiveCamera Position="-2 0 5" … />

Bạn cũng cần phải chỉ định một hướng, được gọi là LookDirection nó được gọi là một

hướng vì nó là một đối tượng Vector3D. Thông thường bạn sẽ đặt hướng này trong nửa sau của

không gian 3D. Các vector đơn giản có thể sử dụng là một điểm trong có hướng song song với

trục Z âm, là vector (0, 0, -1):

<PerspectiveCamera Position = "-2 0 5"

LookDirection = "0 0 -1" ... />

Thay thế (0, 0, -2), (0, 0, -3),… vẫn sẽ làm việc giống như vậy. Do đó (0, 0, -1) là giá trị mặc

định của LookDirection và giá trị mặc định của Position là điểm (0, 0, 0.

Bạn có thể sử dụng PerspectiveCamera với cách chỉ xác định Position và

LookDirection, tuy nhiên ở đây chúng ta sẽ sử dụng các giá trị mặc định của hai thuộc tính

khác. Các thuộc tính UpDirection là một thuộc tính Vector3D cho biết làm thế nào máy ảnh

được định hướng. Mặc định vector này là (0, 1, 0 và chỉ ra rằng máy ảnh này được tổ chức để

hướng chỉ theo hướng Y dương.

Thuộc tính tiếp theo của PerspectiveCamera là FieldOfView, đó là một góc mà bạn chỉ

định bằng độ. Mặc định là 45 độ:

Trang 19

<PerspectiveCamera Position="-2 0 5"

LookDirection="0 0 -1"

UpDirection="0 1 0"

FieldOfView="45" />

Một FieldOfView giá trị nhỏ thì bạn sẽ thấy được hình ảnh lớn hơn. Một FieldOfView lớn

bạn sẽ có được hình ảnh nhiều hơn trong khung hình, nhưng mọi thứ đều nhỏ hơn.

Hãy xem xét các máy ảnh pinhole, ba máy ảnh pinhole khác nhau cho tất cả các độ dài khác

nhau theo các tiêu điểm. Một tiêu chuẩn dài tiêu cự 35mm cho máy ảnh kỹ thuật số hiện đại và

tương đương với máy ảnh ở đây là 50mm, có nghĩa là các pinhole (hoặc ống kính) cách khoảng

50mm từ bộ phim. Đây là máy ảnh có kích thước thực tế nhìn từ trên với các bộ phim bên trái và

camera chỉ sang phải:

Hình 2-1: Camera với góc nhìn 50mm.

Căn cứ vào chiều rộng của bộ phim và khoảng cách của pinhole từ bộ phim, góc độ xem là

khoảng 40 độ. Đó là tính bằng cách lấy một nửa chiều rộng của phim (18mm), phân chia theo độ

dài tiêu cự (50 mm), dùng các tiếp tuyến nghịch đảo, và sau đó tăng gấp đôi. Góc độ xem trong

WPF 3D là dựa trên chiều rộng hơn là chiều cao, do đó theo chiều ngang 40 độ xem được liên kết

với một ống kính tiêu chuẩn 50mm hiện có, giống như các thuộc tính FieldOfView với độ mặc

định là 45 độ cho lớp PerspectiveCamera.

Một ống kính tele 100mm vừa phải trông như thế này:


Trang 20

Góc độ xem hẹp hơn. Một ống kính góc rộng có thể có một tiêu cự khoảng 25mm: góc độ xem

rộng lớn hơn:


Trong cảnh 3D đã thiết lập, tam giác nằm trên trục Z với Z tọa độ mà phạm vi đi từ 0 đến -2.

Các camera được đặt tại điểm (-2, 0, 5) chỉ theo hướng Z âm với một góc độ xem là 45 độ. Thì

trên hình ảnh của thiết lập này trông giống như sau:

Hình 2-4: Camera với góc nhìn 45 độ.

Hộp màu xám là máy ảnh. Tam giác này được đại diện bởi các đường màu xám dày hơn trên

trục Z. Nếu máy ảnh lệch hơn về phía bên trái, hoặc gần hơn với trục X, hoặc thấp hơn, nó sẽ

không cho thấy hết toàn bộ tam giác.

Trang 21

Khi chạy chương trình chúng ta sẽ nhìn thấy hình tam giác ở phía bên phải của màn hình.

Một ví dụ tổng quát về cách hiển thị vật thể khi dùng PerspectiveCamera:

PerspectiveSquareCuboid.xaml 

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"


WindowTitle="Perspective Square Cuboid"

Title="Perspective Square Cuboid">

<Viewport3D>

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D>




<MeshGeometry3D

Positions="0 1 0, 0 0 0, 1 1 0, 1 0 0,

0 1 -4, 0 0 -4, 0 1 0, 0 0 0,

1 1 -4, 0 1 -4, 1 1 0, 0 1 0,

1 1 0, 1 0 0, 1 1 -4, 1 0 -4,

1 0 0, 0 0 0, 1 0 -4, 0 0 -4,

1 1 -4, 1 0 -4, 0 1 -4, 0 0 -4"

TriangleIndices=" 0 1 2, 1 3 2,

4 5 6, 5 7 6,

8 9 10, 9 11 10,

12 13 14, 13 15 14,

16 17 18, 17 19 18,

20 21 22, 21 23 22" />



<DiffuseMaterial Brush="Cyan" />



<DiffuseMaterial Brush="Red" />


</GeometryModel3D>



<AmbientLight Color="#404040" />

<DirectionalLight Color="#C0C0C0" Direction="2 -3 -1" />

</Model3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>


LookDirection="2 -1 -4"

UpDirection="0 1 0"

FieldOfView="45" />

Trang 22


</Viewport3D>

</Page>

Kết quả:

Hình 2-5: Hình hộp sử dụng PerspectiveCamera.

Thứ hai ta sẽ thay thế PerspectiveCamera bằng OrthographicCamera.

PerspectiveCamera và OrthographicCamera bắt nguồn từ ProjectionCamera, trong đó

OrthographicCamera xác định các thuộc tính Position, LookDirection, UpDirection,

NearPlaneDistance, và FarPlaneDistance.

PerspectiveCamera xác định có một thuộc tính riêng của chính nó đó là FieldOfView.

OrthographicCamera cũng định nghĩa một thuộc tính duy nhất công khai đó là Width, và cho

nó một thiết lập mặc định là 2.

OrthographicCamera định nghĩa một mặt phẳng chiếu, mặt phẳng chiếu vuông góc với

vector LookDirection và định hướng phù hợp với các thuộc tính UpDirection.

Nếu các Position là bất kỳ điểm nào trên trục Z tích dương, thì các LookDirection chỉ

vector theo hướng trục Z âm, và các điểm vector UpDirection chỉ lên, bề rộng ngang của

Viewport3D sẽ hiển thị tất cả mọi thứ trên trụ X tọa độ từ -Width / 2 đến Width / 2, như sơ đồ

sau đây minh chứng.

Trang 23

Hình 2-6:Cách xác định OrthographicAerialView.

Các file XAML sau giống hệt trước đó nhưng nó thay PerspectiveCamera bằng

OrthographicCamera.

OrthographicSquareCuboid.xaml 

<Page xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation"


WindowTitle="Orthographic Square Cuboid"

Title="Orthographic Square Cuboid">

<Viewport3D>

<ModelVisual3D>

<ModelVisual3D.Content><Model3DGroup>

<GeometryModel3D>




<MeshGeometry3D

Positions="0 1 0, 0 0 0, 1 1 0, 1 0 0,

0 1 -4, 0 0 -4, 0 1 0, 0 0 0,

1 1 -4, 0 1 -4, 1 1 0, 0 1 0,

1 1 0, 1 0 0, 1 1 -4,1 0 -4,

0 1 0, 0 0 0, 1 0 -4,0 0 -4,

1 1 -4, 1 0 -4, 0 1 -4,0 0 -4"


4 5 6, 5 7 6,

8 9 10, 9 11 10,

12 13 14, 13 15 14,

16 17 18, 17 19 18,

Trang 24

20 21 22, 21 23 22"



<DiffuseMaterial Brush="Cyan"



<DiffuseMaterial Brush="Red" />


</GeometryModel3D>




</Model3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>

<OrthographicCamera Position="-2 2 4"


UpDirection="0 1 0"

Width="5" />


</Viewport3D>

</Page>

Kết quả:

Hình 2-7: Hình hộp sử dụng OrthographicCamera.

Nhìn phía sau vật thể có vẻ lớn hơn phía trước, đó là một ảo ảnh quang học.

3. Ánh sáng (Light)

Một cảnh 3D thành công cũng phụ thuộc vào ánh sáng (Light), đặc biệt là sự tương tác của

ánh sáng với các bề mặt của vật thể bằng một hiệu ứng được gọi là bóng đổ (shading).

Trong chương này, tôi sẽ đề cập đến màu RGB thập lục phân bằng cách sử dụng các giá trị, chẳng

Trang 25

hạn như 00-FF-FF cho cyan. Khi tôi đặc biệt đề cập đến một màu sắc RGB mà có thể xuất hiện

trong XAML, tôi sẽ sử dụng cú pháp văn bản, chẳng hạn như "#00FFFF".

Có 4 cách để khai báo ánh sáng cho vật thể:

Tên thuộc tính Hoạt động

DirectionLight Chiếu tia song song vào vật thể từ một gốc ở vô cực.

PointLight Bức xạ ánh sáng từ một điểm trong vật thể.

SpotLight Phát ra một hình nón của ánh sáng từ một điểm trong vật thể.

AmbientLight Khuếch tán ánh sáng trên bề mặt vật thể.

Bảng 2: Các thuộc tính của Light.

Thông thường hay sử dụng thuộc tính DirectionalLight nhất. Hoặc có thể kết hợp

nhiều kiểu light trong cùng một ứng dụng.

3.1. DirectionalLight

DirectionalLight giống như một nguồn ánh sáng rất xa mà các tia sáng chiếu song song

vào vật thể, như ánh sáng từ mặt trời chiếu xuống trái đất.

Đây là hình ảnh minh họa các DirectionalLight sau chiếu xuống trên một mặt cầu:

<DirectionalLight Direction=”1 -1 -0.5” Color=”White”/>

Hình 3.1-1: Hình minh họa sử dụng DirectionalLight.

Trang 26

Hình ảnh tạo ra với một DirectionalLight duy nhất thường nhìn không tự nhiên. Trong

thế giới thực, ngay cả khi ánh sáng đi vào một cảnh nào đó từ một hướng duy nhất. (Như ánh

nắng), nó thường bị phản chiếu lại khoảng giữa các đối tượng. Một cách để gần giống như ánh

nắng này là có thể thêm một AmbientLight cường độ thấp.

3.2. PointLight

PointLight giống như một bóng đèn phát ra ánh sáng theo mọi hướng. Một đối tượng

PointLight có một vị trí đặc biệt trong không gian 3D để các tia ánh sáng chiếu trên bề mặt

phẳng ở nhiều góc độ:

<PointLight Color=”White” Position=”2,2,2”

ConstantAttenuation=”0”

LinearAttenuation=”0”

QuadraticAttenuation=”0.125”/>

Hình 3.2-1: Hình minh họa sử dụng PoinLight.

Khi dùng PointLight nó được ví như trong một căn phòng với một bóng đèn trần treo từ trần

nhà, trung tâm của bức tường, trần và sàn là vuông góc với ánh sáng và được chiếu sáng nhất,

trong khi các góc của căn phòng là tối hơn

3.3. SpotLight

SpotLight là giống như đèn pin. Các tia ánh sáng chiếu trên bề mặt phẳng ở góc độ khác

nhau, nhưng ánh sáng được giới hạn trong một hình nón:

<SpotLight Color=”Whitse” Position=”2,2,2”

Direction=”-1,-1,-1”

InnerConeAngle=”45”

OuterConeAngle=”90”/>

Trang 27

Hình 3.3-1: Hình minh họa sử dụng SpotLight.

3.4. AmbientLight

AmbientLights thường được sử dụng để ước tính hiệu quả của ánh sáng mà đã được phân

tán do phản chiếu của các bề mặt khuếch tán trong cảnh. Tia sáng từ một AmbientLight tất cả

bề mặt được chiếu từ mọi hướng.

Hình 3.4-1: Hình minh họa sử dụng AmbientLight.

AmbientLights chỉ có một thuộc tính duy nhất là Color.

<AmbientLight Color=”White”/>

4. Mô tả không gian tọa độ

Theo truyền thống về đồ họa 3D, các mặt của hình khối được định nghĩa bởi một khối đa

giác,và 3D phối hợp các điểm bố trí để tạo thành đa giác. Đối với mặt phẳng, thường chỉ là mộ t

vài hình đa giác là cần thiết, nhưng bề mặt cong đa giác đòi hỏi nhiều tính gần đúng độ cong của

các hình vẽ.

Trong WPF 3D, hình thức đơn giản nhất của đa giác là tam giác. Tam giác là rất hữu ích trong

đồ họa 3D. Bất kỳ ba điểm không trùng và ba điểm không gần nhau thì ta xác định một tam giác.

Trang 28

Trong WPF 3D, 3D đơn giản bao gồm một hình tam giác duy nhất, chẳng hạn như hình sau

trên mặt phẳng YZ với ba đỉnh:

Hình 4-1: Hình ảnh tam giác trên mặt phẳng.

Khi thiết lập một hình ảnh 3D, cách đơn giản nhất là tạo ra các con số. Bạn có thể cho nó xuất

phát từ tâm, hoặc đặt một góc ở gốc, hoặc bất cứ vị trí thuận tiện nào. Các đơn vị của không gian

3D không có ý nghĩa vật lý, mọi thứ đều tương đối.

Bạn chỉ rõ đỉnh của tam giác và kết nối các đỉnh với một đối tượng của MeshGeometry3D.

Hai yếu tố cần thiết của MeshGeometry3D là Positions và TriangleIndices, cả hai đều là

bộ sưu tập. Các Positions chứa các đỉnh của hình và TriangleIndices mô tả cách kết nố i

những đỉnh để tạo thành hình tam giác.

Trước hết ta sẽ xác định các điểm dựa trên hệ trục tọa độ Oxyz.

Trang 29

Hình 4-2: Cách xác định các đỉnh dựa trên hệ trục tọa độ Oxyz.

Một ví dụ bằng XAML: Positions là thuộc tính của Point3DCollection và chứa một

đối tượng Point3D. Các đánh dấu sau đây cho thấy ba đỉnh của tam giác này cách nhau bằng dấu

phẩy, và TriangleIndices chỉ chứa một hình tam giác duy nhất, đó là ba điểm:

<MeshGeometry3D Positions = "0 0 0, 0 1 -1, 0 0 -2"

TriangleIndices = "0 1 2" />

TriangleIndices được xác định bởi một tam giác với điểm thứ nhất, điểm thứ hai và điểm

thứ ba trong Positions.

Trình tự của ba số nguyên trong TriangleIndices có sự khác biệt trong cách thức con số

xuất hiện. Mặc dù tam giác này là bằng phẳng, nó tồn tại trong không gian ba chiều và nó có một

mặt trước và một mặt sau. Bạn có thể làm mặt trước và mặt sau có màu sắc khác nhau, có nghĩa

là bạn phải phân biệt giữa chúng một cách nào đó. Khi tam giác là nhìn từ phía trước, ba chỉ số

trong bộ TriangleIndices được xác định các đỉnh của tam giác theo hướng ngược chiều.

Lấy ví dụ tập hợp bộ sưu tập của TriangleIndices là "1 2 0" hoặc "2 0 1" là chính xác giống

như "0 1 2" bởi vì trong tất cả các trường hợp, ba chỉ số các đỉnh của tam giác theo hướng ngược

chiều khi tam giác là nhìn từ phía trước.

0

1

1

1

Y

X

Z

0, 1, 1

0, 1, 0 1, 1, 0

1, 0, 0

1, 0, 1

0, 0, 1

1, 1, 1

0, 0, 0

Trang 30

Mặt khác, nếu bạn đã có quy định "0 2 1" hoặc "2 1 0" hoặc "1 0 2," phía bên của tam giác đối

diện với vị trí trục X sẽ được xem xét phía trước.

Trong WPF 3D thì mỗi mặt của một vật thể được chia thành hai mặt: mặt trước và mặt sau.

Nếu bạn nối tam giác lại theo chiều ngược chiều kim đồng hồ thì nó được qui định là mặt trước và

ngược lại, nếu nối chiều kim đồng hồ thì nó là mặt sau, và nó được mô tả bằng hình ảnh sau:

Hình 4-3: Mặt trước của hình vuông Hình 4-4: Mặt sau của hình vuông

Các đối tượng MeshGeometry3D định nghĩa hình học của hình vẽ. Bạn cần xác định màu cho

bề mặt của đối tượng. Đối với công việc này bạn sử dụng một đối tượng DiffuseMaterial.

Lớp DiffuseMaterial là nhằm cung cấp các Brush, xác định các giá trị màu của Brush, bạn

sẽ thiết lập thuộc tính Brush của DiffuseMaterial với một trong những thuộc tính chỉ đọc

tĩnh của lớp Brushes:


Các MeshGeometry3D và hai đối tượng Material thuộc GeometryModel3D, trong đó có

ba tính chất thiết yếu: Các Geometry là thuộc tính của MeshGeometry3D, còn Material và

BackMaterial tô màu cho mặt trước và mặt sau của các đối tượng.

<GeometryModel3D>


<MeshGeometry3D Positions = "0 0 0, 0 1 -1, 0 0 -2"

TriangleIndices = "0 1 2" />

</ GeometryModel3D.Geometry>


Trang 31

<DiffuseMaterial Brush="Cyan"/>

</ GeometryModel3D.Material>


<DiffuseMaterial Brush="Red"/>

</ GeometryModel3D.BackMaterial>

</ GeometryModel3D>

Trang 32

Chƣơng 2: PHÉP BIẾN ĐỔI HÌNH VÀ HÌNH ẢNH ĐỘNG

1. Hình ảnh động

WPF có một hệ thống hỗ trợ hình ảnh động đa năng chủ yếu được xác định trong namespase

System.Windows.Media.Animation và truy cập thuận tiện nhất trong XAML bất cứ khi nào

có thể, có thể bạn sẽ muốn sử dụng một trong nhiều lớp lấy ra từ AnimationTimeline để xác

định hình ảnh động đơn giản.

Hình ảnh động trong WPF xuất phát từ lớp AnimationTimeline trong namespase

System.Windows.Media.Animation. Các lớp này cho phép động những thuộc tính trong lớp

3D. Các thuộc tính sau cho phép động:

Point3D (thuộc tính Position của ProjectionCamera).

Vector3D (thuộc tính LookDirection và UpDirection của ProjectionCamera,

hoặc thuộc tính Direction của DirectionalLight).

Double (thuộc tính FieldOfView của PerspectiveCamera hoặc thuộc tính Width

của OrthographicCamera).

Ví dụ sau sẽ cho thấy làm thế nào để động thuộc tính Position:

BackAndForth1.xaml





WindowTitle="Back and Forth #1"

Title="Back and Forth #1">

<Viewport3D>

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D>




<MeshGeometry3D

Positions="-0.5 0.5 0.5, 0.5 0.5 0.5,

-0.5 -0.5 0.5, 0.5 -0.5 0.5,

0.5 0.5 -0.5,-0.5 0.5 -0.5,

0.5 -0.5 -0.5,-0.5 -0.5 -0.5,

Trang 33

-0.5 0.5 -0.5,-0.5 0.5 0.5,

-0.5 -0.5 -0.5,-0.5 -0.5 0.5,

0.5 0.5 0.5, 0.5 0.5 -0.5,

0.5 -0.5 0.5, 0.5 -0.5 -0.5,

-0.5 0.5 -0.5, 0.5 0.5 -0.5,

-0.5 0.5 0.5, 0.5 0.5 0.5,

0.5 -0.5 -0.5,-0.5 -0.5 -0.5,

0.5 -0.5 0.5,-0.5 -0.5 0.5"

TriangleIndices=" 0 2 1, 1 2 3

4 6 5, 5 6 7,

8 10 9, 9 10 11,

12 14 13, 13 14 15

16 18 17, 17 18 19

20 22 21, 21 22 23" />





</GeometryModel3D>




</Model3DGroup>


</ModelVisual3D>

<Viewport3D.Camera>

<PerspectiveCamera x:Name="cam"

Position="0 1 6"


UpDirection="0 1 0"

FieldOfView="45" />


</Viewport3D>



<Page.Triggers>

<EventTrigger RoutedEvent="Page.Loaded">

<BeginStoryboard>

<Storyboard TargetName="cam" TargetProperty="Position">

<Point3DAnimation From="-2 1 6" To="2 1 6"

Duration="0:0:2" AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Page.Triggers>

</Page>

Trang 34

PerspectiveCamera được đặt tên là "cam" để nó có thể sử dụng trong Animation.

Animation được định nghĩa ở dưới cùng của file XAML. Nó được kích hoạt bởi sự kiện Loaded

của lớp Page, mà xảy ra khi trang được chạy và kết xuất trên màn hình. Các thuộc tính mục tiêu

của Animation là Position, Position là thuộc tính của loại Point3D. Các lớp

Point3DAnimation thay đổi vị trí từ (-2, 1, 6) đến (2, 1, 6) trong hai giây, và sau đó đảo ngược

hình ảnh động và lặp đi lặp lại mãi mãi hoặc cho đến khi tắt ứng dụng.

Sự thay đổi Position của camera từ (-2, 1, 6) đến (2, 1, 6) làm cho khối lập phương di

chuyển từ bên phải sang bên trái của Viewport3D. Rất khó xác định xem những con số hay máy

ảnh thực sự di chuyển.

Bạn cũng có thể động với thuộc tính Direction của DirectionalLight, với một thuộc

tính Vector3D. Các file XAML sau sẽ mô phỏng bình minh và hoàng hôn trên một hình lâp̣

phương vuông:

SunriseSunset.xaml





WindowTitle="Sunrise/Sunset"

Title="Sunrise/Sunset">

<Viewport3D>

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D>




<MeshGeometry3D

Positions="0 1 0, 0 0 0, 1 1 0, 1 0 0,

0 1 -4, 0 0 -4, 0 1 0, 0 0 0,

1 1 -4, 0 1 -4, 1 1 0, 0 1 0,

1 1 0, 1 0 0, 1 1 -4, 1 0 -4,

1 0 0, 0 0 0, 1 0 -4, 0 0 -4,

1 1 -4, 1 0 -4, 0 1 -4, 0 0 -4"


4 5 6, 5 7 6,

8 9 10, 9 11 10,

12 13 14, 13 15 14,

16 17 18, 17 19 18,

20 21 22, 21 23 22" />



Trang 35



</GeometryModel3D>



<DirectionalLight x:Name="light" />

</Model3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>



UpDirection="0 1 0"

FieldOfView="45" />


</Viewport3D>



<Page.Triggers>


<BeginStoryboard>

<Storyboard TargetName="light">

<Vector3DAnimationUsingKeyFrames

Storyboard.TargetProperty="Direction">

<LinearVector3DKeyFrame KeyTime="0:0:0" Value="2 0 -1"/>

<LinearVector3DKeyFrame KeyTime="0:0:10" Value="0 -1 0"/>

<LinearVector3DKeyFrame KeyTime="0:0:20" Value="-2 0 -1"/>

</Vector3DAnimationUsingKeyFrames>

<ColorAnimationUsingKeyFrames

Storyboard.TargetProperty="Color">

<LinearColorKeyFrame KeyTime="0:0:0" Value="Black" />

<LinearColorKeyFrame KeyTime="0:0:3" Value="White" />

<LinearColorKeyFrame KeyTime="0:0:17" Value="White" />

<LinearColorKeyFrame KeyTime="0:0:20" Value="Black" />

</ColorAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Page.Triggers>

</Page>

Hình ảnh động kéo dài 20 giây và không lặp lại. Các đối tượng

Vector3DAnimationUsingKeyFrames động với thuộc tính Direction của

DirectionalLight, DirectionalLight bắt đầu từ (2, 0, -1) mô phỏng ánh sáng trên đường

chân trời, đến điểm (0, -1, 0) ánh sáng đi thẳng xuống, và sau đó đến điểm (-2, 0, -1) là hình ảnh

được thể hiện vào lúc hoàng hôn.

Trang 36

Một phép động hình ảnh thứ hai là Color . DirectionalLight, đi từ đen sang trắng trong

ba giây đầu tiên, và sau đó từ trắng đến đen trong ba giây cuối cùng.

2. Phép biến đổi hình

Biến đổi là một phương pháp tiếp cận tổng quát và có hệ thống để sửa đổi. Một biến đổi về cơ

bản là một công thức toán học áp dụng cho mỗi điểm trong một bộ sưu tập, chẳng hạn như bộ sưu

tập Positions của một đối tượng MeshGeometry3D. Những điểm thực tế trong bộ sưu tập

Positions không thay đổi, nhưng những này điểm được sử dụng để làm phép biến đổi cho đố i

tượng.

Khi bạn sử dụng bản Windows Win32 API cho chương trình đồ họa hai chiều, các đồ họa

chuyển đổi là đặc điểm của bối cảnh thiết bị, trong đó chủ yếu là đại diện cho một bề mặt hiển thị

như màn hình. Tất cả các đối tượng được vẽ trên thiết bị này chịu sự biến đổi có hiệu lực tại thời

điểm đối tượng đã được vẽ. Tương tự như vậy, trong Windows Forms, các biến đổi là một thuộc

tính của lớp Graphics, đó là đóng gói của một bề mặt vẽ .

Trong WPF phép biến đổi luôn áp dụng cho các đối tượng hơn là với bề mặt vẽ . Nói cách

khác, bạn không làm bất cứ điều gì Viewport3D để thiết lập biến đổi 3D. Đây có thể là một lo

ngại vì Viewport3D có thuộc tính RenderTransform và LayoutTransform của Transform.

Nhưng Viewport3D thừa hưởng những thuộc tính từ FrameworkElement. Đây là những biến

đổi hai chiều của loại Transform và điều chỉnh vị trí, kích thước, và vòng quay của

Viewport3D.

Đối với biến đổi ba chiều, bạn sử dụng các lớp lấy từ các lớp Transform3D trừu tượng.

Chính xác ba lớp trong namespase System.Windows.Media.Media3D xác định tính chất

chuyển đổi của loại Transform3D:

Camera.

Model3D.

ModelVisual3D.

Camera là lớp trừu tượng cho tất cả các lớp camera, bao gồm cả PerspectiveCamera và

OrthographicCamera.

Trang 37

Model3D là lớp trừu tượng của các lớp GeometryModel3D, Light, và Model3DGroup.

Các thuộc tính Transform cho phép bạn áp dụng một biến đổi đến một con số duy nhất hoặc

nguồn ánh sáng, cũng như một bộ sưu tập của các đối tượng Model3D.

ModelVisual3D là lớp chỉ xuất phát từ lớp Visual3D trừu tượng. Bằng cách thiết lập thuộc

tính Transform của ModelVisual3D, bạn có thể áp dụng biến đổi mọi thứ trong

ModelVisual3D, có thể là một con số duy nhất, một tập hợp các số liệu, hoặc con số cùng với

các nguồn ánh sáng, và cũng có thể bao gồm các đối tượng con của ModelVisual3D.

Lớp Transform3D hiện trong hệ thống cấp bậc các lớp sau:

Object

DispatcherObject (abstract) DependencyObject

Freezable (abstract)

Animatable (abstract)

Transform3D(abstract)

AffineTransform3D (abstract)

TranslateTransform3D (sealed)

ScaleTransform3D (sealed)

RotateTransform3D (sealed)

MatrixTransform3D (sealed)

Transform3DGroup(sealed)

Trong chương này chúng ta sẽ đi vào bốn loại biến đổi:

Tên thuộc tính Hoạt động

TranlateTransform3D Di chuyển vị trí của một vật thể

ScaleTransform3D Thay đổi kích thước của một vật thể

RotateTrasform3D Xoay vật thể xung quanh một trục

MatrixTransform3D Biến đổi đối tượng bằng một ma trận

Bảng 3: Các thuộc tính biến đổi.

Trang 38

2.1. Phép dịch chuyển (TranslateTranform3D)

TranslateTransform3D là loại chuyển đổi mà đơn giản chỉ là di chuyển một vật thể vào

một vị trí khác mà không thay đổi kích thước hoặc định hướng của nó. Lớp

TranslateTransform3D định nghĩa ba thuộc tính của loại double với giá trị mặc định là 0:

OffsetX, OffsetY, và OffsetZ. Bạn có thể áp dụng một TranslateTransform3D cho một

yếu tố GeometryModel3D.

<GeometryModel3D>

…

<GeometryModel3D.Transform>

<TranslateTransform3D OffsetX="2" OffsetY="0" OffsetZ="-1" /;>

</GeometryModel3D.Transform>

</GeometryModel3D>

Các con số được mô tả bởi các GeometryModel3D là có hiệu quả nếu như khi bạn thêm vào

tọa độ X là 2 và tọa độ Z là -1 của tất cả các điểm trong bộ sưu tập Positions của

MeshGeometry3D gắn liền với hình vẽ.

Nói chung, biến đổi một tính toán một điểm (x', y', z') từ một điểm (x, y, z). Lớp

TranslateTranform3D liên quan đến công thức sau:

Hình 2.1-1: Cách tham chiếu trên hệ trục tọa độ để vẽ một vật thể.

Trang 39

Chương trình TranslateTransformExperimenter.xaml cho phép bạn thử nghiệm với

TranslateTransform3D. Chương trình vẽ ra một vật thể nối giữa các đoạn thẳng đơn giản như

hình sau:

Hình 2.1-2: Hình ảnh được vẽ bằng cách nói các đoạn thẳng.

Nó là một đơn vị cao, hai đơn vị rộng, và ba đơn vị sâu. Góc bên trái phía trước là gốc.

Chương trình có ba thanh trượt trên đầu trang để thay đổi OffsetX, OffsetY, và OffsetZ

thuộc tính của một TranslateTransform3D áp dụng cho GeometryModel3D. Ba thanh cuộn

thay đổi các thuộc tính phía dưới cùng của một TranslateTransform3D áp dụng cho

PerspectiveCamera.

TranslateTransformExperimenter.xaml





WindowTitle="TranslateTransform3D Experimenter"

Title="TranslateTransform3D Experimenter">

<DockPanel>

<ScrollBar Name="xMod" DockPanel.Dock="Top" Orientation="Horizontal"

1 (0, 0, -3)

5 (2, 1, -3)

4 (2, 1, 0)

3 (2, 0, 0)

2 (0, 0, 0)

6 (2, 0, -3)

Trang 40

Minimum="-5" Maximum="5" Value="0" ToolTip="Model X"

/>

<ScrollBar Name="yMod" DockPanel.Dock="Top" Orientation="Horizontal"

Minimum="-5" Maximum="5" Value="0" ToolTip="Model Y"

/>

<ScrollBar Name="zMod" DockPanel.Dock="Top" Orientation="Horizontal"

Minimum="-5" Maximum="5" Value="0" ToolTip="Model Z"

/>

<ScrollBar Name="zCam" DockPanel.Dock="Bottom" Orientation="Horizontal"

Minimum="-5" Maximum="5" Value="0" ToolTip="Camera Z"

/>

<ScrollBar Name="yCam" DockPanel.Dock="Bottom" Orientation="Horizontal"

Minimum="-5" Maximum="5" Value="0" ToolTip="Camera Y"

/>

<ScrollBar Name="xCam" DockPanel.Dock="Bottom" Orientation="Horizontal"

Minimum="-5" Maximum="5" Value="0" ToolTip="Camera X"

/>

<Viewport3D>

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D>




<MeshGeometry3D

Positions="0 0 0, 2 0 0, 2 1 0,

0 0 -3, 2 0 -3, 2 1 -3,

2 1 -3, 0 0 -3, 2 1 0, 0 0 0,

2 1 0, 2 0 0, 2 1 -3, 2 0 -3,

2 0 0, 0 0 0, 2 0 -3, 0 0 -3"

TriangleIndices=" 0 1 2,

3 5 4,

6 7 8, 7 9 8,

10 11 12, 11 13 12,

14 15 16, 15 17 16" />






<Transform3DGroup>

<TranslateTransform3D

OffsetX="{Binding ElementName=xMod,

Path=Value}"

OffsetY="{Binding ElementName=yMod,

Path=Value}"

OffsetZ="{Binding ElementName=zMod,

Path=Value}" />

</Transform3DGroup>


</GeometryModel3D>


Trang 41


<DirectionalLight Color="#C0C0C0" Direction="2 -3 -1">

<DirectionalLight.Transform>

<Transform3DGroup>



</Transform3DGroup>

</DirectionalLight.Transform>

</DirectionalLight>

<Model3DGroup.Transform>

<Transform3DGroup>



</Transform3DGroup>

</Model3DGroup.Transform>

</Model3DGroup>


<ModelVisual3D.Transform>

<Transform3DGroup>



</Transform3DGroup>

</ModelVisual3D.Transform>

</ModelVisual3D>



<Viewport3D.Camera>



UpDirection="0 1 0"

FieldOfView="45">

<PerspectiveCamera.Transform>

<Transform3DGroup>


OffsetX="{Binding ElementName=xCam,

Path=Value}"

OffsetY="{Binding ElementName=yCam,

Path=Value}"

OffsetZ="{Binding ElementName=zCam,

Path=Value}" />

</Transform3DGroup>

</PerspectiveCamera.Transform>

</PerspectiveCamera>


</Viewport3D>

</DockPanel>

</Page>

Viewport3D ở đây là trung tâm của một DockPanel. Ở phía trên là ba ScrollBar điều

khiển, và ở dưới ba ScrollBar về độ sâu của vật thể. Sáu ScrollBar đều có khoảng từ -5 đến

5. Ba ScrollBar ở đầu trang có tên "xMod", "yMod", và "zMod", chuyển đổi về

GeometryModel3D:


<Transform3DGroup>

Trang 42


OffsetX="{Binding ElementName=xMod, Path=Value}"

OffsetY="{Binding ElementName=yMod, Path=Value}"

OffsetZ="{Binding ElementName=zMod, Path=Value}" />

</Transform3DGroup>


TranslateTransform3D gồm có OffsetX, OffsetY, và OffsetZ thuộc tính của nó thiết

lập để gán dữ liệu giá trị gia tăng của ba ScrollBar ở đầu trang. Một biến đổi áp dụng cho mộ t

GeometryModel3D ảnh hưởng đến tất cả các điểm trong bộ sưu tập Positions được xác định

bởi MeshGeometry3D. Khi bạn di chuyển ScrollBar trên cùng về bên phải, sẽ biến đổi vật thể

về bên phải dọc theo trục X. Bạn cũng có thể thiết lập giá trị âm để OffsetX bằng cách di chuyển

thanh cuộn về bên trái. Tương tự như vậy, các giá trị dương của OffsetY di chuyển vật thể lên,

và các giá trị dương của OffsetZ di chuyển con số gần hơn về phía người xem.

Các thanh cuộn dưới cùng của trang được liên kết với một TranslateTransform3D áp dụng

cho Camera:


<Transform3DGroup>


OffsetX="{Binding ElementName=xCam, Path=Value}"

OffsetY="{Binding ElementName=yCam, Path=Value}"

OffsetZ="{Binding ElementName=zCam, Path=Value}" />

</Transform3DGroup>


Biến đổi này ảnh hưởng đến các thuộc tính Position của máy ảnh. Khi bạn di chuyển thanh

cuộn đầu của ba thanh cuộn phía dưới sang bên phải, máy ảnh này sẽ di chuyển sang phải và con

số này dường như di chuyển sang trái. Nói chung, một biến đổi áp dụng cho một máy ảnh thực

hiện kết quả nghịch đảo của so với một biến đổi áp dụng cho một vật thể 3D.

2.2. Phép biến đổi kích thƣớc (ScaleTransform3D)

ScaleTransform3D này làm cho một vật thể lớn hơn hoặc nhỏ hơn bằng cách nhân X, Y, và

Z của nó tọa độ thuộc tính được đặt tên ScaleX, ScaleY, và ScaleZ, tất cả đều có giá trị mặc

định là 1. Dưới đây là cách ScaleTransform3D có thể xuất hiện trong XAML để biến đổi mộ t

GeometryModel3D:

<GeometryModel3D>

…


Trang 43

<ScaleTransform3D ScaleX="3" ScaleY="1" ScaleZ="2" />


</GeometryModel3D>

Vật thể này được mở rộng kích thước theo trục X là 3 và tăng gấp đôi kích thước dọc theo

trục Z. Thuộc tính ScaleY thiết lập giá trị mặc định của nó và có thể được gỡ bỏ. Cách thức

chuyển đổi công thức là:

𝑥 ′ = 𝑆𝑐𝑎𝑙𝑒𝑋 ∗ 𝑥

𝑦 ′ = 𝑆𝑐𝑎𝑙𝑒𝑌 ∗ 𝑦

𝑧′ = 𝑆𝑐𝑎𝑙𝑒𝑍 ∗ 𝑍

Tuy nhiên, đây không phải là công thức thay đổi kích thước hoàn chỉnh. Bạn có thể thay đổi

kích thước bằng cách thay đổi ba thuộc tính của ScaleTransform3D tên CenterX, CenterY,

và CenterZ, tất cả đều có giá trị mặc định là 0. Cách thức chuyển đổi bằng các công thức:

𝑥′ = 𝑆𝑐𝑎𝑙𝑒𝑋 ∗ 𝑥 − 𝐶𝑒𝑛𝑡𝑒𝑟𝑋 + 𝐶𝑒𝑛𝑡𝑒𝑟𝑋

𝑦′ = 𝑆𝑐𝑎𝑙𝑒𝑌 ∗ 𝑦 − 𝐶𝑒𝑛𝑡𝑒𝑟𝑌 + 𝐶𝑒𝑛𝑡𝑒𝑟𝑦

𝑧′ = 𝑆𝑐𝑎𝑙𝑒𝑍 ∗ 𝑧 − 𝐶𝑒𝑛𝑡𝑒𝑟𝑍 + 𝐶𝑒𝑛𝑡𝑒𝑟𝑍

Hãy lấy một ví dụ: Giả sử một đối tượng 3D có các giá trị X khoảng từ 0 đến 2. Nếu ScaleX

là 2, các giá trị này sẽ chuyển đổi khoảng từ 0 đến 4. Nhưng nếu CenterX được thiết lập là 1, X

ban đầu giá trị 0 là giảm đi bởi 1 để được -1, sau đó nhân với 2 để được -2, và sau đó CenterX

được thêm vào là -1. Giá trị X của 2 là giảm đi bởi CenterX được 1, nhân với 2 được 2, và sau đó

được thêm một lần nữa CenterX được 3. Các đối tượng chuyển bây giờ kéo dài dọc theo trục X

từ -1 đến 3. Nó vẫn còn tăng gấp đôi kích thước, nhưng đó là một phần của đối tượng trong đó X

là giá trị của 1 CenterX.

Bạn có thể thêm trực tiếp các thuộc tính sau đây vào ScaleTransform3D trong file XAML:

CenterX = "1" CenterY = "0,5" CenterZ = "-1,5"

Kết hợp phép dịch chuyển và phép biến đổi

Người ta thường áp dụng nhiều biến đổi trong cùng một mô hình hay hình ảnh. Để làm điều

này, bạn cần phải xác định các biến đổi để biến đổi trong Transform3DGroup:


<Transform3DGroup>

...

</Transform3DGroup>

</ GeometryModel3D.Transform>

Trang 44

Transform3DGroup này có thể có nhiều biến đổi bên trong, các phép biến đổi tương đương

với phép nhân ma trận, và không phải là phép nhân ma trận giao hoán. Trình tự các biến đổi xuất

hiện trong Transform3DGroup sẽ được thực hiện khác nhau.

Đối với nhiều biến đổi của TranslateTransform3D, kết quả chỉ đơn giản là tổng của thuộc

tính OffsetX, OffsetY, và OffsetZ. Nếu một Transform3DGroup có chứa nhiều liên kế t

TranslateTransform3D liên tiếp với giá trị rõ ràng, thì có thể cải thiện kết quả bằng cách kế t

hợp chúng lại thành một. Tuy nhiên, nếu một TranslateTransform3D đặc biệt bị ảnh hưởng

bởi một dữ liệu ràng buộc hoặc hình ảnh động, có thể sẽ không có khả năng kết hợp nó với các

biến đổi khác.

Tương tự, nếu các thuộc tính CenterX, CenterY, và CenterZ của một

ScaleTransform3D với giá trị măc định là 0, tương đương ScaleTransform3D với mộ t

chuyển đổi chỉ chứa các thuộc tính ScaleX, ScaleY, và ScaleZ.

Nhưng kết hợp một TranslateTransform3D và một ScaleTransform3D, hoặc quy mô

nhiều biến đổi với các tâm điểm không phải mặc định, và bạn thực sự cần phải biết những gì bạn

đang làm.

Trường hợp kết hợp một TranslateTransform3D và một ScaleTransform3D với tâm

điểm mặc định. Nếu TranslateTransform3D thực hiện trước, các công thức chuyển đổi là:

𝑥′ = 𝑥 + 𝑂𝑓𝑓𝑠𝑒𝑡𝑋

𝑦′ = 𝑦 +𝑂𝑓𝑓𝑠𝑒𝑡𝑌

𝑧′ = 𝑧 + 𝑂𝑓𝑓𝑠𝑒𝑡𝑍

Các ScaleTransform3D (với tâm điểm mặc định) sau đó được tổng hợp là:

𝑥 ′′ = 𝑆𝑐𝑎𝑙𝑒𝑋 ∗ 𝑥 ′ = 𝑆𝑐𝑎𝑙𝑒𝑋 ∗ (𝑥 +𝑂𝑓𝑓𝑠𝑒𝑡𝑋)

𝑦 ′′ = 𝑆𝑐𝑎𝑙𝑒𝑌 ∗ 𝑦 ′ = 𝑆𝑐𝑎𝑙𝑒𝑌 ∗ (𝑦 + 𝑂𝑓𝑓𝑠𝑒𝑡𝑌)

𝑧′′ = 𝑆𝑐𝑎𝑙𝑒𝑍 ∗ 𝑧′ = 𝑆𝑐𝑎𝑙𝑒𝑍 ∗ (𝑧 + 𝑂𝑓𝑓𝑠𝑒𝑡𝑍)

Bây giờ hãy thử thứ tự khác. Các ScaleTransform3D thực hiện trước:

𝑥 ′ = 𝑆𝑐𝑎𝑙𝑒𝑋 ∗ 𝑥

𝑦 ′ = 𝑆𝑐𝑎𝑙𝑒𝑌 ∗ 𝑦

𝑧′ = 𝑆𝑐𝑎𝑙𝑒𝑍 ∗ 𝑧

Trang 45

Các TranslateTransform3D:

𝑥 ′′ = 𝑥 ′ + 𝑂𝑓𝑓𝑠𝑒𝑡𝑋 = 𝑆𝑐𝑎𝑙𝑒𝑋 ∗ 𝑥 + 𝑂𝑓𝑓𝑠𝑒𝑡𝑋

𝑦 ′′ = 𝑦 ′ + 𝑂𝑓𝑓𝑠𝑒𝑡𝑌 = 𝑆𝑐𝑎𝑙𝑒𝑌 ∗ 𝑦 + 𝑂𝑓𝑓𝑠𝑒𝑡𝑌

𝑧′′ = 𝑧′ + 𝑂𝑓𝑓𝑠𝑒𝑡𝑍 = 𝑆𝑐𝑎𝑙𝑒𝑍 ∗ 𝑧 +𝑂𝑓𝑓𝑠𝑒𝑡𝑍

Trong thực tế, các thuộc tính CenterX, CenterY, và CenterZ của ScaleTransform3D có

thể được hình dung như là một biến đổi kép nơi một biến đổi dịch chuyển được thực hiện trước và

sau đó là phép biến đổi kích thước. Đây là một biến đổi kích thước với tất cả các thuộc tính của nó

thiết lập để các giá trị tượng trưng:

<ScaleTransform3D ScaleX="SX" ScaleY="SY" ScaleZ="SZ"

CenterX="CX" CenterY="CY" CenterZ="CZ" />

Điều đó tương đương với:

<TranslateTransform3D OffsetX="-CX" OffsetY="-CY" OffsetZ="-CZ" />

<ScaleTransform3D ScaleX="SX" ScaleY="SY" ScaleZ="SZ" />

<TranslateTransform3D OffsetX="CX" OffsetY="CY" OffsetZ="CZ" />

Nó cũng tương đương với:


<TranslateTransform3D OffsetX="CX(1-SX)" OffsetY="CY(1-SY)" OffsetZ="CZ(1-SZ)" />

Hoặc:

<TranslateTransform3D OffsetX="CX/SZ-CX" OffsetY="CY/SY-CY" OffsetZ="CZ/SZ-CZ" />


Trong một số trường hợp, bạn có thể kết hợp một ScaleTransform3D và

TranslateTransform3D theo những cách làm giảm tổng số biến đổi.

2.3. Phép xoay (RotateTransform3D)

Loại biến đổi tiếp theo là xoay. Về khái niệm và cú pháp thì phép xoay phức tạp hơn phép dịch

chuyển và phép biến đổi kích thước. Kết hợp của phép quay tại một số mặt phẳng có thể rất phức

tạp vì thế nó sử dụng một công cụ toán học đặc biệt được gọi là quaternion. Tuy nhiên, bản

thân các quaternion này cũng rất phức tạp.

Phép xoay này bao gồm hai phương pháp cơ bản đó là xoay theo trục và góc hoặc xoay bằng

một phép toán có tên là Quaternion.

2.3.1. Trục và góc

Lớp RotateTransform3D định nghĩa bốn đặc tính. Giống như ScaleTransform3D,

RotateTransform3D cũng định nghĩa các thuộc tính CenterX, CenterY, và CenterZ với giá

Trang 46

trị mặc định bằng 0. Nó cũng chỉ ra một điểm trên mặt phẳng khi xoay. Nhưng phép xoay được

định nghĩa trong lớp trừu tượng Rotation3D như được hiển thị trong hệ thống sau đây:

Object

DispatcherObject (abstract)

DependencyObject



Rotation3D (abstract)

AxisAngleRotation3D (sealed)

QuaternionRotation3D (sealed)

Các khai báo cho một RotationTransform3D thì dài hơn các biến đổi khác:

<RotateTransform3D … >

<RotateTransform3D.Rotation>

<AxisAngleRotation3D … />

</RotateTransform3D.Rotation>

</RotateTransform3D>

Bạn có thể tránh yếu tố này nếu đối tượng sở hữu Rotation3D được xác định hoặc kiểm soát

bởi một Rotation3DAnimation.

Trong RotateTransform3D.Rotation là từ khóa mà bạn chỉ định một

AxisAngleRotation3D hoặc một QuaternionRotation3D. Như tên cho thấy, một con số

AxisAngleRotation3D quay quanh một trục được tính bằng độ.

AxisAngleRotation3D định nghĩa hai thuộc tính. Các thuộc tính Axis là của loại

Vector3D và có giá trị mặc định là (0, 1, 0), mà vector theo hướng trục Y dương. Xoay quanh

một trục song song với vector đó. Thuộc tính thứ hai là Angle, đó là góc quay.

Nếu bạn bỏ các thuộc tính CenterX, CenterY, và CenterZ được xác định bởi

RotateTransform3D mặc định của chúng là 0, mặc định giá trị của Axis (0, 1, 0) tạo ra con số

để xoay quanh trục Y. Bạn có thể xác định đường thẳng mà thực sự nằm từ CenterZ và

CenterX của đối tượng RotateTransform3D. Tất cả các điểm của vật thể (CenterX, y,

CenterZ) vẫn ở cùng một vị trí trong thời gian quay. Tương tự như vậy, nếu giá trị Axis là (1, 0,

0), tất cả các điểm của vật thể (x, CenterY, CenterZ) vẫn ở cùng một chỗ. Nếu giá trị Axis là

(0, 0, 1), tất cả các điểm của vật thể (CenterX, CenterY, z) không thay đổi.

Bạn cũng có thể chỉ định một giá trị Axis không song song với trục X, Y, hay Z, ví dụ, (1, 1,

0). Đó là một vector hướng về phía trên bên phải.

Trang 47

Xoay quanh trục bất kỳ có thể được thực hiện một trong hai cách: xoay theo chiều kim đồng

hồ và quay ngược chiều kim đồng hồ. Nếu bạn trỏ ngón tay cái của bàn tay phải của bạn theo

hướng của vector Axis, các đường cong của ngón tay khác chỉ hướng quay theo các giá trị góc

dương.

Ví dụ, giả sử giá trị Axis là (0, 0, 1), và các CenterX, CenterY, và CenterZ chưa được thay

đổi giá trị mặc định. Phép quay xảy ra xoay quanh trục Z. Angle dương gây ra các giá trị điểm

trên trục dương X sau đó di chuyển về hướng trục dương Y, và các điểm trên trục dương Y sẽ di

chuyển về hướng trục âm X... Đây là một vòng quay của 30 độ:

Hình 2.3.1-1: Vật thể được xoay với một góc 30 độ.

Nếu bạn muốn xảy ra kết quả quay theo hướng ngược lại, thì có hai cách hoặc sử dụng các âm

của Axis (0, 0, -1), hoặc sử dụng giá trị âm Angle. Đây phép quay xung quanh (0, 0, -1) của 30

độ, hoặc một phép quay xung quanh (0, 0, 1) của -30 độ:

Hình 2.3.1-2: Vật thể được xoay với một góc -30 độ.

Chương trình sau đây cho phép bạn thử nghiệm với trục quay:

AxisRotationExperimenter.xaml





WindowTitle="AxisAngleRotation3D Experimenter"

Title="AxisAngleRotation3D Experimenter">

<DockPanel>

<ScrollBar Name="xMod" DockPanel.Dock="Top" Orientation="Horizontal"

Minimum="-180" Maximum="180" LargeChange="10" Value="1"

ToolTip="X Model" />

<ScrollBar Name="yMod" DockPanel.Dock="Top" Orientation="Horizontal"


ToolTip="Y Model" />

<ScrollBar Name="zMod" DockPanel.Dock="Top" Orientation="Horizontal"


ToolTip="Z Model" />

<ScrollBar Name="zCam" DockPanel.Dock="Bottom" Orientation="Horizontal"


ToolTip="Z Camera" />

<ScrollBar Name="yCam" DockPanel.Dock="Bottom" Orientation="Horizontal"


ToolTip="Y Camera" />

<ScrollBar Name="xCam" DockPanel.Dock="Bottom" Orientation="Horizontal"


ToolTip="X Camera" />

<Viewport3D>

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D>




<MeshGeometry3D

Positions="0 0 0, 2 0 0, 2 1 0,

0 0 -3, 2 0 -3, 2 1 -3,

2 1 -3, 0 0 -3, 2 1 0, 0 0 0,

2 1 0, 2 0 0, 2 1 -3, 2 0 -3,

2 0 0, 0 0 0, 2 0 -3, 0 0 -3"

TriangleIndices=" 0 1 2,

3 5 4,

6 7 8, 7 9 8,

10 11 12, 11 13 12,

14 15 16, 15 17 16" />






<Transform3DGroup>

<RotateTransform3D>


<AxisAngleRotation3D Axis="1 0 0"

Trang 49

Angle="{Binding ElementName=xMod,

Path=Value}" />



<RotateTransform3D>


<AxisAngleRotation3D Axis="0 1 0" Angle="{Binding ElementName=yMod,

Path=Value}" />



<RotateTransform3D>


<AxisAngleRotation3D Axis="0 0 1" Angle="{Binding ElementName=zMod,

Path=Value}" />



</Transform3DGroup>


</GeometryModel3D>



<DirectionalLight Color="#C0C0C0" Direction="2 -3 -1">

<DirectionalLight.Transform>

<Transform3DGroup>



</Transform3DGroup>

</DirectionalLight.Transform>

</DirectionalLight>

<Model3DGroup.Transform>

<Transform3DGroup>



</Transform3DGroup>

</Model3DGroup.Transform>

</Model3DGroup>



<Transform3DGroup>



</Transform3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>



UpDirection="0 1 0"

FieldOfView="45">


<Transform3DGroup>

<RotateTransform3D>

Trang 50


<AxisAngleRotation3D Axis="1 0 0" Angle="{Binding ElementName=xCam,

Path=Value}" />



<RotateTransform3D>


<AxisAngleRotation3D Axis="0 1 0" Angle="{Binding ElementName=yCam,

Path=Value}" />



<RotateTransform3D>


<AxisAngleRotation3D Axis="0 0 1" Angle="{Binding ElementName=zCam,

Path=Value}" />



</Transform3DGroup>


</PerspectiveCamera>


</Viewport3D>

</DockPanel>

</Page>

Ba thanh trượt ở đầu trang được liên kết với một thuộc tính Angle của một nguyên tố

AxisAngleRotation3D khác nhau. Ba yếu tố AxisAngleRotation3D có thuộc tính Axis

thiết lập là (1, 0, 0), (0, 1, 0), và (0, 0, 1), do đó, ba thanh cuộn xoay quanh trục X, Y, và Z tương

ứng. Di chuyển thanh cuộn bên phải làm tăng Angle từ 0 đến180 độ, di chuyển mỗi thanh cuộn

bên trái làm cho các thuộc tính Angle giảm từ 0 đến -180 độ.

Bất kể quay như thế nào, góc trái phía trước của vật thể này vẫn còn giữ nguyên tại gốc. Bạn

có thể thay đổi ba yếu tố RotateTransform3D áp dụng cho các GeometryModel3D như sau:

<RotateTransform3D CenterX="1" CenterY="0.5" CenterZ="-1.5">

Bây giờ tâm của vật thể này vẫn còn giữ nguyên. Thiết lập một thuộc tính CenterX là không

cần thiết khi quay quanh trục X, bởi vì khi xoay quanh truc X thì tất cả các giá trị X vẫn luôn luôn

giữ nguyên. Quy tắc tương tự áp dụng cho các thuộc tính CenterY và CenterZ.

Ba thanh cuộn ở dưới cùng của trang áp dụng cho máy ảnh. Như bạn thấy, hiệu quả của phép

xoay được đảo ngược bởi vì máy ảnh này đang được quay chứ không phải là hình vẽ được quay.

Camera quay xung quanh điểm (CenterX, CenterY, CenterZ).

Trang 51

Trong ba phép quay áp dụng cho máy ảnh, thay đổi các yếu tố RotateTransform3D như

sau:

<RotateTransform3D CenterX="1" CenterZ="-10">

Bạn có hiệu quả có thể xoay camera xung quanh vật thể và xem nó từ phía sau nhưng ở

khoảng cách xa hơn.

Khi bạn tăng thanh cuộn đầu tiên, các vector Direction quay xung quanh một đường song

song với trục X để nó chỉ theo hướng Z âm. Khi bạn tăng thanh cuộn thứ ba, vector Direction

quay xung quanh một đường song song với trục Z để nó có nhiều điểm hơn theo hướng X dương.

Các thuộc tính CenterX, CenterY, và CenterZ không có hiệu lực trên một

RotateTransform3D áp dụng cho một DirectionalLight.

Khi thực hiên xoay Model3DGroup hoặc ModelVisual3D thì ánh sáng sẽ quay theo với nó,

và bề mặt chiếu sáng trên vật thể vẫn không đổi.

2.3.2. Toán Quaternion

Xoay là một trong những nhiệm vụ phổ biến nhất của lập trình đồ họa 3D, nhưng cũng là

nhiệm vụ đầy toán học nhất. May mắn là đã có sự tiện lợi của lớp RotateTransform3D và

AxisAngleRotation3D. Khi sử dụng kết hợp, hai lớp này cho phép bạn xác định một vòng

quay bằng cách xác định các trục quay, một góc quay xung quanh trục, và một tâm quay tùy chọn.

Thông thường khi bạn xác định một hình ảnh động liên quan đến AxisAngleRotation3D,

bạn chỉ quan tâm đến thay đổi Angle trong khi vẫn giữ Axis không đổi.

Quaternion là một cách khác để định nghĩa phép quay trong không gian 3D với lợi thế lớn là

có thể thống nhất vận tốc góc, đây là một hiệu ứng mà có thể không được bắt chước một cách dễ

dàng với một trục quay.

Các tiện lợi của số phức

Các động lực cho quaternion xuất phát từ nhiệm vụ tương đối đơn giản quay trong hai chiều.

Hãy bắt đầu với các tiêu chuẩn Cartesian phối hợp hệ thống:

Trang 52

Hình 2.3.2-1: Các điểm x, y trên hệ trục tọa độ Oxy.

Bất kỳ điểm nào trong mặt phẳng này có thể được biểu diễn như các cặp số (x, y). Nếu bạn vẽ

một đường từ nguồn gốc đến tại vị trí có tọa độ x, y, thì ta sẽ được đường thẳng có chiều dài r và

một góc θ (theta) với trục X dương:

Hình 2.3.2-2: Góc và đường thẳng của điểm x,y trên hệ trục Oxy.

Đây là một đại diện khác của điểm trong hệ tọa độ cực. Bạn có thể tính toán r và θ như sau:

r = 𝒙𝟐 + 𝒚𝟐

tan(θ) = 𝒚

𝒙

Ngoài ra, bạn có thể thể hiện x và y trong điều khoản của r và θ. Đơn giản chỉ cần chiếu 2

đường thẳng lên trên các trục X và Y:

Trang 53

Hình 2.3.2-3: Cách khác để xác định 2 điểm x,y.

Các điểm (x, y) cũng là điểm (r.cos (θ), r.sin (θ)).

Số phức bắt nguồn từ phương trình bậc 2: x2 + 1 = 0.

Số phức c là tổng của số thực a cộng với số thực b nhân với i: c = a + bi, và được chia thành 2

phần, một phần thực(real) và một phần ảo(imaginaries). Nếu bạn xác định trục ngang của mặt

phẳng là số thực và trục đứng của mặt phẳng là số ảo thì ta có được số phức như hình sau:

Hình 2.3.2-4: Số phức trên hệ trục tọa độ số phức.

Tương tự ta sẽ tính được số phức này dựa vào góc θ như sau :

Trang 54

Hình 2.3.2-5: Số phức với góc θ.

Bạn có thể cộng và trừ số phức bằng cách đơn giản là cộng và trừ hai phần tương ứng phần

thực và phần ảo với nhau.

Mở rộng số phức ra không gian ba chiều với ba vector đơn vị i, j, k với i = (1, 0 , 0), j = (0, 1,

0), k = (0, 0, 1). Và phép nhân vector như sau:

i x j = k = - j x i

j x k = i = -k x j

k x i = j = - i x k

Toán Qua tec non có qui tắc nhân tương tự, tuy nhiên, trong phép nhân quaternion thì một

vector nhân với chính nó bằng -1. Và tổng của một qua tec non là tổng của một số thực cộng với

ba con số ảo:

q = a + bi + cj + dk

Từ đó ta xác định được cấu trúc của một quaternion. Trong namespace

System.Windows.Media.Media3D thì các thuộc tính có tên là w, x, y, z và q được xác định

như sau:

q = w + xi + yj + zk

Bạn có thể khai báo một quaternion như sau:

Quaternion q = new Quaternion(x, y, z, w);

Trang 55

Quaternion là phép biến đổi phức tạp nhất, để tính toán quaternion của một vòng quay vector

trục và các góc quay, vectơ trục phải là vector bình thường. Bạn có thể tính toán quaternion thành

phần từ một đơn vị trục quay và góc quay. Giả sử trục quay cho một vòng quay 3D được ký hiệu

là một đơn vị Vector3D đối tượng (ax, ay, az) và góc quay là θ. Bạn có thể tìm thấy những

quaternion gồm có 4 giá trị (x, y, z, w) bằng cách sử dụng công thức sau:

x = ax.sin(θ/2)

y = ay.sin(θ/2)

z = az.sin(θ/2)

w = cos(θ/2)

Cấu trúc toán qua tec non bao gồm một constructor tạo ra một toán quaternion quay từ một

trục quay và một góc:

Quaternion qRotate = new Quaternion(vectAxis, angle);

Lớp RotateTransform3D định nghĩa một thuộc tính có tên Rotation mà được thiết lập

cho một đối tượng của loại Rotation3D, và là một lớp trừu tượng cho AxisAngleRotation3D

và QuaternionRotation3D. QuaternionRotation3D có một thuộc tính duy nhất có tên

Quaternion của loại Quaternion. Trong XAML, nó được mô tả như sau:

<RotateTransform3D>


<QuaternionRotation3D Quaternion="0 0 0.5 0.866" />



Đó là một vòng quay 60 độ quanh trục Z , số 0.5 là sin 30 độ, và 0.866 là cosin của 30 độ.

Trong XAML, w đứng cuối cùng. Bạn có thể tùy chọn chỉ định tâm cho việc luân chuyển trong

thẻ RotateTransform3D.

Chương trình sau làm cho hình ảnh động bằng Quaternion dựa vào đối tượng

RotateTranform3D:

<Window x:Class="Transform1.MainWindow"



Title="MainWindow" mc:Ignorable="d"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

Height="350" Width="524"

WindowState="Maximized" >

Trang 56

<Viewport3D>

<Viewport3D.Camera>

<PerspectiveCamera Position="-2 1 4" LookDirection="2 -1 -4"

UpDirection="0 1 0" FieldOfView="90"/>


<ModelVisual3D>


<Model3DGroup>

<DirectionalLight Color="White" Direction="2 -1 0"/>

<GeometryModel3D>


<MeshGeometry3D Positions="0 1 0, 0 0 0, 1 1 0, 1 0 0,

0 1 -1, 0 0 -1, 0 1 0, 0 0 0,

1 1 -1, 0 1 -1, 1 1 0, 0 1 0,

1 1 0, 1 0 0, 1 1 -1, 1 0 -1,

1 0 0, 0 0 0, 1 0 -1, 0 0 -1,

1 1 -1, 1 0 -1, 0 1 -1, 0 0 -1"


4 5 6, 5 7 6,

8 9 10, 9 11 10,

12 13 14, 13 15 14,

16 17 18, 17 19 18,

20 21 22, 21 23 22" />



<DiffuseMaterial Brush="Cyan"/>



<Transform3DGroup>

<RotateTransform3D>


<QuaternionRotation3D

x:Name="qQuaternion"/>



</Transform3DGroup>


</GeometryModel3D>

</Model3DGroup>


</ModelVisual3D>

<Viewport3D.Triggers>

<EventTrigger RoutedEvent="Viewport3D.Loaded">

<BeginStoryboard>

<Storyboard>

<QuaternionAnimation

Storyboard.TargetName="qQuaternion"

Storyboard.TargetProperty="Quaternion" From="0,0,1,0" To="0.3, 0.3, 1, 0"

Duration="0:0:7" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

Trang 57

</Viewport3D.Triggers>

</Viewport3D>

</Window>

Hình ảnh động dựa vào thuộc tính Rotation của RotateTransform3D.

2.4. Phép biến đổi bằng ma trận (MatrixTransform3)

Matrix quan đại diện đóng một vai trò quan trọng trong chuyển đổi và hoạt động trên các đối

tượng đồ họa, ma trận là một mảng đa chiều. Tổng 3D biến đổi khá phức tạp, bạn có thể xây dựng

một biến đổi với sự kết hợp của các biến đổi cơ bản, bao gồm cả di chuyển vật thể, thay đổi kích

thướt và xoay vật thể. Những phần sau đây mô tả những biến đổi cơ bản. Một khi bạn hiểu làm

thế nào để sử dụng các chuyển đổi 3D cơ bản, bạn luôn có thể kết hợp chúng để tạo ra 3D biến đổi

tổng quát hơn.

2.4.1. Điểm và vector 3D

WPF xác định hai điểm cấu trúc 3D, Point3D và Point4D.Point3D xác định tọa độ X, Y, và Z

của một điểm trong không gian 3D. Point4D xác định tọa độ X, Y, Z, và W của một điểm trong

một 3D đồng nhất.Cơ cấu Vector3D định nghĩa các thành phần X, Yvà Z trong không gian 3D.

Một vectơ trong không gian 3D được đại diện bởi một dãy hàng với ba yếu tố X, Y, và Z. Ví dụ,

bạn có thể tạo một đối tượng Vector 3D bằng cách sử dụng đoạn mã sau đây:

Vector3D v = new Vector3D (1, 2, 3);

Lưu ý rằng một đối tượng Vector3D và một đối tượng Point3D trong WPF là hai đối tượng

khác nhau các đối tượng.

Cách khai báo sau đây là không hợp lệ:

Vector3D v = new Point3D (1, 2, 3);

Tuy nhiên, bạn có thể xác định một đối tượng Vector3D sử dụng Point3D, hoặc ngược lại.

Cách khai báo sau đây là hợp lệ:

Vector3D v1 = new Point3D (2, 3, 4) - new Point3D (1, 2, 3);

Vector3D v2 = (Vector3D) new Point3D (1, 2, 3);

Point3D pt = (Point3D) new Vector3D (1, 2, 3);

Có thể chuyển một đối tượng Point3D sang một đối tượng Point4D, như sau:

Point4D pt4 = (Point4D) new Point3D (10, 15, 20);

Trang 58

Hoặc:

Point4D pt4 = (Point4D) (Point3D) new Vector3D (10, 15, 20);

Có đối tượng Vector3D có thể tạo ra một đối tượng Point3D, mà sau đó sẽ tạo được một đối

tượng Point4D. Trong quá trình đúc ở trên, các đối tượng Point4D có giá trị: pt4 = (10, 15, 20, 1).

Nó chỉ đơn giản là thêm các thành phần W có giá trị là 1.

2.4.2. Cấu trúc của ma trận 3D

WPF định nghĩa một cấu trúc ma trận 3D, Matrix3D. Đó là một ma trận 4x4 trong môi trường

tọa độ đồng nhất 3D và có cú pháp vector sau đây:

M11 M12 M13 M14

M21 M22 M23 M24

M31 M32 M33 M34

OffsetX OffsetY OffsetZ M44

Cột cuối cùng, M14, M24, M34 đều có giá trị bằng 0 ,M44 có giá trị bằng 1.

Các giá trị M11, M22, M33 tương ứng với các giá trị ScaleX, ScaleY, ScaleZ của đối tượng

ScaleTransform3D. Các giá trị OffsetX, OffsetY, OffsetZ tương ứng với các giá trị của đối tượng

TranslateTranfrom3D.

Tọa độ của một điểm bao gồm 4 thành phần (x, y, z, w) thay vì chỉ có (x, y, z). Nếu w ≠ 0, ta

có thể chuẩn hóa bằng cách chia tọa độ của điểm này cho w để có một tọa độ mới tương đương

(x/w, y/w, z/w, 1), và các con số x/w, y/w, z/w được gọi là tọa độ điểm trong môi trường tọa độ

đồng nhất. Nếu w = 0, điểm này được xem như nằm ở ∞. Tọa độ điểm bao gồm 4 thành phần

cũng đòi hỏi ma trận biến đổi cũng phải có kích thức là 4x4.

Các yếu tố của OffsetX, OffsetY, và OffsetZ nhận và thiết lập giá trị của biến đổi X, Y, và Z.

Các thuộc tính nào khác liên kết với Matrix3D cấu trúc cũng hữu ích trong việc thực hiện các hoạt

động ma trận:

• Determinant - Lấy yếu tố quyết định trong Matrix3D.

• HasInverse - Lấy một giá trị cho biết có phải Matrix3D là ma trận nghịch đảo.

• Identity - Thay đổi cấu trúc Matrix3D.

Trang 59

• IsAffine – Lấy một giá trị cho biết có phải là cấu trúc Matrix3D afin.

• IsIdentity - Xác định xem cơ cấu Matrix3D có thay đổi.

Point3D xác định cấu trúc một đối tượng Point3D sang một đối tượng Point4D, các thuộc

tính X, Y,và Z sẽ chỉ sao chép trực tiếp vào đối tượng Point4D, và các thuộc tính W được thiết lập

là 1.Cấu trúc Matrix3D và lớp Tranform3D xác định phương pháp để biến đổi các đối tượng

Point4D và phép ma trận như sau:

M11 M12 M13 M14

M21 M22 M23 M24

|x y z w| X = |x’ y’ z’ w’| M31 M32 M33 M34

OffsetX OffsetY OffsetZ M44

Với:

x′ = M11·x + M21·y + M31·z + OffsetX·w

y′ = M12·x + M22·y + M32·z + OffsetY·w

z′ = M13·x + M23·y + M33·z + OffsetZ·w

w′ = M14·x + M24·y + M34·z + M44·w

Cấu trúc Matrix3D định nghĩa một constructor 16 đối số cho phép bạn chỉ định tất cả các yếu

tố của ma trận bắt đầu với dòng đầu tiên. Cấu trúc Matrix3D cũng định nghĩa nhiều phương

pháp, cho phép bạn áp dụng các loại biến đổi vào các ma trận, và để biến đổi điểm và vectơ bằng

cách sử dụng ma trận.

Trong XAML, lớp Matrix3DConverter được sử dụng phía sau để bạn có thể thiết lập thuộc

tính Matrix của một nguyên tố MatrixTransform3D sử dụng một chuỗi bao gồm nhận dạng

"identity" hoặc thiết lập tất cả 16 giá trị. Ví dụ, biến đổi sau bằng 2 theo hướng X và 3 theo hướng

Z:

<MatrixTransform3D Matrix="2 0 0 0, 0 1 0 0, 0 0 3 0, 0 0 0 1" />

Lớp Transform3D định nghĩa một thuộc tính Value của loại Matrix3D cung cấp các ma

trận tương ứng với biến đổi của đối tượng.

Trang 60

2.4.3. Biến đổi ma trận

Cơ cấu Matrix3D trong WPF cũng cung cấp các phương pháp để xoay, biến đổi, và dịch

chuyển các ma trận. Dưới đây là một số phương pháp thường xuyên nhất được sử dụng cho

Matrix3D hoạt động:

Scale - Gắn thêm biến đổi Vector3D cho cấu trúc Matrix3D.

ScaleAt – Biến đổi các Matrix3D do Vector3D quy định về các Point3D.

Translate - Gắn thêm một bản dịch của các hiệu số quy định cho hiện tại Matrix3D cấu

trúc.

Rotate - Gắn thêm một biến đổi xoay cho các Matrix3D hiện hành.

RotateAt - Xoay các Matrix3D theo Point3D quy định.

Invert - Đảo ngược cấu trúc Matrix3D.

Multiply - Nhân với các quy định cụ thể các ma trận.

Transform – Biến đổi các Point3D quy định, mảng của các đối tượng Point3D, Point4D,

mảng của đối tượng Point4D, Vector3D, hay mảng các đối tượng Vector3D do Matrix3D.

Sử dụng lớp MatrixTransform3D để tạo ra biến đổi không sẵn có từ các lớp

RotateTransform3D, TranslateTransform3D, và ScaleTransform3D.

Ta có thể nhóm nhiều biến đổi lại trong một Transform3DGroup, nhưng đó là thứ tự của các

biến đổi làm cho một sự khác biệt trong kết quả. Tập hợp các biến đổi tương đương với phép nhân

ma trận, nhưng thực tế không phải là phép nhân ma trận giao hoán.

Hãy xem một ví dụ của phép nhân ma trận. Giả sử bạn có một biến đổi vật thể mà biến đổi

theo hướng X bằng 1.5, theo hướng Y bằng 2, và theo hướng Z bằng 2 .5. Một biến đổi chuyển

dịch dọc theo trục X bằng 10, trục Y bằng 20, và trục Z bằng 30. Đây là cách bạn có thể đại diện

cho một biến đổi kết hợp trong XAML với biến đổi vật thể đầu tiên:

<Transform3DGroup>

<ScaleTransform3D ScaleX="1.5" ScaleY="2" ScaleZ="2.5" />

<TranslateTransform3D OffsetX="10" OffsetY="20" OffsetZ="30" />

</Transform3DGroup>

Trang 61

Các kết hợp chuyển đổi áp dụng cho các điểm (x, y, z) như sau:

1.5 0 0 0 1 0 0 0

0 2 0 0 0 1 0 0

|x y z 1| x 0 0 2.5 0 x 0 0 1 0 = |x’ y’ z’ 1|

0 0 0 1 10 20 30 1

Ma trận không nhân giao hoán nhưng nó là kết hợp. Bạn có thể bắt đầu bằng cách nhân điểm

của ma trận đầu tiên và sau đó nhân kết quả của ma trận thứ hai, hoặc bạn có thể bắt đầu bằng

cách nhân hai ma trận với nhau. Đây là những gì bạn nhận được trong trường hợp đó:

1.5 0 0 0

0 2 0 0

|x y z 1| x 0 0 2.5 0 = |x’ y’ z’ 1|

10 20 30 1

Nếu ma trận được theo thứ tự ngược lại ( dịch chuyển trước và sau đó là biến đổi), kết quả sẽ

là:

1.5 0 0 0

0 2 0 0

|x y z 1| x 0 0 2.5 0 = |x’ y’ z’ 1|

15 40 75 1

Khi có dịch chuyển đầu tiên, cơ bản các yếu tố dịch chuyển cuối cùng nhận được nhân với yếu

tố biến đổi.

Nếu bạn định nghĩa một Transform3DGroup có chứa nhiều biến đổi, bạn có thể muốn giữ

các biến đổi riêng biệt cho hoạt động hoặc dữ liệu nhằm mục đích ràng buộc. Nhưng cũng có thể

bạn tạo các biến đổi trong một Transform3DGroup trong một cách mà có ý nghĩa với bạn. Bạn

có thể nhận được một số hiệu quả cải thiện bằng cách thay thế Transform3DGroup với một

MatrixTransform3D duy nhất.

Bạn cần phải thực hiện các phép nhân ma trận để xác định ma trận cho MatrixTrans form3D.

Các lớp trừu tượng Transform3D định nghĩa một thuộc tính Value của loại Matrix3D, và thuộc

Trang 62

tính này được thừa kế tất cả các dẫn xuất của Transform3D, bao gồm Transform3DGroup. Bạn có

thể truy cập vào thuộc tính này trực tiếp trong XAML bằng cách đặt tên cho Transform3DGroup:

<Transform3DGroup x:Name="xform">

Sau đó, ở một nơi khác trong file XAML, bạn có thể tham chiếu các thuộc tính Value của đối

tượng với một dữ liệu ràng buộc sau:

<Label Name="lbl" Content="{Binding ElementName=xform, Path=Value}" />

Thuộc tính Content của Label là loại đối tượng, và nếu đối tượng đặt để Content không xuất

phát từ UIElement, Label chỉ sử dụng phương pháp ToString để có được một chuỗi biểu diễn của

đối tượng. Các phương pháp ToString của Transform3D chuyển đổi Value thành một chuỗi để

Label hiển thị 16 số của ma trận kết hợp:

1.5,0,0,0,0,2,0,0,0,0,2.5,0,10,20,30,1

Bạn không thể chọn văn bản này và sao chép nó, mà bạn có thể định nghĩa một ràng buộc từ

Label cho một Text Box:

<TextBox Text="{Binding ElementName=lbl, Path=Content}" />

Bạn có thể không ràng buộc TextBox trực tiếp cho Transform3DGroup vì thuộc tính text là

một chuỗi thực sự chứ không phải là một đối tượng với một phương thức ToString. Nhưng với sự

trung gian Label bạn có thể chọn văn bản trong TextBox và nhấn Ctrl + C để sao chép. Sau đó bạn

có thể thay thế toàn bộ Transform3DGroup với một MatrixTransform3D đơn và dán văn bản vào

sự đánh dấu:

<MatrixTransform3D Matrix="1.5,0,0,0,0,2,0,0,0,0,2.5,0,10,20,30,1" />

Trong code, bạn cũng có thể sử dụng một Transform3DGroup nếu bạn muốn giữ các từng biến

đổi riêng biệt cho dữ liệu biến đổi hoặc các mục đích ràng buộc. Nếu bạn chỉ muốn tạo ra một

biến đổi kết hợp, bạn có thể sử dụng các phương pháp trong cơ cấu Matrix3D:

Matrix3D matx = new Matrix3D();

matx.Scale(new Vector3D(1.5, 2, 2.5));

matx.Translate(new Vector3D(10, 20, 30));

Sau khi bạn đã hoàn tất một biến đổi trong đối tượng Matrix3D bạn có thể đặt các đối tượng

vào thuộc tính Matrix của MatrixTransform3D.

Trang 63

Đối với mỗi phương pháp như biến đổi và dịch chuyển, cấu trúc Matrix3D cũng định nghĩa

các phương pháp đặt tên ScalePrepend và TranslatePrepend. Những phương pháp này thực hiện

phép nhân để xảy ra như là nếu chuyển đổi quy định là bên trái và những biến đổ i hiện tại là ở bên

phải. Ví dụ, mã sau là tương đương với đoạn code trước:

Matrix3D matx = new Matrix3D();

matx.Translate(new Vector3D(10, 20, 30));

matx.ScalePrepend(new Vector3D(1.5, 2, 2.5));

Trang 64

Chƣơng 3: TÔ MÀU CHO HÌNH 3D

Nói chung thế giới của đồ họa hai chiều và đồ họa ba chiều được lưu giữ cách xa nhau. Mỗi

thế giới có mô hình riêng của mình, các lớp riêng của mình để xác định các đối tượng có thể nhìn

thấy, và biến đổi riêng của mình.

Trong chương này chúng ta sẽ tìm hiểu cách sử dụng cọ vẽ gradient và tile, trong đó bao gồm

các hình ảnh bitmap, bản vẽ, và thậm chí cả hình ảnh thu được từ các đối tượng người sử dụng

giao diện như điều khiển. Thậm chí có thể bao gồm một con số 3D bằng bút vẽ bắt nguồn từ một

hình ảnh ba chiều.

1. Sử dụng cọ vẽ Gradient

Cú pháp để khai báo thuộc tính Brush của đối tượng DiffuseMaterial. Khai báo với một

màu sắc đặc:


Cú pháp này là một cách khai báo tắt cho:

Brush="{x:Static Brushes.Cyan}"

Bruhes là một lớp trong namespace System.Windows.Media có chứa một tập hợp các

thuộc tính tĩnh chỉ đọc các loại Brush. (Các thuộc tính này thực sự trả về đối tượng của loại

SolidColorBrush), một trong những thuộc tính của loại SolidColorBrush này Cyan.

Hoặc có thể sử dụng cú pháp sau sử dụng màu RGB:

<DiffuseMaterial Brush="#80FF00C0" />

Đây cũng là cú pháp tắt. Một khai báo rõ ràng hơn cho một yếu tố của loại

SolidColorBrush:

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<SolidColorBrush Color="#80FF00C0"

</DiffuseMaterial.Brush>

</DiffuseMaterial>

Và nếu bạn thực sự muốn có được khai báo rõ ràng hơn về nó, đó cũng là một cách khai báo

tắt cho các cú pháp đó bao gồm một nguyên tố Color:

<DiffuseMaterial>


<SolidColorBrush>

Trang 65

<SolidColorBrush.Color>

<Color A="128" R="255" G="0" B="192" />

</SolidColorBrush.Color>

</SolidColorBrush>


</DiffuseMaterial>

Cú pháp như vậy có thể khai báo tắt được cho việc thực hiện bởi các lớp BrushConverter

và lớp ColorConverter khi khai báo trong XAML thuộc tính của loại Brush và Color.

Đó chỉ là vài ví dụ để chuẩn bị sẵn sàng khi chuyển từ việc sử dụng đơn giản các

SolidColorBrush vào lớp brush phức tạp hơn. Các thuộc tính Brush của

DiffuseMaterial là loại Brush, và các lớp Brush trừu tượng có thể được tìm thấy trong các

hệ thống cấp bậc lớp sau đây:

Object

DispatcherObject (abstract)

DependencyObject



Brush (abstract)

SolidColorBrush (sealed)

GradientBrush (abstract)

LinearGradientBrush (sealed)

RadialGradientBrush (sealed)

TileBrush (abstract)

DrawingBrush (sealed)

ImageBrush (sealed)

VisualBrush (sealed)

Không có cọ vẽ đặc biệt cho đồ họa 3D. Thay vào đó, bạn sử dụng các cọ vẽ hai chiều để tô

cho các bề mặt của ba chiều.

Trong lập trình thông thường WPF hai chiều, bạn có thể xác định một

LinearGradientBrush để trang trí nền của một Page, ví dụ:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Page.Background>

<LinearGradientBrush StartPoint="0 0" EndPoint="1 1">

<GradientStop Offset="0" Color="Red" />

<GradientStop Offset="0.5" Color="Yellow" />

<GradientStop Offset="1" Color="Blue" />

</LinearGradientBrush>

</Page.Background>

</Page>

Các thuộc tính StartPoint và EndPoint chỉ ra những điểm tương đối, nơi gradient bắt

đầu và kết thúc, một StartPoint của (0, 0) cho thấy góc trên bên trái và một EndPoint của (1,

1) cho thấy góc dưới bên phải. (Những giá trị này là mặc định) Các giá trị Offset của các yếu tố

Trang 66

GradientStop chỉ ra một khoảng cách tương đối giữa hai điểm. Kết quả các gradient bắt đầu

với màu đỏ ở góc trên bên trái, đi vào màu vàng ở trung tâm, và kết thúc với màu xanh ở góc dưới

bên phải. Nhưng cọ vẽ bao gồm toàn bộ Page, do đó, điểm vẽ của (1, 1) tương ứng với góc dưới

bên phải của phần tử Page.

Thay nền Page với một RadialGradientBrush tương tự ta có:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Page.Background>

<RadialGradientBrush>

<GradientStop Offset="0" Color="Red" />

<GradientStop Offset="0.5" Color="Yellow" />

<GradientStop Offset="1" Color="Blue" />

</RadialGradientBrush>

</Page.Background>

</Page>

Cho dù bạn đang làm việc với các cọ vẽ trong đồ họa hai chiều hay đồ họa ba chiều, bạn có thể

tham khảo tọa độ trong brush bằng cách sử dụng phối hợp hệ thống sau:

Hình 1-1: Tọa độ dùng xác định cọ vẽ.

Theo quy ước của đồ họa hai chiều đồ trong WPF, tăng giá trị của Y đi xuống. Đây là đối

ngược của chế độ xem theo trục Y trong 3D, một sự khác biệt đó là có khả năng gây nhầm lẫn lúc

đầu tiên.

Để tô một vật thể ba chiều bằng cọ vẽ hai chiều, bạn phải thiết lập một tương ứng giữa các

đỉnh ba chiều và mối quan hệ của cọ vẽ trong tọa độ hai chiều. Bạn làm điều này bằng cách sử

dụng một thuộc tính của MeshGeometry3D có tên là TextureCoordinates, thuộc tính này là

của loại PointCollection nó không phải là một bộ sưu tập Point3Dcollection.

Trang 67

Như bạn đã biết, mỗi tam giác trong hình được xác định bởi ba chỉ số liên tiếp trong bộ sưu tập

TriangleIndices của đối tượng MeshGeometry3D. Những chỉ số này được khai báo để xác

định vị trí tọa độ 3D của các đỉnh của tam giác đó. Những chỉ số này cũng được khai báo trong bộ

sưu tập TextureCoordinates (nếu có) để có được cọ vẽ ba chiều trong tọa độ hai chiều. Nếu

bạn có đỉnh trùng lặp trong bộ sưu tập Position, bạn có thể kết hợp chúng với các điểm khác

nhau trong bộ sưu tập TextureCoordinates.

Giả sử bạn đã xác định một LinearGradientBrush như thế này:

<LinearGradientBrush>

<GradientStop Offset="0" Color="Yellow" />

<GradientStop Offset="1" Color="Brown" />


Mặc định StartPoint và EndPoint là các giá trị (0, 0) và (1, 1), gradient bắt đầu ở góc trên

bên trái với màu vàng và kết thúc ở góc dưới bên phải với màu nâu. Bạn có thể sử dụng bất kỳ tập

hợp tam giác của bàn cọ vẽ để tô màu sắc cho một tam giác trong lưới 3D. Giả sử bạn muốn lập

bản đồ sau đây:

Hình 1-2: Chuyển đổi cọ vẽ tam giác 2 chiều sang tam giác 3 chiều.

Tam giác ba chiều hiển thị trên bên phải là tham chiếu từ một tập hợp tam giác của cọ vẽ hai

chiều được hiển thị bên trái. Các tập con được lựa chọn của cọ vẽ được kéo dài để phù hợp với

toàn bộ tam giác 3D. Bạn xác định các MeshGeometry3D như sau:

<MeshGeometry3D TriangleIndices="0 1 2"

Positions="0 1 0, -1 0 0, 1 0 0"

Trang 68

TextureCoordinates="0.25 0, 1 1, 0 0.5" />

Brush là một hình chữ nhật hai chiều với bốn đỉnh, và lưới bao gồm các hình tam giác với ba

đỉnh. Nó chỉ đơn giản là không thể xác định giá trị để TextureCoordinates của một brush

toàn bộ hình chữ nhật phù hợp trong một tam giác duy nhất.

Với TextureCoordinates là thuộc tính được xác định bởi MeshGeometry3D với ba thuộc

tính nữa là Position, TriangleIndices, và Normals.

MeshGeometry3D cũng thừa hưởng một thuộc tính Bounds từ Geometry3D, thuộc tính này

là của loại Rect3D và cho biết tổng kích thước của con số trước khi chuyển đổi được áp dụng.

Các thuộc tính Bounds đôi khi hữu ích cho định vị một con số. Ví dụ, bạn có thể muốn vị trí một

con số để dưới cùng của nó nằm trên mặt phẳng XZ. Thiết lập một thuộc tính OffsetY của

TranslateTransform3D đến giá trị âm của các thuộc tính Bounds Y.

Hãy ghi nhớ rằng mỗi GeometryModel3D bao gồm một MeshGeometry3D và một đối tượng

của loại Material, như vậy bằng cách cần thiết bạn sử dụng cọ vẽ giống nhau cho tất cả các hình

tam giác đó bao gồm các con số. Nếu bạn muốn sử dụng cọ vẽ khác nhau cho các tam giác khác

nhau, bạn có thể chia hình thành nhiều đối tượng GeometryModel3D. Trong một số trường hợp,

bạn có thể bao gồm một MeshGeometry3D duy nhất với hai vật liệu bằng cách xác định chỉ số

tam giác theo cách như vậy cho phép bạn sử dụng cả Material và BackMaterial.

Dưới đây là bốn mặt kim tự tháp, để giữ cho nó đơn giản, kim tự tháp không có đáy.

PyramidWithGradientBrush.xaml 



WindowTitle="Pyramid with LinearGradientBrush"

Title="Pyramid with LinearGradientBrush">

<DockPanel>

<ScrollBar Name="horz" DockPanel.Dock="Bottom" Orientation="Horizontal"

Minimum="-180" Maximum="180"

LargeChange="10" SmallChange="1" />

<Viewport3D>

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D>


Trang 69



<MeshGeometry3D

Positions="0 1 0, -0.5 0 0.5, 0.5 0 0.5,

0 1 0, 0.5 0 -0.5, -0.5 0 -0.5,

0 1 0, -0.5 0 -0.5, -0.5 0 0.5,

0 1 0, 0.5 0 0.5, 0.5 0 -0.5"

TriangleIndices="0 1 2, 3 4 5,

6 7 8, 9 10 11"

TextureCoordinates="1 0, 0 1, 1 1,

1 0, 0 1, 0 0,

1 0, 0 0, 0 1,

1 0, 1 1, 0 1" />



<DiffuseMaterial>


<LinearGradientBrush StartPoint="0 0"

EndPoint="1 1">

<GradientStop Color="#FF0000" Offset="0" />

<GradientStop Color="#FFFF00" Offset="0.2" />

<GradientStop Color="#00FF00" Offset="0.4" />

<GradientStop Color="#00FFFF" Offset="0.6" />

<GradientStop Color="#0000FF" Offset="0.8" />

<GradientStop Color="#FF00FF" Offset="1" />



</DiffuseMaterial>



<RotateTransform3D>



Angle="{Binding ElementName=horz, Path=Value}"

/>




</GeometryModel3D>


<AmbientLight Color="Gray" />

<DirectionalLight Color="Gray" Direction="2 -3 -1" />

</Model3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>


UpDirection="0 1 0" FieldOfView="22.5" />


</Viewport3D>

</DockPanel>

</Page>

Trang 70

Góc trên bên phải của cọ vẽ là điểm (1, 0), luôn luôn ánh xạ tới đỉnh của kim tự tháp tại các

điểm (0, 1, 0). Ba góc khác của cọ vẽ được ánh xạ tới các đỉnh khác nhau của kim tự tháp:

Hình 1-3: Vật thể sử dụng cọ vẽ Gradient.

Một thanh cuộn ngang cho bạn nhìn thấy rằng cọ vẽ có vẻ liên tục bọc quanh kim tự tháp.

2. Sử dụng cọ vẽ Tile

Ba lớp brush còn lại là ImageBrush, DrawingBrush, và VisualBrush. Về lý thuyết,

những cọ vẽ có khá nhiều chồng chéo chức năng, nhưng trong hầu hết các ứng dụng thực tế có thể

bạn sẽ sử dụng chúng cho các mục đích cụ thể:

ImageBrush cho cọ vẽ dựa trên bitmap.

DrawingBrush cho cọ vẽ dựa trên các bản vẽ vector.

VisualBrush cho cọ vẽ dựa trên các đối tượng trực quan, bao gồm giao diện người

sử dụng các yếu tố và điều khiển.

ImageBrush chỉ xác định một thuộc tính: thuộc tính ImageSource của loại ImageSource,

là lớp trừu tượng từ lớp BitmapSource và lớp DrawingImage. BitmapSource là lớp trừu

tượng của tất cả các lớp bitmap.

DrawingBrush cũng chỉ định nghĩa một thuộc tính: Thuộc tính Drawing, là của loại

Drawing. Thông thường có thể bạn sẽ sử dụng lớp GeometryDrawing trong kết hợp với brush

này, nhưng bạn cũng có thể sử dụng đối tượng của loại GlyphRunDrawing, ImageDrawing,

VideoDrawing, và DrawingGroup. Đặc biệt, VideoDrawing cho phép bạn chơi một tập tin

video trên một đối tượng 3D.

Trang 71

VisualBrush xác định hai thuộc tính: Thuộc tính Visual là thuộc tính của loại Visual

đây là lớp trừu tượng đáng chú ý nhất là FrameworkElement và Control. (Các tài sản khác

được đặt tên là AutoLayoutContent và mặc định là True) Bạn sử dụng VisualBrush để đưa

các yếu tố, bảng, và kiểm soát số liệu về 3D. Đây không phải là chức năng kiểm soát, nhưng chỉ

có những hình ảnh của các điều khiển. VisualBrush hữu ích nhất trong việc đưa các yếu tố về

TextBlock, và cũng có khi sử dụng các panels có thể chứa các yếu tố khác.

ImageBrush, DrawingBrush, và VisualBrush tất cả bắt nguồn từ TileBrush, những

kiểu cọ vẽ này có khả năng lặp lại một hình ảnh hình chữ nhật theo chiều ngang và theo chiều

dọc. Các hành vi mặc định, tuy nhiên, không phải là để Tile. ImageBrush, DrawingBrush, và

VisualBrush tất cả thừa kế tám thuộc tính từ TileBrush vì vậy TileBrush được sử dụng một

cách linh hoạt và mạnh mẽ. Thể hiện những thuộc tính này sẽ là trọng tâm chính của phần này.

Brushes dựa trên file ảnh.

2.1. ImageBrush

Hãy bắt đầu bằng cách sử dụng ImageBrush để đặt một hình ảnh trên một khối lập phương,

bitmap có thể được áp dụng cho một khối lập phương bằng nhiều cách khác nhau. Các mặt của

khối lập phương được xác định độc lập, không có đỉnh chung. Vị trí trong bộ sưu tập, bốn bên

vuông góc với mặt phẳng XZ có đỉnh được xác định theo thứ tự: upper-left, upper-right,

lower-left, and lower-right. Bộ sưu tập TextureCoordinates bao gồm các điểm hai

chiều (0, 0), (1, 0), (0, 1), và (1, 1) để tương ứng với thứ tự đó. TextureCoordinates lặp đi lặp

lại những điểm cùng bốn đối tượng cho từng mặt của lập phương.

<Window x:Class="PhotoOnACube.MainWindow"



Title="Photo On A Cube" Height="350" Width="525">

<DockPanel>

<ScrollBar Name="horz" DockPanel.Dock="Bottom"

Orientation="Horizontal"



<ScrollBar Name="vert" DockPanel.Dock="Right" Orientation="Vertical"



<Viewport3D>

Trang 72

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D>




<MeshGeometry3D

Positions="-0.5 0.5 0.5, 0.5 0.5 0.5,

-0.5 -0.5 0.5, 0.5 -0.5 0.5,

0.5 0.5 -0.5, -0.5 0.5 -0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

-0.5 0.5 -0.5, -0.5 0.5 0.5,

-0.5 -0.5 -0.5, -0.5 -0.5 0.5,

0.5 0.5 0.5, 0.5 0.5 -0.5,

0.5 -0.5 0.5, 0.5 -0.5 -0.5,

-0.5 0.5 -0.5, 0.5 0.5 -0.5,

-0.5 0.5 0.5, 0.5 0.5 0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

0.5 -0.5 0.5, -0.5 -0.5 0.5"


4 6 5, 5 6 7,

8 10 9, 9 10 11,

12 14 13, 13 14 15

16 18 17, 17 18 19

20 22 21, 21 22 23"

TextureCoordinates="0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1" />



<DiffuseMaterial>


<ImageBrush

ImageSource="hoavabuom.jpg" />


</DiffuseMaterial>



<Transform3DGroup>

<RotateTransform3D>

Trang 73



Angle="{Binding

ElementName=horz,

Path=Value}" />



<RotateTransform3D>



Angle="{Binding

ElementName=vert,

Path=Value}" />



</Transform3DGroup>


</GeometryModel3D>



<AmbientLight Color="White" />

</Model3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>



UpDirection="0 1 0"

FieldOfView="22.5" />


</Viewport3D>

</DockPanel>

</Window>

Ta sử dụng AmbientLight, vì vậy bitmap trông như tươi sáng như khi nó được xem bình

thường trong Windows. Hai thanh cuộn điều khiển trên và dưới cùng bên phải để cho bạn xoay

khối lập phương để xem nó từ nhiều hướng khác nhau.

Các đối tượng DiffuseMaterial cho cọ vẽ được định nghĩa như sau:

<DiffuseMaterial>


<ImageBrush

ImageSource="hoavabuom.jpg" />


</DiffuseMaterial>

Trong đó bitmap được lấy từ source trong project, ở đây bạn có thể lấy bitmap từ một trang

web nào đó. Kết quả hình lập phương như sau:

Trang 74

Hình 2.1-1: Cọ vẽ sử dụng ImageBrush.

Theo mặc định, WPF 3D trải dài hình ảnh lên khối lập phương, hành vi này được quy định bởi

các thuộc Stretch mà ImageBrush thừa hưởng từ TileBrush. Các thuộc tính mặc định

Stretch là Fill, mà trải dài hình ảnh để lấp đầy diện tích mà không quan tâm đến tỉ lệ ban đầu

của nó. Nhìn chung, các bề mặt của một đối tượng 3D thì tất cả khác nhau về hình dạng và kích

cỡ, do đó kéo dài hình ảnh để phù hợp chắc chắn là hành vi tổng quát đơn giản nhất. Đối với một

số ứng dụng bạn sẽ muốn cố gắng để bảo vệ tỉ lệ chính xác của bitmap.

Bạn có thể muốn thử nghiệm với các lựa chọn thay thế, ví dụ:

<ImageBrush Stretch="Uniform" … />

Bây giờ hình ảnh các giả định tỉ lệ chính xác của nó trên mặt của lập phương. Nhưng do kích

thướt của khối lập phương lớn hơn kích thướt của hình, nên nó sẽ tạo ra những khoảng trống.

Thay vì vậy bạn có thể sử dụng cách sau:

<ImageBrush Stretch="UniformToFill" … />

Với tùy chọn Uniform và UniformToFill, hình ảnh xuất hiện ở tỷ lệ chính xác vì nó hiển

thị trên một bề mặt vuông. Nếu điều này không thực sự là một khối lập phương, hình ảnh sẽ được

thu nhỏ hoặc cắt như thể nó là hiển thị trên một bề mặt vuông, nhưng nó sẽ không xuất hiện để có

tỉ lệ chính xác. Thiết lập thuộc tính Stretch để không có một tùy chọn trong thế giới hai chiều

bởi vì nó cho phép hình ảnh thay đổi kích thước. Đối với con số 3D, bạn cần phải xác định

TextureCoordinates trong khi thiết lập tùy chọn.

Trang 75

Bạn có thể sử dụng các bộ sưu tập TextureCoordinates để cắt hình ảnh. Hãy thử nó. Thay

thế dòng đầu tiên của TextureCoordinates với những thông số sau đây:

0.3 0.1, 0.8 0.1, 0.3 0.6, 0.8 0.6,

Điều này có nghĩa rằng tôi muốn phối hợp tương đối (0 .3 0.1) của brush để được liên kết với

góc trên bên trái mặt phía trước của khối lập phương. Các tọa độ tương đối khác của bàn cọ vẽ

được thiết lập để chỉ hiển thị một nửa chiều rộng và một nửa chiều cao của bitmap. Và mặt trước

của khối lập phương hiện nay sẽ hiển thị một phiên bản độc đáo cắt của hình ảnh:

Hình 2.1-2: Hình ảnh sau khi được thay đổi giá trị TextureCoordinates.

Sau đó bạn có thể thay thế các dòng còn lại trong TextureCoordinates để được hình ảnh

như bạn mong muốn.

Nếu bạn cần phải cắt hình ảnh, bạn có thể sử dụng các thuộc tính Viewbox được xác định bởi

TileBrush. Đặt Viewbox trong một đối tượng của loại Rect (một hình chữ nhật hai chiều) cho

thấy các phần mong muốn của hình ảnh liên quan đến ô ranh giới. Hình chữ nhật này bao gồm

bốn thông số: phối hợp trái, phối hợp trên cùng, chiều rộng, và chiều cao. Để có được thể hiện

trong hình ảnh trước đó, ta dùng:

<ImageBrush Viewbox="0.3 0.1 0.5 0.5" …/>

Trang 76

Hình 2.1-3: Hình ảnh khi sử dụng ViewboxUnit.

Hoặc bạn có thể sử dụng ViewboxUnits với trường Absolute:

<ImageBrush ViewboxUnits="Absolute" Viewbox="132 52 220 260" …

Ngoài ra còn có một thuộc tính nữa đó là TileMode mặc định của thuộc tính này là

TileMode.None. Bạn có thể thiết lập thuộc tính Tile để cho phép kéo giãn, nhưng đó không

phải là khá đầy đủ bởi vì theo mặc định kích thước của mỗi ô được giả định là kích thước của cọ

vẽ. Bạn cũng cần phải sử dụng thuộc tính Viewport để cho biết kích thước của mỗi tile tương

đối so với hộp ranh giới. Giống như Viewbox, bạn thiết lập khung nhìn cho một đối tượng Rect.

Ví dụ:

<ImageBrush TileMode="Tile" Viewport="0 0 0.20 0.25" …

Điều này có nghĩa là Viewport theo chiều ngang mà bạn muốn mỗi ô để chiếm 20 phần trăm

của chiều rộng, và theo chiều dọc bạn muốn mỗi ô được 25 phần trăm của chiều cao. Năm ô sẽ

xuất hiện theo chiều ngang và bốn ô theo chiều dọc theo từng bề mặt, và đó là trường hợp:

Trang 77

Hình 2.1-4: Hình ảnh sau khi có sử dung thêm thuộc tính TileMode.

Và bạn có thể thay đổi phần trăm của từng ô dựa vào Viewport. Ví dụ như Viewport="0 0

0.40 0.67". Hoặc cho hình ảnh đối xứng với nhau qua trục x và trục y bằng cách sử dụng

TileMode="FlipXY":

Hình 2.1-5: Hình ảnh khi sử dụng thuộc tính TileMode với kiểu FlipXY.

2.2. DrawingBrush

Trong XAML, bạn có thể cung cấp các thuộc tính gắn liền cùng với các thuộc tính khác là

DrawingBrush hoặc VisualBrush:

<DrawingBrush RenderOptions.CachingHint="Cache" …

Lớp RenderOptions định nghĩa hai thuộc tính khác có liên quan mà bạn có thể sử dụng

trong cùng một cách: CacheInvalidationThresholdMinimum và

CacheInvalidationThresholdMaximum. Bạn đặt những giá trị mà chỉ ra một sự thay đổi

Trang 78

trong kích thước cho phép trước khi cọ vẽ được sử dụng lại. Ví dụ, nếu bạn đặt

CacheInvalidationThresholdMinimum đến 0.25, cọ vẽ sẽ được sử dụng cho đến khi kích

thước của nó là một phần tư kích thước ban đầu của nó. Tương tự như vậy, bạn thiết lập giá trị

CacheInvalidationThresholdMaximum với giá trị lớn hơn một.

Cọ vẽ dựa trên Drawing:

DrawingBrush rất giống với ImageBrush và thừa hưởng tất cả thuộc tính từ TileBrush.

Bạn thường sử dụng DrawingBrush để tạo ra một cọ vẽ dựa trên đồ họa vẽ các đối tượng bằng

vector, bao gồm các đường thẳng, đường cong Bezier, chữ nhật, bầu dục, và vòng cung.

DrawingBrush định nghĩa một tài sản trên có tên là Drawing của loại Drawing. Drawing

là một lớp trừu tượng của GeometryDrawing, ImageDrawing, GlyphRunDrawing, Video-

Drawing, và DrawingGroup (cho kết hợp vẽ các đối tượng).

Thông thường bạn sẽ sử dụng một hoặc nhiều đối tượng GeometryDrawing trong kết nối với

một DrawingBrush, nếu bạn có nhiều hơn một, bạn có thể kết hợp chúng trong một

DrawingGroup. Tuy nhiên, bạn cũng có thể kết hợp các bản vẽ và hình ảnh bitmap bằng cách sử

dụng lớp ImageDrawing, lớp này định nghĩa một tài sản có tên ImageSource để bạn thiết lập

một bitmap.

Đây là cú pháp chung khi bạn thiết lập chỉ có một đối tượng GeometryDrawing:

<DrawingBrush …>

<DrawingBrush.Drawing>

<GeometryDrawing …>

…

</GeometryDrawing>

</DrawingBrush.Drawing>

</DrawingBrush>

Các lớp GeometryDrawing định nghĩa các thuộc tính Brush, Pen, và Geometry. Nếu bản

vẽ kèm theo bao gồm một số vùng mà bạn muốn làm đầy với một cọ vẽ, đây là nơi bạn xác định

một cọ vẽ. Nếu bạn chỉ cần một SolidColorBrush, bạn có thể chỉ định màu sắc trong thẻ

GeometryDrawing:

<GeometryDrawing Brush="Magenta">

Nếu bạn muốn đường thẳng được vẽ bởi một Pen, thì Pen phải được quy định như một yếu tố

sở hữu:

Trang 79

<GeometryDrawing>

…

<GeometryDrawing.Pen>

<Pen Brush="Black" Thickness="2.5" />

</GeometryDrawing.Pen>

…

</GeometryDrawing>

Nếu bản vẽ của bạn đòi hỏi nhiều màu sắc bút vẽ hoặc màu sắc lấp đầy, mỗi sự kết hợp màu

sắc khác nhau phải có một đối tượng GeometryDrawing riêng biệt. Bạn có thể nhóm nhiều đối

tượng GeometryDrawing trong một DrawingGroup.

Các đường thẳng thực tế để xác định các bản vẽ được quy định như đối tượng Geometry.

Geometry là một lớp trừu tượng là lớp cha của các lớp LineGeometry, RectangleGeometry,

EllipseGeometry, PathGeometry, StreamGeometry, CombinedGeometry, và

GeometryGroup. Bạn có thể sử dụng GeometryGroup để kết hợp các đối tượng trong một

GeometryDrawing duy nhất:

<GeometryDrawing>

…

<GeometryDrawing.Geometry>

<GeometryGroup>

<EllipseGeometry … />

<LineGeometry … />

<LineGeometry … />

</GeometryGroup>

</GeometryDrawing.Geometry>

…

</GeometryDrawing>

Chúng ta đã đề cập đến hai loại nhóm. DrawingGroup thường kết hợp nhiều đối tượng

GeometryDrawing, mỗi trong số đó đã có thuộc tính Brush, Pen, và Geometry riêng.

GeometruGroup kết hợp nhiều đối tượng hình học.

Bạn cũng có thể thiết lập thuộc tính Geometry của GeometryDrawing để một chuỗi mã hóa

đường thẳng và đường cong:

<GeometryDrawing Geometry="M 0 0 L 100 50 … ">

CubesWithDrawingBrushes.xaml

<Window x:Class="CubesWithDrawingBrushes.MainWindow"



Title="MainWindow" Height="350" Width="525">

<Window.Resources>



<MeshGeometry3D x:Key="cube"

Trang 80

Positions="-0.5 0.5 0.5, 0.5 0.5 0.5,

-0.5 -0.5 0.5, 0.5 -0.5 0.5,

0.5 0.5 -0.5, -0.5 0.5 -0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

-0.5 0.5 -0.5, -0.5 0.5 0.5,

-0.5 -0.5 -0.5, -0.5 -0.5 0.5,

0.5 0.5 0.5, 0.5 0.5 -0.5,

0.5 -0.5 0.5, 0.5 -0.5 -0.5,

-0.5 0.5 -0.5, 0.5 0.5 -0.5,

-0.5 0.5 0.5, 0.5 0.5 0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

0.5 -0.5 0.5, -0.5 -0.5 0.5"


4 6 5, 5 6 7,

8 10 9, 9 10 11,

12 14 13, 13 14 15

16 18 17, 17 18 19

20 22 21, 21 22 23"


0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1" />



<DiffuseMaterial x:Key="ellipse">


<DrawingBrush RenderOptions.CachingHint="Cache"

TileMode="Tile" Viewport="0 0 0.2 0.2">


<GeometryDrawing Brush="Cyan">


<Pen Brush="Red"></Pen>



<EllipseGeometry RadiusX="4" RadiusY="4"/>


</GeometryDrawing>


</DrawingBrush>


</DiffuseMaterial>



<DiffuseMaterial x:Key="bricks">



TileMode="Tile" Viewport="0 0 0.1 0.1">


<DrawingGroup>

<GeometryDrawing Brush="LightGray">


<RectangleGeometry Rect="0 0 20 20"/>

Trang 81


</GeometryDrawing>

<GeometryDrawing Brush="Brown">


<GeometryGroup>




</GeometryGroup>


</GeometryDrawing>

</DrawingGroup>


</DrawingBrush>


</DiffuseMaterial>



<DiffuseMaterial x:Key="hatch">



TileMode="Tile" Viewport="0 0 0.2 0.2"

Viewbox="0 0 100 100"

ViewboxUnits="Absolute">


<DrawingGroup>

<GeometryDrawing Brush="White"

Geometry="M 0 0 L 100 0 L 100 100 L 0 100 Z" />

<GeometryDrawing Geometry="M -10 77.5 L 22.5 110

M -10 52.5 L 47.5 110

M -10 27.5 L 72.5 110

M -10 2.5 L 97.5 110

M 2.5 -10 L 110 97.5

M 27.5 -10 L 110 72.5

M 52.5 -10 L 110 47.5

M 77.5 -10 L 110 22.5">


<Pen Brush="Black" Thickness="4" />


</GeometryDrawing>

</DrawingGroup>


</DrawingBrush>


</DiffuseMaterial>

</Window.Resources>

<DockPanel>

<ScrollBar Name="horz" DockPanel.Dock="Bottom"

Orientation="Horizontal"



Trang 82




<Viewport3D>

<ModelVisual3D>


<Model3DGroup>



<GeometryModel3D Geometry="{StaticResource cube}"

Material="{StaticResource ellipse}"

BackMaterial="{StaticResource ellipse}">


<TranslateTransform3D OffsetX="-1.5"

OffsetY="1.5" />


</GeometryModel3D>




Material="{StaticResource bricks}" />




Material="{StaticResource hatch}">


<TranslateTransform3D OffsetX="1.5"

OffsetY="-1.5" />


</GeometryModel3D>

</Model3DGroup>





<Transform3DGroup>

<RotateTransform3D>



Angle="{Binding ElementName=horz,

Path=Value}" />



<RotateTransform3D>



Angle="{Binding ElementName=vert,

Path=Value}" />



</Transform3DGroup>


</ModelVisual3D>

Trang 83


<ModelVisual3D>




</ModelVisual3D>



<Viewport3D.Camera>

<PerspectiveCamera Position="0 0 10"

LookDirection="0 0 -10"

UpDirection="0 1 0"

FieldOfView="30" />


</Viewport3D>

</DockPanel>

</Window>

DrawingBrush đầu tiên là resource có tên là "ellipse". Các ô bao gồm một ellipse với một

đường viền màu đỏ và một brush màu cyan. Các góc xung quanh ellipse thì trong suốt, vì vậy tôi

đã sử dụng cùng một brush cho các tài sản BackMaterial của GeometryModel3D. Bạn có thể

thấy qua các góc của mỗi ô giống ô bên trong các khối lập phương:

Hình 2.2-1: Sử dụng DrawingBrush tô theo kiểu hình ellipse lấy từ resource.

Bề rộng bên ngoài của ellipse được so sánh với kích thước tổng thể của nó. Đây là kết quả của

việc có một bán kính bốn đơn vị và mặc định chiều rộng bút vẽ một đơn vị. Cả chiều rộng và

chiều cao của bút vẽ có độ lớn là 9.

DrawingBrush thứ hai mô phỏng những ô gạch:

Trang 84

Hình 2.2-2: Sử dụng DrawingBrush tô theo kiểu hình chữ nhật lấy từ resource.

Mỗi ô bằng một phần mười chiều rộng và chiều cao của mặt bên khối lập phương, brush này

bao gồm một nền ánh sáng màu xám (vữa) với ba hình chữ nhật màu nâu, hai phần gạch trên đầu

mỗi ô và ô đầy đủ ở phía dưới. Chú ý rằng các hình chữ nhật cho ánh sáng nền màu xám được cho

kích thước của 20 đơn vị, trong đó có hiệu quả xác định kích thước của brush.

Các DrawingBrush thứ ba là trong lý thuyết đơn giản và cơ bản nhất, nhưng rắc rối nhất. Nó

được mô phỏng đánh dấu chéo có sẵn trong Windows:

Hình 2.2-3: Sử dụng DrawingBrush tô theo kiểu sọc chéo lấy từ windowns.

Nền trắng được định nghĩa như là một hình vuông với mặt của 100 đơn vị. Được xác định:

<GeometryDrawing Geometry="M 0 75 L 25 100

M 0 50 L 50 100

M 0 25 L 75 100

M 0 0 L 100 100

M 25 0 L 100 75

Trang 85

M 50 0 L 100 50

M 75 0 L 100 25">

Điều này chỉ ra đường thẳng được vẽ từ (0, 75) đến (25, 100),...

2.3. VisualBrush

ImageBrush, DrawingBrush, và VisualBrush có sự chồng chéo trong chức năng: Bạn có

thể thiết lập thuộc tính ImageSource của ImageBrush cho một đối tượng của DrawingImage,

mà là dựa trên một đối tượng Drawing. Tương tự như vậy, bạn có thể thiết lập thuộc tính

Drawing của DrawingBrush cho một đối tượng của ImageDrawing, mà chính nó có một thuộc

tính ImageSource mà bạn có thể thiết lập một bitmap.

VisualBrush vẽ căn cứ vào các yếu tố Image (để hiển thị bitmap) hoặc lớp con của lớp

Shapes (để hiển thị bản vẽ vector).

VisualBrush hữu ích nhất cho một vài ứng dụng mà không thể được xử lý với ImageBrush

hoặc DrawingBrush. Áp dụng cọ vẽ vào một chuỗi văn bản một cách dễ dàng nếu bạn thiết lập

thuộc tính Visual của VisualBrush đến một đối tượng của loại TextBlock. Nếu bạn cần

nhiều dòng của văn bản trong brush với các phông chữ và màu sắc khác nhau, bạn có thể kết hợp

nhiều yếu tố TextBlock, hoặc các yếu tố của bất kỳ, các yếu tố Panel có sẵn, chẳng hạn như

StackPanel, Grid, và Canvas. Lớp Panel có nguồn gốc từ FrameworkElement, nó cũng là

một đối tượng của loại Visual.

Đây là một DiffuseMaterial dựa trên một VisualBrush được định nghĩa là một tài

nguyên và sử dụng cho cả các thuộc tính Material và BackMaterial của đối tượng

GeometryModel3D.

Hello3D.xaml





WindowTitle="Hello 3D"

Title="Hello 3D">

<Page.Resources>



<DiffuseMaterial x:Key="materialText">


<VisualBrush RenderOptions.CachingHint="Cache">

<VisualBrush.Visual>

<TextBlock FontFamily="Times New Roman" Text="Hello, 3D!" />

Trang 86

</VisualBrush.Visual>

</VisualBrush>


</DiffuseMaterial>

</Page.Resources>

<Viewport3D>

<ModelVisual3D>


<GeometryModel3D Material="{StaticResource materialText}"

BackMaterial="{StaticResource

materialText}">




<MeshGeometry3D

Positions="0 0 0, 0 1 0, 1 0 0, 1 1 0"

TriangleIndices="0 2 3, 0 3 1"

TextureCoordinates="0 1, 0 0, 1 1, 1 0" />





<RotateTransform3D>


<AxisAngleRotation3D x:Name="xform" Axis="0,1,0" />




</GeometryModel3D>


</ModelVisual3D>



<ModelVisual3D>




</ModelVisual3D>



<Viewport3D.Camera>

<PerspectiveCamera Position="0 0.5 1.5" LookDirection="0 0 -1"

UpDirection="0 1 0" FieldOfView="120" />


</Viewport3D>



<Page.Triggers>


<BeginStoryboard>

<Storyboard TargetName="xform" TargetProperty="Angle">

<DoubleAnimation From="360" To="0" Duration="0:0:10"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Page.Triggers>

</Page>

Trang 87

Giả sử bạn muốn hiển thị một khối lập phương với sáu màu sắc khác nhau trên sáu bên của nó.

Bạn có thể làm điều này bằng cách chia tách các khối lập phương lên thành sáu đối tượng khác

nhau GeometryModel3D, mỗi một đối tượng riêng biệt Material và màu sắc khác nhau. Ngoài

ra, bạn có thể sử dụng một GeometryModel3D và tạo ra một DrawingBrush với sáu đối tượng

Drawing khác nhau cho sáu bên khác nhau. Sau đó, bạn tham chiếu các phần khác nhau mà

Drawing sử dụng trong các bộ sưu tập TextureCoordinates.

Chương trình sau đây là tương tự như cách tiếp cận thứ hai và khác là nó sử dụng một bảng

UniformGrid chứa sáu hàng. Mỗi cột trong số các hàng có chứa một đối tượng Rectangle

bằng cọ vẽ fill khác nhau. Hầu hết các tập tin là tương tự như PhotoOnACube1.xaml.

PaneledCube.xaml



• • •




<MeshGeometry3D

Positions="-0.5 0.5 0.5, 0.5 0.5 0.5,

-0.5 -0.5 0.5, 0.5 -0.5 0.5,

0.5 0.5 -0.5, -0.5 0.5 -0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

-0.5 0.5 -0.5, -0.5 0.5 0.5,

-0.5 -0.5 -0.5, -0.5 -0.5 0.5,

0.5 0.5 0.5, 0.5 0.5 -0.5,

0.5 -0.5 0.5, 0.5 -0.5 -0.5,

-0.5 0.5 -0.5, 0.5 0.5 -0.5,

-0.5 0.5 0.5, 0.5 0.5 0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

0.5 -0.5 0.5, -0.5 -0.5 0.5"


4 6 5, 5 6 7,

8 10 9, 9 10 11,

12 14 13, 13 14 15

16 18 17, 17 18 19

20 22 21, 21 22 23"

TextureCoordinates=

"0.000 0, 0.167 0, 0.000 1, 0.167 1,

0.167 0, 0.333 0, 0.167 1, 0.333 1,

0.333 0, 0.500 0, 0.333 1, 0.500 1,

0.500 0, 0.667 0, 0.500 1, 0.667 1,

0.667 0, 0.833 0, 0.667 1, 0.833 1,

0.833 0, 1.000 0, 0.833 1, 1.000 1" />


Trang 88


<DiffuseMaterial>


<VisualBrush

RenderOptions.CachingHint="Cache">

<VisualBrush.Visual>

<UniformGrid Rows="1" Columns="6">

<Rectangle Width="10" Height="10" Fill="#FF0000" />

<Rectangle Width="10" Height="10" Fill="#FFFF00" />

<Rectangle Width="10" Height="10" Fill="#00FF00" />

<Rectangle Width="10" Height="10" Fill="#00FFFF" />

<Rectangle Width="10" Height="10" Fill="#0000FF" />

<Rectangle Width="10" Height="10" Fill="#FF00FF" />

</UniformGrid>

</VisualBrush.Visual>

</VisualBrush>


</DiffuseMaterial>


• • •

Một loại khác có nguồn gốc từ Visual là Viewport3D, có nghĩa là bạn có thể tạo một cọ vẽ

dựa trên một vật thể 3D.

Đó là tiền đề đằng sau các chương trình sau đây. Một MeshGeometry3D và một

Viewport3D hoàn chỉnh được khai báo trong resouce. Một tham chiếu của Viewport3D từ

nguồn MeshGeometry3D để hiển thị một khối lập phương.

3DCubeBrush.xaml





WindowTitle="3D Cube Brush"

Title="3D Cube Brush">

<Page.Resources>



<MeshGeometry3D x:Key="cube"

Positions="-0.5 0.5 0.5, 0.5 0.5 0.5,

-0.5 -0.5 0.5, 0.5 -0.5 0.5,

0.5 0.5 -0.5, -0.5 0.5 -0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

-0.5 0.5 -0.5, -0.5 0.5 0.5,

-0.5 -0.5 -0.5, -0.5 -0.5 0.5,

0.5 0.5 0.5, 0.5 0.5 -0.5,

0.5 -0.5 0.5, 0.5 -0.5 -0.5,

-0.5 0.5 -0.5, 0.5 0.5 -0.5,

-0.5 0.5 0.5, 0.5 0.5 0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

0.5 -0.5 0.5, -0.5 -0.5 0.5"


Trang 89

4 6 5, 5 6 7,

8 10 9, 9 10 11,

12 14 13, 13 14 15

16 18 17, 17 18 19

20 22 21, 21 22 23"


0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1,

0 0, 1 0, 0 1, 1 1" />



<Viewport3D x:Key="viewport3D" Width="100" Height="100">

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D Geometry="{StaticResource cube}" >




</GeometryModel3D>




</Model3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>



UpDirection="0 1 0"

FieldOfView="22.5" />


</Viewport3D>

</Page.Resources>

<DockPanel>

<ScrollBar Name="horz" DockPanel.Dock="Bottom" Orientation="Horizontal"






<Viewport3D>

<ModelVisual3D>


<Model3DGroup>

<GeometryModel3D Geometry="{StaticResource cube}">


<DiffuseMaterial>


Trang 90

<VisualBrush TileMode="Tile" Viewport="0 0 0.2 0.2"

RenderOptions.CachingHint= "Cache" Visual= "{StaticResource viewport3D}" />


</DiffuseMaterial>



<Transform3DGroup>

<RotateTransform3D>


<AxisAngleRotation3D Axis="0 1 0" Angle="{Binding

ElementName=horz, Path=Value}" />



<RotateTransform3D>



Angle="{Binding ElementName=vert, Path=Value}" />



</Transform3DGroup>


</GeometryModel3D>



<DirectionalLight Color="Gray" Direction="2 -3 -1" />

</Model3DGroup>


</ModelVisual3D>



<Viewport3D.Camera>


UpDirection="0 1 0" FieldOfView="22.5" />


</Viewport3D>

</DockPanel>

</Page>

Sự khác biệt ở đây là đối tượng Material là dựa trên một VisualBrush bằng cách tham

chiếu đến tài nguyên Viewport3D, vì vậy mà khối lập phương dường như được tô bởi một hình

khối 3D thu nhỏ:

Trang 91

Hình 2.3-1: Khối lập phương được tô bằng những khối lập phương nhỏ.

Mỗi cọ vẽ bao gồm các mặt của khối lập phương, các khối chắc chắn trông giống như nó được

xây dựng từ 25 khối nhỏ ở mỗi bên.

Các tên miền trong namespace System.Windows.Media.Media3D định nghĩa một lớp

Viewport3DVisual kế thừa trực tiếp từ Visual. Đây là một lớp được sử dụng chủ yếu trong

WPF để thu hẹp khoảng cách giữa WPF 3D và hình ảnh hai chiều. Nhưng bạn cũng có thể sử

dụng nó khi xác định một VisualBrush. Trong 3DCubeBrush.xaml, thay đổi tài nguyên

Viewport3D bằng một nguồn tài nguyên Viewport3DVisual bằng cách thay thế các thuộc tính

Width và Height với một thuộc tính Viewport:

<Viewport3DVisual x:Key="viewport3D" Viewport="0 0 100 100">

Trang 92

Chƣơng 4: ỨNG DỤNG

1. Giới thiệu

Sau khi tìm hiểu về đồ họa 3D trong Windows Presentation Foudation, em đã t ạo một demo sử

dụng các phép biến đổi và các phép xoay cơ bản vào demo này. Chương trình cho phép có thể

biến đổi tĩnh hoăc biến đổi động.

2. Phân tích

Mục đích chính của ứng dụng tạo nên những biến đổi, cho phép người sử dụng có thể thay đổi

các thông số nhằm tạo ra các biến đổi tùy chọn hoặc có thể thực hiện các biến đổi động.

Các yêu cầu của ứng dụng:

+ Các textbox để thay đổi và hiển thị các thông số cho phép biến đổi ma trận.

+ Các textbox để thay đổi và hiển thị các thông của phép xoay theo trục và góc.

+ Các textbox để thay đổi và hiển thị các thông số cho phép xoay bằng phép toán

Quaternion.

+ Các textbox để thay đổi và hiển thị các thông số cho phép dịch chuyển theo các

trục.

+ Các textbox để thay đổi và hiển thị các thông số biến đổi kích thước theo các trục.

+ Các button để thực hiện các biến đổi động: Animation, Xoay, Dịch chuyển.

Trang 93

3. Giao diện ứng dụng

Hình 3: Giao diện chính.

Các thành phần của ứng dụng:

STT Tên Kiểu control Ý nghĩa

0 lbThongSoMaTran Label Tiêu đề tên loại biến đổi ma trận

1 txtM11 Texbox Hiển thị thông số M11 của ma trận

2 txtM12 Textbox Hiển thị thông số M12 của ma trận









Trang 94



13 txtOffsectX Textbox Hiển thị thông số OffsectZ của ma trận

14 txtOffsectY Textbox Hiển thị thông số OffsectY của ma trận

15 txtOffsectZ Textbox Hiển thị thông số OffsectZ của ma trận


17 cmdCapNhatMaTrix Button Cập nhật lại giá trị của ma trận

18 lbThongSoXoayTrucGoc Label Tiêu đề loại xoay theo trục và góc

19 lbVector3DX Label Tiêu đề tên giá trị của trục X

20 lbVector3DY Label Tiêu đề tên giá trị của trục Y

21 lbVector3DZ Label Tiêu đề tên giá trị của trục Z

22 lbAngle Label Tiêu đề tên giá trị của góc xoay

23 txtVector3DX Textbox Hiển thị giá trục trên trục X

24 txtVector3DY Textbox Hiển thị giá trục trên trục Y

25 txtVector3DZ Textbox Hiển thị giá trục trên trục Z

26 txtAngle Textbox Hiển thị giá trục góc xoay

27 cmdCapNhatRotation Button Cập nhật lại các thông số của phép xoay

trục và góc

28 lbThongSoXoayQuaternion Lable Tiêu đề tên loại Phép xoay bằng phép

toán Quaternion

28 LbQuaternionW Label Tiêu đề tên loại giá trị góc xoay

30 LbQuaternionX Label Tiêu đề tên loại giá trị trục X

31 LbQuaternionY Label Tiêu đề tên loại giá trị trục Y

32 LbQuaternionZ Label Tiêu đề tên loại giá trị trục Z

33 txtQuaternionW Textbox Hiển thị giá trị của góc xoay

34 txtQuaternionX Textbox Hiển thị giá trị của trục X

35 txtQuaternionY Textbox Hiển thị giá trị của trục Y

36 txtQuaternionZ Textbox Hiển thị giá trị của trục Z

Trang 95

37 cmdCapNhatQuaternion Button Cập nhật lại các thông số của phép xoay

bằng phép toán Quaternion

38 LbThongSoDichChuyen Lable Tiêu đề tên loại phép dịch chuyển

39 LbOffsectX Label Tiêu đề tên loại giá trị Offsect trên trục

X

40 LbOffsectY Label Tiêu đề tên loại giá trị Offsect trên trục

Y

41 LbOffsectZ Label Tiêu đề tên loại giá trị Offsect trên trục

Z

42 txtOffsectX Textbox Tiêu đề tên loại giá trị Offsect trên trục

X

42 txtOffsectY Textbox Tiêu đề tên loại giá trị Offsect trên trục

Y

44 txtOffsectZ Textbox Tiêu đề tên loại giá trị Offsect trên trục

Y

45 cmdCapNhatCacOffsect Button Cập nhật lại các thông số của phép dịch

chuyển

46 lbThongSoBienDoiKichThuoc Lable Tiêu đề tên loại phép biến đổi kích thước

47 lbScaleX Label Tiêu đề tên phép biến đổi kích thước

trên trục X

48 lbScaleY Label Tiêu đề tên phép biến đổi kích thước

trên trục Y

49 lbScaleZ Label Tiêu đề tên phép biến đổi kích thước

trên trục Z

50 txtScaleX Textbox Hiển thị giá trị biến đổi kích thước trên

trục X

51 txtScaleY Textbox Hiển thị giá trị biến đổi kích thước trên

trục Y

Trang 96

52 txtScaleZ Textbox Hiển thị giá trị biến đổi kích thước trên

trục Z

53 cmdCapNhatCacScale Button Cập nhật lại các thông số của phép biến

đổi kích thước

54 cmdAnimation Button Thực hiện phép tạo hình ảnh động

55 cmdXoay Button Thực hiện phép xoay theo các trục X, Y,

Z và góc

56 cmdDichChuyen Button Thực hiện phép dịch chuyển theo trục X

57 cmdReset Button Hiển thị hình lại hình ảnh ban đầu

58 lbHienThi Label Hiển thị các giá trị khi nhấn vào các nút

biến đổi: Animation, Xoay, Dịch chuyển

59 cameraX ScrollBar Xoay camera theo trục X từ -360 đến

360 độ

60 cameraY ScrollBar Xoay camera theo trục Y từ -360 đến

360 độ

61 cameraZ ScrollBar Xoay camera theo trục Z từ -360 đến

360 độ

62 direclightX ScrollBar Xoay ánh sáng theo trục X từ -360 đến

360

63 direclightY

ScrollBar Xoay ánh sáng theo trục Y từ -360 đến

360

64 direclightZ ScrollBar Xoay ánh sáng theo trục Z từ -360 đến

360

65 cmdThoat Button Thoát khỏi chương trình

Bảng 4: Bảng mô tả các thành phần của giao diện.

Trang 97

4. Các dòng sự kiện chính

Khi nhấn vào nút “Cập nhật lại ma trận” chương trình sẽ lấy giá trị nhập vào từ ma trận

chuyển đổi sang giá trị các phép xoay. Sau đó cho hiển thị các giá trị đó lên các textbox

của các thông số của phép xoay trục và góc và các textbox của phép xoay bằng phép toán

Quaternion. Và cho biến đổi theo thông số vừa cập nhật.

Khi nhấn vào nút “Cập nhật lại Trục/Góc” chương trình sẽ lấy giá trị nhập vào từ các

textbox của phép xoay trục và góc chuyển đổi sang giá trị các phép xoay quaternion và

các thông số của ma trận. Sau đó cho hiển thị các giá trị đó lên các textbox của các thông

phép xoay bằng phép toán Quaternion và textbox cho thông số của ma trận. Và cho biến

đổi theo thông số vừa cập nhật.

Khi nhấn vào nút “Cập nhật lại giá trị” chương trình sẽ lấy giá trị nhập vào từ các textbox

của phép xoay trục và góc chuyển đổi sang giá trị các phép xoay trục và góc và các thông

số của ma trận. Sau đó cho hiển thị các giá trị đó lên các textbox của các thông phép xoay

trục và góc và textbox cho thông số của ma trận. Và cho biến đổi theo thông số vừa cập

nhật.

Khi nhấn vào nút “Cập nhật lại thông số” chương trình sẽ dịch chuyển theo thông số vừa

cập nhật.

Khi nhấn vào nút “Cập nhật lại tỉ lệ” chương trình sẽ biến đổi theo tỉ lệ vừa cập nhật.

Khi nhấn vào nút “Animation” chương trình sẽ cho hình ảnh động thuộc tính

FieldOfViewProperty Camera từ -90 độ đến 90 độ.

Khi nhấn vào nút “Xoay”, chương trình sẽ xoay từ (1, 1, 0) đến (0.3, 0.3, 0) và góc từ -

180 độ đến 180 độ.

Khi nhấn vào nút “Dịch chuyển”, chương trình sẽ cho hình ảnh dịch chuyển theo trục X

với giá trị từ -2 đến 2.

Khi nhấn vào nút “Reset”, hình ảnh hiển thị trở về như lúc ban đầu.

Khi nhấn vào nút “Thoát” thì chương trình sẽ đóng lại.

Trang 98

KẾT LUẬN

1. Về mặt lý thuyết

Em đã tìm hiểu được các vấn đề sau:

Đặc điểm và điểm mạnh của công nghệ WPF và một số vấn đề cần thiết để làm quen

với công nghệ mới.

Cách thức tạo một hình ảnh ba chiều.

Tìm hiểu căn bản hầu hết các đối tượng đồ họa ba chiều.

2. Về mặt ứng dụng

Hoàn thành một số yêu cầu cơ bản sau:

Tạo được các hình 3D.

Sử dụng hầu hết các biến đổi, hoạt ảnh.

Sử dụng cọ vẽ .

3. Hƣớng phát triển

Đi sâu vào tìm hiểu thuật toán hình học mesh và cách sử dụng biến đổi bằng ma

trận và phép toán quaternion.

Tạo các hình vòng xuyến, các hình đa giác.

Trang 99

TÀI LIỆU THAM KHẢO

Tài liệu tiếng anh:

1. Anna Hsu “UniCAD – Practical WPF Graphics Programming Nov 2007” Jack Xu, Ph.D -

2007.

2. Charles Petzold “3D Programming for Windows Presentation Foundation”, December

2006 - June 2007.

Website

1. http://msdn.microsoft.com/en-us/library/aa663364.aspx

2. http://CodePlex.com/Wiki/View.aspx?ProjectName=3DTools

http://msdn.microsoft.com/en-us/library/aa663364.aspx

http://codeplex.com/Wiki/View.aspx?ProjectName=3DTools

Documents

TÌM HIỂU LẬP TRÌNH ĐỒ HỌA 3D TRONG WINDOWS · PDF fileBỘ GIÁO DỤC VÀ ĐÀO T ... tích hợp sẵn DirectX giúp người lập trình phát triển ứng dụng 3D