Відео може стати відправною точкою для світу, який ти здатен змінити. Дай кодувальному агенту референс, нехай він вивчить кадри, і попроси його відтворити сцену у вигляді процедурного коду. Потім зміни камеру, освітлення, матеріали чи рух і відрендери все заново.
Саме в цьому полягає ідея Video 2 GLSL — робочого процесу «від референсу до шейдера», який я розробляю навколо shader-skills. Найцікавіше те, наскільки значну частину цього процесу можна переносити на наступне відео.
https://x.com/gokayfem/status/2111907592129671505
Дві складові, що працюють разом
shader-skills дає кодувальним агентам бібліотеку графічних технік, робочі приклади та процес створення й перевірки процедурних шейдерів. Video 2 GLSL додає завдання, орієнтоване на референс: вивчити кліп, сформувати специфікацію, побудувати сцену, а потім порівняти результат із оригінальним відео.
Цей скіл підтримує Claude Code, Codex, Cursor, Gemini та інших кодувальних агентів. Його багаторазові компоненти охоплюють форми, шум, матеріали, рельєф, будівлі, воду, хмари, освітлення та колір. Ти можеш використовувати їх для створення оригінальної сцени, інтерактивного експерименту або відтворення відео.
Для окремого таргету Video 2 GLSL результатом є один фрагментний шейдер, сумісний із Shadertoy. Геометрія описується математично, поверхні є процедурними, а анімація керується часом. Референсне відео слугує візуальною специфікацією; його кадри не відтворюються безпосередньо всередині шейдера.
Почни з перетворення відео на специфікацію
Перший крок — надійне вилучення кадрів. URL-адреса або ім'я файлу відео дає агенту дуже мало інформації для роботи. Йому потрібно дослідити, що саме з'являється в кадрі та як це змінюється з часом.
Багаторазовий промпт вимагає створення REFERENCE.md перед написанням коду сцени: факти про кліп, таймлайн кадрів, інвентар об'єктів, пропорції суб'єкта, рух, кадрування камери, освітлення та семпловану палітру. Він також просить агента визначити, що саме неможливо відтворити точно, і запропонувати заміни для затвердження.
Спостереження змінюються залежно від кліпу. Кадр із персонажем потребує аналізу точок контакту, довжини кроку та вторинного руху. Архітектурний кадр — пропорцій, перспективи та руху камери. Кадр із водою — уваги до руху поверхні, відбиттів і глибини. Однаковий процес декомпозиції дає кожному з них конкретну відправну точку.
Дай агенту перевірені графічні будівельні блоки
Правдоподібна на вигляд формула все одно може створити небезпечне поле відстаней, нестабільний шум або неправильний колір. Ці помилки стає важче виокремити, коли вони опиняються всередині великої сцени.
Наразі shader-skills містить 186 функцій у 20 модулях GLSL. Агент може шукати потрібну техніку, викликати бібліотечну функцію за назвою та використовувати бандлер, щоб включити її залежності в один самодостатній шейдер.
Бібліотека включає функції знакового поля відстаней (SDF) для форм, оператори для їх комбінування, процедурний шум і патерни, допоміжні функції для реймарчингу, шейдинг, атмосферу та трансформації кольору. Шаблони показують, як ці елементи працюють разом у повноцінних сценах.
Валідація охоплює компіляцію у WebGL2 та числові властивості на GPU: знаки й межі поля відстаней, похідні шуму, циклічні перетворення кольору та іншу поведінку, яку можна перевірити. Відрендерені приклади додають візуальний контроль. Ці перевірки роблять компоненти надійнішими, хоча фінальна сцена все одно потребує огляду.
Побудуй цикл зворотного зв'язку навколо рендерера
Робочий процес проходить через блокаути й таймінг, рух, деталізацію суб'єкта, деталізацію середовища, світло й колір, відповідність референсу та продуктивність. Кожен етап дає щось видиме, що можна оцінити.
Референс і рендер слід порівнювати в однаковий момент часу та з однаковим кадруванням. Використовуй повні кадри для композиції, кропи — для форми об'єктів і матеріалів, а послідовності кадрів — для руху. Один привабливий статичний кадр може приховати ковзання ніг, стрибок камери або взаємодію, що відбувається занадто рано.
Промпт вимагає повторюваної критики: визначити п'ять найбільших відмінностей, виправити їх і відрендерити знову. Вимірювання підтримують цей аналіз. Розмір суб'єкта та положення горизонту допомагають діагностувати помилки камери; семпловані кольори — діагностувати грейдинг; зонди руху — знаходити розриви.
Швидка ітерація тут має вирішальне значення. Попередні перегляди в низькій роздільній здатності та ізольований перегляд об'єктів дозволяють виправити пропорції до того, як ти перейдеш до ресурсомістких рендерів. Перевіряй силуети та пропорції об'єктів перед тим, як шліфувати матеріали й освітлення.
Розділяй складні сцени за зонами відповідальності
Великі сцени виграють від того, що кілька агентів працюють над окремими частинами: суб'єктом, середовищем, реквізитом, рухом або освітленням. Поділ має відповідати потребам сцени.
Спільні інтерфейси забезпечують сумісність цієї роботи. Домовся про масштаб, координати, таймінг та ідентифікатори матеріалів, закріпи за кожним агентом власні файли та вимагай доказів на основі реальних рендерів. Оркестратор може інтегрувати частини й оцінити об'єднане зображення порівняно з референсом.
Головний багаторазовий урок тут — структура ревью: хтось обов'язково має оцінити весь кадр загалом. Деталізована будівля або переконливий персонаж можуть усе одно не пасувати до композиції.
Що доводять експерименти
Наразі робота включає послідовність із летючим островом зі змінними діями, послідовність із селом та взаємодіями, а також нескінченний вуличний луп. Їхні вимоги різняться: таймінг подій, зафіксовані точки контакту, переходи камери та точне повторення — кожен аспект потребує власної логіки сцени. Рівень їхньої завершеності та візуальна якість також відрізняються.
У всіх них корисним залишається той самий процес: вилучити, виміряти, зібрати, відрендерити, порівняти та виправити. Репозиторій також містить процедурні приклади міста, рельєфу та води, тоді як окремі інтерактивні експерименти досліджують органічні форми та зображення чорних дір.
Що стає редагованим, а що залишається невизначеним
Коли сцена існує у вигляді коду, ти можеш винести назовні елементи керування положенням камери, напрямком світла, палітрою, таймінгом і процедурними деталями. Експеримент із вулицею продемонстрував альтернативні ракурси камери з тієї самої побудованої сцени.
Ці нові ракурси також виявляють межі реконструкції. Референс показує лише частину світу. Приховані поверхні потрібно домислювати, а згенероване ШІ відео може містити мінливу геометрію або непослідовний рух. Переконлива відповідність з одного кута не означає, що сцена є повною та точною.
Продуктивність — ще один результат, специфічний для кожної сцени. Деталізована реймарчена геометрія, рослинність, тіні та відбиття можуть бути дуже ресурсомісткими. Вимірюй час кадру на цільовій машині, перевіряй різні моменти в кадрі та повідомляй про невиконані цілі поряд із залишковими візуальними відмінностями.
Video 2 GLSL — це багаторазовий робочий процес для створення контенту. Його надійність на довільному відеоматеріалі все ще потребує ширшої оцінки. Поточна робота дала нам кілька конкретних експериментів і спільний метод для вдосконалення.
Спробуй із власним референсом
Для Claude Code додай маркетплейс і встанови плагін:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
Для інших підтримуваних агентів:
npx skills add gokayfem/shader-skills
Використовуй prompts/video-to-shader-prompt.md, надай референсний кліп, назву для результату та цільову машину, а також вкажи, що має залишитися обов'язковим, а чим можна знехтувати. Переглянь декомпозицію до початку реалізації.
Я хочу й далі розвивати це в надійний спосіб перетворення візуальних референсів на редаговані процедурні сцени. Кожна реконструкція має залишати після себе кращі інструменти, кращі тести та техніки, які зможе використати наступна.
Репозиторій: github.com/gokayfem/shader-skills
