Varyings
Redactado por
Sebastian V. Fecha de publicación
10/04/2026
Tiempo de lectura
6 min
Tema
Shaders GLSL
El puente entre el Vértice y el Píxel
Ya sabes cómo mover los vértices de una figura (Vertex Shader) y cómo pintar cada píxel (Fragment Shader). Pero, ¿qué pasa si quieres pintar un píxel basándote en lo que le pasó a su vértice correspondiente? Por ejemplo, ¿qué tal si quieres pintar de blanco los picos altos de una montaña, y de verde los valles bajos?
¿Qué es un Varying?
Un Varying es una variable que sirve exclusivamente para pasar información desde el Vertex Shader hacia el Fragment Shader. No puedes enviarla al revés (del fragment al vertex).
Se llama "varying" (variante) porque la GPU hace algo mágico: la interpola. Si le envías un valor `1.0` en el vértice izquierdo y `0.0` en el vértice derecho, el Fragment Shader no recibe un salto brusco. Recibirá `0.5` exactamente en el píxel del medio. ¡Transiciones automáticas suaves!
Cómo se declara
A diferencia de los uniforms que vienen de JavaScript, los varyings se declaran en la parte superior de ambos shaders con el mismo nombre y tipo de dato. En el Vertex Shader le asignas el valor, y en el Fragment Shader lo lees.
Consejo profesional
Una convención profesional es nombrar todas tus variables varying empezando con la letra 'v' minúscula. Por ejemplo: vUv, vElevation, vPosition. Así, cuando leas tu Fragment Shader, sabrás inmediatamente que ese valor fue calculado y enviado por el Vertex Shader.
El mapa topográfico
varying float vElevation;
void main() {
vec3 newPosition = position;
// Generamos un 'valle' matemático
float elevation = sin(position.x * 5.0) * 0.5;
newPosition.y += elevation;
// Guardamos la elevación en el varying para enviarla al Fragment Shader
vElevation = elevation;
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(newPosition, 1.0);
}La altura (calculada en el Vertex Shader) determina el color (pintado en el Fragment Shader).
Errores comunes
Practica lo aprendido
Pasa datos del Vertex al Fragment.