Привет, Хабр! Если вы открыли эту статью, вероятно, вам интересна разработка 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 — это увлекательное, но непростое путешествие. Мы столкнулись с неожиданными поворотами, техническими сложностями и организационными изменениями. Но мы справились и получили ценный опыт.

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

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

Комментарии (2)


  1. jonic
    26.09.2024 20:40

    Так вот как оно называется…


  1. radtie
    26.09.2024 20:40

    GLTF-файлы получаются в несколько раз больше по размеру, чем исходные IFC.

    Если использовать бинарный GLTF (GLB) и сжимать графику DRACO алгоритмом, можно очень ощутимо уменьшить размер модели.