07.08.2023 • C3D Vision, C3D Web Vision

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений

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

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 1

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

C3D Vision

C3D Vision, являясь весьма популярным модулем среди инструментов C3D Toolkit, тем не менее вызывает немало вопросов у пользователей, заинтересовавшихся его возможностями. Как правило, большинство из них обусловлено неверными суждениями о сущности этого компонента. Ошибка обычно заключается в том, что C3D Vision принимают за конечное десктопное приложение (CAD, BIM и т.п.), которым он вовсе не является.

Именно поэтому, несмотря на то что у нас нет сомнения в знакомстве читателя с понятием конечного (end-user) приложения, необходимо рассмотреть ряд определений, нужных нам для правильно понимания сути компонента Vision. По существу, любое приложение можно разделить на две основополагающие части — математическую и графический интерфейс пользователя (graphical user interface — GUI).

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

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 2

Графический интерфейс пользователя — это система средств, определяющая «внешность» приложения и характер взаимодействия пользователя с ним (user experience). Данная система основана на представлении системных объектов и функций в виде графических компонентов экрана (кнопок, списков, окон и пр.).

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 3

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

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 4

Давайте рассмотрим в качестве примера простое конечное приложение: просмотрщик геометрии C3D Viewer.

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

  • визуализация для отображения моделей;
Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 5
Графическая сцена с открытой моделью (выделена оранжевым прямоугольником)

  • геометрическое ядро для расчета геометрических характеристик;
Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 6
Одно из применений геометрического ядра — расчет МЦХ для выделенного элемента модели (выделено оранжевым прямоугольником)

  • обмен данными для чтения и записи файлов в различных форматах.

Графический интерфейс C3D Viewer представляет собой главное окно, диалоговые окна, ленточный контейнер для множества кнопок (ribbon), нажатия на которые запускает соответствующие события.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 7

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

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

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 8

С точки зрения любого разработчика (специалиста) модуль представляет собой набор средств разработки или, как его еще часто называют, программную библиотеку для создания приложений (software development kit — SDK). Такой специализированный модуль выполняет конкретные, зачастую узконаправленные, задачи. Он не реализует логику взаимодействия с графическим интерфейсом, однако предоставляет доступ к своему функционалу на программном уровне. Таким образом, такой компонент предназначен исключительно для разработчиков другого программного обеспечения на его основе. Именно к таким компонентам относится и C3D Vision.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 9

Итак, к чему мы пришли? C3D Vision — это программная библиотека, предоставляющая возможности визуализации специалисту-разработчику и инструменты для их интеграции в код его приложения. В комплектацию этого модуля входят: множество заголовочных файлов, две библиотеки — статическая c3dvision.lib и динамическая c3dvision.dll, представляющие собой скомпилированные исходные файлы Vision.

Ну что ж, давайте рассмотрим более детально характеристики Vision.

Наш компонент, в первую очередь, отвечает за визуальное отображение 2D и 3D геометрических моделей, используя возможности OpenGL. В нем создан набор интуитивно понятных графических функций, позволяющих существенно упростить низкоуровневое взаимодействие разработчика инженерного приложения с отрисовкой геометрии. Такие особенности в полной мере позволяют использовать C3D Vision как движок визуализации.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 10
Графическая сцена C3D Vision и решение VS на C++ с тестовыми примерами Vision

Библиотека компонента полностью написана на языке программирования C++ и на данный момент поддерживает работу в операционных системах Windows и Linux. Для использования движка визуализации в приложениях, разрабатываемых с применением .NET, реализована обертка на языке C#.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 11
Графическая сцена C3D Vision и решение VS на C# с тестовыми примерами Vision

Компонент может быть легко интегрирован с различными фреймворками пользовательского графического интерфейса. Это, в первую очередь, необходимо для того, чтобы отобразить окно графической сцены в интерфейсе приложения. В качестве демонстрации примера такой интеграции нашими разработчиками подготовлены специальные проекты с использованием библиотек GUI MFC (Microsoft) и Qt (The Qt Company).

Для доступа к функционалу библиотека C3D Vision обладает обширным программным интерфейсом (application programming interface — API), описывающим десятки различных классов и функций для управления визуализацией внутри конечного инженерного приложения.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 12

Таким образом, C3D Vision, являясь библиотекой для разработчиков приложений, в предложенной выше схеме относится непосредственно к математической части, а значит не может называться конечным приложением.

C3D Web Vision

В последнее время интерес к данному компоненту очень быстро растет, и также как в случае с Vision, сопровождается возникновением ряда вопросов. Одни пользователи, обращая внимание на название компонента, закономерно считают его аналогом Vision, но только для веб-среды, другие считают конечным веб-приложением. Поэтому давайте рассмотрим, что же такое C3D Web Vision, и какое место занимает библиотека визуализации C3D Vision в его структуре.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 13

Вообще говоря, любое типичное веб-приложение (веб-решение) организовано на базе вычислительной архитектуры, состоящей из сервера (backend) и клиента (frontend). Независимо от того, установлены сервер и клиент на разных вычислительных устройствах или на одной машине, взаимодействуют друг с другом они через сетевые протоколы.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 14

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

Сервер представляет собой программу, расположенную на одной мощной машине и реализующую определенную логику работы клиента с ним. Сервер ожидает запросы от программ-клиентов и отправляет им свои ресурсы в определенном формате.

В свою очередь, C3D Web Vision не реализует описанные выше программы клиента и сервера, но при этом предоставляет два модуля для использования их в веб-решении разработчика. Давайте рассмотрим эти модули подробнее.

C3D Service

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

Итак, C3D Service — это микросервис, разработанный для выполнения следующих задач.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 15
Часть интеграционной схемы Web Vision и место C3D Service в ней (сторона сервера)

1. Управление структурой и атрибутами модели.

В первую очередь, микросервис отвечает за чтение и запись геометрической модели в любом обменном формате (в т.ч. .c3d), подготовку древовидной структуры сборки модели, ее узлов и атрибутивной информации, построение триангуляционной сетки модели для визуализации. Чтобы читать и записывать файлы в различных обменных форматах и управлять структурой модели, микросервис использует компоненты C3D Converter и C3D Modeler соответственно.

2. Управление кэшем геометрии для быстрой загрузки.

Для ускорения открытия модели сервис выполняет кэширование ее геометрических данных. Это необходимо для сокращения издержек, возникающих при загрузке модели на сервер, конвертации ее исходного формата в формат .c3d и построении визуального представления.

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

3. Управление пользовательскими соединениями и рабочими пространствами.

Для активного пользователя веб-приложения на основе Web Vision микросервис создает сессию (Session) и специальное рабочее пространство (Workspace). При необходимости сервис позволяет возвращать списки всех активных пользователей, сессий и рабочих пространств.

4. Отслеживание состояния сервиса.

5. Изменение параметров сервиса.

Сервер веб-решения взаимодействует непосредственно с микросервисом C3D. Для организации этого взаимодействия сервис предоставляет REST API с описанием функционала, упомянутого выше в пунктах 1-5. Стоит отметить, что разработчик не ограничен в выборе языков программирования при написании серверной части, т.к. к REST API разработана Open API спецификация, с помощью которой можно сгенерировать API клиент под любой из поддерживаемых Open API Generator программируемых языков. Сама спецификация представлена файлом swagger.yaml и поставляется с микросервисом.

C3D Viewer API

Для управления непосредственно отображением моделей в браузере C3D Web Vision включает второй модуль — npm-пакет @c3dlabs/c3dviewer-api, который необходимо использовать на стороне клиента.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 16
Часть интеграционной схемы Web Vision и место @c3dlabs/c3dviewer-api в ней (сторона клиента)

Данный пакет содержит несколько важных составляющих.

1. npm-пакет c3dvision-wasm. Представляет собой библиотеку, собранную на исходных файлах движка визуализации C3D Vision. Для работы с движком в веб-среде его исходные файлы на C++ преобразованы с помощью компилятора Emscripten в WebAssembly.

2. npm-пакет c3dvision-js. Представляет собой обертку JavaScript для интеграции C3D Vision в HTML-страницу. Интеграция осуществляется за счет представления окна визуализации в виде HTML-элемента <canvas> для отрисовки трехмерной графики. Для рендеринга геометрических моделей Web Vision применяет технологию WebGL.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 17

3. API на языке TypeScript, разработанный с целью обеспечения взаимодействия специалиста с библиотекой на стороне клиента и включающий упомянутые выше пакеты в качестве зависимостей.

Для начала работы разработчика с визуализацией C3D Viewer API имеет метод для инициализации экземпляра библиотеки C3D Vision. Данный метод принимает в качестве обязательного параметра объект с настройками микросервиса C3D (имя хоста и порт). Таким образом, организуется канал связи между Viewer API и C3D Service для передачи геометрии модели и ее отрисовки средствами Vision.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 18
Полная интеграционная схема Web Vision

Стоит отметить, что в Web Vision возможности визуализации несколько ограничены по сравнению с возможностями десктопной визуализации. Основное ограничение связано с редактированием исходной модели: конечный пользователь не может изменять геометрические характеристики ее объектов, т.к. модель имеет статус read-only. Таким образом, Web Vision позволяет только просматривать модели в графической сцене, т.е. по сути предоставляет функционал просмотрщика.

Далее приведем возможности визуализации Web Vision, доступные для разработчика веб-решения в связи с наличием в его составе модуля C3D Viewer API.

1. Отображение моделей в трехмерной графической сцене.

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 19

2. Управление визуальными свойствами сцены и моделей:

  • изменение цветов фона сцены, подсветки и выделения деталей модели,
  • раскраска элементов модели любым цветом,
  • переключение режимов отображения модели (полутон, полутон с каркасом, каркас),
  • переключение видимости элементов модели.
Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 20

3. Управление камерой:

  • вращение, панорамирование, масштабирование модели,
  • изменение настроек камеры,
  • стандартные виды.
Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 21

4. Управление динамическими сечениями (добавление сечения, удаление, редактирование).

5. Выбор объектов на сцене (селектирование).

Визуализация графики от C3D Labs: возможности для нативных и веб-приложений, фото 22

6. Управление аннотационными объектами:

  • комментарий, линейный и угловой размеры,
  • добавление объекта, удаление, обновление визуальных параметров (текст, шрифт, цвет).

Думаем, теперь для всех стало очевидно, что C3D Web Vision является не конечным веб-приложением или аналогом библиотеки визуализации C3D Vision в веб-среде, а компонентом для интеграции возможностей просмотрщика (viewer) в веб-решение разработчика.

Если у вас остались вопросы, или вы хотите взять на тестирование наши компоненты — обратитесь любым удобным способом в компанию C3D Labs. Также вы можете скачать наш десктопный просмотрщик C3D Viewer или попробовать браузерный просмотрщик C3D Web Viewer.

Артем Максименко, младший программист
Автор:
Артем Максименко
Младший программист C3D Labs
Поделиться материалом
Вверх