Новость

Браузер вместо рендер-фермы как Claude Opus собирает 3D-графику кодом

Видео: Skillry

Один текстовый файл формата HTML весит меньше мегабайта, но если открыть его в браузере, экран заполняют 108 000 частиц. Песок сыплется сквозь воду, масло отталкивает лаву, огонь пожирает заросли растений, поднимая клубы пара, и вся эта физика стабильно держит 60 кадров в секунду прямо с процедурным звуком. Этот симулятор написал не штат программистов и не студия моушн-дизайна — его от первой до последней строчки кода собрала модель Claude Opus 5.5 по запросу разработчика с ником @cyrilxbt.

На платформе Skillry опубликовали подборку из 389 вирусных работ, созданных языковой моделью через инструменты вроде Claude Code. В каталоге нет привычных генераций от нейросетей вроде Runway или Sora: ни один проект не использует диффузионные видеогенераторы и не проходит через классический видеомонтаж в условном After Effects. Картинка, анимация, переходы, свет и звук формируются исключительно программным кодом, который исполняется на стороне клиента в реальном времени.

В базе Skillry работы распределены по четырем основным направлениям:

  • Моушн-дизайн: 223 проекта с процедурными анимациями и сложными переходами.
  • Обучающие ролики и эксплейнеры: 47 проектов со сложной инфографикой.
  • 3D-сцены и виртуальные пространства: 51 проект с полным погружением.
  • Интерактивные игры и симуляторы физики: 68 проектов с прямым управлением.

Технологический стек во всех случаях веб-ориентированный: библиотеки Three.js и GSAP, низкоуровневые API WebGL2 и WebGPU, шейдеры на языке GLSL, векторная графика SVG, 2D Canvas и аудиосистема Web Audio API. Авторы выкладывают исходники в открытый доступ, раскрывают подробности пайплайна и честно показывают счета за токены API.

Автономные агенты и физика на миллион вычислений

Самым показательным примером автономной разработки стал эксперимент автора @Voxyz_ai. Он поставил перед Claude Opus 5.5 задачу создать интерактивную симуляцию гравитационного линзирования черной дыры, которая физически корректно искривляет свет фонового звездного неба. Разработка шла без ручного вмешательства человека ровно 5 часов 28 минут. Внутри процесса трудились три параллельных агента: два независимо тестировали написанный код и выставляли багам приоритеты от P0 до P2, а третий агент переписывал сбойные модули. Вся процедура обошлась автору в 90 долларов по тарифам API.

Видео: Skillry

Другой автор, @nybobs, заставил браузер обсчитывать столкновения 110 000 твердых тел. Для этого модель задействовала связку WebGPU и Three.js, внедрив алгоритм Augmented Vertex Block Descent из исследовательской программы SIGGRAPH 2025. Демонстрационный ролик симуляции Claude сгенерировал целиком по текстовому описанию, решив задачу математической оптимизации на лету.

Инженерная графика в каталоге выглядит не менее впечатляюще. Пользователь @konstantinsaifo и его коллеги собрали детализированные интерактивные разрезы ракетного двигателя Raptor 3 и прототипа термоядерного реактора. В этих симуляциях зритель может вручную растаскивать конструкцию на составные узлы, наблюдать динамику движения компонентов топлива внутри магистралей и регулировать температуру и поведение плазмы в рабочей камере.

Видео: Skillry

Есть в подборке и чистая художественная стилизация. Разработчик @NFT_Chen воссоздал сцену воздушного боя над морем из аниме Хаяо Миядзаки «Порко Россо». Закатный свет, геометрия облаков, морская гладь и бипланы были скомпонованы в пространстве Three.js и Web3D по единственному текстовому промпту без ручной подгонки мешей.

Звук из математических формул

Отдельного внимания заслуживает звуковой дизайн, который авторы @iniyanai и @rakhsh-tech тоже доверили коду. Никаких записанных семплов, звуковых библиотек или импортированных MP3-файлов здесь нет. Вся музыка и эффекты синтезируются через Web Audio API методами физического моделирования.

Видео: Skillry

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

Нас подкупило в этой истории то, как меняется роль самого дизайнера. Вместо бесконечного ожидания рендера тяжелых сцен в 3D-пакетах автор формулирует физические ограничения и правила мира, отдавая написание шейдеров и оптимизацию вычислений агентам. Пожалуй, если верить опубликованным исходникам, традиционный моушн-дизайн получает альтернативу: теперь визуал можно не рендерить часами в видеофайл, а описывать формулами, запускать в браузере в 60 кадрах и сразу забирать чистый код.

Ещё новости

Все новости →