Nhảy tới nội dung

Xử lý hình ảnh trong WebGL (Image Processing)

Để vẽ và xử lý hình ảnh trong WebGL, chúng ta sử dụng Texture. Tương tự như tọa độ clip space, WebGL sử dụng tọa độ texture nằm trong khoảng từ 0.0 đến 1.0 bất kể kích thước thực tế của ảnh.

Đọc Texture từ Fragment Shader​

Vertex Shader truyền tọa độ texture qua biến varying:

attribute vec2 a_texCoord;
varying vec2 v_texCoord;
 
void main() {
   v_texCoord = a_texCoord;
}

Fragment Shader sử dụng texture2D để lấy mẫu màu từ Texture:

precision mediump float;
 
uniform sampler2D u_image;
varying vec2 v_texCoord;
 
void main() {
   // Đọc màu từ texture tại tọa độ v_texCoord
   gl_FragColor = texture2D(u_image, v_texCoord);
}

Xử lý hiệu ứng trên hình ảnh (Image Processing Effects)​

Bằng cách chỉnh sửa Fragment Shader, bạn có thể áp dụng các hiệu ứng xử lý hình ảnh tuyệt vời trên GPU như:

  • Đảo ngược màu sắc (Invert colors): gl_FragColor = vec4(1.0 - color.rgb, color.a);
  • Chuyển thành ảnh trắng đen (Grayscale): Tính trung bình cộng hoặc độ sáng của các kênh R, G, B.
  • Làm mờ (Blur) / Tạo sắc nét (Sharpen): Sử dụng ma trận Kernel để tính toán màu từ các điểm ảnh lân cận.