четверг, 10 апреля 2014 г.

WebGL Dragon Dots


Мой небольшой эксперимент использования WebGL в браузере Chrome с помощью библиотеки ThreeJS. Посмотреть можно по этой ссылке.

Вдохновленный примером трехмерной машины из вершин на сайте AUDI (ссылка), я решил попробовать сделать что то похожее, да и просто посмотреть как такое можно сделать, конечно в более упрошенной форме, как эксперимент.
Использовать аппаратное ускорение в браузере оказалось очень просто. Этому способствовала отличная библиотека ThreeJS (написанная Mr.Doob) и большое количество примеров на сайте.

Прежде всего скажу о модельках. Для тестирования я выбрал модельку дракона, которую скачал с этого сайта. Затем я ее немного упростил с помошью Decimation Master в ZBrush, потому что считаю этот инструмент наиболее хорошо сохраняет контур геометрии, а также потому что очень люблю программу ZBrush : )


Для корректной и быстрой загрузки модели в ThreeJS рекомендуется для начала преобразовать ее в формат JavaScript. Есть несколько путей как можно это сделать. Первый это воспользоваться python скриптом конвертером, который можно найти в репозитории ThreeJS. Но этот способ потребует дополнительных затрат на установку FBX SDK, установку нужной версии Python (если еще не установлена) и другие ненужные расходы времени, которые в результате так и не привели к положительному результату для меня. Я решил попробовать другой путь. Второй метод это воспользоваться импортом из 3D пакета с помошью соответствующего скрипта-плагина.


Этот способ тоже не сработал, из за каких то ошибок в Мауа (хотя, насколько я помню, первый раз я экспортировал именно так). Но вы можете попробовать этот способ из других трехмерных редакторов. Третий метод самый простой и быстрый. Нужно перейти на сайт редактора ThreeJS Editor, загрузить туда свою модель и затем экспортировать ее как геометрию (Export Geometry). Но в этом случае экспортированная модель получается большего размера чем если экспортировать ее другими методами, потому что в файл включается дополнительная информация о нормалях (которую впринципе можно удалить самостоятельно, открыв файл в любом текстовом редакторе)


Когда модель готова самое время начать интегрировать ее в веб. Для начала создаем простейший html-документ, с небольшой стилизацией для тела страницы. Подключаем необходимые скрипты. Но для загрузки модели из файла .js нам ненужны MLTLoader, OBJMLTLoader. Я провел эксперимент с использованием различных визуализаторов, но WebGLRenderer3 оказался самым быстрым из них, поэтому SoftwareRenderer также можно исключить.


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


Весь проект можно скачать с github.

Комментариев нет:

Отправить комментарий