Pull to refresh

Онлайн просмотр интерактивных 3D-моделей при помощи WebGL

Reading time 3 min
Views 60K
Доброе время суток!
Несомненно многие из читателей Хабрахабр слышали, видели или даже использовали технологию WebGL. Если быть кратким — это библиотека для аппаратного ускорения интерактивной 3D графики прямо в веб-браузере без установки дополнительных плагинов. Обычно WebGL воспринимается как технология для создания развлекательного контента, например трехмерные многопользовательский онлайн игры. Однако интерактивная трехмерная графика в браузере может пригодиться и вполне для более серьезных профессиональных целей. И пример такого использования уже доступен каждому из нас.
Design Review Quickshare — веб вьювер 3D моделей с использованием облачных технологий. Сразу не терпится сказать, что с его помощью Вы с легкость сможете разместить 3D модель на своей странице!

Волею судеб при написании статьи “Сканируем в 3D с помощью фотоаппарата или 123D Catch”, я заглянул в лабораторию компании Autodesk Labs. В Autodesk Labs размещаются инновационные и перспективные разработки компании с целью получения отзывов от реальных пользователей. Некоторые из продуктов лаборатории умирают не получив развития, а какие-то перерастают в финальные продукты. Так и случилось с 123D Catch из моей предыдущей статьи.
К своему удивлению и невероятной радости в недрах лаборатории я обнаружил замечательный пример использования WebGL — Design Review Quickshare.



Суть сервиса в следующем: загружаем 3D файл (также есть поддержка и 2D чертежей/схем) формата DWF и, после непродолжительной конвертации в облаке, получаем настоящее 3D прямо в браузере на веб странице.



Можем вращать/крутить модель как нам вздумается, зуммировать, дабы рассмотреть все детали. В добавок поделится ссылкой на вьювер с нашей моделью.
Процесс интеграции на собственную веб страницу не сложнее чем встроить плеер с YouTube. Нажимаем на кнопку Share.



Выбираем размер, копируем код.



В качестве развлечения можно разместить свой трехмерный аватрар, сделанный в 123D Catch.
Основное же назначение — онлайн демонстрация 3D проектов конструкторов или дизайнеров.

На десерт немного технических подробностей


WebGL — основа для отображения 3D в браузере. По этому поводу было много статей на Хабре, следовательно останавливаться на этом не буду.

DWF — единственный формат, поддерживаемый на данный момент для загрузки. Design Web Format — это открытый формат файлов, разработанный c целью организации обмена проектными данными (3D модели из САПР и чертежи) для их просмотра, печати и рецензирования. Представляет из себя контейнер (zip архив), содержащий в себе несколько видов данных:
  • метаданные в XML формате;
  • 3D данный в формате HOOPS Stream File (.hsf). Очень компактный формат файлов, содержащий 3D данные и изображения. Предназначен для потоковой передачи через сеть Интернет. Разработан в 80х годах. Поддерживает полигональный меш (сетку), NURBS геометрию, текстуры, камеры, источники освещения и анимацию. Вообще считается открытым. Спецификация и SDK были доступны по адресу http://www.openhsf.org. Но сейчас сайт почему-то недоступен. Коммерческая реализация есть у компании Tech Soft 3D;
  • векторные 2D данные в формате W2D, разработанный в Autodesk. В разновидности файлов DWFx, 2D данные представленны в формате XPS, разработанный в компании Microsoft. Благодаря использованию XPS облегчается жизнь разработчикам (это же знакомый XML) + возможность просмотра файлов DWFx штатными средствами ОС Windows (начиная с Vista).

Создать файлы DWF позволяют многие программы от Autodesk: 3Ds Max, AutoCAD, Inventor.
С помощью плагинов:
  • Для 3D: SolidWorks, CATIA, Pro/ENGINEER Wildfire
  • Для 2D: Microsoft PowerPoint, Word, Excel, Visio и Project.

Для программистов на C++ есть SDK Autodesk DWF Toolkit
Вьюверы для DWF:

В случае с 3D, на сервере DWF файл конвертируется в полигональную модель в виде набора точек в трехмерных координатах, полигонов и их нормалей:
Точки: «v»:[-1.33467,-1.58853,-3.13264,-1.3545,-1.59411,-3.12694]
Координаты нормалей: «n»:[-0.47497,0.875358,-0.0902835,-0.0977853,0.989588,-0.105608]
Индексы точек точек для полигонов: «f»:[0,1]

Стоит отметить, что объем данных в таком виде увеличивается почти в 10 раз, по сравнению с исходной моделью в DWF. Данные передаются в нескольких файлах в несжатом виде.
Пример таких данных модели подвески: poligon model.zip (1.84 Mb)
Исходная модель DWF: Inventor_Suspension_3D.dwf (1.78 Mb)

В то время, когда WebGL начинал набирать обороты и стали появляться первые примеры, у меня сразу же возникла мысль о подобном сервисе. Даже были проведены некоторые эксперименты. Так что, если у кого-то проявится интерес, в следующий раз я опишу способ, как вставить 3D на страницу HTML, не зная WebGL и JavaScript.
Но, как говорится, это уже совсем другая история.
Tags:
Hubs:
+17
Comments 34
Comments Comments 34

Articles