Fragment Shader — 是什么、任务及工作原理

什么是Fragment Shader？

Fragment Shader（片段或像素着色器）— 是图形管线中可编程的阶段，计算图像每个片段的最终颜色。片段是一个潜在的像素，在通过深度和模板测试后，成为屏幕上可见的像素。

Fragment Shader在光栅化之后执行，此时三维图元（三角形）已被转换为片段集合。着色器在输入时接收插值属性 — 纹理坐标、法线、颜色，这些在顶点着色器中为三角形的顶点计算，并为其内部的每个像素进行线性插值。

Fragment Shader的演变历史

在可编程着色器出现之前（DirectX 8 / OpenGL 2.0之前），像素颜色的计算由固定管线以有限的操作集执行。可编程Fragment Shader于2001年出现，从根本上扩展了图形能力：开发人员获得了对每个像素颜色的完全控制，这使得实现照片级逼真的光照、复杂材质和后处理效果成为可能。

Fragment Shader如何工作？

Fragment Shader由GPU为光栅化器生成的每个片段启动。每次着色器调用处理一个片段，读取其输入数据，执行用户代码，并写入输出值 — 片段的颜色（RGBA格式）。

输入和输出数据

Fragment Shader的输入数据包括来自顶点着色器的插值属性（纹理坐标、法线、颜色）、uniform变量（光源、矩阵）和纹理采样器。输出数据 — 颜色向量（OpenGL ES 2.0中的gl_FragColor或ES 3.0中的用户变量），写入颜色缓冲区。

#version 300 es
precision mediump float;

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

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

Fragment Shader的主要任务

Fragment Shader负责图像的视觉质量。用户在屏幕上看到的所有效果 — 颜色、阴影、反射、透明度 — 都在图形管线的这个阶段计算。

纹理映射

最常见的操作 — 根据插值的UV坐标从纹理中获取颜色。Sampler2D和texture()函数允许从纹理图集中获取像素颜色。过滤（双线性、三线性、各向异性）通过采样器参数控制，并影响不同视角下的图像清晰度。

冯氏光照

冯氏光照模型（Phong shading）在Fragment Shader中为每个像素计算，比顶点光照（Gouraud shading）提供更平滑的高光。Phong lighting包括三个分量：环境光（ambient）、漫反射光（diffuse）和镜面反射光（specular）。

// 带有冯氏光照的片段着色器
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);
}

后处理效果和混合

Fragment Shader允许应用后处理：通过LUT表进行颜色校正、模糊（blur）、发光效果（bloom）以及HDR渲染的色调映射（tonemapping）。所有这些效果在像素级别工作，并实时执行。

Fragment Shader的性能与优化

Fragment Shader的性能 — 是现代移动游戏中限制FPS的主要因素。由于着色器为每个像素调用，即使代码复杂度的微小增加也可能导致帧率的显著下降。

主要性能问题

• 过度绘制（Overdraw） — 由于对象重叠导致同一像素的重复绘制。对于半透明对象尤其关键。
• 条件分支 — Fragment Shader中的分支降低了SIMD执行效率，因为GPU必须执行两条路径。
• 纹理采样 — 每次纹理采样（texture lookup）都有数十个GPU周期的延迟。最小化采样器数量可加速着色器。

Fragment Shader的优化方法

对于移动GPU（Qualcomm Adreno、ARM Mali），建议：使用mediump precision处理float变量，合并纹理采样，应用early-z测试以在着色器执行前丢弃不可见的片段。

Fragment Shader vs Vertex Shader：对比

两种着色器都由开发人员编程，但它们在管线的不同阶段工作并解决不同的任务。Fragment Shader由于调用次数多而显著更消耗资源。

Fragment Shader代码示例

Fragment Shader可以简单（纹理采样）或复杂（多层光照）。让我们来看两个实际示例：基础纹理映射和使用时间的渐变效果。

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);
}

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;
}