Nền tảng WebGL (WebGL Fundamentals)

WebGL thường được hiểu nhầm là một API 3D đơn thuần. Nhưng thực tế, WebGL chỉ là một công cụ quét/xử lý điểm ảnh (rasterization engine). Nó vẽ các điểm (points), đường thẳng (lines) và hình tam giác (triangles) dựa trên mã nguồn do bạn cung cấp.

WebGL chạy trực tiếp trên GPU của máy tính. Do đó bạn cần cung cấp mã lệnh chạy trên GPU dưới dạng các cặp hàm: Vertex Shader và Fragment Shader, được viết bằng ngôn ngữ GLSL. Đi cùng nhau, cặp hàm này gọi là một Program.

• Vertex Shader: Nhiệm vụ tính toán tọa độ đỉnh (vertex positions).
• Fragment Shader: Nhiệm vụ tính toán màu sắc cho từng điểm ảnh (pixel/fragment) của hình đồ họa đang vẽ.

Tọa độ Không gian Clip (Clip Space Coordinates)

Trong WebGL, tọa độ không gian Clip luôn nằm trong khoảng từ -1 đến +1 trên cả hai trục (X và Y), bất kể kích thước thực tế của thẻ canvas là bao nhiêu.

// Ví dụ về một Vertex Shader đơn giản
attribute vec4 a_position;

void main() {
  gl_Position = a_position;
}

// Ví dụ về một Fragment Shader đơn giản
precision mediump float;

void main() {
  gl_FragColor = vec4(1, 0, 0.5, 1); // Trả về màu hồng đỏ
}