Мой небольшой эксперимент использования 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.
Комментариев нет:
Отправить комментарий