От пикселей к коду: суть технологии
img2threejs — это проект, который меняет парадигму создания 3D-контента для веба. Вместо традиционной фотограмметрии или скачивания готовых ассетов, система генерирует THREE.Group на TypeScript, воссоздавая объект исключительно из примитивов, процедурных шейдеров и сгенерированной геометрии. Результат — легковесная, анимационно-готовая модель, работающая прямо в браузере без загрузки внешних файлов.
Ключевое отличие подхода — reconstruction-by-code. Инструмент использует AI-агентов (поддерживает Claude Code, Codex, OpenCode) для анализа изображения, создания спецификации и поэтапной генерации кода. Это обеспечивает высокую эффективность использования токенов, так как модель тратит ресурсы только на визуальную оценку и написание кода, а не на обработку тяжелых данных.
Архитектура и строгий контроль качества
Процесс реконструкции не является «черным ящиком». Он разделен на этапы (blockout → structural → form → material → surface → lighting → interaction → optimization), каждый из которых проходит через строгие гейты качества. Система проводит detail-first analysis: перед генерацией кода создается инвентарь деталей (блеск, скругления, винты, следы износа), и ни один этап не продвигается дальше, пока все элементы не будут маппированы на реальные компоненты или материалы.
Для персонажей и людей предусмотрен отдельный маршрут с учетом анатомии, пропорций и лицевых ориентиров. При необходимости используется проекция референса на параметрический шаблон с расчетом уверенности по регионам.
Примеры реконструкции и точность
Проект демонстрирует высокую точность как для хард-серфейс объектов, так и для сложных игровых предметов. Ниже приведены примеры из галереи, где код полностью заменяет 3D-модель:
| Объект | Категория | Особенность реконструкции |
|---|---|---|
| Glock-18 · Ghost Protocol (CS2) | Оружие | Семейно-специфичные контракты компонентов, проверка покрытия текстур структурой |
| Classic Knife · Fade (CS2) | Оружие | Анализ градиентов, проекция финиша, строгие гейты целостности геометрии |
| Sony WF-1000XM3 Earbuds | Hard-surface | Воспроизведение мелких деталей, скруглений и материалов корпуса |
| Doraemon House (diorama) | Диорама | Изометрическая реконструкция с сохранением пропорций и деталей интерьера |
| BMX Endurance Bike | Hard-surface | Сложная структура рамы, колес и механизмов, собранная из примитивов |
Как это работает технически
Инструмент интегрируется как навык (skill) в среду Claude Code. Пользователь предоставляет одно изображение, и система запускает конвейер:
- Intake: Анализ изображения и создание спецификации (
assessment.json). - Spec: Генерация скульптурной спецификации с учетом деталей.
- Build: Пошаговая генерация файла
createObjectModel.ts, который экспортирует фабрику Three.js объектов.
Скрипты написаны на Python 3.10+ и не требуют установки дополнительных зависимостей, кроме самого репозитория. Для валидации используется детерминированный обзорный инструмент Divine Eye, который сравнивает рендер с референсом и требует исправлений, если качество не соответствует порогу.
Планы развития и Roadmap
Версия 1.4 уже включает специализированный модуль для реконструкции оружия CS2 с проверкой происхождения и структурной целостности. В ближайших планах — генератор существ (creature generator) с поддержкой четырех планов тела (квадроногие, птицеподобные, крылатые драконы, змеевидные) и улучшенные цветовые гейты на основе математики CIEDE2000.
Проект открыт для сообщества: исходный код и галерея демо доступны на GitHub. Это мощный инструмент для разработчиков игр и веб-дизайнеров, стремящихся минимизировать размер ассетов и максимизировать гибкость 3D-объектов в браузере.
Источник: Github ↗