Промпт на 3 часа вычислений: собираем Three.js игру в Claude Opus 5.5 Max без правок кода

Саймон Уиллисон запустил необычный эксперимент: отправил короткий промпт в мобильное приложение Claude и получил полноценную браузерную 3D-игру с процедурной генерацией, анимацией, звуком и ачивками. Нейросеть Claude Opus 5.5 Max обрабатывала запрос 3 часа и 7 минут в обычном режиме чата, полностью спроектировав игровую механику без участия человека.

Разбираемся, как устроен этот подход к вайб-кодингу (разработке через высокоуровневые описания на естественном языке), почему открытые абстрактные инструкции заставляют рассуждающие модели работать эффективнее жестких ТЗ и как воспроизвести этот пайплайн для своих интерактивных веб-приложений.

Зачем отдавать геймдев на откуп длительным вычислениям

Классический подход к генерации кода через LLM требует от разработчика пошагового контроля: вы просите структуру, затем настраиваете Three.js сцену, отдельно пишете генератор геометрии и часами отлаживаете коллизии. Если прервать цепочку или дать модели слишком узкую задачу, результат часто выглядит как безжизненная демка из учебника.

Длительные вычисления (reasoning crunch) в моделях уровня Claude Opus 5.5 меняют этот процесс. Когда у модели есть свободный лимит времени на внутреннее планирование, она берет на себя роль геймдизайнера. Вместо генерации первого попавшегося шаблона деревовидных фракталов нейросеть проектирует правила взаимодействия, баланс сложности и звуковой дизайн.

Анатомия вводного промпта: почему сработала фраза «make sure it is fun»

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

Исходный запрос строился вокруг простой идеи сравнения различий:

Build a three js game called "Tree appreciator" - it shows you two algorithmically generated trees and the game mechanics is about appreciating the differences between them. Think hard about how to make sure it is both fun and beautiful.

В этом тексте объединены три ключевых триггера:

1. Жесткий технологический стек. Прямое указание на Three.js отсекает попытки собрать интерфейс на чистом CSS или сторонних тяжелых библиотеках.
2. Базовый игровой цикл (core loop). Генерация двух процедурных объектов и механика поиска различий задают правила игры.
3. Критерий качества. Фразы «Think hard» и «make sure it is both fun and beautiful» заставляют модель тратить вычислительные токены на проектирование наград, анимаций и интерфейса, а не просто выводить каркас 3D-моделей.

Как запустить Three.js прототип из чата локально

Когда модель возвращает результат длительной генерации, она выдает цельный HTML-документ, внутри которого упакованы стили, подключение библиотеки Three.js через CDN, процедурные генераторы геометрии и аудиосинтезатор на Web Audio API.

Шаг 1. Сохранение файла сборки

Создайте пустую директорию и скопируйте ответ модели в файл index.html.

mkdir tree-appreciator
cd tree-appreciator
touch index.html

Базовый каркас, который генерируют современные модели для самодостаточных Three.js приложений, выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tree Appreciator</title>
  <style>
    body { margin: 0; overflow: hidden; background: #1a1a1a; font-family: sans-serif; }
    #canvas-container { width: 100vw; height: 100vh; }
    #ui { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="ui">Найдите отличия и оцените красоту деревьев</div>
  <script>
    // Вся процедурная генерация и игровой цикл
  </script>
</body>
</html>

Шаг 2. Запуск локального веб-сервера

Не открывайте HTML-файл двойным кликом через протокол file://. Из-за ограничений безопасности современных браузеров (CORS и блокировки Web Audio / шейдеров) проект должен отдаваться через HTTP-сервер.

Запустите встроенный сервер Python:

python3 -m http.server 8000

Или воспользуйтесь быстрым сервером Node.js:

npx serve .

Откройте адрес http://localhost:8000 в браузере. При клике на экран игра активирует аудиоконтекст и начнет отрисовку процедурных деревьев.

Как устроена процедурная генерация внутри сгенерированной игры

Главная сложность создания браузерной 3D-игры в один промпт — отсутствие внешних файлов и текстур. Модели приходится писать процедурный генератор прямо в JavaScript.

Для игры «Tree Appreciator» Claude реализовал алгоритм L-систем (фрактального ветвления). Дерево строится через рекурсивное создание цилиндрической геометрии со смещением ветвей под случайными углами.

function generateBranch(parent, length, thickness, depth) {
  if (depth <= 0) return;

  const geometry = new THREE.CylinderGeometry(thickness * 0.7, thickness, length, 8);
  const material = new THREE.MeshStandardMaterial({ color: 0x5c4033, roughness: 0.9 });
  const branch = new THREE.Mesh(geometry, material);

  branch.position.y = length / 2;
  parent.add(branch);

  const numChildren = Math.floor(Math.random() * 3) + 1;
  for (let i = 0; i < numChildren; i++) {
    const nextBranch = new THREE.Group();
    nextBranch.position.y = length;
    nextBranch.rotation.z = (Math.random() - 0.5) * 0.8;
    nextBranch.rotation.y = Math.random() * Math.PI * 2;
    branch.add(nextBranch);
    generateBranch(nextBranch, length * 0.75, thickness * 0.7, depth - 1);
  }
}

Чтобы сделать игру увлекательной, Claude встроил различия в параметры генерации:

• Разная плотность листвы на кронах левого и правого дерева.
• Скрытые аномалии ветвления (например, лишний узел или измененный угол роста).
• Процедурные частицы падающих листьев, реагирующие на курсор мыши.
• Простая система достижений, отслеживающая, сколько пар деревьев игрок внимательно изучил.

Звуковое сопровождение реализовано без внешних MP3-файлов через программный осциллятор Web Audio API. При клике на ветку игра генерирует мягкие синусоидальные аккорды (ambient-переливы), подтверждающие выбор игрока.

Где это ломается и подводные камни

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

1. Таймауты мобильных приложений и соединений. В эксперименте Уиллисона мобильное приложение Claude держало задачу в облаке больше 3 часов. Если соединение с сервером сбрасывается или сессия засыпает, запрос может оборваться без сохранения промежуточного кода.
2. Блокировка автовоспроизведения звука. Браузеры запрещают синтез звука через Web Audio API до первого клика пользователя по странице. Если LLM не привязала инициализацию AudioContext к событию click или keydown, консоль выдаст ошибку AudioContext was not allowed to start.
3. Падение производительности (Draw Calls). При генерации тысяч отдельных веток и листьев с собственной геометрией FPS в Three.js резко падает. Для стабильных 60 кадров в секунду модели требуется явно указывать на использование THREE.InstancedMesh или объединение буферов (BufferGeometryUtils.mergeGeometries).

Что попробовать дальше

Если вы хотите повторить эксперимент и получить более сложную игровую механику, модифицируйте исходный промпт следующими параметрами:

• Добавьте требования к рендеру: укажите использование мягких теней (renderer.shadowMap.type = THREE.PCFSoftShadowMap) и шейдерной постобработки (bloom-эффект для атмосферы).
• Задайте механику таймера: попросите модель ограничить время на поиск различий и начислять бонусные очки за скорость.
• Экспортируйте результат: попросите Claude добавить в интерфейс кнопку скачивания понравившегося 3D-дерева в формате .gltf для дальнейшего использования в Blender или Unity.

FAQ

Почему Claude обрабатывал запрос дольше 3 часов?

В модели Claude Opus 5.5 Max с расширенным окном рассуждений время ответа зависит от сложности задачи. Получив инструкцию спроектировать красивую и интересную игру, модель проводит масштабный внутренний перебор архитектурных решений, алгоритмов процедурной генерации и баланса геймплея перед тем, как выдать итоговый код.

Можно ли запускать такие игры на смартфонах?

Да, код на Three.js полностью кроссплатформенный и работает в мобильных браузерах. Однако для корректного управления модель должна добавить обработчики событий touchstart и touchmove вместо стандартных событий мыши mousemove.

Как заставить модель сгенерировать игру с внешней 3D-моделью вместо процедурной?

Для запуска в один файл внешние модели использовать сложно, так как им нужны локальные файлы .gltf или .obj. Если вы хотите сторонние ассеты, попросите модель закодировать простую низкополигональную сетку прямо в теле скрипта в формате Base64 или использовать стандартные примитивы Three.js.

Чем запуск в приложении отличается от инструмента Claude Code?

Claude Code работает в терминале локальной машины разработчика, имеет прямой доступ к файловой системе, может выполнять тесты, ставить npm-пакеты и править проект итеративно. Обычный чат выдает готовый монолитный артефакт за одну генерацию, опираясь исключительно на свои внутренние рассуждения.

Источники

• Simon Willison: Tree Appreciator