Consigue Visibox
Todas las novedadesTutoriales

ChatGPT programó mi visualizador de Stranger Things

Quería el aspecto de los títulos de apertura de Stranger Things. Finas líneas rojo anaranjadas brillando sobre un negro puro, floreciendo suavemente en los bordes, pasando junto a la cámara como si volaras a través de ellas. No el logo, no la tipografía, solo esa atmósfera: algo enorme y a medio formar, iluminado desde dentro.

Así que abrí ChatGPT Work, el modo agente de la app de escritorio ChatGPT de OpenAI, y le pedí que me construyera el shader. Nunca escribí una línea de código de shader. Describí lo que quería, ChatGPT lo escribió y Visibox lo ejecutó, en vivo, reaccionando a la música, todo sin que yo tocara un editor de texto. Ese es el truco entero de este video, y vale la pena desmenuzarlo porque la parte interesante no es el visualizador terminado. Es el ida y vuelta que costó llegar ahí.

Qué es en realidad un visualizador en Visibox

Visibox 5 añadió una función llamada Visualizadores: clips generativos, renderizados por GPU, que viven en la cuadrícula junto a tus clips de video normales. Algunos reaccionan al audio y saltan con la música. Otros simplemente corren. En cualquier caso, los activas igual que a cualquier otro clip de tu proyecto.

Hay dos formatos. MilkDrop es el más antiguo, creado en la era de Winamp, y hay una enorme biblioteca de presets .milk circulando por internet que puedes arrastrar directamente a Visibox y usar. ISF es más nuevo, del equipo detrás del software para VJ VDMX: un solo archivo de shader con un pequeño encabezado que declara sus entradas ajustables. Visibox admite ambos, pero para este proyecto usé ISF, porque resulta que es exactamente el tipo de archivo que una IA escribe de forma limpia.

Activar la conexión MCP

Antes de que nada de esto funcione, Visibox tiene que estar hablando con tu asistente de IA. Eso pasa una sola vez, en Ajustes, dentro de Connect to AI Tools. Visibox busca las apps de IA instaladas y se configura solo en cada una. Después de eso, ChatGPT (o Claude, o lo que estés usando) puede ver tu proyecto, leer los formatos de visualizador, construir presets e incluso controlar la reproducción: volumen, pantalla completa, activar clips. Comprobé que la conexión estaba activa preguntándole a ChatGPT si podía llegar a Visibox; me respondió con mi nivel de volumen actual.

Aquí importa un detalle: Visibox se conecta como una herramienta local que corre en tu propia computadora, así que necesitas una app de IA de escritorio que pueda llegar a ella. El sitio web de ChatGPT en un navegador no puede ver una app local como Visibox. Por eso esto usa ChatGPT Work, uno de los modos de la app de escritorio de OpenAI (la misma app que hace poco absorbió Codex), o Claude Desktop, en vez de chatgpt.com. De aquí en adelante lo llamaré simplemente ChatGPT.

Hice esto mismo con Claude Desktop en un video anterior, y el flujo de trabajo fue casi idéntico.

El truco: haz que la IA describa la referencia primero

Antes de pedir cualquier código, le pedí a ChatGPT que describiera la apertura de Stranger Things con sus propias palabras, para ponernos de acuerdo en un concepto antes de construir nada. Ese único paso hizo más de lo que esperaba.

Volvió con algo parecido a la descripción de un plano: oscuridad casi total, finas líneas rojo anaranjadas pasando junto a una cámara, un bloom suave, un ligero desenfoque, e incluso sus propias suposiciones sobre la reactividad al audio. Eso me dio algo concreto a lo que reaccionar en lugar de una página en blanco.

Le dije qué conservar y qué cambiar: fragmentos geométricos en vez de formas de letras (demasiado cercano a reproducir la serie, y sinceramente, más útil sin ellas), colores configurables para que la paleta pudiera volverse azul más adelante, y movimiento constante hacia adelante, nuevas capas de formas emergiendo de la oscuridad mientras las viejas se alejan por los bordes del cuadro.

Una indicación importó más que las demás: nunca dejes que el cuadro quede vacío. Sea cual sea el ajuste de densidad, siempre debería haber formas en algún punto del campo de profundidad. Es la diferencia entre un visualizador que se siente vivo y uno que se siente esperando a que algo pase.

ChatGPT bautizó el concepto por sí mismo, por su propia iniciativa: Ember Geometry. Una vez de acuerdo en eso, lo subí a un modelo de razonamiento más capaz para la programación de verdad y le dije que construyera el preset como un nuevo visualizador ISF.

Primer intento: una pantalla negra

ChatGPT trabajó un par de minutos, hablando con Visibox por MCP todo el tiempo, leyendo la especificación del formato ISF, escribiendo el shader, registrándolo como un nuevo preset. Luego volví para verlo.

Pantalla negra. Nada.

Esa es la parte que la mayoría de los videos cortarían. Yo no. Simplemente le dije a ChatGPT lo que estaba viendo: una pantalla negra, ningún visualizador, y le pedí que revisara su propia sintaxis. Encontró un error de compilación en el fragment shader, algo sobre el uso ilegal de una palabra reservada, y lo corrigió. Segundo intento: ahí estaba. Líneas rojo anaranjadas brillando, pasando junto a la cámara, exactamente la atmósfera que había descrito. Esa corrección costó un mensaje y un par de minutos.

Demasiado reactivo, y luego reactivo en su justa medida

Puse algo de música para ver cómo respondía al audio, y fue muchísimo. El movimiento se invertía con el bajo, así que en vez de sentirse como un avance continuo, se sentía como si todo se sacudiera de un lado a otro. Divertido de mirar unos diez segundos, molesto después de eso.

Le dije a ChatGPT qué estaba mal: la reactividad al audio estaba anulando el movimiento hacia adelante, y quería que el empuje hacia adelante se dejara en paz. Los graves y los agudos aún podían mover el brillo y el grano, solo que no el movimiento de cámara. Un minuto después, llegó la actualización. Más calmado, más controlado, aún claramente vivo cuando la música pegaba.

Meterlo en un proyecto fue la parte fácil: arrastra Ember Geometry a una canción, igual que cualquier otro clip, ejecútalo a pantalla completa, listo.

Por qué esto importa más que el shader en sí

Nada de esto exigió que yo supiera GLSL, ni la sintaxis de parámetros de ISF, ni nada sobre la compilación de shaders. Lo que exigió fue ser específico sobre lo que quería, honesto sobre lo que no funcionaba, y estar dispuesto a ir y venir en vez de aceptar el primer resultado. Ese bucle, describir, mirar, corregir, es la verdadera habilidad, y no está atada a ChatGPT en particular. Activa la conexión MCP, ponte de acuerdo en un concepto antes de escribir código, y espera que el primer intento necesite una o dos indicaciones de vuelta. Eso es normal, no un fracaso.

¿Quieres el mismo truco aplicado a efectos de superposición en vez de visuales a pantalla completa? Ese es un video complementario: Efectos de superposición con IA. Y si prefieres seguir un paso a paso estructurado en lugar de la historia de una sesión, también hay una receta escrita: construir un visualizador generado por IA desde cero.

Visibox incluye una prueba Pro gratuita de 14 días. Más sobre visualizadores, MilkDrop e ISF en el manual.