Lección 2 de 10 · Animación en shaders
Capas drift
Cuatro planos a velocidades distintas. Profundidad geométrica.
Un solo objeto moviéndose se siente plano. Cinco capas a velocidades distintas crean la ilusión de profundidad, como postes pasando por la ventana del coche: los lejanos se arrastran, los cercanos vuelan.
El truco: cinco cuadrados, cada uno con su propia velocidad 0.04 + fi * 0.06. El primero apenas se mueve, el último cruza la pantalla. Tu cerebro lee velocidad como distancia.
Lento atrás, rápido enfrente. Parallax en 2D.
Parallax de velocidadMúltiples capas a velocidades distintas producen percepción de profundidad sin cámara 3D. Cada cuadrado entra al loop con su
fi y obtiene su propia spd.Cambia el
0.04 (velocidad base) a 0.0 y el primer cuadrado se congela en el fondo. Cambia el 0.06 (incremento por capa) a 0.2 y la diferencia entre lejos y cerca se vuelve extrema. A 0. y todos se mueven idénticos, la profundidad colapsa.El código
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
vec3 col = vec3(0.02, 0.02, 0.05);
for(int i = 0; i < 5; i++){
float fi = float(i);
float spd = 0.04 + fi * 0.06;
vec2 c = vec2(sin(T*spd+fi*2.2)*.8, cos(T*spd*.5+fi*1.8)*.6);
vec2 sz = vec2(.12+fi*.03, .07+fi*.02);
vec2 qs = abs(p-c+vec2(.06,-.08))-sz;
col *= smoothstep(-.02,.2,max(qs.x,qs.y));
vec2 q = abs(p-c)-sz;
float d = max(q.x, q.y);
float alpha = .45+fi*.15;
col += vec3(.1+fi*.2,.18+fi*.14,.8-fi*.12) * smoothstep(.01,-.01,d) * alpha;
col += vec3(.05+fi*.1,.1+fi*.07,.4-fi*.06) * exp(-max(d,0.)*4.) * .2;
}
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}