¿Qué son los Shaders?
Redactado por
Sebastian V. Fecha de publicación
21/03/2026
Tiempo de lectura
6 min
Tema
Shaders GLSL
El siguiente nivel del desarrollo creativo
Hasta ahora, con Three.js, hemos sido directores de cine. Hemos colocado cámaras, luces y actores (geometrías y materiales) en una escena, y le hemos pedido a Three.js que renderice la película. Pero, ¿qué pasa cuando quieres crear un efecto que no existe en el catálogo de materiales predefinidos? ¿Qué pasa si quieres que un cubo se derrita como gelatina o que el mar tenga espuma reactiva?
¿Qué es un Shader?
Un Shader no es más que un pequeño programa que se ejecuta directamente en la Tarjeta Gráfica (GPU), no en el Procesador (CPU) como el resto de tu código JavaScript.
La CPU es como un profesor súper inteligente que puede resolver problemas matemáticos complejos uno por uno, muy rápido. La GPU es como un ejército de un millón de hormigas obreras. No son tan listas, pero pueden hacer la misma tarea sencilla al mismo tiempo. Los shaders aprovechan este ejército para calcular la posición y el color de millones de píxeles simultáneamente, 60 veces por segundo.
¿Para qué sirven?
Los shaders son el secreto detrás de las webs que ganan premios Awwwards. Sirven para:
- Distorsionar imágenes al pasar el ratón por encima.
- Crear gradientes fluidos y orgánicos que nunca se repiten.
- Generar partículas mágicas y simulaciones físicas ligeras.
- Modificar la geometría de un modelo 3D en tiempo real (ej. hacer que respire).
Los dos tipos principales
Para dibujar algo en pantalla usando shaders, necesitas trabajar en equipo con dos programas diferentes:
- Vertex Shader: Se encarga de la forma. Mueve los vértices de tus geometrías.
- Fragment Shader: Se encarga del color. Pinta los píxeles (fragmentos) que quedan entre esos vértices.
Consejo profesional
Aprender Shaders requiere un cambio de mentalidad. Ya no programas con if/else o bucles for para cada cosa. Programas usando matemáticas puras (seno, coseno, vectores) para decirle a la GPU cómo calcular el estado final de un píxel ciego.
El poder de la GPU en acción
uniform float u_time;
uniform vec2 u_resolution;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec3 color = vec3(0.0);
// Matemáticas para colores orgánicos
color.r = 0.5 + 0.5 * sin(u_time * 0.5 + uv.x * 5.0);
color.g = 0.5 + 0.5 * cos(u_time * 0.6 + uv.y * 3.0);
color.b = 0.8 + 0.2 * sin(u_time * 0.4 + uv.x * 2.0 + uv.y * 4.0);
gl_FragColor = vec4(color, 1.0);
}Este gradiente orgánico y fluido no es un video ni un Canvas 2D. Es un Fragment Shader calculando el color de cada píxel matemáticamente usando la posición y el tiempo.
Errores comunes
Resumen del capítulo
Tu nuevo modelo mental.