Shaders Animados
Redactado por
Sebastian V. Fecha de publicación
04/05/2026
Tiempo de lectura
6 min
Tema
Shaders GLSL
El reloj de la GPU
Hemos usado el tiempo antes, pero aquí profundizaremos en su poder. Un u_time que se incrementa en cada frame es el motor absoluto de la vida en los Shaders. Funciona como un contador de segundos desde que la página cargó.
El poder de las funciones periódicas
Si multiplicas una coordenada UV por el tiempo (vUv.x * u_time), el shader explotará visualmente en un borrón estroboscópico casi de inmediato. El tiempo crece hasta el infinito. Necesitas atrapar el tiempo en un ciclo repetitivo.
Aquí es donde brillan las funciones matemáticas como sin(), cos(), o fract(). Un sin(u_time) garantiza que, sin importar cuánto avance el reloj, tu valor siempre estará rebotando suavemente entre -1.0 y 1.0 en un loop perfecto.
Animación Espacial
Si mezclas u_time con las coordenadas espaciales (vUv.y + u_time), creas un efecto de desplazamiento continuo. Es la base de las cascadas, los túneles infinitos y el fuego.
El Patrón en Movimiento
uniform float u_time;
varying vec2 vUv;
void main() {
// Movemos las coordenadas X restando el tiempo
vec2 animatedUv = vUv;
animatedUv.x -= u_time * 0.5;
// fract() repite el valor entre 0.0 y 1.0 (crea las barras)
float pattern = fract(animatedUv.x * 5.0);
// Colores Genesis Pixel
vec3 colorA = vec3(0.04, 0.06, 0.1);
vec3 colorB = vec3(0.988, 0.364, 0.490);
// Usamos step para hacer cortes secos
vec3 finalColor = mix(colorA, colorB, step(0.5, pattern));
gl_FragColor = vec4(finalColor, 1.0);
}Barras infinitas creadas sumando u_time a las coordenadas UV antes de usar fract().
Errores comunes
Practica lo aprendido
Domina el pulso del tiempo.