The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe

Tiếng Việt - 日本語 - 中文版 - 한국어 - Español - Portugues - Français - Italiano - Deutsch - Русский - English


Ma trận 2 chiều

Chuyển động thẳng / tịnh tiến (Translate)

Ở chương trước ta đã học cách vẽ nhiều hình khác nhau. Để di chuyển tịnh tiến các hình đó, thay vì di chuyển chính hình vẽ, ta có thể di chuyển trục toạ độ. Rất đơn giản, chỉ cần cộng thêm 1 vector vào biến st lưu vị trí của mỗi fragment, sẽ khiến cho cả trục toạ độ di chuyển.

Nhìn trực tiếp thì sẽ dễ hơn giải thích, nên bạn hãy thử:

Thử sửa code tiếp nhé:

Chuyển động quay

Để quay một vật thể ta cũng sẽ quay hệ trục toạ độ. Để làm việc đó, ta sẽ dùng tới ma trận. Ma trận gồm các số được xếp thành nhiều hàng và cột. Phép nhân một vector với một ma trận phải tuân thủ quy tắc một cách chính xác về thứ tự phép tính.

Ma trận trên Wikipedia

GLSL có sẵn một vài ma trận có kích thước khác nhau: mat2 (2x2), mat3 (3x3) và mat4 (4x4). GLSL cũng có sẵn phép nhân ma trận thông thường (toán tử *) và cả phép nhân 2 ma trận theo từng cặp phần tử nữa (matrixCompMult()).

Ta có thể sử dụng ma trận để làm vài thứ hay ho. Ví dụ ta có thể dùng nó để tịnh tiến một vector:

Và hay hơn nữa, ta còn có thể dùng nó để xoay trục toạ độ:

Đoạn code dưới đây khởi tạo một ma trận 2 chiều. Hàm này áp dụng công thức ở hình trên để xoay một vector 2 chiều quanh gốc toạ độ vec2(0.0).

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}

Thực ra thì xoay 1 điểm quanh gốc toạ độ không phải là điều mà ta muốn, ta cần nó xoay quanh tâm của chính nó cơ. Và để làm điều đó, ta sẽ chữa mẹo như sau: đầu tiên di chuyển hình chữ thập về đúng gốc toạ độ để tâm của hình chữ thập trùng vị trí với gốc toạ độ, sau đó thực hiện phép quay, cuối cùng di chuyển hình chữ thập đã quay về lại vị trí cũ.

Code sẽ trông như sau:

Hãy thử:

Phép thu phóng

Ta đã thấy cách mà ma trận được sử dụng để di chuyển và quay vật thể trong không gian. Nếu bạn đã từng sử dụng các phần mềm tạo mô hình 3D hay sử dụng tính năng push và pop ma trận trong Processing, thì bạn sẽ biết rằng ma trận còn có thể phóng to thu nhỏ vật thể nữa.

Từ công thức thu phóng 3 chiều trên đây, ta có thể suy luận ra cách tạo nên ma trận thu phóng 2 chiều:

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}

Hãy thử làm như sau để có thể hiểu sâu hơn cách ma trận thu phóng hoạt động:

Công dụng khác của ma trận: Không gian màu YUV

YUV là không gian màu sử dụng cách mã hoá analog truyền thống của ảnh về video, chỉ quan tâm tới dải màu mà con người có thể nhìn thấy được để thu gọn dữ liệu cần lưu trữ.

Đoạn code dưới đây sử dụng ma trận để chuyển đổi màu từ không gian này sang một không gian khác.

Bạn có thể thấy tôi thao tác với màu tương tự như với các vector khi đem chúng nhân với các ma trận.

Trong chương này ta đã học cách biến đổi ma trận để di chuyển, quay và thu phóng các vector. Các phép biến đổi này rất cần thiết để có thể kết hợp các hình mà ta đã học ở các chương trước. Ở chương tiếp theo, ta sẽ áp dụng tất cả những kiến thức này để tạo nên các hoa văn tuyệt đẹp. Bạn sẽ thấy việc đó ngầu thế nào cho mà xem.