CC BY
3120
"CHRONOS" МУЛЬТИДИСЦИПЛИНАРНЫЕ НАУКИ Том 6 #5(55), 2021
ТЕХНИЧЕСКИЕ НАУКИ
ОБЗОР ФРЕЙМВОРКОВ ПО РАБОТЕ С ФАЙЛАМИ BLENDER, СОЗДАНИЕ WEBGL ОБЪЕКТОВ
Афанасьева Любовь Петровна
Студент,
Санкт-Петербургский национальный исследовательский университет информационных технологий, механики и оптики,
Санкт-Петербург, РФ
OVERVIEW OF FRAMEWORKS FOR WORKING WITH BLENDER FILES, CREATING WEBGL OBJECTS
Afanasyeva Lyubov Petrovna
Student, ITMO University Saint Petersburg, Russia
Аннотация. Целью исследования является сравнение лучших к использованию библиотек для экспорта моделей из графического редактора и создание из них WebGL объектов, составление общей картины принципов их использования и отличительных особенностей каждой. Для этого были использованы следующие эмпирические методы: наблюдение за процессом разработок с использованием изучаемых инструментов, сравнение сложностей алгоритмов и описание особенностей каждого инструмента. В статье рассматриваются варианты размещения готовых 3D-моделей, созданных посредством графического редактора Blender, на веб-сайт и возможность последующей работы с ними. Разбирается релевантность использования следующих библиотек: Blend4Web, Three.js. Так же описано использование относительно нового движка Verge3D, который работает на этих библиотеках, заменяет все действия программиста понятным для 3D-художника интерфейсом.
Abstract. The aim of the study is to compare the best libraries to use for exporting models from a graphics editor and create WebGL objects from them, defining principles of their use and the distinctive features of each. For this, the following empirical methods were used: observing the development process using the studied tools, comparing the complexity of algorithms and describing the features of each tool. The article discusses options for placing ready-made 3D models created using the Blender graphics editor on a website and the possibility of subsequent work with them. The relevance of using the following libraries is analyzed: Blend4Web, Three.js. The use of a relatively new engine Verge3D, which works on these libraries, is also described, replacing all the programmer's actions with an interface that is understandable for a 3D artist.
Ключевые слова: WebGL, Blender, Three.js, Blend4Web, Verge3D, 3D модель, веб-сайт.
Keywords: WebGL, Blender, Three.js, Blend4Web, Verge3D, 3D-model, web-site.
Введение. В 2011 году с изобретением WebGL появилась возможность создавать и настраивать 3D-модели и полноценные ландшафты прямо в браузере, но всё еще редкие проекты можно назвать удачными. Это объясняется сложностью работы с технологией, которая требует немалых математических вычислений и знаний нескольких языков программирования, что увеличивает и стоимость такой разработки. Чтобы упростить работу с 3D-объектами и сделать их создание доступным для специалистов по созданию 3D-графики, были разработаны библиотеки, которые позволяют выгружать готовые объекты из графических редакторов и размещать на веб-страницах. Однако, каждая такая библиотека содержит набор базовых функций, часть которых не будет использоваться в работе, что будет увеличивать скорость загрузки веб-страницы, поэтому чем больше вспомогательных технологий будет использовано, тем тяжелее будет конечных проект. Тем не менее, пока специалистов такой профессии нет, нужно использовать все возможности для облегчения работы с технологией и внедрения её в повседневную жизнь.
Обзор фреймворков. Рассмотрим существующие библиотеки в связке с графическим редактором Blender, экспорт возможен и из других редакторов, но это уменьшает количество допустимых к использованию вариантов.
Для начала разберем использование фреймворка Three.js, здесь разместить файл можно двумя способами: скачать Three.js Blender Exporter и далее следовать инструкции или скачать Three.js, подготовить модель к экспорту в Blender, сохранить её в формате .glTF, подключить .glTF файл в Three.js с помощью загрузчика GLTFLoader, подробные примеры кода с его использованием подробно изложены в интернете. Продолжать работу с моделью: определить свет, угол обзора камеры, анимировать её элементы, - всё это может настраиваться с помощью этой же библиотеки на коде JavaScript, поэтому выгоднее воспользоваться вторым способом загрузки файла модели. Подробнее о загрузках форматов
"CHRONOS" МУЛЬТИДИСЦИПЛИНАРНЫЕ НАУКИ Том 6#5(55), 2021
21
файлов моделей и текстур на примере модели Архангельского собора описано в статье Филинских А.Д., Корсаков К.С. «Загрузка моделей в технологии WebGL».
Так же конкурентоспособной библиотекой по экспорту моделей из Blender является Blend4Web. В отличие от Three.js библиотека плотно интегрирована с Blender и при экспорте сцен проблем не возникает, но тут идет расчет на то, что вся визуальная часть, включая анимацию и интерактивность, будет выполнена на стороне Blender, поэтому программировать модели становится сложнее.
Приведенные инструменты упрощают работу с моделями, но все еще без знания программирования невозможно получить конечный результат. В случае нежелания подробно знакомиться с технологией можно использовать готовое решение - Verge3D. Этот движок строится на этих же библиотеках, то есть наследует и все их отрицательные стороны, добавляет свои. Однако, он удобен тем, что предлагает использовать дружественный пользователю интерфейс, в котором есть специальные папки для загрузки всех файлов для сайта, просмотр модели в среде Blender, в самом браузере с дополнительными элементами интерфейса. Самым главным достоинством является возможность адаптировать модель под действия пользователя, то есть делать все то, что программист делает с помощью JavaScript через перетаскивание блоков, которые своим взаимодействием заменяют код. Этот редактор в Verge3D носит название Puzzles, и имеет их вид. Минус такого доступного решения в его длительной скорости загрузки на странице и большой стоимости использования, однако, бесплатная версия имеет неограниченный срок пользования, но награждается фирменной надписью по соседству с моделью. Достоверных публикаций по теме Verge3D мало, так как технология новая, однако хороший примеров её использования можно найти достаточно [2].
Заключение. Таким образом, выбор используемых технологий зависит от конечных целей проекта и глубины знаний разработчика, его желания погрузится в эту область. Однозначно сказать, какая библиотека лучше, невозможно, потому что каждая имеет свои особенности. Однако, ознакомившись с этой статьей, будет проще определиться с выбором библиотеки для создания своего проекта. Three.js удобно использовать, если проблем с программированием нет, и проект имеет много интерактивных особенностей. Blend4Web подойдет для 3D-художников, которые хотят добавить какие-то базовые интерактивные эффекты, а в Verge3D есть подходящий любому пользователю интерфейс, но по завершении файлы проекта будут весить много.
Список литературы:
1.Вильданов, А. Н. 3D-моделирование на WebGL с помощью библиотеки Three.js: учебное пособие / А. Н. Вильданов. — Уфа : РИЦ БашГУ, 2014. — 114 с.
2.Овчарова, П. А. Возможности использования Verge3D для создания учебных инженерных интерактивных 3D приложений / П. А. Овчарова // Гагаринские чтения - 2018 : Сборник тезисов докладов XLIV Международной молодёжной научной конференции, Москва-Байконур-Ахтубинск, 17-20 апреля 2018 года. - Москва-Байконур-Ахтубинск: Московский авиационный институт (национальный исследовательский университет), 2018. - С. 281-282.
3.Основы работы с WebGL [Электронный ресурс]. Режим доступа: https://metanit.com/web/webgl/ (дата обращения: 10.05.2021).
4.Терентьев А.В. Анализ технологий для отображения трехмерных объектов в Интернете // Молодой исследователь Дона. 2020. №1 (22). URL: https://cyberleninka.ru/article/n/analiz-tehnologiy-dlya-otobrazheniya-trehmernyh-obektov-v-internete (дата обращения: 11.05.2021).
5. Филинских, А. Д. Загрузка моделей в технологии webgl / А. Д. Филинских, К. С. Корсаков // КОГРАФ-2018 : Сборник материалов 28-й Всероссийской научно-практической конференции по графическим информационным технологиям и системам, Нижний Новгород, 16-19 апреля 2018 года. -Нижний Новгород: Нижегородский государственный технический университет им. Р.Е. Алексеева, 2018. - С. 125-129.
6.Kolesnikov, Aleksey & Grishchenko, Denis. (2020). POSSIBILITIES OF USING WEB-TECHNOLOGIES FOR VISUALIZATION OF DATA OF ACTIVE METHODS OF REMOTE SENSING. Vestnik SSUGT (Siberian State University of Geosystems and Technologies). 25. 130-137. 10.33764/2411-17592020-25-4-130-137.
7.Pokorny, Pavel & Dockalova, Pavla. (2019). A 3D Visualization Application of Zlin in the Eighteen-Nineties. 10.1007/978-3-319-91192-2_23.
8.Williams J. Learning HTML5 game programming: a hands-on guide to building online games using Canvas, SVG, and WebGL. - Upper Saddle River, NJ: Addison-Wesley, 2012. - 142 p.
9.Zhuk, Y. Prospects of webgl technology using in modern educational process / Y. Zhuk, E. Tetiuev // CEUR Workshop Proceedings : 15, Saint-Petersburg, 25 марта 2020 года. - Saint-Petersburg, 2020. - P. 112-122.
