This programming guide is only available in Vietnamese. Switch the language toggle to Vietnamese to read the full article.

Chào mừng bạn đến với bài học đầu tiên trong series WebGL & Đồ họa 3D cốt lõi. Trong bài học này, chúng ta sẽ đi sâu vào kiến trúc xử lý của GPU, vòng đời hoạt động của Graphics Pipeline, hiểu bản chất của đồ họa Rasterization và thực hành dựng hình tam giác màu đầu tiên bằng WebGL API gốc.

1. Kiến trúc xử lý: CPU vs GPU

Để hiểu tại sao chúng ta cần WebGL, trước tiên phải làm rõ sự khác biệt bản chất giữa CPU (Central Processing Unit) và GPU (Graphics Processing Unit):

• CPU (Bộ xử lý trung tâm): Được tối ưu hóa cho các phép tính tuần tự phức tạp. CPU có ít nhân xử lý (thường từ 4 đến 64 nhân lớn) nhưng có xung nhịp cực cao, bộ nhớ đệm (Cache) lớn và khả năng rẽ nhánh lệnh (Branch Prediction) rất tốt.
• GPU (Bộ xử lý đồ họa): Được thiết kế cho việc tính toán song song cực đại. Một màn hình Full HD (1920x1080) có hơn 2 triệu pixel. Để render mượt mà ở tốc độ 60 khung hình/giây (FPS), GPU phải tính toán màu sắc cho hơn 120 triệu pixel mỗi giây. Để giải quyết việc này, GPU chứa hàng ngàn nhân xử lý nhỏ hoạt động đồng thời (Massively Parallel Architecture).

WebGL là cầu nối cho phép JavaScript gửi dữ liệu (đỉnh, màu sắc, ma trận) từ bộ nhớ CPU sang bộ nhớ GPU, sau đó kích hoạt các đoạn mã chạy trực tiếp trên các nhân của GPU.

2. Vòng đời của Graphics Pipeline (Đường ống đồ họa)

Graphics Pipeline là quy trình chuyển đổi các dữ liệu hình học 3D trừu tượng thành hình ảnh 2D raster hiển thị trên màn hình của bạn. Quy trình này gồm các bước chính sau:

1. Vertex Specification (Xác định Đỉnh): CPU chuẩn bị dữ liệu tọa độ đỉnh (Vertices), màu sắc, tọa độ UV và nạp vào GPU thông qua các Vertex Buffer Objects (VBO).
2. Vertex Shader (Bộ tô bóng đỉnh): Là một đoạn chương trình chạy trên GPU cho từng đỉnh một. Nhiệm vụ chính của Vertex Shader là biến đổi tọa độ đỉnh từ không gian 3D của mô hình về không gian Clip Space 2D định dạng chuẩn của OpenGL (`gl_Position`).
3. Primitive Assembly (Ráp nối thực thể): GPU ráp các đỉnh đơn lẻ thành các hình hình học cơ bản (Primitives) như đường thẳng, hình tam giác tùy theo lệnh vẽ.
4. Rasterization (Số hóa mảng lưới): Quá trình nội suy biến đổi hình tam giác vector thành các điểm ảnh (Fragments) tương ứng trên lưới màn hình. Tại bước này, các thuộc tính của đỉnh (như màu sắc) sẽ được nội suy tuyến tính (Linear Interpolation) dựa trên khoảng cách của pixel đó tới các đỉnh.
5. Fragment Shader (Bộ tô bóng điểm ảnh): Chạy cho từng fragment được sinh ra từ quá trình Rasterization. Nhiệm vụ duy nhất của nó là trả về màu sắc cuối cùng của pixel (`gl_FragColor`).
6. Per-Sample Operations (Thao tác trên mẫu thử): Kiểm tra chiều sâu (Depth Test), kiểm tra khuôn (Stencil Test) để xác định xem pixel đó có bị che khuất bởi đối tượng khác hay không trước khi ghi vào Framebuffer.

// 1. VERTEX SHADER (GLSL ES 1.0)
attribute vec2 a_position; // Nhận từ Buffer
attribute vec3 a_color;    // Nhận từ Buffer
varying vec3 v_color;      // Truyền sang Fragment Shader

void main() {
    v_color = a_color; // Gán để bộ Rasterizer tự động nội suy màu
    gl_Position = vec4(a_position, 0.0, 1.0); // Chuyển sang Clip Space
}

// 2. FRAGMENT SHADER (GLSL ES 1.0)
precision mediump float;   // Thiết lập độ chính xác trung bình
varying vec3 v_color;      // Nhận giá trị màu đã nội suy từ Rasterizer

void main() {
    gl_FragColor = vec4(v_color, 1.0); // Màu RGBA cuối cùng của pixel
}

3. Vẽ hình tam giác màu đầu tiên: Từng bước cài đặt

Để vẽ một hình tam giác trong WebGL, chúng ta phải thiết lập một loạt các trạng thái (State Machine) trên GPU:

1. Khởi tạo canvas và lấy WebGL context.
2. Biên dịch Vertex Shader và Fragment Shader, sau đó liên kết chúng thành một WebGL Program.
3. Tạo Buffer dữ liệu (VBO) và đưa dữ liệu đỉnh/màu sắc của tam giác lên GPU.
4. Bật các thuộc tính đỉnh (vertex attribute pointers) để GPU biết cách đọc dữ liệu từ Buffer.
5. Xóa màn hình và thực hiện lệnh vẽ gl.drawArrays.

4. Câu hỏi trắc nghiệm ôn tập