GLSL en vivo: cuando el código aprende a escuchar

Antes de que existiera una palabra para nombrarlo, ya había gente escribiendo fórmulas trigonométricas en un cuadro de texto y viendo, en tiempo real, cómo esas fórmulas se convertían en túneles de luz, plasma líquido o paisajes imposibles. No hay assets, no hay modelos 3D importados, no hay fotografías de por medio. Todo lo que ves en un shader sale de una función matemática evaluada miles de veces por segundo, una vez por cada píxel de la pantalla.

Eso es GLSL —OpenGL Shading Language—, el lenguaje en el que está escrito ese tipo de código. Y en los últimos años, ese código aprendió a escuchar: a tomar el espectro de una canción o de un micrófono abierto y usarlo para decidir qué tan rápido gira el túnel, qué tan violento es el destello, de qué color se pone todo cuando entra el bajo.

§01 Qué es, en criollo, un shader

Pensalo así: un programa normal corre una vez, de arriba a abajo. Un shader corre en paralelo, una copia distinta del mismo programa por cada píxel de la imagen, todas al mismo tiempo, en la GPU. Cuando escribís algo como gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0), en realidad estás escribiendo la regla que decide el color de cualquier píxel, dado su lugar en la pantalla. La GPU aplica esa regla a millones de píxeles, sesenta veces por segundo, y el resultado es una imagen que se mueve.

No hay capas, no hay biblioteca de efectos: hay una fórmula, y toda la imagen es la fórmula. Por eso el shader art tiene esa textura tan particular —fractal, matemática, casi orgánica pese a estar hecha enteramente de números— que no se parece a nada hecho con herramientas de diseño convencionales.

Ref. visual La demoscene, el origen que casi nadie menciona. Programadores escribiendo animaciones en tiempo real dentro de restricciones de tamaño absurdas —a veces menos de 64 kilobytes— ya en los años noventa. Esa cultura de sacarle arte a la matemática pura es la raíz directa de todo lo que viene después.

§02 De la demoscene a Shadertoy

El salto que hizo pública esta práctica ocurrió cuando Firefox lanzó su primera implementación de WebGL, en 2009: de golpe, un shader podía correr directo en el navegador, sin instalar nada. El programador Iñigo Quílez —que venía de la demoscene— armó el primer entorno de codificación en vivo online, y en 2012 ese esfuerzo se convirtió en Shadertoy, el sitio que hoy sigue siendo la referencia central de la comunidad. Buena parte de sus primeros aportes vino, justamente, de esos mismos autores de demos de los noventa: los mismos trucos —metaballs marchados por rayos, fractales, túneles— pero ahora abiertos a cualquiera con un navegador.

§03 Vivir el código: Hydra y el live coding

En paralelo a Shadertoy creció otra rama, más performática: el live coding. Hydra, creado por la artista Olivia Jack, es un sintetizador de video que se programa en vivo, directo en el navegador, con una sintaxis pensada para encadenar transformaciones —como quien parchea un sintetizador modular analógico— en vez de escribir GLSL línea por línea. Por debajo sigue siendo WebGL puro, pero la experiencia es otra: alguien está escribiendo y remixando código en tiempo real, frente a una audiencia, y lo que se ve en pantalla cambia con cada tecla.

Esa comunidad —gente como Naoto Hieda, que da talleres de Hydra abiertos a cualquiera sin experiencia previa en programación— trata al código como si fuera un instrumento más sobre el escenario, tocado junto a la música y no como una ilustración de fondo.

Ref. visual El destino final de buena parte de este código. Lo que empieza como una fórmula matemática en un editor de texto termina, muchas veces, proyectado a escala de festival — reaccionando en vivo a lo que está sonando en ese momento.

§04 De la web al escenario profesional

En el circuito de VJing e instalaciones físicas, la herramienta dominante es TouchDesigner: un entorno visual por nodos donde también se puede escribir GLSL a mano y conectarlo directo a una señal de audio. No es casualidad que sigan apareciendo tutoriales enfocados específicamente en enrutar audio hacia shaders dentro de TouchDesigner —es, junto con Hydra, el puente entre el shader como curiosidad de navegador y el shader como pieza central de un show en vivo.

"Hydra está escrito en JavaScript y compila a WebGL por debajo, con una sintaxis inspirada en la síntesis modular analógica: encadenar transformaciones para generar un resultado visual." — Documentación del proyecto Hydra

§05 Cómo se arma, técnicamente, un shader que escucha

El patrón es siempre el mismo, esté hecho en Shadertoy, Hydra o a mano en un archivo HTML. Tres piezas que se hablan entre sí:

Armamos una versión mínima de esto para que lo veas —y lo escuches— andar en vivo, ahí abajo.

Los cinco parten de la misma base —un lienzo, tres números que llegan del audio (grave, medio, agudo) y una fórmula— pero cada uno decide algo distinto con esos tres números: en el túnel, el grave empuja la cámara hacia adelante; en el glitch, dispara el desplazamiento de bloques; en el fractal, controla la velocidad del zoom. Ese es, en resumen, todo el oficio: no la fórmula en sí, sino qué le hacés decidir a cada frecuencia.