Как ИИ-агент создает кино на Canvas и рендерит его в MP4 без видеофайлов

Современные технологии искусственного интеллекта позволяют создавать полноценный минутный фильм 1080p60 со звуком, который представляет собой единый HTML-файл без внешних картинок, видеоклипов и сэмплов. Весь программный код генерирует ИИ-агент, после чего headless Chrome покадрово рендерит его в формат MP4. Без специальных ограничений нейросети обычно выдают одинаковые шаблонные заставки с неоновой подсветкой и линейным движением, поэтому я подробно разобрал архитектуру, детерминизм и принципы работы с виртуальным временем.

Проект можно запустить прямо в браузере, чтобы проследить за процессом отрисовки. Музыкальное сопровождение также генерируется динамически с помощью Web Audio. Набор правил и структурированный Agent Skill для Claude Code, Codex и ChatGPT я выложил в открытый доступ под лицензией MIT.

Почему стандартные ИИ-модели плохо справляются с анимацией

Продвинутые нейросети отлично генерируют код для Three.js и Canvas, однако главная сложность заключается в художественном вкусе. При стандартном запросе на красивую анимацию Claude и GPT выдают типовой набор элементов:

• почти черный или темно-синий фон с бирюзовыми либо янтарными акцентами;
• избыточный bloom-эффект на всех объектах;
• хаотичные случайные частицы для заполнения пустого пространства;
• централизованные заголовки, написанные исключительно заглавными буквами;
• синхронное и полностью линейное движение всех объектов;
• базовые кроссфейды в качестве единственного типа переходов.

Подобные приемы вполне допустимы при осознанном использовании, но их шаблонное появление по умолчанию портит результат. Технические проблемы не менее серьезны: стандартная анимация через requestAnimationFrame накапливает внутреннее состояние, поэтому ее невозможно корректно перемотать или честно перевести в видеоформат без рывков.

Единая функция вместо классического таймлайна

Основой подхода становится функция draw(ctx, t), которая рисует кадр целиком на основе текущего времени t и не хранит данные о прошлых кадрах. Такой подход решает множество задач:

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

Контракт с рендером опирается на три глобальных элемента: meta, draw(t) и ready. Флаг ready активируется исключительно после выполнения document.fonts.ready, иначе начальные кадры будут отрисованы запасным шрифтом и надписи заметно сместятся.

Пять принципов детерминизма

Строгая функция времени требует жесткой дисциплины и отказа от случайных значений.

Использование Math.random() внутри логики отрисовки полностью запрещено. Применяются только генераторы с фиксированным сидом, например mulberry32, где случайные параметры генерируются один раз на этапе инициализации.

Системы частиц функционируют без сохранения состояния. Каждая частица получает неизменяемые стартовые свойства, а текущий возраст рассчитывается циклически из параметра t. Именно так реализован эффект огня в демонстрационном ролике из 650 частиц с аддитивным смешиванием и готовыми спрайтами.

Классические полупрозрачные шлейфы заменяются отрисовкой объекта в предыдущих временных точках с уменьшающейся прозрачностью. Для пружинной анимации используются аналитические решения затухающего осциллятора, а сложные симуляции обсчитываются с фиксированным шагом времени.

Сцена с изображением астролябии наглядно демонстрирует детерминизм: линия выстраивает сложный объект, после чего анимация безошибочно воспроизводится заново при обратной перемотке.

Процесс покадрового рендеринга

Специальный скрипт автоматизации запускает страницу в режиме рендера, дожидается флага готовности, считывает метаданные и циклично вызывает функцию формирования кадров, передавая полученные изображения в утилиту ffmpeg.

Виртуальное время гарантирует стабильные 60 кадров в секунду даже для сложных трехмерных сцен с огромным количеством частиц. Специальные параметры диапазонов позволяют быстро пересобирать отдельные фрагменты для проверки правок.

Синтез звука и устранение ошибок

Музыкальное сопровождение формируется программно через Web Audio с помощью осцилляторов и фильтрованного шума без применения аудиосэмплов. Звук и визуальный ряд используют общую структуру данных с таймингами, что обеспечивает абсолютную точность попадания ударов.

Для живого просмотра используется стандартный AudioContext, а офлайн-рендер задействует OfflineAudioContext для ускоренной генерации звуковой дорожки. При реализации механизма воспроизведения важно учитывать специфику работы таймеров, чтобы избежать ошибок с отрицательным временем.

Каталог переходов и сценарная иерархия

Переходы между сценами задаются массивом данных, где каждый фрагмент рендерится в отдельный буфер, а специальный алгоритм смешивает их по мере изменения прогресса. Обе сцены продолжают активную отрисовку в момент перехода, предотвращая замирание элементов.

Библиотека содержит множество вариантов переходов на базе Canvas 2D и шейдеров GLSL. Главным правилом остается смысловая мотивация каждого перехода движением камеры или изменением композиции в кадре.

Автоматическая проверка с помощью контактных листов

ИИ-модели часто допускают композиционные ошибки вроде наложения текста на ключевые объекты или пустых пауз. Для контроля качества настроен скрипт, собирающий кадры каждые полсекунды в единый контактный лист.

Мультимодальная модель анализирует итоговое изображение, выявляя ритмические сбои и дефекты верстки. Проверка по чек-листу гарантирует читаемость текста, отсутствие статичных зон и соответствие стандартам громкости звука.

Художественные правила против шаблонного вкуса

Чтобы отучить нейросеть от стандартных штампов, в системный бриф заложены строгие художественные требования:

• отказ от линейного движения в пользу плавных кривых с эффектами замаха и перелета;
• использование стаггера с небольшим временным сдвигом для элементов групп;
• выбор единого смелого стилистического решения для каждого ролика;
• глубокая интеграция визуального стиля с тематикой повествования.

Установка и практическое применение пакета

Набор правил упакован в удобный формат Agent Skill, поддерживаемый популярными средами разработки и чат-ботами. Короткий файл маршрутизации направляет агента к нужным инструкциям, экономя контекст и повышая качество генерации кода.

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