РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ ВИЗУАЛИЗАЦИИ 3D–МОДЕЛЕЙ В БРАУЗЕРЕ

DEVELOPMENT OF A WEB APPLICATION FOR VISUALIZATION OF 3D–MODELS IN THE BROWSER

Darya Zueva

student, Department of Computer Systems and Informatics, Admiral Makarov State University of Maritime and Inland Shipping,

Russia, Saint-Petersburg,

АННОТАЦИЯ

В статье рассматривается актуальность вопроса интеграции веб-технологий с технологиями 3D-моделирования, приводятся и анализируются аналоги существующих онлайн 3D-редакторов, выявляются их преимущества и недостатки. С учетом выявленных недостатков формируются требования и разрабатывается собственное веб-приложение, позволяющее визуализировать трехмерные объекты в браузере.

ABSTRACT

The article considers the relevance of the issue of integration of web technologies with 3D-modeling technologies, provides and analyzes analogues of existing online 3D-editors, identifies their advantages and disadvantages. Taking into account the identified shortcomings, requirements are formed and a proprietary web application is being developed that allows visualizing three-dimensional objects in the browser.

Ключевые слова: 3D-модель; веб-технологии; веб-приложение, браузер, three.js.

Keywords: 3D-model; web-technology; web-application, browser, three.js.

За последнее время сферы веб-технологий и технологий трехмерного моделирования объектов получили стремительное развитие. С каждым годом веб-приложения приобретают широкую популярность на мировом рынке программного обеспечения, составляя все большую конкуренцию приложениям для настольных пользовательских компьютеров. Веб-подход в разработке приложений позволяет отказаться от скачивания и установки программного обеспечения на устройства пользователя, вместо этого в качестве среды исполнения выступает браузер [1]. Вместе с тем, внедряются новые методы взаимодействия с 3D-объектами, которые должны поддерживать возможность импорта моделей всех основных 3D-форматов, а также обеспечивать стабильную работу с моделями на разных видах устройств. Поэтому, вопрос интеграции веб-приложений и технологий трехмерного моделирования становится все более актуальным.

В настоящее время, существует немало аналогов веб-приложений, позволяющих визуализировать 3D-объекты в браузере, одним из которых является TinkerCAD от Autodesk.  TinkerCAD – это онлайн сервис, который был разработан компанией Autodesk для обучения 3D-моделированию [2]. Он имеет достаточно простой интерфейс (рисунок 1) и большое количество документации.

Рисунок 1. Интерфейс TinkerCAD

С помощью TinkerCAD возможно достаточно легко создавать модели с простой геометрией. Однако, сервис поддерживает работу только с двумя форматами, используемыми в 3D-печати: OBJ и STL. Обеспечить работу со сложными 3D-объектами, текстурами и анимацией TinkerCAD не способен.

Еще одним неплохим аналогом является веб-приложение Vectary, которое направлено не только на новичков в 3D-моделировании, но и на опытных специалистов (интерфейс представлен на рисунке 2). Vectary позволяет работать с моделями таких форматов, как FBX, GLTF, OBJ, DAE, STL, имеет широкий функционал [3], а также поддерживает работу с текстурами и материалами объекта.  Однако экспортировать созданные в приложении модели возможно только в платной версии.

Рисунок 2. Интерфейс Vectary

В качестве еще одного примера веб-приложения для работы с 3D в браузере можно привести 3D Slash. Это сервис, предназначенный для дизайна, модели в котором строятся из блоков (кубов). Можно создавать отдельные кубики, объединять их с помощью различных инструментов и удалять. 3D Slash поддерживает только один формат 3D-моделей – это STL. Импорт моделей со сложной геометрией, текстурой и тем более анимацией становится невозможным. Большим недостатком приложения является отсутствие возможности сохранять или экспортировать работы в бесплатной версии.

Изучив наиболее популярные аналоги веб-приложений для работы с 3D-моделями, можно выделить один из наиболее важных недостатков, который заключается в том, что большинство программных решений поддерживают работу только с объектами определенного формата, что весьма неудобно, т.к. пользователю приходится конвертировать модели из одного формата в другой. Кроме того, веб-приложения такого рода в основном предоставляются зарубежными разработчиками, которые в настоящее время имеют тенденцию отзывать свои лицензии для пользователей России. Поэтому, важно разрабатывать отечественные аналоги веб-приложений, которые смогут не только выступить в качестве варианта импортозамещения иностранных 3D-редакторов, но и составить им конкуренцию.

С учетом выявленных недостатков было разработано собственное веб-приложение для визуализации 3D-объектов в браузере, которое позволяет как импортировать модели таких основных 3D-форматов, как OBJ, STL, GLTF, GLB и FBX, так и создавать базовые примитивы (параллелепипед, шар, конус, цилиндр, плоскость и т.д.). Кроме того, приложение позволяет отрисовывать объекты с текстурами и работать с освещением. Разработанное веб-приложение с импортируемой моделью представлено на рисунке 3.

Рисунок 3. Разработанное веб-приложение

Кроме функций импорта трехмерных моделей разработанное веб-приложение поддерживает экспорт редактируемой модели в форматы JSON и OBJ. Веб-приложение позволяет не только визуализировать трехмерные объекты в браузере, но и редактировать их: изменять цвет, размеры, положение, включать базовую анимацию, а также отображать каркас. Интерфейс веб-приложения реализован средствами HTML, CSS и JavaScript с использованием библиотеки JQuery. Кроме того, разработанное веб-приложение относится к типу SPA (Single page application) [4], т.е. является одностраничным и функционирует без перезагрузки страницы браузера. Для разработки приложения SPA типа была использована технология Ajax-запросов, которая позволяет отправлять запросы к серверу и получать от него ответы без перезагрузки страницы в фоновом режиме. Отрисовка моделей в браузере осуществлялась за счет использования библиотеки three.js, которая работает в связке с DOM API и HTML-структурой страницы.

Таким образом, было разработано веб-приложение для визуализации 3D-объектов в браузере, которое может рассматриваться как вариант импортозамещения иностранных онлайн 3D-редакторов. Его основными преимуществами являются компактность кода, а также поддержка работы с основными форматами 3D-моделей. Приложение может быть использовано в обучающих целях, для формирования базовых представлений о трехмерном моделировании, для редактирования готовых моделей и работы с освещением, а также в целях конвертирования моделей в форматы JSON и OBJ.

Список литературы:

1. Сысолетин Е.Г., Ростунцев С.Д. Проектирование интернет-приложений. – M.: ДМК Пресс, 2015. –  92с.: ил.
2. Горьков Дмитрий, TinkerCAD для начинающих (подробное руководство по началу работы в TinkerCAD). – Санкт-Петербург, 2015. – 125с.: ил.
3. Vectary Documentation [Электронный ресурс] – Режим доступа: https://help.vectary.com/ (Дата обращения: 09.06.2022)
4. Кулаков К.А., Димитров В.М., Архитектура и фреймворки веб-приложений (Учебное электронное пособие). – Петрозаводск: ПетрГУ, 2020. – 61с.: ил