Fragment Shaders
Redactado por
Sebastian V. Fecha de publicación
02/04/2026
Tiempo de lectura
7 min
Tema
Shaders GLSL
Los pintores de la GPU
Si el Vertex Shader acomodó las esquinas de tu plano en la pantalla, ahora tienes un espacio vacío entre esos vértices. Aquí entra el Fragment Shader. La GPU lo ejecutará ciegamente millones de veces, una vez por cada píxel (fragmento) que forme parte de esa geometría en tu monitor.
Su única misión en la vida es responder: "¿Qué color RGBA le asigno a este píxel microscópico?".
La Variable Sagrada: gl_FragColor
Todo el código de tu Fragment Shader converge en un solo objetivo: construir un vector de 4 dimensiones (R, G, B, Alpha) y entregárselo a la variable reservada de salida gl_FragColor.
Pintar a ciegas
Imagina que tienes un millón de empleados trabajando en habitaciones oscuras sin verse entre ellos. Les dices: "Pinta de rojo si estás en la coordenada X mayor a 0.5". Ellos no saben qué están dibujando en conjunto. Tu habilidad en Fragment Shaders es inventar reglas matemáticas basadas en coordenadas para que, al ver a todos los empleados juntos, formen una imagen, una textura o un gradiente.
Consejo profesional
En un Material normal de Three.js (MeshStandardMaterial), Three.js inyecta toneladas de código de Fragment Shader complejo por debajo para calcular las sombras, luces y reflejos. Cuando usas un ShaderMaterial personalizado, TODO eso desaparece. Eres tú contra el negro puro. Tendrás que dibujar tu propia luz (o aprender a importar los 'chunks' de Three.js).
El Gradiente por Coordenadas
void main() {
// gl_FragCoord.xy nos da las coordenadas del píxel en la pantalla
// Aquí creamos una lógica inventada:
// Si la X es pequeña, será menos rojo.
// Haremos cálculos estáticos.
vec3 colorA = vec3(0.98, 0.36, 0.49); // Rosa FC5D7D
vec3 colorB = vec3(0.34, 0.69, 0.98); // Azul 57B0FB
// Dividimos la coordenada actual por una resolución ficticia para obtener un % entre 0 y 1
float mixValue = gl_FragCoord.x / 800.0;
// mix() es una función de GLSL equivalente a lerp o transiciones
vec3 colorFinal = mix(colorA, colorB, mixValue);
gl_FragColor = vec4(colorFinal, 1.0);
}Mezclando dos colores según en qué píxel X de la pantalla esté trabajando el shader.
Errores comunes
Practica lo aprendido
Sé el maestro del color.