Fragment Shader — qué es, tareas y principio de funcionamiento

¿Qué es Fragment Shader?

Fragment Shader (shader de fragmentos o píxeles) es una etapa programable del pipeline gráfico que calcula el color final de cada fragmento de la imagen. Un fragmento es un píxel potencial que se convierte en un píxel visible en la pantalla después de pasar las pruebas de profundidad y stencil.

Fragment Shader se ejecuta después de la rasterización, cuando los primitivos 3D (triángulos) ya se han convertido en un conjunto de fragmentos. El shader recibe atributos interpolados — coordenadas de textura, normales, colores que se calcularon en el Vertex Shader para los vértices del triángulo y se interpolaron linealmente para cada píxel dentro del triángulo.

Historia de la evolución de Fragment Shader

Antes de la aparición de los shaders programables (antes de DirectX 8 / OpenGL 2.0), el cálculo del color de los píxeles se realizaba mediante un pipeline fijo con un conjunto limitado de operaciones. El Fragment Shader programable apareció en 2001 y expandió radicalmente las capacidades gráficas: los desarrolladores obtuvieron control total sobre el color de cada píxel, lo que permitió implementar iluminación fotorrealista, materiales complejos y post-efectos.

¿Cómo funciona Fragment Shader?

Fragment Shader es lanzado por la GPU para cada fragmento generado por el rasterizador. Cada invocación del shader procesa un fragmento, lee sus datos de entrada, ejecuta código de usuario y escribe el valor de salida — el color del fragmento en formato RGBA.

Datos de entrada y salida

Los datos de entrada de Fragment Shader incluyen atributos interpolados del Vertex Shader (coordenadas de textura, normales, colores), variables uniform (fuentes de luz, matrices) y samplers de textura. Los datos de salida son el vector de color (gl_FragColor en OpenGL ES 2.0 o una variable definida por el usuario en ES 3.0), que se escribe en el búfer de color.

#version 300 es
precision mediump float;

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

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

Tareas principales de Fragment Shader

Fragment Shader es responsable de la calidad visual de la imagen. Todos los efectos que el usuario ve en la pantalla — color, sombras, reflejos, transparencia — se calculan en esta etapa del pipeline gráfico.

Texturizado

La operación más frecuente es muestrear el color de una textura utilizando coordenadas UV interpoladas. Sampler2D y la función texture() permiten obtener el color de un píxel de un atlas de texturas. El filtrado (bilineal, trilineal, anisotrópico) se controla mediante parámetros del sampler y afecta la nitidez de la imagen en diferentes ángulos de visión.

Iluminación Phong

El modelo de iluminación Phong se calcula en Fragment Shader por píxel, proporcionando reflejos más suaves que la iluminación por vértices (sombreado Gouraud). La iluminación Phong incluye tres componentes: ambiente, difusa y 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);
}

Post-efectos y blending

Fragment Shader permite aplicar post-procesamiento: corrección de color mediante tablas LUT, desenfoque (blur), efecto de resplandor (bloom) y tonemapping para renderizado HDR. Todos estos efectos funcionan a nivel de píxel y se ejecutan en tiempo real.

Rendimiento y optimización de Fragment Shader

El rendimiento de Fragment Shader es el principal factor que limita los FPS en los juegos móviles modernos. Dado que el shader se invoca para cada píxel, incluso un pequeño aumento en la complejidad del código puede provocar una caída notable en la frecuencia de cuadros.

Principales problemas de rendimiento

• Overdraw — redibujado del mismo píxel debido a la superposición de objetos. Especialmente crítico para objetos semitransparentes.
• Saltos condicionales — las bifurcaciones en Fragment Shader reducen la eficiencia de ejecución SIMD, ya que la GPU debe ejecutar ambas ramas.
• Muestreos de textura — cada muestreo de textura tiene una latencia de decenas de ciclos de reloj de la GPU. Minimizar el número de samplers acelera el shader.

Métodos de optimización de Fragment Shader

Para GPUs móviles (Qualcomm Adreno, ARM Mali) se recomienda: usar mediump precision para variables float, combinar muestreos de textura, aplicar pruebas early-z para descartar fragmentos invisibles antes de la ejecución del shader.

Fragment Shader vs Vertex Shader: comparación

Ambos tipos de shaders son programables por el desarrollador, pero trabajan en diferentes etapas del pipeline y resuelven diferentes tareas. Fragment Shader es significativamente más intensivo en recursos debido al número de invocaciones.

Ejemplos de código de Fragment Shader

Fragment Shader puede ser simple (muestreo de textura) o complejo (iluminación multicapa). Consideremos dos ejemplos prácticos: texturizado básico y un efecto de gradiente usando tiempo.

Texturizado básico en 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);
}

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