Distorsiones
Redactado por
Sebastian V. Fecha de publicación
26/04/2026
Tiempo de lectura
7 min
Tema
Shaders GLSL
Derritiendo la web
Uno de los efectos más premium que verás en agencias digitales de alto nivel es la distorsión de imágenes. Cuando pasas el ratón por encima de una foto de un proyecto y ésta se ondula como si estuviera bajo el agua.
¿Cómo se distorsiona una imagen?
La imagen se envía al shader como una textura (uniform sampler2D u_image;). En condiciones normales, lees el color de la textura usando texture2D(u_image, vUv), pidiendo exactamente el color que corresponde a la coordenada actual.
Pero... ¿qué pasa si le mientes a la función? ¿Qué pasa si le pasas unas UVs ligeramente desplazadas usando ruido o funciones seno?
La matemática del engaño
Si la coordenada actual es (0.5, 0.5) pero le dices a la textura que lea el color de (0.5 + sin(time), 0.5), terminarás leyendo colores de otros lados de la imagen, creando un efecto óptico de ondulación líquida o distorsión sin modificar el archivo original ni el DOM.
El Espejo de Agua
uniform float u_time;
uniform sampler2D u_texture;
varying vec2 vUv;
void main() {
vec2 distortedUv = vUv;
// Desplazamiento en X basado en Y y el tiempo
distortedUv.x += sin(vUv.y * 10.0 + u_time) * 0.03;
// Desplazamiento en Y basado en X y el tiempo
distortedUv.y += cos(vUv.x * 10.0 + u_time) * 0.03;
// Leemos la textura usando las coordenadas mentirosas
vec4 textureColor = texture2D(u_texture, distortedUv);
gl_FragColor = textureColor;
}Generamos un mapa procedural en el Fragment y lo usamos para desviar la lectura de una textura.
Errores comunes
Practica lo aprendido
Engaña a la cámara de la textura.