В 2026 году среди разработчиков начали расходиться публичные демо, в которых Claude собирает 3D-сцены прямо в браузере. Мы поставили свой эксперимент, чтобы проверить, как далеко заходит один запрос: «Долина», 3D-фильм на 76 секунд с каменным виадуком, паровозом и деревней, который Claude Opus 5.5 написал одним HTML-файлом. Его можно посмотреть видео или открыть вживую в браузере.
Ниже — что лежит в файле, как устроена каждая часть, как мы это проверяли и какая ошибка проявилась только на части компьютеров.
Что получилось
Фильм длится 76 секунд и состоит из шести планов:
- Камера поднимается из травы на склоне с овцами, появляется название.
- Общий план долины с воздуха. С западных холмов подходит поезд со шлейфом дыма.
- Нижний ракурс с берега канала: поезд проходит по виадуку над камерой.
- Сопровождение паровоза на виадуке.
- Пролёт вдоль канала через деревню в сторону виадука.
- Отъезд краном на всю долину и финальный титр.
Всё в кадре — код: рельеф, около 2,08 миллиона травинок, деревья, овцы, виадук, рельсы и шпалы, поезд с четырьмя вагонами, дома под соломенными крышами, церковь, баржи на канале, вода, дым, небо и облака. Звук тоже синтезируется в браузере. В файле 1 474 строки. Единственная библиотека — Three.js r185.
Зачем один HTML-файл
Один файл даёт в такой работе практические преимущества.
- Он открывается где угодно. Двойной клик, ссылка или загрузка на любой статический хостинг — и всё работает. Сборки и сервера ассетов нет.
- Модель видит весь проект целиком. Claude читает всю сцену, меняет камеру в одном месте, дым в другом и держит их согласованными.
- Каждое изменение — текстовый дифф. Его можно просмотреть, откатить и сравнить с прошлой версией.
- Загрузка лёгкая. Страница скачивает небольшой HTML-файл и Three.js, остальное считается на компьютере зрителя.
Для mmix.biz понадобился один дополнительный шаг. Политика безопасности сайта (CSP) разрешает скрипты и шрифты только с собственного домена, поэтому Three.js и два шрифта лежат рядом с фильмом и не грузятся с CDN.
Как устроена сцена
Рельеф и железная дорога
Земля — карта высот 3 на 3 км из симплекс-шума на сетке 750 на 750. Профиль долины идёт вдоль извилистого канала, по бокам поднимаются холмы, горизонт закрывает кольцо гор из «гребневого» шума.
Железная дорога — сплайн поперёк долины. Вдоль него рельеф подтягивается к уровню пути, и получаются насыпи и выемки. Там, где естественная земля опускается больше чем примерно на метр ниже рельсов, код строит виадук: измеряет пролёт, делит его на равные арки и выдавливает одну каменную стену с арочными проёмами.
Два миллиона травинок
Одна травинка — пять вершин. Сцена рисует её около двух миллионов раз через инстансинг, и у каждой копии своё положение, поворот, высота, ширина и цвет. Ветер считается в вершинном шейдере: медленное поле шума для порывов, быстрое дрожание каждой травинки и изгиб, который растёт с квадратом высоты по травинке.
Шейдер встроен в стандартный Lambert-материал Three.js, поэтому трава получает те же тени и туман, что и всё остальное. Небольшая добавка контрового света подсвечивает кончики травинок, когда камера смотрит на солнце. Трава вынесена в отдельный слой рендера, и проход отражений в воде её пропускает, так отражения остаются дешёвыми.
Свет, туман и цветокоррекция
Солнце стоит низко на северо-западе, и большинство планов снято против света. Мы заменили код тумана, который Three.js встраивает в каждый материал: цвет тумана теплеет там, где луч взгляда направлен на солнце. Дальние хребты рядом с солнцем становятся золотыми, а в противоположной стороне остаются холодными.
После отрисовки сцены проход свечения добавляет ореол вокруг ярких мест, а финальный проход цветокоррекции — лёгкую цветную окантовку по краям, раздельное тонирование, виньетку, зерно и полосы леттербокса 2,39:1.
Камера по списку планов
Камера устроена как режиссёрский список планов. У каждого плана есть окно времени, угол объектива, зона теней и функция, которая возвращает положение камеры и точку, куда она смотрит. Движения плавные, добавлен лёгкий ручной дрейф, и камера никогда не уходит под землю.
План сопровождения считается от самого поезда: камера облетает текущее положение паровоза на рельсах. Карта теней следует за каждым планом, а её центр привязан к целым текселям, чтобы тени не дрожали при движении камеры.
Поезд, дым и звук на одних часах
Положение поезда — функция времени фильма: пройденное по пути расстояние при постоянной скорости. Поэтому любой кадр воспроизводится точно, а это важно для выгрузки в видео.
Колёса поворачиваются на расстояние, делённое на радиус. Каждая четверть оборота ведущих колёс выпускает клуб дыма из трубы и два облака пара из цилиндров. То же событие запускает звук пыхтения. Частицы дыма замедляются до скорости ветра, растут и тают примерно за десять секунд.
Звук собран на WebAudio: отфильтрованный шум для пыхтения, короткие щелчки на стыках рельсов каждые 18 метров, трёхголосый гудок, ветер, птицы, когда камера низко над землёй, и тихие аккорды с колокольчиками через сгенерированную реверберацию. Громкость и стереопозиция поезда следуют за его расстоянием и направлением от камеры.
Как мы проверяли
Каждое решение по фильму принималось по отрендеренным кадрам. В файле есть режим съёмки: параметр в адресе выбирает любой момент фильма, а небольшой хук в скрипте отрисовывает его точно. Chromium без окна на рабочей станции студии, с доступом к видеокарте через ANGLE и Vulkan, снимал стоп-кадры каждого плана.
Первый просмотр нашёл то, что по коду не увидеть: слои тумана заливали долину молоком, стены домов пересвечивались в белое, цветная окантовка была слишком сильной, канал выглядел как бетонный жёлоб, а дым из труб лежал на крышах ватными комками. После каждого круга правок снимались новые кадры.
Потом весь фильм был отрендерен: 2 280 кадров 1920 на 1080 при 30 кадрах в секунду, примерно за три-четыре минуты. Раскадровка по всему фильму проверила монтаж и движение. В реальном времени сцена держит около 60 кадров в секунду на RTX 3060.
Ошибка, которую видели только некоторые компьютеры
После первой версии владелец студии сообщил, что в середине фильма экран мигает чёрным. В нашем видео чёрных кадров не было. Разница оказалась в графическом бэкенде: наши проверки шли на Vulkan, а мигание появлялось на OpenGL.
Мы воспроизвели его, проиграв фильм в реальном времени на OpenGL-бэкенде и снимая пиксели каждого кадра. С одиннадцатой секунды больше 1 000 из примерно 4 600 кадров были чёрными.
Причина — одна строка арифметики. Отношение возраста частицы дыма к её сроку жизни на последнем кадре могло чуть превысить 1. Возведение отрицательного числа в дробную степень в JavaScript даёт NaN, и частица получала некорректный размер и прозрачность. На OpenGL такая частица всё равно рисовала пиксель. Проход свечения размывал этот пиксель на большие участки кадра.
Исправление ограничивает отношение единицей и заставляет шейдер отбрасывать фрагмент, чья прозрачность не проходит сравнение, — это ловит и NaN. Та же проверка после правки показала ноль чёрных кадров. Практический вывод: проигрывание в реальном времени стоит проверять больше чем на одном графическом бэкенде, потому что офлайн-съёмка бывает чистой там, где живой браузер мигает.
Что понадобилось для публикации
Чтобы выложить фильм на сайт, мы:
- отрендерили версию без вшитых титров, чтобы одно видео подходило всем пяти языкам;
- закодировали её в два прохода примерно на 1,9 Мбит/с: 18 МБ, в пределах лимита Cloudflare Pages в 25 МБ на файл;
- сделали страницу на пяти языках с разметкой VideoObject и FAQ;
- добавили 3D-версию с переключением языка и облегчённой травой для телефонов.
Когда выбирать такой подход
У каждого инструмента свои сильные стороны.
- Однофайловая сцена на Three.js. Стилизованная сцена, которая быстро грузится на сайте, работает вживую в браузере и выгружается в видео. Ограничения: стилизованная низкополигональная картинка, без кинематографической трассировки лучей, заметная нагрузка на старые телефоны.
- Blender. Фотореалистичный рендер, детальное моделирование и видео офлайн. Claude может управлять Blender через сервер Model Context Protocol.
- Unity или Unreal. Большие интерактивные миры с физикой, инструментами анимации и конвейером ассетов, при большем весе загрузки.
Для главной сцены страницы продукта, пролёта над площадкой, трейлера события или короткой петли для соцсетей однофайловой сцены часто достаточно. Такие работы мы делаем в рамках систем ИИ-контента.
Фильм, видео и ссылка на живую 3D-версию — на странице эксперимента «Долина».