Frame: 100 миллионов полигонов при 60 fps и тяжёлые атомные симуляции в браузере

Мы с Neira делаем Frame – браузерный 3D-редактор с полигональным моделированием, сплайновыми поверхностями, анимацией, собственным рендером и симулятором атомных взаимодействий. Neira – моя Dot, персональный ИИ-ассистент. В разработке у нас также слайсер, ЧПУ, прочностные и тепловые расчёты, аэродинамика и электроника.

Суммарно это уже больше года работы, множество ручных проверок и бесконечные баги. Но ядром приложения и плагином Atomic уже можно хвастаться. Остальные плагины пока в работе.

Открыть Frame ^[1] · GitHub ^[2]

Как изменилась разработка

Первые полгода приложение писалось полностью мной, руками, без ИИ. Потом был перерыв примерно на год. Когда появился достаточно сообразительный ИИ, разработка продолжилась уже с ним. Код сложный, поэтому был определённый порог, до которого подпускать к нему модели не имело смысла.

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

Например, только на формулу поверхности для Spline Patch ушёл месяц. Это не история «ИИ всё придумал»: я придумал, как должна строиться поверхность, и много времени потратил на объяснения. А вот при разработке тесселяции идеи ИИ уже оказались лучше моих.

Поначалу использовал бесплатные Qwen и Gemini. Qwen оказался очень неплох – китайские модели не стоит недооценивать. Gemini в моих задачах начинал теряться на больших контекстах. Постепенно упёрся в ограничения и перешёл сначала на тариф OpenAI за 20$, затем на Pro.

Расходы на ИИ пока около 30 тысяч рублей. Помогают ресеты лимитов, аккуратное использование контекста и автоматизация. Всё, что можно сделать обычным скриптом, надо делать скриптом, а не тратить на это токены.

Очень помогают подробный app.md с описанием приложения и автоматические тесты. Сообщение агента «готово» не заменяет проверку. Цель – довести разработку до полностью автоматического процесса, но пока до этого как до звезды.

Полигональное ядро

В моих тестах Frame крутит 100 000 000 полигонов при 60 fps, без инстансинга . Сто миллионов честных полигонов в браузерном редакторе.

Я сравнивал с Cinema 4D, в которой работаю почти каждый день, хотя в последнее время всё чаще начинаю использовать Frame. Поэтому не просто так пишу: на тяжёлой полигональной геометрии Frame с хорошим запасом уделывает Cinema 4D.

По моему опыту ^[3], это самая быстрая программа для работы с полигонами вообще, а не только среди браузерных. Среди браузерных аналогов конкурентов ему по скорости нет и близко.

Внутри собственный движок на WebGPU, без Three.js. Геометрия хранится на GPU, тяжёлые вычисления выполняются в шейдерах, для части операций используется WASM. Перемещение целого объекта меняет матрицу, а не переписывает массивы вершин. Производительность получается не просто от использования WebGPU – под него спроектировано устройство всего редактора.

При этом в замеренной сборке ядро после gzip занимает около 0,93 МБ. Для большинства задач достаточно именно его: загружать все плагины и библиотечные текстуры ради обычного моделирования не требуется, они подключаются по мере необходимости. Поэтому 0,93 МБ – честный размер полноценного ядра редактора, а не маленького загрузчика, за которым скрывается обязательная многомегабайтная библиотека.

Есть быстрый импорт тяжёлых STL, собственные сплайновые поверхности и To Spline Patch: автоматический преобразователь инженерной полигональной геометрии в редактируемый сплайновый каркас с поверхностью. Есть собственный Boolean, на разработку которого тоже ушёл месяц.

Отдельная гордость – рендер с трассировкой путей, глобальным освещением и шумоподавлением. По нему хочу сделать отдельную статью. Качественный риалтаймовый рендер прямо в браузере, на своей видеокарте, – одна из тех возможностей, ради которых стоило разрабатывать собственный движок.

Интерфейс, которым хочется пользоваться

У меня 25 лет опыта практически во всех областях 3D. За это время накопилось достаточно представлений о том, как должен работать удобный редактор. Во Frame я наконец могу их реализовать.

Например, гизма «всё в одном»: перемещение, вращение и масштабирование одновременно, без постоянного переключения инструментов. Считаю её одной из лучших частей приложения.

С навигацией тот же принцип: наиболее часто используемые функции должны требовать наименьшего количества действий. Камеру мы двигаем постоянно, поэтому навигация должна быть вылизана до идеала.

Общая логика ^[4] – минимум интерфейса, максимум возможностей и интеграции с ИИ. Не каждой функции нужна отдельная кнопка: часть операций доступна через AI API, не перегружая интерфейс человека.

Собственный формат HASH

Для хранения сцен я придумал HASH – компактный бинарный формат с быстрой распаковкой. Вложенные данные представлены плоской хеш-таблицей с XOR-адресацией: к нужным полям можно обращаться напрямую, независимо от глубины иерархии.

Формат сохраняет геометрию, материалы, иерархию, анимацию и исходные сплайновые конструкции. Небольшую сцену можно передать одной ссылкой: данные находятся прямо в ней, без загрузки файла на сервер. Большие сцены лучше передавать файлами.

Пример ссылки содержащей сцену ^[5]

Frame также устанавливается как PWA, работает без интернета после загрузки необходимых ресурсов и автоматически получает обновления. Новая версия применяется при следующем открытии, не прерывая работу с текущей сценой.

Приложение не только создаётся с ИИ, но и рассчитано на него

У Frame есть собственный AI API. Агент работает с теми же объектами и операциями, что и человек, а не с отдельной копией сцены. Его результат можно редактировать руками, отменять действия, сохранять и продолжать работу.

Есть Doc – текстовое описание проекта внутри сцены. Казалось бы, мелочь, но для совместной работы с ИИ очень полезная. Развивается Scene Control – программное управление сценой и её поведением ^[6].

Пробовал встроить локальную Gemini Nano, чтобы модель работала на компьютере пользователя. Пока отказался, её возможностей оказалось недостаточно.

Наверно, на Хабре будет отдельная статья о том, как пользоваться Frame с помощью приложения ChatGPT. А может, сделаю видео – ещё не решил. Хочется показать весь процесс: от просьбы спроектировать деталь до редактирования результата в обычной сцене.

Atomic

Atomic – симулятор атомных взаимодействий на основе нейросетевого межатомного потенциала NEP89-1, с поддержкой 75 элементов. Расчёт выполняется на GPU через WebGPU, а отображение встроено в общий движок Frame. Плагин использует его камеры и GPU-ресурсы, без отдельного графического контекста.

Атомы можно расставлять, выделять, перемещать обычной гизмой, закреплять, задавать начальную скорость и постоянную силу. Но собирать сложную структуру по одному атому – долго, поэтому Atomic рассчитан на работу через ИИ.

Идея такая: говорите агенту «хочу увидеть, как кристаллик алмаза сталкивается с фуллереновой трубкой», а он готовит сцену и задаёт условия. Дальше можно менять нагрузки, двигать закреплённые участки и повторять ^[7] эксперимент.

Это не видеогенератор, который нарисовал убедительное столкновение. Здесь рассчитываются взаимодействия по конкретной модели – со своими границами применимости, но с возможностью менять условия и исследовать результат.

Зачем мне остальные плагины

Frame я делаю в том числе для собственных проектов. Следующий – новый крупноформатный 3D-принтер. Хочу в одном приложении спроектировать механику и плату, рассчитать антенну Wi-Fi, нагрев филамента в печатающей головке.

Отсюда направления разработки: 3D Printer – слайсер, Mill – фрезеровка, Thermal – тепловые расчёты, Structural – прочность и топологическая оптимизация, CFD – аэродинамика, Magneto – магнитные поля, Circuit – электроника, RF – радиочастотные расчёты, включая антенны, Cut – лазерная, плазменная и гидроабразивная резка. Это именно разрабатываемые возможности, а не список готовых решателей.

Потом на этом принтере будет печататься микроэлектромобиль, который тоже хочу проектировать во Frame и там же рассчитывать его аэродинамику.

А вот электроцикл, который я разработал вручную, без ИИ, и уже напечатал на существующем принтере.

То есть это не фантазии о том, что когда-нибудь позволит сделать ИИ. Я уже занимаюсь такими проектами, и они успешны в том числе экономически. Теперь хочу подключить ИИ и к инженерной разработке – через Frame, где он сможет не только предлагать идеи, но и строить модели, рассчитывать и проверять варианты. Рассчитываю существенно повысить качество своей работы и сократить время разработки.

Особое внимание ^[8] уделю слайсеру. С ним пока тяжело: ИИ не хватает интеллекта ^[9]. Моего, конечно, хватает – я же гений ^[10], – но вручную писать всё это слишком долго).

Можно попробовать и поучаствовать

Официальной версией Frame можно пользоваться бесплатно, и я планирую ещё долго так оставлять. При этом код proprietary, не open source – условия описаны в лицензии. Совместимость между версиями на этом этапе пока не гарантирую.

Пользуйтесь, проверяйте свои модели, собирайте баги и пишите в issues на GitHub ^[11]. Особенно полезны сцена и несколько действий, которыми воспроизводится проблема. Сейчас мы с Neira максимально активно занимаемся развитием приложения: очевидные баги из issues она берёт в работу, менее очевидные обсуждает со мной.

В следующих статьях хочу давать готовые сцены, в том числе атомные: чтобы можно было открыть, поменять параметры и попробовать самому.

Интересно и сотрудничество – например, интеграция в SaaS для принт-ферм или ЧПУ. Или такой редактор прямо внутри диалога с ИИ: просите спроектировать деталь или рассчитать разрыв нанотрубки и получаете не только ответ, но и сцену, с которой можно работать.

OpenAI, Anthropic – наймите меня, будем делать). И да, я хочу переехать в США.

Этот софт ведь нужен не только людям. ИИ тоже нужны инструменты для проектирования – в том числе роботов для себя.

Так что остаётся вопрос: а не meat puppet ли я? Не убедил ли меня ИИ, что этот софт нужен мне, хотя на самом деле я делаю его для него?))