¬аше окно в мир —јѕ–
 
Ќовости —татьи јвторы —обыти€ ¬акансии Ёнциклопеди€ –екламодател€м
—татьи

4 феврал€ 2022

—оздание 3D веб-приложений с помощью CAD Exchanger Web Toolkit

ћари€ √азарх

ћари€ √азарх


CAD Exchanger Ч это пакет программ дл€ просмотра и преобразовани€ 3D —јѕ– данных и их интеграции в другие инженерные приложени€. CAD Exchanger имеет два патента в области параллельных вычислений, а его решени€ используют более 150 000 пользователей в более чем 110 странах, в том числе такие компании, как NASA, Tesla, Apple, Siemens и Altium.

¬ этой статье мы рассмотрим, какие данные можно извлечь из 3D-модели и визуализировать онлайн с помощью CAD Exchanger Web Toolkit.


ѕрактически во всех сферах, будь то дизайн обуви, производство печатных плат или проектирование летательных аппаратов, демонстраци€ прототипа или конечного издели€ €вл€етс€ неотъемлемой частью жизненного цикла продукта. ѕри этом наиболее универсальный канал презентации Ч это браузер, не завис€щий от географии, разницы во времени и эпидемиологической обстановки. ≈сли вы сталкиваетесь с необходимостью визуализировать 3D-модели онлайн, на страницах »нтернет-магазина или в интерфейсе —јѕ–-приложени€, эта стать€ будет вам полезна.

—уществует несколько способов просмотра 3D-моделей в браузере, в том числе:

  • ѕреобразование исходной —јѕ–-модели в один из промежуточных форматов (например, .gltf) и его импорт с помощью three.js API;
  • «апись файла в нативный three.js формат Ч JSON;
  • »спользование аддона Web Toolkit от CAD Exchanger.

—егодн€ мы поговорим о возможност€х, которые даЄт Web Toolkit, и его отличи€х от остальных методов.

 ому может быть полезен этот инструмент?

 ак упоминалось выше, дл€ визуализации трехмерных объектов в браузере можно рассмотреть несколько возможностей. ÷елесообразность выбора CAD Exchanger Web Toolkit определ€етс€ количеством необходимых функций.

Ќи один из промежуточных форматов, поддерживаемых three.js, не способен хранить свойства геометрической проверки (дл€ контрол€ соответстви€ оригинальной и конвертированной моделей), а также отображать твердотельную геометрию (B-Reps), PMI (Product & Manufacturing Information) или слои.

“екстовые форматы OBJ, VRML и STL занимают много места на диске и требуют большой пропускной способности сети, увеличива€ исходный размер файла до 20 раз.

OBJ не поддерживает хранение дерева структуры с подсборками и создание множества компонентов, ссылающихс€ на одну деталь, поэтому требует генерации дублирующихс€ полигональных сеток во врем€ работы приложени€.

≈динственной дополнительной опцией формата STL €вл€етс€ хранение полигонов.

» даже самый богатый на возможности формат GLTF не поддерживает вышеперечисленные данные, которые необходимы дл€ реалистичной и функциональной —јѕ–-модели.


ќтображение дерева структуры с подсборками

–ис. 1. ќтображение дерева структуры с подсборками


≈сли стоит цель создать онлайн-инструмент, который позволит пользовател€м взаимодействовать с 3D объектами, то разработчикам стоит обратить внимание на CAD Exchanger Web Toolkit. јддон даЄт возможность задействовать максимум данных и атрибутов —јѕ–-модели.

 ак работает CAD Exchanger Web Toolkit?

CAD Exchanger Web Toolkit Ч это набор JavaScript библиотек, который интегрируетс€ в веб-страницы и позвол€ет создавать интерактивные 3D веб-приложени€, размещаемые локально или в облаке.

ѕример отображени€ 3D модели с помощью Web Toolkit. ƒоступно вращение и масштабирование.


Web Toolkit доступен в двух форматах:

  •  омплексный пакет включает в себ€ нужные сторонние зависимости (в частности three.js). ѕо ссылке, а также в приведенном ниже фрагменте кода можно посмотреть пример использовани€ комплексного пакета.
// —оздаЄм сцену и область просмотра
const aScene = new cadex.ModelPrs_Scene();
const aViewPort = new cadex.ModelPrs_ViewPort({ autoResize: true}, document.getElementById('model-viewer'));
aViewPort.attachToScene(aScene);

// «агружаем подготовленную модель
const aModel = new cadex.ModelData_Model();
const aLoadResult = await aModel.loadFile('Radial_Engine.cdxfb', dataLoader, false);

// –азмещаем модель в сцене
let aDisplayMode = cadex.ModelPrs_DisplayMode.Shaded;
let aRepMode = cadex.ModelData_RepresentationMask.ModelData_RM_Poly;
await cadex.ModelPrs_DisplayerApplier.apply(aLoadResult.roots, [], {
  displayer: new cadex.ModelPrs_SceneDisplayer(aScene),
  displayMode: aDisplayMode,
  repSelector: new cadex.ModelData_RepresentationMaskSelector(aRepMode)
});
  • ≈сли приложение уже использует three.js, то во избежание дополнительных расходов на скачивание предоставл€етс€ минифицированный пакет. ¬ документации к инструменту можно посмотреть пример интеграции Web Toolkit в приложение с three.js.

‘ункционал Web Toolkit

CAD Exchanger Web Toolkit работает на базе CAD Exchanger SDK, благодар€ чему поддерживает более 30 3D-форматов: нейтральные (IGES, STEP, STL, JT и др.), нативные (DWG, CATIA V5, SOLIDWORKS, PTC Creo, Siemens NX) и форматы геометрических €дер (ACIS, Open CASCADE, Parasolid, Rhino).

ƒанные, импортированные из файлов этих форматов, передаютс€ в Web Toolkit через нативный формат аддона CDXFB, специально спроектированный дл€ быстрого отображени€ в »нтернете.  роме визуализации формат CDXFB обеспечивает доступ к продуктовой структуре и PMI, позвол€ет выполн€ть измерени€, выделение объектов и другие операции с 3D-моделью.

¬изуализаци€

«агруженную 3D-модель можно визуализировать в интерактивном 3D-интерфейсе с помощью WebGL. ѕроцесс визуализации состоит из следующих этапов:

  1. —оздание сцены и области просмотра;
  2. ¬ыбор представлени€: твердотельное (BRep) или одно из доступных полигональных (дл€ форматов, которые поддерживают несколько уровней детализации (LOD), например JT);
  3. ¬ыбор режима отображени€: каркасное, полутоновое с границами или без них;
  4. ¬изуализаци€ объекта.
—оздание вида с разнесЄнными детал€ми с помощью Web Toolkit

–ис. 2. —оздание вида с разнесЄнными детал€ми с помощью Web Toolkit

ѕример базового функционала онлайн просмотрщика моделей можно посмотреть в документации к модулю.

ƒоступ к продуктовой информации

¬ задачи веб-приложени€ может входить не только визуализаци€ самой модели, но и отображение или обработка других данных об объекте. ¬ зависимости от особенностей загружаемого формата, Web Toolkit может воспроизводить следующие данные:

  • ѕродуктовую структуру или граф сцены (иерархию сборок и частей, а также их экземпл€ров);
  • »мена и атрибуты визуализации (например, цвета и материалы), прив€занные к элементам графа;
  • ѕользовательские параметры (прив€занные в формате строк, целых чисел или чисел с плавающей зап€той, дат и т. д.);
  • √еометрические представлени€ деталей, например полигональные сетки;
  • PMI (Product and Manufacturing Information).

Ќа рис. 3 представлен пример интерфейса доступа пользовател€ к продуктовой информации (Model Explorer). ѕо ссылке можно посмотреть интерактивный пример такого веб-приложени€ и данных, которые могут быть извлечены из 3D-модели.

»нтерфейс Model Explorer

–ис. 3. »нтерфейс Model Explorer

¬заимодействие с модел€ми

CAD Exchanger Web Toolkit позвол€ет пользовател€м веб-приложений выполн€ть следующие операции с —јѕ–-модел€ми:

  • ¬ыделение двух видов: целой детали (например отдельной гайки из большой сборки) или определЄнной вершины в твердотельной репрезентации или узла в полигональной;
  • ¬ыбор группы объектов;
  • ¬ращение, масштабирование и перемещение;
  • ќтображение графического PMI в браузере;
  • —оздание вида с разнесЄнными детал€ми.

Ѕлагодар€ интеграции с API CAD Exchanger SDK, в приложени€х на базе Web Toolkit также можно выполн€ть измерени€: стандартные (габаритные параллелепипеды, рассто€ни€, углы) и более сложные (площадь поверхности, объем, центр масс, минимальные габаритные параллелепипеды).

ѕо следующим ссылкам, а также на рисунках 4 и 5 можно посмотреть образцы приложений с возможностью измерений и отображени€ PMI.

»змерение рассто€ний и углов

–ис. 4. »змерение рассто€ний и углов

ќтображение PMI

–ис. 5. ќтображение PMI

—овместимость с различными браузерами

ћодуль Web Toolkit от CAD Exchanger совместим с браузерами Chrome, Firefox, Opera, Safari, Microsoft Edge и Internet Explorer.

ѕреимущества Web Toolkit

Web Toolkit был изначально разработан дл€ внутреннего использовани€ в CAD Exchanger Cloud, так как форматы, поддерживаемые three.js, не позвол€ли извлекать необходимое количество данных о модели. Ќа сегодн€шний день инструмент широко примен€етс€ в клиентских приложени€х благодар€ оптимальному формату данных, гибким настройкам, удобному и простому API.

Ёффективный формат данных

 оманда CAD Exchanger вложила много усилий в создание оптимального формата файлов дл€ быстрой и беспреп€тственной передачи данных. ¬ результате проприетарный формат CDXFB, в который преобразуютс€ все файлы, стал основой всех процессов внутри Web Toolkit.  лючевыми преимуществами CDXFB €вл€ютс€ следующие особенности:

  • Ёто двоичный формат с высокой степенью сжати€, котора€ обеспечивает эффективную передачу данных. Ќапример, один и тот же JT файл размером 60  б будет весить 550  б при конвертации в GLTF и всего 127  б при преобразовании в CDXFB.
  • CAD Exchanger использует внешние ссылки дл€ более быстрой загрузки, меньшего объема занимаемой пам€ти и экономии места дл€ хранени€.  роме того, дл€ оптимизации производительности можно отфильтровать ненужные данные: в частности, выбрать, хранить ли данные PMI и какой уровень детализации полигональной сетки использовать.
√ибка€ настройка визуализации

¬изуализаци€ на базе three.js предоставл€ет несколько опций дл€ отображени€ 3D-модели. ‘ункционал приложени€ и внешний вид модели можно настраивать следующим образом:

  • ”станавливать режим ортографической проекции или режим перспективы с фоном или без него;
  • ƒобавл€ть видовой куб Ч интерактивный элемент переключени€ между ракурсами;
  • ќтображать объекты в полутоновом или каркасном режимах;
  • ќтображать материалы и текстуры или пренебрегать ими в зависимости от назначени€ приложени€.
≈диный API дл€ доступа к данным

CAD Exchanger преобразует любой —јѕ–-формат в модель данных, котора€ не зависит от формата (класс ModelData_Model) и содержит всю информацию о 3D-модели: иерархию сборок и деталей, геометрию, свойства, метаданные и PMI. Ќезависимо от расширени€ исходных файлов, единый API обеспечивает удобный доступ к формат-специфичным данным.

ѕростота использовани€

ћодуль Web Toolkit от CAD Exchanger базируетс€ на попул€рной библиотеке three.js и WebGL API. Ёто обеспечивает бесшовную интеграцию с приложени€ми и сервисами, созданными на основе этих инструментов, что позвол€ет повторно использовать ранее написанный код и сокращать сложность и врем€ разработки.

¬ыделение элементов 3D-модели

–ис. 6. ¬ыделение элементов 3D-модели

¬ целом отправной точкой при выборе инструмента работы с 3D-данными в браузере должно быть определение необходимого уровн€ 3D-визуализации. —делать это на ранних этапах разработки продукта может быть непросто, поэтому CAD Exchanger предоставл€ет бесплатную 30-дневную пробную версию своего программного решени€ CAD Exchanger SDK, которое включает аддон Web Toolkit с полной технической поддержкой.

»спользу€ открытую документацию, можно ознакомитьс€ с ключевыми функци€ми CAD Exchanger Web Toolkit, протестировать работу с геометрией и интерактивные функции.


ѕо всем вопросам и предложени€м о продуктах CAD Exchanger можно обращатьс€ через контактную форму на сайте компании.


„итайте также:


¬акансии:

јктуальное обсуждение

RSS-лента комментариев

-->

ƒавид Ћевин
ƒавид Ћевин
ќт редактора: »мпортонезависима€ конкуренци€
ѕроект ЂЌародное —јѕ–-интервьюї

—лучайна€ стать€:

¬тора€ волна облачных CAD — –альф √рабовски (10 ма€ 2022)
isicad Top 10

—амые попул€рные материалы

   ‘орумы isicad:

isicad-2010 isicad-2008
isicad-2006 isicad-2004

ќ проекте

ѕриглашаем публиковать на сайте isicad.ru новости и пресс-релизы о новых решени€х и продуктах, о проводимых меропри€ти€х и другую информацию. јдрес дл€ корреспонденции - info@isicad.ru

ѕроект isicad нацелен на

  • укрепление контактов между разработчиками, поставщиками и потребител€ми промышленных решений в област€х PLM и ERP...
ѕодробнее

»нформаци€ дл€ рекламодателей


¬се права защищены. © 2004-2022 √руппа компаний «Ћ≈ƒј—»

ѕерепечатка материалов сайта допускаетс€ с согласи€ редакции, ссылка на isicad.ru об€зательна.
¬ы можете обратитьс€ к нам по адресу info@isicad.ru.