Efectos Visuales Avanzados
Redactado por
Sebastian V. Fecha de publicación
08/05/2026
Tiempo de lectura
8 min
Tema
Shaders GLSL
El arsenal de trucos del Motion Designer
Los grandes efectos (Hologramas, Glitch, Aberración Cromática, Neón) rara vez son una sola fórmula secreta. Suelen ser la combinación de técnicas que ya aprendiste: coordenadas UV, ruido, tiempo y matemáticas puras.
Aberración Cromática (RGB Split)
Un efecto muy popular en el cyberpunk y el desarrollo creativo moderno. Consiste en separar ligeramente los canales Rojo, Verde y Azul de una imagen o textura.
En lugar de leer la textura una sola vez, la lees TRES veces en tu Fragment Shader, usando UVs ligeramente desplazadas para cada canal.
Hologramas y Escaneos
Se logran tomando el eje Y de la coordenada UV (vUv.y), multiplicándolo por una gran cantidad para crear muchas bandas, y usando funciones como sin() combinadas con step() y u_time para hacer que las líneas suban constantemente.
Consejo profesional
Estos efectos son visualmente potentes pero matemáticamente pesados. Leer una textura 3 veces por cada píxel para un glitch cuesta el triple de recursos gráficos que leerla una vez. En móvil, esto puede bajar los FPS a la mitad. Úsalo con sabiduría y solo en los elementos hero.
El Efecto Holograma Glitch
uniform float u_time;
varying vec2 vUv;
varying vec3 vPosition;
void main() {
// Efecto Scanline basado en la posición en Y y el tiempo
float scanline = sin(vPosition.y * 50.0 - u_time * 10.0);
// Hacemos que sea una línea delgada y filosa
scanline = smoothstep(0.8, 1.0, scanline);
// Color base azul neón
vec3 colorBase = vec3(0.34, 0.69, 0.98); // 57B0FB
// Sumamos el blanco del scanline
vec3 finalColor = colorBase + vec3(scanline * 0.5);
// Efecto holograma: hacemos los bordes más brillantes y el centro transparente
float rim = smoothstep(0.0, 0.5, abs(vUv.x - 0.5) * 2.0);
gl_FragColor = vec4(finalColor, rim * 0.8 + 0.2);
}Mezclamos líneas de escaneo animadas, ruido y separación RGB para crear un material futurista.
Errores comunes
Practica lo aprendido
Crea tu propio holograma.