Vertex Shader: qué es, tareas y principio de funcionamiento

¿Qué es Vertex Shader?

Vertex Shader es una etapa programable del pipeline gráfico que procesa cada vértice de un modelo 3D individualmente. Un vértice es un punto en un espacio tridimensional que contiene atributos: coordenadas xyz, normales, color y coordenadas de textura UV.

A diferencia del pipeline de función fija (fixed-function pipeline), donde las transformaciones se realizaban según un algoritmo rígido, Vertex Shader le da al desarrollador un control total sobre la transformación de vértices. Esto permite implementar animación procedural, deformación de modelos, skinning esquelético y cualquier transformación matemática en el lado de la GPU.

Posición de Vertex Shader en el pipeline gráfico

El pipeline gráfico de OpenGL ES incluye una secuencia de etapas desde los datos de entrada hasta la imagen final. Vertex Shader se encuentra después de la etapa de ensamblaje de vértices y antes de la etapa de rasterización. Cada vértice enviado desde la CPU a través de un búfer de vértices pasa por el Vertex Shader exactamente una vez, y el resultado se envía a la siguiente etapa para el ensamblaje de primitivas.

¿Cómo funciona Vertex Shader?

Vertex Shader recibe los atributos de los vértices desde el búfer de vértices (VBO) a través de punteros de atributos de vértice configurados en el código de la CPU. El desarrollador escribe el código del shader en GLSL (OpenGL Shading Language) o un lenguaje equivalente, que el controlador de la GPU compila en instrucciones de máquina para el chip específico.

Flujo de procesamiento de vértices

Para cada vértice, el Vertex Shader realiza secuencialmente tres operaciones: lectura de atributos de entrada — aplicación de transformaciones definidas por el desarrollador — escritura de resultados en variables de salida. La salida mínima requerida es la posición del vértice en el espacio de recorte (gl_Position). Todos los demás datos de salida (color, normales, coordenadas de textura) se interpolan y se pasan a la siguiente etapa — el Fragment Shader.

#version 300 es
in vec3 aPosition;
in vec2 aTexCoord;
uniform mat4 uMVP;
out vec2 vTexCoord;

void main() {
    gl_Position = uMVP * vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
}

Tareas principales de Vertex Shader

Vertex Shader resuelve una amplia gama de tareas del pipeline gráfico relacionadas con la transformación de geometría. Cada tarea se implementa mediante operaciones matemáticas sobre vectores y matrices, ejecutadas en paralelo para miles de vértices simultáneamente.

Transformación de coordenadas mediante MVP

La tarea básica y más común es multiplicar las coordenadas de los vértices por las matrices model, view y projection (MVP). La matriz MVP transforma un vértice del espacio local del modelo al espacio de recorte (clip space), que luego se normaliza y se convierte a coordenadas de pantalla en las etapas automáticas del pipeline.

Animación esquelética (Skinning)

Para personajes animados, el Vertex Shader implementa la animación esquelética (skinning). Cada vértice está vinculado a varios huesos con pesos específicos. Vertex blending — una suma ponderada de transformaciones de los huesos vinculados — permite deformar suavemente la piel del personaje cuando el esqueleto se mueve.

Deformación procedural de geometría

El Vertex Shader puede modificar la geometría basándose en el tiempo u otros parámetros uniform sin intervención de la CPU. Wave deformation, desplazamiento por ruido Perlin y efectos de ondas en el agua — todos estos efectos se implementan en el shader de vértices sin recargar la geometría desde la RAM.

Vertex Shader vs Fragment Shader: diferencias

Aunque ambos tipos de shaders son etapas programables del pipeline gráfico, Vertex Shader y Fragment Shader resuelven tareas fundamentalmente diferentes y operan en distintas etapas del procesamiento de imágenes.

La diferencia clave es la frecuencia de invocación. Vertex Shader se llama una vez por vértice, mientras que Fragment Shader se llama por cada fragmento (píxel). En una escena de alta resolución, el número de invocaciones de Fragment Shader supera al de Vertex Shader en miles de veces, lo que hace que la optimización de los shaders de píxeles sea aún más crítica.

Rendimiento y optimización de Vertex Shader

El rendimiento de Vertex Shader es críticamente importante para aplicaciones en tiempo real, especialmente en el desarrollo móvil con consumo de energía limitado. Los principales factores de rendimiento son el número de vértices, la complejidad del código del shader y el ancho de banda de la memoria de la GPU.

Factores que afectan al rendimiento

• Cantidad de vértices — el número de vértices enviados a la GPU por fotograma. Los modelos con millones de polígonos crean una alta carga en el shader de vértices.
• Complejidad del shader — el número de instrucciones en el shader. Los bucles anidados y las ramificaciones condicionales (divergencia) reducen el rendimiento paralelo de las unidades SIMD.
• Ancho de banda — la velocidad de lectura de datos de vértices desde la memoria de vídeo. El formato de los atributos (float32, float16, entero normalizado) afecta directamente al rendimiento.

Métodos de optimización de shaders de vértices

Para reducir la carga en el Vertex Shader, se utilizan los siguientes enfoques. Level of Detail (LOD) — cambio a versiones simplificadas de modelos cuando la cámara se aleja del objeto. Instancing — dibujo repetido de la misma geometría con diferentes matrices de transformación en una sola llamada de dibujo (draw call).

// Vertex Shader con soporte de instancing
in vec3 aPosition;
in mat4 aInstanceMatrix;
uniform mat4 uViewProjection;

void main() {
    vec4 worldPos = aInstanceMatrix * vec4(aPosition, 1.0);
    gl_Position = uViewProjection * worldPos;
}

Ejemplos de código Vertex Shader

Vertex Shader en diferentes API gráficas tiene una lógica similar, pero diferente sintaxis y convenciones de nomenclatura. Veamos la implementación de un shader de vértices básico en GLSL para OpenGL ES 3.0 y en Metal Shading Language para iOS y macOS.

Ejemplo en GLSL para OpenGL ES 3.0

#version 300 es
in vec4 position;
in vec3 normal;
in vec2 texcoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;

out vec3 vNormal;
out vec2 vTexCoord;
out vec3 vPosition;

void main() {
    vec4 mvPosition = modelViewMatrix * position;
    vPosition = mvPosition.xyz;
    vNormal = normalMatrix * normal;
    vTexCoord = texcoord;
    gl_Position = projectionMatrix * mvPosition;
}

Ejemplo en Metal Shading Language

#include <metal_stdlib>
using namespace metal;

struct VertexIn {
    float3 position [[attribute(0)]];
    float3 normal   [[attribute(1)]];
};

struct VertexOut {
    float4 position [[position]];
    float3 worldNormal;
};

vertex VertexOut
vertexMain(VertexIn in [[stage_in]],
           constant float4x4& mvp [[buffer(1)]]) {
    VertexOut out;
    out.position = mvp * float4(in.position, 1.0);
    out.worldNormal = in.normal;
    return out;
}