Привет, Хабр! Если вы открыли эту статью, вероятно, вам интересна разработка BIM‑приложений, а конкретно — просмотрщиков 3D‑моделей (Viewer). Возможно, у вас уже есть свое BIM‑приложение, и вы столкнулись с трудностями, или вы только планируете начать разработку и собираете информацию. В любом случае, вы попали по адресу.

Я расскажу вам историю о том, как мы создавали наш 3D Viewer, какие подводные камни встретились на пути, и какие уроки мы извлекли. Поехали!

Выбор технологии: своя разработка vs открытые библиотеки

Когда мы начинали наш проект чуть больше года назад, у нас было два пути:

1. Написать свой движок с нуля (очень дорого и требует большой команды)

2. Использовать библиотеки с открытым исходным кодом

Мы выбрали второй вариант, и нашим фаворитом стала библиотека IFC.js. На тот момент она была (и остается) самой производительной, имела лицензию MIT без ограничений в использовании и активное сообщество разработчиков.

Как работает IFC.js

IFC — это текстовые файлы, сформированные по международному стандарту, описывающие информацию о 3D модели: стены, их цвет, координаты.

Процесс работы выглядит так:

1. Мы передаем библиотеке IFC‑файл

2. Библиотека преобразует его в 3D‑модель

3. Мы получаем возможность взаимодействовать с этой моделью

Под «капотом» происходит следующее:

• IFCWorker.js (JavaScript‑код в веб‑воркере) запускает WebAssembly‑модуль

• WebAssembly‑модуль читает IFC‑файл

• На основе полученных данных создаются объекты Three.js для отрисовки модели

• IFC.js предоставляет высокоуровневое API для работы с моделью

Оптимизация загрузки: IFC vs GLTF

Загрузка больших IFC‑файлов может занимать много времени. Но есть способ это ускорить — конвертация в формат GLTF.

GLTF — это своего рода JPEG в мире 3D. Он широко поддерживается, в том числе Three.js. IFC.js предоставляет GLTF‑менеджер для конвертации IFC в GLTF.

Результаты впечатляют: модель, которая открывалась 4–5 секунд, теперь загружается мгновенно. Однако, как и всегда, выигрывая в скорости мы проигрываем в памяти. GLTF‑файлы получаются в несколько раз больше по размеру, чем исходные IFC.

Практическое применение

Есть два основных подхода к использованию механизма конвертации:

1. Серверная конвертация (для систем СОД с акцентом на консистентность данных)

2. Клиентская конвертация с сохранением в IndexedDB (для автономных просмотрщиков)

Мы выбрали второй вариант, так как разрабатывали просмотрщик для прорабов, работающих на стройке без интернета.

Неожиданный поворот: закрытие проекта

И тут случилось неожиданное — разработчики IFC.js решили полностью закрыть проект и выпустить новый. Все каналы поддержки в Discord были удалены, документация исчезла.

Это был шок. Я часто видел, как библиотеки переставали поддерживать, но чтобы так резко сжигать все мосты — с таким столкнулся впервые.

Главный идеолог библиотеки, Антонио Гонсалес Вьегас, архитектор с 10 летним опытом, самостоятельно освоивший программирование, преследовал цель сделать разработку BIM‑приложений доступной каждому. Цель была достигнута, но существующая кодовая база не позволяла масштабироваться. И он решил переписать все с нуля. Так вышел новый проект под новым брендом That Open Company.

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

Новая версия: @thatopen/components

Новая библиотека @thatopen/components (версия 2.1.0 на момент написания) имеет ряд преимуществ:

1. Разделение на два пакета: @thatopen/components и @thatopen/components‑front

2. Возможность выполнения кода как в браузере, так и на сервере

3. Новый формат данных — frag, позволяющий быструю загрузку моделей

4. Куллер — оптимизация рендеринга путем удаления невидимых элементов

5. Постобработка модели для улучшения визуального качества

Однако есть и недостатки:

1. Оптимизации работают нестабильно на сложных моделях

2. Требуется серьезная доработка бэкенда для поддержки новых оптимизаций

3. Проблемы с подсветкой элементов

4. Постобработка может вызывать проблемы с производительностью

Компромиссное решение: версия 1.5.1

После тщательного анализа мы остановились на версии 1.5.1. Она не предоставляет всех новых оптимизаций, но:

1. Поддерживает работу с фрагментами

2. Корректно работает подсветка элементов

3. Постобработка работает стабильно (30 FPS)

4. Частично совместима с последними версиями библиотеки

А это значит, что впоследствии будет проще переезжать на последнюю версию, когда она станет стабильной.

Архитектурные решения

Мыиспользуем паттерн MVVM и строго ограничиваем взаимодействие с библиотекой через интерфейсы. Это позволяет нам быть готовыми к будущим обновлениям API.

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

Это может гарантировать вам низкое зацепление.

Состояние сообщества

К сожалению, активность сообщества значительно снизилась после закрытия Discord‑чатов. Сейчас есть официальный форум, но ответы на вопросы могут занимать несколько дней. На момент написания статьи у библиотеки было всего два технических специалиста.

Разработка 3D Viewer для BIM — это увлекательное, но непростое путешествие. Мы столкнулись с неожиданными поворотами, техническими сложностями и организационными изменениями. Но мы справились и получили ценный опыт.

Надеюсь, наша история поможет вам избежать некоторых подводных камней в вашем проекте. Удачи в разработке!

Автор: Виктор Трумпель, ведущий разработчик ЛИИС.Формика