Shader de ruido Perlin en 40 líneas de GLSL

El reto de esta semana pedía un campo de flujo sin librerías externas. Nada de simplex-noise ni texturas precalculadas: solo un fragment shader que tomara las coordenadas del píxel y devolviera un vector de dirección coherente. La restricción no era capricho. Cuando dependes de una textura de ruido, arrastras un asset binario, un paso de carga y una resolución fija que no escala bien en pantallas de alta densidad. La función hash de tres pasos evita todo eso y cabe en cuarenta líneas legibles.

El shader completo queda comentado línea a línea en el repositorio del reto. La parte que más consultas generó fue la interpolación: se calcula el hash en las cuatro esquinas de la celda, se aplica una curva de suavizado y se mezcla en dos ejes. El orden importa. Si mezclas primero en Y y luego en X el resultado es idéntico, pero si inviertes el cálculo del gradiente respecto a la posición relativa, el campo deja de ser continuo y aparecen costuras visibles en los bordes de cada celda.

Al portar el shader a WebGL2 aparecieron los dos errores de siempre. El primero es la precisión: en móviles, declarar highp en el fragment shader no garantiza que el driver lo respete, y el ruido empieza a mostrar bandas. El segundo es el orden de las interpolaciones cuando se combinan varias octavas: si acumulas amplitudes antes de normalizar, el rango se sale de [0,1] y el campo de flujo se satura en las zonas centrales.

Para comparar, se dejó una variante con value noise en lugar de Perlin. El perfilado en Chrome muestra que la diferencia de tiempo por frame es menor de lo que sugiere la teoría, sobre todo cuando el shader ya está limitado por el ancho de banda de memoria. La captura del timeline queda en el post, con la línea base marcada para que se vea dónde empieza a notarse la carga.