Визуализаторы треков для музыкального лейбла: 13 вертикальных роликов

Разбираю, как устроен конвейер визуализаторов, сколько стоит рендер по времени и где генеративное видео помогает, а где мешает.

Задача

Лейбл выпускает электронную музыку и продвигает треки короткими вертикальными роликами. Первая просьба была простой: визуализация с логотипом лейбла, без лишнего. Короткие версии двух треков длились по 43-44 секунды, темп около 120 ударов в минуту. Дальше пошли новые треки и новые стили, и стало понятно, что нужен конвейер, где новый ролик собирается из трека и сцены.

Что я сделал

• Анализ звука. Скрипт на Python раскладывает трек на 30 кадров в секунду: огибающие низов, середины и верхов, громкость, удары бочки, спектр в 64 полосах, темп по автокорреляции. Всё сохраняется в файл данных для сцены.
• Сцена. HTML-страница с WebGL-шейдером и 2D-холстом поверх. Вся анимация зависит только от времени: функция seek(t) рисует любой кадр одинаково, без случайных чисел и CSS-анимаций. Поэтому кадр можно перерисовать и проверить в любой момент.
• Рендер. Playwright открывает сцену, перебирает кадры и отдаёт их в ffmpeg. Звук берётся из оригинального файла без изменений.
• Сжатие. Мастер-файл после рендера весит около 470 МБ, лейблу уходит пережатая версия примерно на 20 МБ.

Как устроено

Первые два ролика

Вода на WebGL, спираль из логотипа лейбла, осколки и кольцо спектра. У каждого трека своя настройка: где дроп, где концовка, где глитч. Рендер шёл около 1,5 секунды на кадр, оба трека параллельно заняли около 37 минут. На следующий день те же треки получили ещё два варианта, в стилях riso и swiss, без чёрного фона.

Генеративные клипы и монтаж по тактам

Для двух роликов я сгенерировал по три клипа на трек в Seedance 2.0 через Higgsfield, в быстром режиме 720p. Клип в 15 секунд стоил 37,5 кредита. Монтаж собирает скрипт: в плане записано, какой клип, с какой по какую секунду и сколько он длится на выходе. Склейки по 2 и 4 секунды, при темпе 120 это ровно один и два такта. Текст, искры и концовку я рендерил отдельным слоем и накладывал поверх.

Калейдоскоп обложки

Для ремикса на 52,4 секунды генерация не понадобилась. Обложка с лотосами стала текстурой калейдоскопа на WebGL, поверх идут цветок жизни, платоновы тела, тоннель и меркаба. Последний кадр совпадает с первым, ролик крутится петлёй без шва. Рендер 0,7 секунды на кадр, 1572 кадра примерно за 18 минут.

Серия с монстрами и переделка

Три трека получили общую серию: у каждого свой монстр. Первая версия была в мультвекторе с толстым контуром, яркими фонами и сжатием на каждом ударе. Её забраковали: нужно серьёзно и в тёмном цвете, под логотип лейбла. Во второй версии кадр с монстром сгенерирован в Higgsfield в кинематографичном режиме, 0,12 кредита за картинку, а всё движение сделано кодом: слои тумана, пепел, пыль и молнии в ритм, медленный наезд камеры, пульс глаз монстра. Координаты глаз скрипт находит по самым ярким точкам кадра. Палитра уголь и серебро с одним приглушённым акцентом, логотип серебристый, название трека разреженными заглавными.

Правила, которые я свёл в бриф

После первых роликов я записал правила в общий бриф, чтобы новые ролики собирались по нему.

• Длина ролика равна длине фрагмента трека. Если в конце тишина, ролик заканчивается через секунду после затихания, звук уходит в затухание за полсекунды.
• Кадр 0 должен быть сильной картинкой: это обложка в ленте.
• Безопасная зона Reels: ничего важного в верхних 220 и нижних 380 пикселях, не ближе 60 пикселей к краям.
• Текст не двигается, пока его читают.
• Перед полным рендером снимаются стоп-кадры на всех ключевых моментах, собираются в контактный лист и проверяются глазами, минимум два прохода. После рендера то же самое по готовому файлу.

По этому брифу четыре ролика собирались параллельно примерно за час.

Что было сложно

Генеративное видео плохо слушается. Шаманам модель рисовала перья, как у индейцев Северной Америки, пока я не описал костюм явно: ленты, железные короны с рогами, бахрома из бусин на глазах. Фразу про танец девушки фильтр модели отклонил как недопустимую, кредиты вернулись. Другая формулировка того же движения прошла.

Вторая сложность во вкусе заказчика. Мультяшная серия была сделана по брифу, но лейблу она не подошла. Переделка заняла тот же день, а вывод я записал себе в заметки: для этого лейбла по умолчанию тёмная серьёзная эстетика, без мульта и пастели.

Третья сложность во времени рендера. Тяжёлый шейдер легко даёт несколько секунд на кадр, а в ролике их больше тысячи. Поэтому в брифе отдельно сказано держать шейдер лёгким, а образцом служит калейдоскоп с его 0,7 секунды на кадр.

Что получилось

Ограничения

Рендер идёт в браузере на процессоре. Минута ролика это 1800 кадров, то есть от 20 до 45 минут рендера. Обложку для калейдоскопа я брал со скриншота шириной 730 пикселей, с исходником в полном размере было бы чище. Генеративные клипы в быстром режиме идут в 720p и при растяжении до 1080×1920 теряют резкость. Как ролики сработали в соцсетях, я не знаю, статистики у меня нет.

Частые вопросы

Можно ли сделать визуализатор под мой трек без генерации видео?

Да, большая часть роликов в этом проекте сделана кодом без генерации. Нужен трек в wav, логотип и обложка. Генерация нужна, когда в кадре должны быть люди или персонажи.

Почему не сделать всё в After Effects?

Можно, но каждый ролик тогда собирается руками. Здесь сцена читает данные трека сама: новый трек проходит анализ, получает запись в настройках, и ролик рендерится.

Сколько кредитов уходит на генерацию?

В быстром режиме 720p клип на 15 секунд стоил 37,5 кредита, кадр в кинематографичном режиме 0,12 кредита. Когда фильтр отклонил запрос, кредиты в моём случае вернулись.

Коротко о главном

Визуализатор трека получается из трёх частей: данные звука по кадрам, сцена, которая рисует любой кадр по времени, и покадровый рендер с оригинальным звуком. Генерация пригодилась для клипов с людьми и для кадров монстров, а движение в ритм дал код. Похожий конвейер для коротких роликов разобран в кейсе про ролики «фото + инфографика», а обзор инструментов есть в статье нейросеть для видео. Если нужны ролики под ваши треки, напишите мне в Telegram.