Shaders que reaccionan al audio: crea un visualizador GLSL en el navegador
Un fragment shader es un pequeño programa que se ejecuta para cada píxel de la pantalla, en cada fotograma. Dale unos cuantos números que describan la música en este momento, como lo fuertes que suenan los graves o si acaba de sonar un bombo, y se convierte en un shader que reacciona al audio: un visualizador que escribes tú mismo, en unas pocas decenas de líneas de GLSL.
Lo difícil no suele ser el shader, sino todo lo que lo rodea: capturar el audio, calcular una FFT, suavizar los valores, detectar los golpes y pasárselo todo a WebGL. Deus Studio se encarga de esa parte por ti, así que puedes abrir un editor en Chrome y empezar directamente por los visuales.
Qué es Deus Studio
Deus Studio es un editor de GLSL dentro de la extensión Deus, conectado al motor real de Deus. Escribes un fragment shader y lo ves reaccionar al instante a la pestaña que Deus está escuchando, o a un archivo de audio de tu ordenador. La vista previa usa los mismos uniforms, el mismo análisis del sonido y el mismo renderizador WebGL 1 que el visualizador, así que lo que ves en la vista previa es lo que se reproduce en Deus. Studio está incluido en el plan gratuito.
Para abrirlo, inicia el visualizador para una pestaña (consulta la guía para cualquier pestaña) y elige Crear › GLSL en su menú. Puedes empezar con la Plantilla inicial, con el Recorrido por las entradas de audio, que dibuja cada entrada de audio como un medidor, o con una copia editable de cualquiera de los 70 presets WebGL incluidos. El preset original no cambia.
Las entradas que recibe tu shader
Studio usa GLSL ES 1.00 y mainImage al estilo de Shadertoy. Deus pasa a cada shader un conjunto de uniforms en vivo, y usas sus nombres directamente, sin declararlos. Algunos de los más útiles:
u_resolution: tamaño de renderizado en píxeles.u_time: segundos desde que empezó el preset.u_bass,u_mid,u_treble,u_level: las tres bandas y el volumen general, normalizados de 0 a 1.u_kick,u_snare,u_hihat: detectores de batería, de 0 a 1.u_attackse dispara con cada sonido nuevo;u_bass_pulsees un pulso que decae en cada golpe de graves.u_level_integral: un reloj que corre más rápido cuando la música suena más fuerte. Úsalo en lugar deu_timepara un movimiento que siga a la canción.u_frequency[32]yu_waveform[32]: el espectro de graves a agudos y la forma de onda, 32 valores cada uno.u_note_color,u_note_intensity[12]y otras entradasu_note_*: análisis de notas para las 12 clases de altura, de do a si.
También funcionan iTime, iResolution e iFrame de Shadertoy, así que los fragmentos de código de allí se pegan con menos cambios. Pasa el ratón por encima de cualquier nombre u_ en el editor para ver qué significa y su valor en ese momento; la pestaña Entradas los muestra todos con sus valores en vivo.
Un primer shader que reacciona al audio
Aquí tienes un preset completo: un anillo que respira con los graves, salta con cada bombo y gira más rápido cuando la canción sube de volumen.
// Un anillo que respira con los graves y salta con el bombo.
uniform vec3 u_tint; // @color #ff2bd6 label="Tint"
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
// Coordenadas centradas: y de -1 a 1.
vec2 p = (fragCoord * 2.0 - u_resolution) / u_resolution.y;
float r = length(p);
float a = atan(p.y, p.x);
float radius = 0.35 + u_bass * 0.35 + u_kick * 0.15;
float ring = 1.0 - smoothstep(0.0, 0.04, abs(r - radius));
// Franjas que giran más rápido cuando la música suena más fuerte.
float stripes = 0.6 + 0.4 * sin(a * 8.0 + u_level_integral * 2.0);
vec3 color = u_tint * ring * stripes;
color += u_tint * u_hihat * 0.25 * (1.0 - smoothstep(0.0, 0.6, r));
fragColor = vec4(color, 1.0);
}Algunos detalles que conviene saber. Los literales de coma flotante necesitan punto decimal (1.0, no 1). El comentario // @color convierte u_tint en un selector de color, tanto en Studio como en el panel Ajustar del visualizador. Los deslizadores funcionan igual: uniform float u_speed; // @param 0 3 1 crea un deslizador de 0 a 3 con 1 por defecto, y // @toggle 1 crea un interruptor. Como cada control es una línea del código, viaja con el shader.
Controles sin escribir
No tienes que escribir esos comentarios a mano. Selecciona un número en el código, o un color vec3, y pulsa Crear deslizador: se convierte en un control en Studio y en el panel Ajustar. Los colores literales tienen una muestra en la que puedes hacer clic, y los errores de compilación se marcan en las líneas que los causan.
Mira lo que oye el shader
La pestaña Audio muestra el espectro en bruto y normalizado y los últimos 12 segundos de nivel, graves, medios, agudos, ataques y golpes de batería detectados, cada uno con el nombre del uniform que lo lee. Así es mucho más fácil afinar: si el anillo apenas se mueve, puedes ver si u_bass llega de verdad a 1.0 en esa canción y escalar tu fórmula en consecuencia. La fuente de audio puede ser la pestaña que Deus está capturando o una canción que elijas de tu ordenador.
Pasadas de renderizado, feedback y otros nombres
Los comentarios también configuran el renderizado: // @pass buffA scale=0.5 añade una pasada de renderizado que luego lees como uniform sampler2D buffA;, // @feedback 0.09 desvanece el último fotograma en lugar de borrarlo, lo que crea estelas, y // @fps 30 limita los fotogramas por segundo. Si estás portando un shader al estilo de Synesthesia, el motor también rellena nombres como syn_BassLevel, syn_Hits o TIME; decláralos en tu código para usarlos.
Guárdalo en Deus
Pulsa Guardar (⌘S) y el preset aparece en Presets › Personalizados con una miniatura de la vista previa, o Guardar y reproducir en Deus para pasar el visualizador a él al momento. Los cambios sin guardar sobreviven a una recarga como borrador, y tus presets se guardan localmente en tu navegador.
A partir de ahí, tu shader se reproduce en el visualizador junto a los presets incluidos, así que también puedes ponerlo a pantalla completa en una tele o una segunda pantalla. Si quieres entender el análisis que hay detrás de los uniforms, lee cómo funcionan los visualizadores de música.