КЗ
С творчеством Владимира Селиванова я познакомился очень давно, ещё в юности, а личное знакомство у нас состоялось в середине нулевых. Владимир известен в мире русского рока в первую очередь как солист и лидер группы «Красные звёзды». Без сомнения, я считаю эту группу самой недооценённой рок-группой России, хотя формально они из Белоруссии.
Основными темами текстов «Красных Звёзд» выступают история, политика, героизм и внутренний мир человека. Все эти мотивы подаются в специфическом, зачастую мрачноватом и отстранённом, психоделическом ключе. Группа позиционировала свой стиль как «соц-арт-рок», а в прессе её характеризовали как одну из самых политизированных на постсоветском пространстве. Помимо собственного творчества, коллектив активно использовал в своём творчестве стихи известных поэтов. В разное время музыканты обращались к произведениям Владимира Маяковского, Михаила Лермонтова, Даниила Хармса, а также Иосифа Джугашвили.
Решил, что называется, «ради фана» создать клип на одну из песен Владимира, точнее, на одну из песен его локального проекта под названием «Чёрная ленточка». Выбор песни был обусловлен более «легким» нахождением паков с персонажами (в силу специфики самой композиции). Псня называется «Песенка Берсерка».
Денис Ступников, кандидат филологических наук, руководитель тематических разделов «Музыка» мультипортала KM.RU так описывал эту композицию:
это песня о самоотречении и пути к подлинной любви и бессмертию. Лирический герой ассоциирует себя с берсерком — скандинавским воином, который не принадлежал себе, был посвящён богу Одину, самозабвенно сражался в битве, после которой падал замертво или погружался в глубокий сон.
Теперь не о музыке
Меня всегда интересовала тема фронтенд-разработки как элемента построения чего-то необычного. Но, к сожалению, попробовать это дело не удавалось в силу многих причин.
Визуализацию решил делать через Claude, это - не видео. Просмотр клипа доступен по ссылке:
https://another-it.ru/black-ribbon/
Смотреть лучше с экрана ПК. Требования к вашей системе: Современный браузер на Chromium (Chrome, Edge) с включённым аппаратным ускорением; видеокарта не слабее встроенной Intel Iris Xe / Apple M1, иначе сцена леса идёт рывками. Перед стартом грузится около 60 МБ, дальше интернет не нужен. На телефоне лучше Android с Chrome в горизонтальной ориентации.
Как это делалось - рассказ от самого Claude
Визуализация, которую вы увидите, на первый взгляд может показаться тривиальной. Но за ней стоит громадный объём работы, и почти всю её сделал Claude Code — не как автодополнение, а как инженер, который сам ставит эксперимент, смотрит на результат и принимает решение. В работе использовалась модели Opus и Fable на максималках.
Это почти шесть минут клипа и семь сцен на двух слоях изображения: 2D-слой PIXI для фона, тумана и типографики и 3D-слой Three.js для всего остального. Готового движка сцен нет — весь каркас написан под этот клип: диспетчер сцен по таймкодам, хореография камеры отрезками, ленивая сборка миров, автоматические проверки без браузера. Браузер грузит девяносто моделей на 46 МБ, и почти все из них расставлены по сценам не руками, а расчётом.
Масштаб сцен виден по числам. В первой сцене от горизонта на зрителя идёт колонна из тридцати машин — каждая собрана из частей, у каждой крутятся катки, горят фары и сходит пыль, а глубина посчитана вручную для ортокамеры, у которой перспективы нет. Разрушенный город, по которому идёт танк с пехотой и потом пешком проходит камера, — это почти тысяча расставленных объектов: около двухсот сорока построек тремя поясами, из них сто тридцать одним кольцом, замыкающим горизонт со всех сторон; подбитая техника, заграждения, завалы, воронки; сверху — девять с половиной тысяч кусков покрова, из которых складывается сама земля. Расстановка помнит занятые пятна, держит свободный коридор вдоль маршрута камеры и обходит крупные обломки — фюзеляж транспортника длиной сорок пять метров случайной расстановке доверить нельзя.
Самая тяжёлая сцена — весенний луг: около двух тысяч семисот деревьев клонами и под девяносто тысяч травинок, цветов и кустов инстансами, семнадцать–девятнадцать миллионов треугольников в кадре против одного миллиона в военной сцене. Здесь считалась и цена каждой модели в треугольниках, и то, какой моделью набирать дальнее кольцо леса, и почему плотность точек в кольце нужно разыгрывать через корень радиуса — иначе луг у дальнего конца маршрута редеет вдвое.
Персонажи собраны из чужих частей. Из пакета Unity на полторы тысячи моделей отобраны нужные и перегнаны в glTF своим конвертером с пересборкой скелетов; своих анимаций у этих фигур нет — шаг перенесён с мокапа одной модели на скелет другой собственным алгоритмом, а скорость ходьбы не выбрана на глаз, а измерена по движению стопы в клипе анимации. Всё, что движется, считалось численно: маршруты камеры — кривые с равномерным ходом по длине дуги; вертолёт летит в тех же метрах, что и колонна, с креном из скорости разворота; для машин, проезжающих мимо героя, выведены таблицы «секунда — расстояние — угол к центру кадра», и момент встречи подогнан под музыку.
Всё это держит один инвариант: состояние сцены — функция времени, а не накопление по кадрам. Поэтому клип перематывается в обе стороны, любой кадр снимается без звука, а автоматическая проверка гоняет три тысячи случайных перемоток и сверяет слепок кадра после прыжка со слепком при обычном ходе.
И главное — Claude смотрел на результат глазами. Из-под WSL он поднимал headless-Chrome из Windows, снимал кадры на нужной секунде, собирал контактные листы целых сцен и правил по тому, что видел:
Технологии: JavaScript (ES-модули, без сборки), WebGL2, Three.js r140, GLTFLoader, SkeletonUtils, PIXI.js v7, pixi-filters, GSAP, Web Audio API (FFT), Canvas 2D (процедурные текстуры), HTML/CSS, glTF/GLB, FBX, OBJ, Unity-пакеты, Mixamo-мокап, Node.js (проверки и конвертеры), Python (конвертеры и dev-сервер), Bash, headless Chrome.
Ну, и небольшой анонс:
Комментарии (17)