Развитие C3D Web Vision: новые возможности и планы

Артем Максименко, инженер-программист, C3D Labs, представил обновления модуля C3D Web Vision и рассказал о направлениях его дальнейшего развития.

C3D Web Vision — это компонент для интеграции функциональности просмотра 3D-моделей в веб-приложения. В двух мажорных версиях — 1.8 и 1.9 — появилась новая функциональность.

В функциональности измерений реализован ортогональный размер (рис. 1) — линейный размер, размещаемый на плоскости и отображающий величину расстояния между двумя параллельными плоскостями. Кроме того, добавлен цепной размер — линейный размер, состоящий из неограниченного числа сегментов и отображающий их суммарную длину (рис. 2). Еще одной новинкой стал размер, который измеряет площадь фигуры, ограниченной замкнутым контуром по набору точек (рис. 3).

Существенные изменения произошли и в функционале построения сечений.

В инструменте секущей плоскости появилась возможность интерактивного управления плоскостью при помощи группы манипуляторов. Поддерживаются линейное перемещение вдоль оси Z и вращение в двух плоскостях вокруг осей X и Y (рис. 4). Кроме того, реализовано перемещение всей группы манипуляторов в пределах самой плоскости.

Отдельного внимания заслуживает новый инструмент — секущий куб. «Под капотом» он образуется шестью простыми секущими плоскостями (рис. 5). Куб снабжается полным набором манипуляторов для:

• линейного перемещения вдоль основных трех осей X, Y, Z и трех плоскостей, образованных комбинациями этих осей,
• масштабирования вдоль тех же осей,
• вращения вокруг тех же осей.

Это позволяет гибко настраивать просмотр усеченной модели в 3D-пространстве.

В функциональности маркера вида для обозначения текущей ориентации камеры также появились новинки. Ранее для отображения маркера использовалась только традиционная триада. Теперь добавлено альтернативное представление — видовой куб (рис. 6). В отличие от триады он поддерживает взаимодействие пользователя с ним с помощью устройств ввода. Например, при наведении курсора мыши на любой его интерактивный элемент тот подсвечивается синим цветом, а «клик» по нему приводит к перемещению камеры в соответствующее положение.

В функциональности управления камерой реализованы два новых процесса. Первый — процесс полета (Fly), позволяющий свободно перемещаться по сцене и «облетать» объекты (рис. 7). Второй процесс имитирует режим камеры от первого лица, позволяя пользователю перемещаться по сцене, как в компьютерных играх (рис. 8).

Добавлен новый аннотационный объект — Point of Interest (POI). POI представляет точку в сцене для обозначения места интереса и размещается в пространстве с заданными координатами и размерами. В качестве своего содержимого использует изображение в формате PNG. Особенность объекта заключается в том, что его относительный размер не зависит от масштаба сцены и поэтому остается неизменным при масштабировании, а плоскость, в которой он отображается, всегда параллельна плоскости экрана.

На анимации (рис. 9) показан пример, как можно использовать POI. Когда объект красного карандаша не редактируется, он скрыт от наблюдателя. Тем не менее, чтобы наблюдатель знал о положении красного карандаша в сцене, даже когда он скрыт, отображается объект POI (стилизованная буква M).

Еще один новый аннотационный объект — изображение в сцене (рис. 10). В отличие от POI этот объект не зависит от положения камеры и поэтому масштабируется и не вращается автоматически при изменении ее параметров. Кроме того, он может принимать трансформации перемещения и вращения. Так, пользователь может задать не только изображение и размеры, но и позицию и углы поворота объекта в пространстве.

Реализована возможность размещения изображения в качестве заднего фона сцены (рис. 11). Ранее можно было задать только цвет (сплошной или градиентный), теперь же поддерживаются изображения в формате PNG. Для них предусмотрено несколько режимов заполнения: замостить, вписать, заполнить, обрезать, оставить без изменений и панорамировать. Последний способ заполнения особенно удобен для панорамных снимков, выполненных на камеру с углом обзора 360°, — такие изображения «оборачиваются» вокруг сцены, создавая эффект присутствия.

Конечно, это далеко не все функции, которые мы реализовали. Их гораздо больше.

Теперь обсудим планы по развитию модуля C3D Web Vision. За все время существования этого компонента в публичном пространстве начиная с первого релиза мы получили множество откликов от пользователей. У всех были разные задачи — от стандартных вроде «визуализировать модель в браузере» до довольно специфичных.

И мы постоянно задавались вопросом: а чего же в целом хочет наш пользователь? И на него всегда находился ответ: визуализация геометрии, работа с моделями в браузере, поддержка сторонних форматов (в том числе проприетарных, помимо C3D), отображение атрибутов (чаще всего это прикладная информация, важная для пользователя, но несущественная для нас), построение проекций, поиск коллизий, использование наших GUI-компонентов и т. п. И все подобные запросы можно свести к одному глобальному — пользователь хочет минимизировать свои усилия (рис. 12).

Анализ потребностей привел нас к пониманию того, что одной только визуализации уже недостаточно — нужна более гибкая и комплексная архитектура. Пока это концепт, обсуждение продолжается, но разработка уже началась.

Ранее в состав модуля C3D Web Vision входили компоненты, описанные белым прямоугольником (рис. 13): на фронтенде это библиотека визуализации и клиент, а на бэкенде — сервис, отвечающий за визуализацию. Сейчас структура стала другой.

На рис. 13 синим цветом отмечены наши модули. С левой стороны показана фронтенд-часть, включающая в основном JavaScript-библиотеки. С правой — бэкенд-часть, состоящая из микросервисов. В целом вся система строится по принципу микросервисной архитектуры, где каждый компонент работает независимо от других и может быть использован отдельно. Оранжевым цветом отмечены пользовательские компоненты, чтобы показать их взаимодействие с нашей архитектурой. Эта часть схемы носит исключительно демонстрационный характер.

Расскажем подробнее о компонентах. Названия пока рабочие — они отражают функции компонентов, но еще могут изменяться.

Начнем с визуализации. Раньше один микросервис (Web Graphics на схеме) отвечал и за обработку графики, и за чтение форматов через наши конвертеры. Сейчас мы его разделили. Чтением теперь занимается отдельный микросервис, а cервис графики сосредоточен только на подготовке графических данных для последующей визуализации. Для визуализации графики на стороне фронтенда существует специальный клиент, JavaScript-библиотека (Web Graphics Client JS на схеме). Она запрашивает графические данные у сервиса и делает их доступными в JS-среде.

Кроме того, мы разрабатываем отдельную библиотеку визуализации (Web Renderer JS на схеме). Изначально она основывалась на исходниках десктопной визуализации C3D Vision, но со временем, в процессе своего развития и анализа откликов пользователей, изменилась, хотя основа осталась прежней.

Один из ключевых компонентов C3D Web Vision — сервис конвертации Web Converter. Выше мы уже упомянули его вскользь. Изначально он был встроен в функционал сервиса графики, но по мере развития Web Vision стало очевидно, что пользователи нуждаются в более широком спектре данных, предоставляемых после чтения файла модели, нежели только в геометрии. Это подтолкнуло нас к созданию отдельного сервиса, который предоставляет результаты конвертации в виде четырех различных типов данных.

Первым типом, конечно, является математическое представление модели в формате C3D. Он был доступен и ранее, и именно на его основе выполняется визуализация в Web Vision. Второй тип представляет атрибутивные данные в формате JSON, которые передаются без изменений. Третий тип данных — структура или дерево модели в формате JSON. Хотя оно и входит в состав файла C3D, различные оптимизации последнего делают такое дерево непригодным для дальнейшей работы с ним. Наконец, для тех, кто предпочитает использовать сторонние средства визуализации, предоставляются графические данные в виде набора треугольников. Формат их передачи еще обсуждается.

Все перечисленные данные связываются между собой через уникальные идентификаторы (UUID), что упрощает их совместное использование.

Еще один сервис (Web Collision Detection на схеме) реализует функцию поиска коллизий (рис. 15). Внутри он взаимодействует с десктопным модулем C3D Collision Detection и, по сути, представляет обертку для работы модуля в веб-среде. Сервис уже работает, однако предстоят дополнительные этапы тестирования и отладки.

Также мы разработали внутреннее приложение, состоящее из множества примеров, для демонстрации, проведения тестов и отладки. Оно показывает, как использовать API библиотеки визуализации, и отображает результат (рендеринг) выполнения кода. В планах у нас сделать это приложение публичным.

Что касается текущего этапа развития, то сервис графики (Web Graphics) уже доступен пользователям. Во втором квартале мы сосредоточились на развитии сервиса конвертации (Web Converter), а в четвертом квартале планируем вернуться к доработке сервиса поиска коллизий (Web Collision Detection). В третьем квартале 2026 года запланирован переход к разработке библиотеки визуализации (Web Renderer JS), включая создание более удобного API, тестирование и оптимизацию — объем работ предстоит немалый (рис. 16).

В настоящий момент ведется активная работа над одним из важнейших направлений — выпуск новой версии Web Vision 2.0. Основная задача версии — обеспечить быструю, плавную и удобную загрузку крупномасштабных моделей в браузере. Речь идет о моделях объемом в несколько гигабайт, что предъявляет высокие требования к производительности.

На рис. 17 представлена модель Нижегородской ярмарки, включающая множество зданий. Это полноценные модели с внутренними объектами, а не просто декоративные элементы. Web Vision использует здесь динамическую подгрузку: при удаленном ракурсе отображаются упрощенные геометрические формы, но по мере приближения детализация объектов, попадающих в поле зрения камеры, возрастает. Эта технология — основное нововведение WebVision 2.0. Еще одним значимым улучшением стал переход на WebGL 2.0 в соответствии с требованиями современных браузеров. Помимо этого, внедрен ряд дополнительных функций оптимизации.

В области рендеринга планируется добавить поддержку теней и нормализацию цветов для повышения качества визуализации. При конвертации моделей цвета часто искажаются — становятся слишком тусклыми или, наоборот, чрезмерно яркими. Новые алгоритмы позволят приводить цветовую палитру к визуально сбалансированному виду, чтобы графика выглядела аккуратно и профессионально (рис. 18). Кроме того, будет добавлена функция отображения контуров выделенной геометрии — контур будет виден сквозь всю модель.

В планах и поддержка WebGPU — перспективного стандарта аппаратного ускорения 3D-графики в браузерах. Его внедрение позволит добиться большей производительности и улучшенной визуализации в веб-среде.

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

Дополнительно планируется внедрить отображение текстурированных моделей, поддержку атрибутов PMI, просмотр технических требований, а также чтение исполнений моделей, созданных в КОМПАС-3D.

Развитие функциональности по работе с геометрией включает поддержку анимации. Пользователь сможет задавать ключевые точки для изменения параметров геометрии в реальном времени. Также планируется добавить поддержку привязки не только к вершинам сетки, но и к ее ребрам.

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