Fragment Shader — o que é, tarefas e princípio de funcionamento

O que é Fragment Shader?

Fragment Shader (shader de fragmentos ou pixels) é um estágio programável do pipeline gráfico que calcula a cor final de cada fragmento da imagem. Um fragmento é um pixel potencial que se torna um pixel visível na tela após passar pelos testes de profundidade e stencil.

O Fragment Shader é executado após a rasterização, quando os primitivos 3D (triângulos) já foram convertidos em um conjunto de fragmentos. O shader recebe atributos interpolados — coordenadas de textura, normais, cores que foram calculadas no Vertex Shader para os vértices do triângulo e interpoladas linearmente para cada pixel dentro do triângulo.

História da evolução do Fragment Shader

Antes do advento dos shaders programáveis (antes do DirectX 8 / OpenGL 2.0), o cálculo da cor dos pixels era realizado por um pipeline fixo com um conjunto limitado de operações. O Fragment Shader programável surgiu em 2001 e expandiu radicalmente as capacidades gráficas: os desenvolvedores obtiveram controle total sobre a cor de cada pixel, permitindo implementar iluminação fotorrealista, materiais complexos e pós-efeitos.

Como funciona o Fragment Shader?

Fragment Shader é lançado pela GPU para cada fragmento gerado pelo rasterizador. Cada invocação do shader processa um fragmento, lê seus dados de entrada, executa código do usuário e escreve o valor de saída — a cor do fragmento no formato RGBA.

Dados de entrada e saída

Os dados de entrada do Fragment Shader incluem atributos interpolados do Vertex Shader (coordenadas de textura, normais, cores), variáveis uniform (fontes de luz, matrizes) e samplers de textura. Os dados de saída são o vetor de cor (gl_FragColor no OpenGL ES 2.0 ou uma variável definida pelo usuário no ES 3.0), que é escrito no buffer de cor.

#version 300 es
precision mediump float;

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

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

Principais tarefas do Fragment Shader

Fragment Shader é responsável pela qualidade visual da imagem. Todos os efeitos que o usuário vê na tela — cor, sombras, reflexos, transparência — são calculados neste estágio do pipeline gráfico.

Texturização

A operação mais frequente é amostrar a cor de uma textura usando coordenadas UV interpoladas. Sampler2D e a função texture() permitem obter a cor de um pixel de um atlas de texturas. A filtragem (bilinear, trilinear, anisotrópica) é controlada através de parâmetros do sampler e afeta a nitidez da imagem em diferentes ângulos de visão.

Iluminação Phong

O modelo de iluminação Phong é calculado no Fragment Shader por pixel, proporcionando realces mais suaves do que a iluminação por vértices (sombreado Gouraud). A iluminação Phong inclui três componentes: ambiente, difusa e especular.

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

Pós-efeitos e blending

O Fragment Shader permite aplicar pós-processamento: correção de cor através de tabelas LUT, desfoque (blur), efeito de brilho (bloom) e tonemapping para renderização HDR. Todos esses efeitos funcionam no nível do pixel e são executados em tempo real.

Desempenho e otimização do Fragment Shader

O desempenho do Fragment Shader é o principal fator que limita os FPS em jogos móveis modernos. Como o shader é invocado para cada pixel, mesmo um pequeno aumento na complexidade do código pode levar a uma queda notável na taxa de quadros.

Principais problemas de desempenho

• Overdraw — redesenho do mesmo pixel devido à sobreposição de objetos. Especialmente crítico para objetos semitransparentes.
• Desvios condicionais — ramificações no Fragment Shader reduzem a eficiência da execução SIMD, pois a GPU deve executar ambos os ramos.
• Amostragens de textura — cada amostragem de textura tem uma latência de dezenas de ciclos de clock da GPU. Minimizar o número de samplers acelera o shader.

Métodos de otimização do Fragment Shader

Para GPUs móveis (Qualcomm Adreno, ARM Mali) recomenda-se: usar mediump precision para variáveis float, combinar amostragens de textura, aplicar testes early-z para descartar fragmentos invisíveis antes da execução do shader.

Fragment Shader vs Vertex Shader: comparação

Ambos os tipos de shaders são programáveis pelo desenvolvedor, mas trabalham em diferentes estágios do pipeline e resolvem diferentes tarefas. Fragment Shader é significativamente mais intensivo em recursos devido ao número de invocações.

Exemplos de código Fragment Shader

Fragment Shader pode ser simples (amostragem de textura) ou complexo (iluminação multicamada). Vamos considerar dois exemplos práticos: texturização básica e um efeito gradiente usando tempo.

Texturização básica em 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);
}

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