Пользователь
0,0
рейтинг
24 декабря 2011 в 09:15

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

Доброе время суток!
Несомненно многие из читателей Хабрахабр слышали, видели или даже использовали технологию 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.
Но, как говорится, это уже совсем другая история.
@Cadog
карма
30,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

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

  • 0
    а анимация поддерживается?
    • 0
      В формате файлов DWF — да. В онлайн вьювере, к сожалению, нет. Будем надеется, что в будущем разработчики добавят эту возможность.
      • 0
        А освещение? Текстурирование? Отражения? Шейдерный язык наконец. WebGL такое сможет?
  • 0
    Круто! Спасибо за топик! То, что надо для сайта.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Сложный вопрос. Теоретически DWF Writer может грабить из любого 3D приложения, использующего OpenGL. Делается это подменой одной из dll библиотеки OpenGL. Перехватывается отрисовка 3D объекта и данные сохраняются в DWF. На практике компонент для 3D устанавливается только в том случае, если на ПК уже установлена одна из программ, одобренных компанией Autodesk. Как обойти это неприятное условие я не знаю.
    • 0
      Тот же Max можно бесплатно скачать с сайта Аутодеск и официально юзать бесплатно в течении месяца. Хотя, конечно, только для конвертации, тяжеловатое приложеньице :)
  • 0
    Начинаем ждать момента, когда в интернет магазинах весто нескольких фотографий с разных сторон, можно будет посмотреть на хорошую 3D-модель товара, так же, как и сейчас можно на огромном числе сайтов встретить эмбэдед-ролики из youtube'а.
    • +3
      А пираты будут скачивать эти 3D-модели, и распечатывать на 3D-принтерах…
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Ух ты! Готовое решение на Flash3D. За ссылку спасибо.
      Загрузил 3ds. Цвета потерялись почему то. Отоброжение FPS убрать как-то можно?
  • 0
    И что-то не работает…
    Модель аплоадится, затем translating… (что он переводит, из в DWF в DWF???), а затем Your file failed to load.
    Да я уже привык к тому, что у Autodesk всё комом ))
    • 0
      Промахнулся с ответом. Чуть ниже написал. Возможно файл битый?
      • 0
        Сам создал два DWF файла в AutoCAD 2011. Результат тот же.
        • 0
          В разделе Help упоминается о возможных проблемах при конвертации. У Вас, как я понимаю, одна из последних версий AutoCAD. Рискну предположить, что проблема в разнице версий DWF. Если это так, то это огромный фейл со стороны Autodesk. Хотя, это же еще бета версия. Если поделитесь Вашим файлом (ссылкой в личку или тут), я бы поковырялся в нем. Интересно же…
  • 0
    Переводит из DWF в полигональную модель. Грубо говоря в набор треугольников. В каком-либо вьювере Ваш файл нормально открывается?
  • 0
    А как узнать версию DWF? Что-то ни один DWF файл из разных версий Макса не захотел обрабатываться сервисом.
    • 0
      F3 в Total Commandere или открыть файл в блокноте. Первые 13 символов — это версия. (DWF V06.01) — открываются сервисом без проблем. С (DWF V06.20) наблюдаются проблемы.
      • 0
        Хм… те, что делает Макс вообще с «РС...» начинаются, т.е. упакованные. А те, что сохраняет последний Autodesk Design Review таки 06.20
        Получается, софт надо старинный для нормальной конвертации.
        • 0
          Я попытался уточнить вопрос с версиями на форуме сервиса. Ответили, но не то, что надо. А сейчас в США все уже на праздничных каникулах. Так что, если на следующий год получу новый ответ, то напишу тут.
          • 0
            И, как с ответом?
            • 0
              Попросили примеры файлов. Я отправил. Больше ответов нет.
            • 0
              Сейчас загрузил на сервис файлы, которые выкладывал Marsikus тут в комментариях. Отобразились без проблем. Похоже разработчики из Autodesk поправили код.
              • 0
                Да, спасибо, получилось загрузить DWF V06.20. Только как-то оно с такими тооормозами отображается… И файл небольшой — 5 метров. Правда, комп занят сейчас рендером. Попробую еще попозже.
  • 0
    SketchUp-модели бы научиться к этому прикручивать…

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