Fragment Shader — nó là gì, nhiệm vụ và nguyên lý hoạt động

Fragment Shader là gì?

Fragment Shader (trình đổ bóng mảnh hay pixel) là một giai đoạn có thể lập trình của pipeline đồ họa tính toán màu sắc cuối cùng của mỗi mảnh hình ảnh. Một mảnh là một pixel tiềm năng trở thành pixel hiển thị trên màn hình sau khi vượt qua các kiểm tra độ sâu và stencil.

Fragment Shader thực thi sau quá trình raster hóa, khi các nguyên thủy 3D (tam giác) đã được chuyển đổi thành tập hợp các mảnh. Trình đổ bóng nhận các thuộc tính nội suy — tọa độ họa tiết, pháp tuyến, màu sắc đã được tính toán trong Vertex Shader cho các đỉnh tam giác và nội suy tuyến tính cho mỗi pixel bên trong tam giác.

Lịch sử tiến hóa của Fragment Shader

Trước khi xuất hiện các trình đổ bóng có thể lập trình (trước DirectX 8 / OpenGL 2.0), việc tính toán màu pixel được thực hiện bởi một pipeline cố định với một tập hợp hạn chế các thao tác. Fragment Shader có thể lập trình xuất hiện vào năm 2001 và mở rộng triệt để khả năng đồ họa: các nhà phát triển có được toàn quyền kiểm soát màu sắc của mỗi pixel, cho phép triển khai chiếu sáng chân thực, vật liệu phức tạp và các hiệu ứng hậu kỳ.

Fragment Shader hoạt động như thế nào?

Fragment Shader được GPU khởi chạy cho mỗi mảnh do bộ raster hóa tạo ra. Mỗi lần gọi trình đổ bóng xử lý một mảnh, đọc dữ liệu đầu vào, thực thi mã người dùng và ghi giá trị đầu ra — màu sắc của mảnh ở định dạng RGBA.

Dữ liệu đầu vào và đầu ra

Dữ liệu đầu vào của Fragment Shader bao gồm các thuộc tính nội suy từ Vertex Shader (tọa độ họa tiết, pháp tuyến, màu sắc), biến uniform (nguồn sáng, ma trận) và bộ lấy mẫu họa tiết. Dữ liệu đầu ra là vector màu (gl_FragColor trong OpenGL ES 2.0 hoặc biến do người dùng định nghĩa trong ES 3.0), được ghi vào bộ đệm màu.

#version 300 es
precision mediump float;

in vec2 vTexCoord;
uniform sampler2D uTexture;
out vec4 fragColor;

void main() {
    fragColor = texture(uTexture, vTexCoord);
}

Các nhiệm vụ chính của Fragment Shader

Fragment Shader chịu trách nhiệm về chất lượng hình ảnh. Tất cả các hiệu ứng mà người dùng thấy trên màn hình — màu sắc, bóng đổ, phản chiếu, độ trong suốt — đều được tính toán ở giai đoạn này của pipeline đồ họa.

Tạo họa tiết

Thao tác phổ biến nhất là lấy mẫu màu từ họa tiết bằng tọa độ UV nội suy. Sampler2D và hàm texture() cho phép lấy màu pixel từ atlas họa tiết. Lọc (bilinear, trilinear, anisotropic) được kiểm soát thông qua tham số bộ lấy mẫu và ảnh hưởng đến độ sắc nét của hình ảnh ở các góc nhìn khác nhau.

Chiếu sáng Phong

Mô hình chiếu sáng Phong được tính toán trong Fragment Shader cho mỗi pixel, tạo ra các điểm sáng mượt hơn so với chiếu sáng đỉnh (tô bóng Gouraud). Chiếu sáng Phong bao gồm ba thành phần: môi trường (ambient), khuếch tán (diffuse) và phản chiếu (specular).

// Fragment shader with Phong lighting
in vec3 vNormal;
in vec3 vPosition;
uniform vec3 uLightDir;
uniform vec3 uLightColor;

void main() {
    vec3 norm = normalize(vNormal);
    float diff = max(dot(norm, uLightDir), 0.0);
    fragColor = vec4(uLightColor * diff, 1.0);
}

Hiệu ứng hậu kỳ và hòa trộn

Fragment Shader cho phép áp dụng xử lý hậu kỳ: hiệu chỉnh màu qua bảng tra cứu (LUT), làm mờ (blur), hiệu ứng phát sáng (bloom) và tonemapping cho kết xuất HDR. Tất cả các hiệu ứng này hoạt động ở cấp độ pixel và thực thi trong thời gian thực.

Hiệu suất và tối ưu hóa Fragment Shader

Hiệu suất của Fragment Shader là yếu tố chính giới hạn FPS trong các game di động hiện đại. Vì trình đổ bóng được gọi cho mỗi pixel, ngay cả sự gia tăng nhỏ về độ phức tạp mã cũng có thể dẫn đến giảm tốc độ khung hình đáng kể.

Các vấn đề hiệu suất chính

• Overdraw — vẽ lại cùng một pixel do chồng lấn đối tượng. Đặc biệt nghiêm trọng với đối tượng bán trong suốt.
• Rẽ nhánh có điều kiện — rẽ nhánh trong Fragment Shader làm giảm hiệu quả thực thi SIMD, vì GPU phải thực thi cả hai nhánh.
• Lấy mẫu họa tiết — mỗi lần lấy mẫu họa tiết có độ trễ hàng chục chu kỳ xung nhịp GPU. Giảm thiểu số lượng bộ lấy mẫu giúp tăng tốc trình đổ bóng.

Phương pháp tối ưu hóa Fragment Shader

Đối với GPU di động (Qualcomm Adreno, ARM Mali), khuyến nghị: sử dụng mediump precision cho biến float, kết hợp các lần lấy mẫu họa tiết, áp dụng kiểm tra early-z để loại bỏ các mảnh không nhìn thấy trước khi thực thi trình đổ bóng.

Fragment Shader vs Vertex Shader: so sánh

Cả hai loại trình đổ bóng đều có thể được lập trình bởi nhà phát triển, nhưng chúng hoạt động ở các giai đoạn khác nhau của pipeline và giải quyết các tác vụ khác nhau. Fragment Shader tốn nhiều tài nguyên hơn đáng kể do số lần gọi.

Ví dụ mã Fragment Shader

Fragment Shader có thể đơn giản (lấy mẫu họa tiết) hoặc phức tạp (chiếu sáng nhiều lớp). Hãy xem xét hai ví dụ thực tế: tạo họa tiết cơ bản và hiệu ứng chuyển màu sử dụng thời gian.

Tạo họa tiết cơ bản trong GLSL

#version 300 es
precision mediump float;
in vec2 vTexCoord;
in vec3 vColor;
uniform sampler2D uDiffuseMap;
out vec4 fragColor;

void main() {
    vec4 texColor = texture(uDiffuseMap, vTexCoord);
    fragColor = texColor * vec4(vColor, 1.0);
}

Ví dụ trong Metal Shading Language

#include <metal_stdlib>
using namespace metal;

struct FragmentIn {
    float2 texCoord;
    float3 normal;
};

fragment float4
fragmentMain(FragmentIn in [[stage_in]],
              texture2d<float> tex [[texture(0)]]) {
    constexpr sampler s(filter = linear);
    float4 color = tex.sample(s, in.texCoord);
    return color;
}