Ngthientrung's Blog: Silverlight 3D - Perspective Transforms

Silverlight 3D - Perspective Transforms

Tính đến thời điểm hiện tại khi mình viết bài này (2/2010), theo tìm hiểu của mình thì Microsoft Silverlight 4 vẫn chưa được hỗ trợ 3D. (Hụt hẫng quá phải không trong khi title để rõ là Silverlight 3D)
Không như Adobe Flash được hỗ trợ nền tảng 3D hoàn chỉnh, MS Silverlight chỉ có thể mang lại cho người xem các hình ảnh có Cảm giác 3D nhưng không phải là 3D thật sự. Điều này có nghĩa những game như “Nhà Hàng Vui Vẻ” của Zing , SilverLight vẫn chưa có thể làm được.

Điều này thật đáng tiếc. Theo cách nghĩ của mình, khi so sánh 2 công nghệ lớn Adobe Flash và Microsoft Silverlight chúng ta phải tìm ra những tính năng mà công nghệ này có thể làm được mà công nghệ khác không thể làm được. Và theo quan điểm như vậy thì 3D thật sự là điểm yếu của Silverlight trong khi Flash có đến 3,4 thư viện mã nguồn mở phục vụ tạo 3D.
Tuy nhiên nói như vậy không có nghĩa là Silverlight không thể làm được những hiệu ứng 3D như trên các Site dưới đây.

Đây là các hiệu ứng được viết bằng Flash và mình tin rằng Silverlight cũng có thể làm được việc này thậm chí là dễ dàng hơn.

Như mình đã nói, Silverlight tuy không thể tạo ra hình ảnh 3D thật sự nhưng chí ít cũng mang lại cho người xem ảnh mang cảm giác 3D nhờ vào đặc tính mới trong Silverlight 3 được gọi là Perspective Transforms.

Để tạo ảnh 3D trong Silverlight ta chủ yếu dùng 2 class Matrix3DProjection và PlaneProjection là lớp con được kế thừa từ class Projection, class này dùng để mô tả cách mà các đối tượng chuyển động trong không gian 3D.

Để sử dụng được class Matrix3DProjection đòi hỏi kiến thức về không gian 3D, đồ họa, toán ma trận ,.. nên thường các hiệu ứng đơn giản người ta chỉ sử dụng class PlaneProjection.

Các thuộc tính trong PlaneProjection
(UIElement là đối tượng cha của UserControl và Shape)
CenterOfRotationX
CenterOfRotationY
CenterOfRotationZ
Xác định tâm xoay của UIElement, khi thay đổi thuộc tính RotationX, RotationY, RotationZ, UIElement sẽ xoay theo tâm này.
GlobalOffsetX
GlobalOffsetY
GlobalOffsetZ
Xác đinh vị trí UIElement theo trục tọa độ Screen
LocalOffsetX
LocalOffsetY
LocalOffsetZ
Xác định vị trí UIElement theo trục tọa độ nội tại
RotationX
RotationY
RotationZ
Xác định góc quay X,Y,Z theo tâm xoay ở trên

Xác định tâm xoay theo ảnh dưới đây

Mặc định tâm xoay là (0.5,0.5,0) tức tâm nằm giữa tâm UIElement và trên mặt phẳng chứa UIElement, CenterOfRotationX và CenterOfRotationY xác định dựa trên tỉ lệ Width và Height của UIElement riêng CenterOfRotationZ xác định dựa trên đơn vị pixel do Depth của UIElement luôn là 0 ( UIElement luôn là 2D nên Depth luôn là 0). Như vậy, trên hình vẽ trên, tọa độ tâm xoay của UIElement là (0.5,0.5,z) tức nằm giữa tâm hình chữ nhật vàng và cách tâm đó 1 khoảng z.

Đến đây mình sẽ làm 1 demo đơn giản để các bạn dể tưởng tượng ý nghĩa của tâm xoay. Dùng Expression Blend 3 tạo project Silverlight 3 Application. Kéo thả các Slider, TextBlock và Image như sau.

Xác định các thuộc tính
slidercenterX, slidercenterY : min = 0 , max = 1;
slidercenterZ : min = 0, max = 100;
sliderrotationX ,sliderrotationY, sliderrotationZ : min = 0, max = 360;

Để hiển thị giá trị các slider trên các textblock tương ứng bên phải ta không phải viết code mà chỉ cần Bind đến thuộc tính value của Slider

Chọn thuộc tính cần Bind (Text) có ô vuông nhỏ xíu bên phải,