Nhảy tới nội dung

Cách WebGL hoạt động (How WebGL Works)

Quá trình xử lý đồ họa trên GPU bao gồm 2 bước cơ bản:

  1. Xử lý đỉnh (Vertex Processing): Chuyển đổi dữ liệu các đỉnh thành tọa độ trong không gian clip (Clip space).
  2. Xử lý điểm ảnh (Fragment/Pixel Processing): Vẽ các điểm ảnh (pixels) dựa trên các tam giác tạo ra từ bước 1.
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 9;
gl.drawArrays(primitiveType, offset, count);

Sử dụng Varyings để truyền dữ liệu giữa Shaders​

Dữ liệu được nội suy (interpolate) tự động từ các đỉnh sang từng điểm ảnh trong hình tam giác thông qua các biến varying:

Vertex Shader:

varying vec4 v_color;

void main() {
    // Chuyển đổi từ clip space (-1.0 tới +1.0) sang color space (0.0 tới 1.0)
    v_color = gl_Position * 0.5 + 0.5;
}

Fragment Shader:

precision mediump float;
varying vec4 v_color;

void main() {
  gl_FragColor = v_color;
}

WebGL kết nối các biến varying có cùng tên và kiểu dữ liệu giữa Vertex Shader và Fragment Shader. Trong quá trình quét quét hình tam giác, WebGL tự động nội suy màu sắc giữa 3 đỉnh tạo nên hiệu ứng chuyển màu dải cầu vồng mượt mà.