Render Pipeline

Semestre 02, 2026

Objetivo

Describir el render pipeline como la secuencia de etapas que convierte una escena 3D en una imagen 2D.
Distinguir las etapas programables de las etapas fijas del hardware.
Entender el vertex shader como la etapa que lleva cada vértice de su espacio local al clip space.
Definir los uniforms y diferenciarlos de los atributos por vértice y de los varyings interpolados.
Explicar qué es un fragmento y qué información transporta hacia el fragment shader.
Seguir el recorrido de un dato, desde el archivo del modelo hasta el píxel encendido.

Render Pipeline

Definición

Conjunto ordenado de etapas que transforma una escena 3D en la imagen 2D que aparece en la pantalla.

Funciona como una línea de ensamblaje, donde la salida de una etapa alimenta a la siguiente.

La primera etapa corre en la CPU y el resto dentro de la GPU.

El pipeline frente al ray tracer

Render pipeline

Atajo optimizado que proyecta la geometría sobre la pantalla y rellena los píxeles que cubre. Es rápido y por eso lo usa el hardware gráfico.

Ray tracer

Simulación física del recorrido de la luz. Es más fiel a la realidad y mucho más lento, porque cada rayo se resuelve contra toda la escena.

Usos del render pipeline

Convertir geometría, materiales y cámara en una imagen visible.

Aplicar traslaciones, rotaciones, escalas y proyecciones.

Simular la interacción de la luz con los materiales.

Integrar sombras, reflejos y transparencias.

Sostener tiempo real en videojuegos y simuladores.

Alcanzar máxima calidad en render offline para cine.

Las etapas del pipeline

flowchart TD
    A["1 Aplicacion (CPU)"] --> B["2 Vertex Shader"]
    B --> C["3 Primitive Assembly y Clipping"]
    C --> D["4 Rasterizacion"]
    D --> E["5 Fragment Shader"]
    E --> F["6 Operaciones por fragmento"]
    F --> G["Framebuffer"]
    classDef prog fill:#8839ef,stroke:#8839ef,color:#ffffff;
    class B,E prog

Las dos etapas resaltadas son las programables, donde se escribe un shader.

El orden es estricto, porque cada etapa consume lo que produjo la anterior.

El framebuffer es el destino final, donde queda la imagen del cuadro.

Etapas programables y etapas fijas

Etapa programable

Etapa cuyo comportamiento lo define un programa escrito por el desarrollador. Ese programa se llama shader y se ejecuta dentro de la GPU.

Etapa fija

Etapa implementada en el hardware. No se reescribe, solo se configura con parámetros como el modo de dibujo o la función de profundidad.

Las etapas fijas son fijas porque así corren mucho más rápido, a costa de flexibilidad.

Naturaleza de cada etapa

Etapa	Dónde corre	Naturaleza
Aplicación	CPU	Código propio
Vertex shader	GPU	Programable
Primitive assembly y clipping	GPU	Fija
Rasterización	GPU	Fija
Fragment shader	GPU	Programable
Operaciones por fragmento	GPU	Fija configurable

Aplicación

Definición

Primera etapa del pipeline. Se ejecuta en el procesador principal y prepara todos los datos que la GPU necesitará para dibujar el cuadro.

Los vértices de cada modelo cargado desde disco.

La transformación que ubica a cada objeto en la escena.

La posición y la orientación de la cámara.

Los parámetros globales del cuadro, que son los uniforms.

El draw call

Definición

Orden que la aplicación envía a la GPU para que dibuje un conjunto de vértices con un programa de shaders y una configuración determinados.

Se emite a través de una API gráfica como OpenGL, DirectX, Vulkan o Metal.

Cada draw call tiene un costo fijo, así que los motores agrupan objetos para emitir la menor cantidad posible.

Vertex Shader

Definición

Primera etapa programable de la GPU. Recibe un vértice con sus atributos y devuelve ese mismo vértice transformado al clip space.

Se ejecuta una vez por cada vértice del modelo.

Los vértices se procesan en paralelo, sin conocerse entre sí.

El vértice y sus atributos

Vértice

Punto del espacio que define una esquina de la geometría del modelo.

Atributo

Dato adjunto a un vértice, distinto para cada uno, que la aplicación envía junto con la posición.

Posición: dónde está el vértice en el espacio del modelo.

Normal: hacia dónde mira la superficie en ese vértice.

Coordenada UV: qué punto de la textura le corresponde.

Color: tinte propio del vértice, cuando el modelo lo trae.

Los espacios de coordenadas

flowchart TD
    A["Model space"] -->|"Matriz de modelo"| B["World space"]
    B -->|"Matriz de vista"| C["View space"]
    C -->|"Matriz de proyeccion"| D["Clip space"]
    D -->|"Perspective divide"| E["NDC"]
    E -->|"Viewport transform"| F["Screen space"]
    classDef vs fill:#8839ef,stroke:#8839ef,color:#ffffff;
    class B,C,D vs

El vertex shader produce los tres espacios resaltados y termina en clip space.

Cada flecha es una multiplicación por una matriz de 4x4.

Los dos últimos saltos los hace el hardware, sin código del programador.

Qué significa cada espacio

Espacio	Significado
Model space	Coordenadas tal como las guardó el archivo del modelo, con su propio origen.
World space	El objeto ya colocado en la escena, junto a los demás.
View space	La escena vista desde la cámara, que queda en el origen.
Clip space	El resultado de aplicar la proyección, listo para recortarse.
NDC	Coordenadas normalizadas en el rango de menos uno a uno.
Screen space	Píxeles reales dentro de la ventana.

Matriz de modelo

Definición

Matriz de 4x4 que aplica traslación, rotación y escala a los vértices para colocar el objeto en su lugar dentro de la escena.

Traslación de cinco unidades sobre el eje x.

$$ M = \begin{bmatrix} 1 & 0 & 0 & 5 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \qquad M \cdot (x, y, z, 1) = (x+5,\; y,\; z,\; 1) $$

Matriz de modelo en vivo

traslación en x traslación en y rotación en grados escala

Matriz de vista

Definición

Matriz que mueve toda la escena para que la cámara quede en el origen mirando hacia el eje z negativo.

Se arma con la rotación y la traslación inversas de la cámara.

En la práctica se construye con lookAt, que recibe el ojo, el objetivo y el vector hacia arriba.

Las nuevas coordenadas son relativas a la posición de la cámara

La cámara y el view space

cámara en x cámara en z yaw en grados

Matriz de proyección

Definición

Matriz que define el frustum, que es el volumen de espacio visible, y aplasta ese volumen dentro del cubo del clip space.

$$ P = \begin{bmatrix} \tfrac{1}{\tan(\theta/2)\,a} & 0 & 0 & 0 \\ 0 & \tfrac{1}{\tan(\theta/2)} & 0 & 0 \\ 0 & 0 & \tfrac{f+n}{n-f} & \tfrac{2fn}{n-f} \\ 0 & 0 & -1 & 0 \end{bmatrix} $$

Parámetros del frustum

$\theta$ es el campo de visión, el ángulo vertical que abarca la cámara.

$a$ es el aspect ratio, el ancho del viewport dividido entre su alto.

$n$ es el near plane, el límite más cercano que se dibuja.

$f$ es el far plane, el límite más lejano que se dibuja.

El frustum en vivo

campo de visión near plane far plane

La transformación completa

$$ P_{clip} = P \cdot V \cdot M \cdot P_{objeto} $$

$M$ ubica el modelo dentro de la escena.

$V$ coloca esa escena frente a la cámara.

$P$ aplica la perspectiva y produce el clip space.

El producto se lee de derecha a izquierda, porque el vértice entra por la derecha.

Coordenadas homogéneas

Definición

Representación de un punto de tres dimensiones con una cuarta componente $w$, que permite expresar la traslación como una multiplicación de matrices.

Un punto se escribe $(x, y, z, 1)$ y sí se traslada.

Una dirección se escribe $(x, y, z, 0)$ y no se traslada.

El papel de la componente w

traslación en x

Transformación de normales

Regla

Las normales no se transforman con la matriz de modelo, sino con su inversa transpuesta.

$$ n' = (M^{-1})^{T} n $$

Con una escala no uniforme, usar $M$ dejaría la normal torcida y la iluminación saldría mal.

La normal es perpendicular a la superficie en el punto

La salida del vertex shader

Salida obligatoria

La posición del vértice en clip space, que en OpenGL se escribe en la variable gl_Position.

Salida opcional

Los atributos que seguirán viajando hacia el fragment shader, como la normal, la coordenada UV y el color.

El vertex shader no puede crear ni eliminar vértices, solo transformar el que recibe.

Uniforms

Definición

Variable global de un programa de shaders cuyo valor fija la aplicación desde la CPU y que permanece constante durante todo el draw call.

Es visible desde cualquier etapa del programa de shaders, tanto el vertex como el fragment.

Dentro del shader es de solo lectura, porque ninguna invocación puede modificarlo.

Conserva su valor entre cuadros hasta que la aplicación lo actualiza.

Atributos, uniforms y varyings

Dato	Quién lo produce	Cada cuánto cambia
Atributo	La aplicación, en el buffer de vértices	En cada vértice
Uniform	La aplicación, antes del draw call	En cada draw call
Varying	El vertex shader	En cada fragmento

Varying

Valor que el vertex shader entrega y que la rasterización interpola a lo largo de la primitiva antes de pasarlo al fragment shader.

Uniforms típicos

Las matrices de modelo, vista y proyección.

La posición, el color y la intensidad de la luz.

La posición de la cámara en el mundo.

El tiempo transcurrido desde que arrancó el programa.

La textura que se va a muestrear, enviada como sampler.

El ancho y el alto del viewport en píxeles.

Ejemplo de uniform

Enunciado

Se requiere que una esfera lata, creciendo y encogiéndose sin parar, sin volver a cargar el modelo ni tocar sus vértices en la CPU.

La aplicación envía el tiempo como uniform antes de cada draw call.

El vertex shader escala la posición con un factor que depende de ese tiempo.

Los vértices originales nunca cambian, porque lo que cambia es un único número por cuadro.

Un uniform para toda la malla

tiempo animar

Primitive Assembly

Definición

Etapa que agrupa los vértices ya transformados para formar primitivas, que son las figuras básicas que el hardware sabe dibujar.

El vertex shader trabaja vértice por vértice, de forma aislada.

La pantalla, en cambio, se llena con figuras completas y no con puntos sueltos.

Tipos de primitivas

Punto, formado por un vértice.

Línea, formada por dos vértices.

Triángulo, formado por tres vértices.

El triángulo domina el pipeline entero.

Por qué el triángulo

Tres puntos siempre definen un plano y la figura nunca queda cóncava, así que la interpolación de atributos sobre su superficie está bien definida.

Modos de dibujo

Modo	Cómo agrupa los vértices
GL_POINTS	Cada vértice se dibuja por separado.
GL_LINES	Cada par de vértices forma una línea independiente.
GL_LINE_STRIP	Cada vértice se encadena con el anterior.
GL_LINE_LOOP	Igual que la cadena, pero el último se une con el primero.
GL_TRIANGLES	Cada grupo de tres vértices forma un triángulo.
GL_TRIANGLE_FAN	Todos los triángulos comparten el primer vértice.

Face culling

Definición

Descarte de los triángulos que le dan la espalda a la cámara, decidido por el orden en que están escritos sus tres vértices.

$$ s = (x_2 - x_1)(y_3 - y_1) - (y_2 - y_1)(x_3 - x_1) $$

El signo de $s$ revela si el orden de los vértices quedó horario o antihorario, y con eso se sabe qué cara se ve.

El orden de los vértices

Arrastrar los puntos sobre el lienzo.

Clipping

Definición

Recorte de las primitivas contra el frustum, de modo que solo sobrevive la parte que cae dentro del volumen visible.

Una primitiva completamente fuera se descarta sin más trámite.

Una primitiva que cruza el borde se parte en triángulos nuevos que sí caben.

El ahorro es grande, porque rasterizar lo invisible costaría igual que rasterizar lo visible.

El recorte en vivo

Arrastrar los puntos sobre el lienzo.

Perspective divide

Definición

División de las tres primeras componentes del vértice entre su componente $w$, que convierte el clip space en coordenadas normalizadas.

$$ (x_{ndc},\; y_{ndc},\; z_{ndc}) = \left(\frac{x}{w},\; \frac{y}{w},\; \frac{z}{w}\right) $$

Aquí nace la perspectiva, porque la proyección deja $w$ proporcional a la distancia y lo lejano termina encogido.

La división por w

profundidad del vértice altura del vértice

Viewport transform

Definición

Mapeo final que lleva las coordenadas normalizadas al rango de píxeles de la ventana donde se está dibujando.

$$ x_{pantalla} = \frac{x_{ndc} + 1}{2} \cdot ancho \qquad y_{pantalla} = \frac{1 - y_{ndc}}{2} \cdot alto $$

El eje vertical se invierte, porque en NDC crece hacia arriba y en pantalla crece hacia abajo.

De NDC a píxeles

Arrastrar los puntos sobre el lienzo.

Rasterización

Definición

Conversión de cada primitiva en el conjunto de fragmentos que cubre sobre la cuadrícula de la pantalla.

Es el salto de la geometría continua a la cuadrícula discreta de píxeles.

En el camino interpola los atributos que venían en los vértices.

El bounding box

Definición

Rectángulo mínimo alineado a los ejes que contiene por completo al triángulo que se va a rasterizar.

Se obtiene con el mínimo y el máximo de las coordenadas de los tres vértices.

Solo se examinan los píxeles de ese rectángulo, en vez de recorrer la pantalla entera.

Fragmentos que cubre el triángulo

Arrastrar los puntos sobre el lienzo.

Coordenadas baricéntricas

Definición

Tres pesos que expresan un punto del triángulo como combinación de sus vértices, calculados como razones de áreas.

$$ \lambda_1 = \frac{A_{PBC}}{A_{ABC}}, \qquad \lambda_2 = \frac{A_{PCA}}{A_{ABC}}, \qquad \lambda_3 = \frac{A_{PAB}}{A_{ABC}} $$

Los tres pesos suman uno, y el punto está dentro del triángulo solo si ninguno sale negativo.

Los pesos dentro del triángulo

Arrastrar los puntos sobre el lienzo.

Interpolación de atributos

Cualquier atributo del punto interior se arma con los mismos tres pesos.

$$ A_P = \lambda_1 A_A + \lambda_2 A_B + \lambda_3 A_C $$

Coordenadas UV, para saber qué texel tocar.

Normales, para que la iluminación varíe suave.

Colores, para los degradados entre vértices.

Profundidad, que decide después qué fragmento gana.

Ejemplo de interpolación

Un triángulo con coordenadas UV $A=(0.5,\,0)$, $B=(0,\,1)$ y $C=(1,\,1)$. El punto $P$ cae justo en el centro, con pesos iguales.

$$ u_P = 0.5\left(\tfrac{1}{3}\right) + 0\left(\tfrac{1}{3}\right) + 1\left(\tfrac{1}{3}\right) = 0.5 \qquad v_P = 0\left(\tfrac{1}{3}\right) + 1\left(\tfrac{1}{3}\right) + 1\left(\tfrac{1}{3}\right) \approx 0.67 $$

El fragmento del centro recibe la UV $(0.5,\,0.67)$, y con ella el fragment shader irá a buscar su color en la textura.

Del triángulo a la textura

Arrastrar los puntos sobre el lienzo.

El fragmento

Definición

Paquete de datos que la rasterización genera por cada posición de pantalla cubierta por una primitiva. Es un candidato a píxel.

Un fragmento no es un píxel, porque todavía puede descartarse.

Un mismo píxel puede recibir varios fragmentos de objetos distintos.

Qué transporta un fragmento

Posición: en qué celda de la pantalla cae.

Profundidad: qué tan lejos está de la cámara.

Normal: la orientación interpolada de la superficie.

Coordenada UV: el punto de la textura que le toca.

Color: el tinte heredado de los vértices.

Posición original: dónde estaba el punto en el mundo.

Fragment Shader

Entrada

Un fragmento con todos sus atributos ya interpolados, más los uniforms del draw call.

Salida

Un color de cuatro componentes, que son rojo, verde, azul y alfa.

Es la segunda etapa programable, y se ejecuta millones de veces por cuadro, así que su costo domina el rendimiento.

Trabajo del fragment shader

Muestrear la textura en la coordenada UV del fragmento.

Calcular la iluminación con el modelo de Phong.

Aplicar sombras, transparencias y reflejos.

Descartar el fragmento, cuando el material lo deja invisible.

Ejemplo de muestreo

Enunciado

Un fragmento llega con la coordenada $(u, v) = (0.5,\, 0.25)$ y el material tiene asignada una textura de 512 por 512 píxeles.

$$ x = 0.5 \cdot 512 = 256 \qquad y = 0.25 \cdot 512 = 128 $$

El color del fragmento sale del texel que está en la fila 128 y la columna 256 de la imagen.

Operaciones por fragmento

Definición

Serie de pruebas fijas que decide si el color calculado por el fragment shader llega al framebuffer y cómo se combina con lo que ya estaba ahí.

Depth test, para resolver qué objeto queda adelante.

Stencil test, para limitar el dibujo a una región.

Blending, para mezclar colores translúcidos.

Depth test

Definición

Comparación entre la profundidad del fragmento y la que ya estaba guardada en esa posición. El fragmento solo pasa si está más cerca de la cámara.

La profundidad vive en el z-buffer, que es una matriz del tamaño de la pantalla con un valor por píxel.

Gracias a él los objetos pueden enviarse en cualquier orden y la oclusión sale correcta.

El depth test en vivo

depth test activo dibujar A al final

Stencil test y blending

Stencil test

Prueba contra una máscara guardada por píxel, que permite dibujar solo dentro de una región marcada. Se usa en espejos, recortes y siluetas.

Blending

Mezcla del color del fragmento con el que ya ocupaba el píxel, ponderada por el canal alfa. Es lo que produce el vidrio, el humo y las interfaces translúcidas.

Framebuffer

Definición

Región de memoria que guarda el color de cada píxel de la imagen final, junto con los buffers auxiliares de profundidad y stencil.

Escribir en él es el último paso del pipeline.

Cuando el cuadro termina, su contenido se muestra en la pantalla.

Recorrido de un dato

Etapa	Entrada	Salida
Aplicación	Archivo del modelo	Vértices y uniforms
Vertex shader	Un vértice	Vértice en clip space
Primitive assembly	Vértices sueltos	Triángulos
Clipping	Triángulos	Triángulos visibles
Rasterización	Triángulos	Fragmentos interpolados
Fragment shader	Un fragmento	Un color RGBA

Glosario de la etapa geométrica

Término	Definición
Shader	Programa que corre en la GPU dentro de una etapa programable.
Atributo	Dato que acompaña a un vértice y cambia en cada uno.
Uniform	Valor global que la CPU fija y permanece igual durante el draw call.
Varying	Salida del vertex shader que se interpola hacia el fragment shader.
Clip space	Espacio donde queda el vértice tras aplicar la proyección.
Frustum	Volumen de espacio que la cámara alcanza a ver.

Glosario de la etapa de píxeles

Término	Definición
Primitiva	Figura básica que el hardware dibuja, punto, línea o triángulo.
Rasterización	Conversión de una primitiva en los fragmentos que cubre.
Fragmento	Candidato a píxel, con todos sus atributos interpolados.
Texel	Celda individual de una textura.
Z-buffer	Matriz que guarda la profundidad ya escrita en cada píxel.
Framebuffer	Memoria donde se arma la imagen final del cuadro.