CC BY
70
УДК 379
АНАЛИЗ ТЕХНОЛОГИИ ДЛЯ ОТОБРАЖЕНИЯ ТРЕХМЕРНЫХ ОБЪЕКТОВ В ИНТЕРНЕТЕ
А. В. Терентьев
Донской государственный технический университет (г. Ростов-на-Дону, Российская Федерация)
Рассмотрены технологии для отображения 3D-графики на сайтах, такие как WebGL, Sketchfab viewer, Marmoset viewer, Blend4web, Three.js, Babylon.js, Verge3D и Unity, выявлены оптимальные решения для проигрывания трехмерных объектов на веб-сайтах. Даны рекомендации для выбора системы отображения трехмерной графики на сайтах. Работа является актуальной в связи развитием трехмерной графики в бизнес-решениях. Ключевые слова: веб-сайт, 3D, кроссплатформенность, WebGL.
UDC 379
ANALYSIS OF TECHNOLOGIES FOR DISPLAYING 3D-OBJECTS ON THE WEB
A. V. Terentyev
Don State Technical University (Rostov-on-Don, Russian Federation)
The article discusses technologies for displaying 3D graphics on websites, such as WebGL, Sketchfab viewer, Marmoset viewer, Blend4web, Three.js, Babylon.js, Verge3D and Unity. The purpose of this work is to identify optimal solutions for playing three-dimensional objects on websites. The result of the article are recommendations for the choice of a particular system for displaying three-dimensional graphics on websites.
Keywords: website, 3D, cross-platform, WebGL.
Введение. С быстрым развитием технологий 3D-моделирования, компьютерной графики и технологий взаимодействия человека с виртуальным пространством происходят изменения и в других сферах деятельности. За последние годы 3D-графика стала эффективным инструментом в таких сферах, как образование и медицина, начала активно внедряться в различные производственные процессы, связанные с планированием, а также уже получила большую популярность в сфере развлечений и медиасфере. Из -за того, что инструменты создания трехмерной графики стали намного проще, вычислительные мощности разного рода гаджетов выросли и качество производства низкобюджетной графики значительно повысилось, трехмерная графика получает все большее распространение в рекламе и маркетинге как новый формат донесения информации. Продающие сайты требуют максимально быстрого завлечения посетителей и предполагают минимальное количество действий на сайте, поэтому скачивание дополнительных приложений для просмотра дополнительного трехмерного контента становится недопустимым. В связи с этим необходима реализация просмотра трехмерных объектов прямо на сайте с сохранением крос-сплатформенности. Следовательно, актуальным является использование программного продукта, способного воспроизводить трехмерный контент на сайтах с современных устройств без выхода с сайта и скачивания дополнительных приложений. О 3D-моделировании на WebGL с использованием Three.js писал А. Н. Вильданов, об эффективных веб-приложениях говорили
А. В. Меженин и А М. Кочергина. Есть еще справочник по WebGL на официальном сайте Mozilla, справочник по Three.js и статья на habr.com по Verge3D. Но нет комплексной публикации с обзором всех предложенных технологий для отображения 3D на сайтах и соответствующим их анализом. Целью данной работы является выявление оптимальных решений для проигрывания трехмерных объектов на веб-сайтах. Были поставлены следующие задачи:
1. Изучить существующие технологии для отображения трехмерной графики.
2. Проанализировать существующие технологии для отображения трехмерной графики.
Обзор и сравнение способов добавления 3D на сайты. Попытки внедрения трехмерной
графики начались еще в середине 1990-х годов, но наибольшее развитие данное направление получило только с появлением стандарта HTML5. HTML5 был специально разработан таким образом, чтобы его можно было использовать для создания веб-приложений, т. е. страниц, которые наполнены мультимедийным контентом, но при этом сохранена кроссплатформенность.
На сегодняшний день существует ряд технологий, с помощью которых возможно воспроизводить трехмерный контент на web-сайтах. Наиболее распространенными являются следующие: WebGL, Sketchfab viewer, Marmoset viewer, Blend4web, Three.js, Babylon.js, Verge3D и Unity.
WebGL (Web Graphics Library) — программная библиотека для языка JavaScript, предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0 [1]. WebGL разработан некоммерческой организацией Khronos Group. WebGL исполняется как элемент HTML5 и поэтому является полноценной частью DOM. Может использоваться с любыми языками программирования, которые умеют работать с DOM API, например JavaScript, Rust, Java, Kotlin и другими. За счёт использования низкоуровневых средств поддержки OpenGL часть кода на WebGL может выполняться непосредственно на видеокартах, что дает выигрыш в быстродействии [2]. WebGL — это контекст элемента canvas HTML, который пришел с появлением HTML5 и который позволяет внедрять 3D-контент на сайты без использования плагинов. WebGL может использоваться в сочетании со стандартными веб-технологиями. В таком случае выходит, что 3D-компонент веб-страницы рисуется с помощью API WebGL через Javascript, а сама страница строится стандартным HTML. WebGL является низкоуровневым API, поэтому в основном используется для реализации решений более высокого уровня. WebGL ориентирован на опытного программиста графики, который хорошо знает основные графические концепции, такие как матричная и векторная математика, затенение и предпочтительная организация 3D-сцен с использованием графа сцены. Из-за того, что прямое использование WebGL подразумевает ручное описание всех точек, ребер, граней, нормалей к поверхности и шейдеров, процесс создания 3 D становится достаточно трудоемким. На рис. 1 представлен код, описывающий куб на WebGL. Поэтому для повышения скорости были созданы различные фреймворки, библиотеки и внешние программы для обработки WebGL.
1 const positions — [
2 // Front face
3 -1.0 -1.0, 1.0,
4 1.0 -1.0, 1.0,
5 1.0 1.0, 1.0,
6 -1.0 1.0, 1.0,
1 // Back face
8 -1.0 -1.0, -1.0,
Ъ -1.0 1.0, -1.0,
10 1.0 1.0, -1.0,
11 1.0 -1.0, -1.0,
12 // Top face
13 -1.0 1.0, -1.0,
14 -1.0 1.0, 1.0,
15 1.0 1.0, 1.0,
16 1.0 1.0, -1.0,
11 // Bottom face
18: -1.0 -1.0, -1.0,
IS 1.0 -1.0, -1.0,
20 1.0 -1.0, 1.0,
21 -1.0 -1.0, 1.0,
22 // Right face
23 1.0 -1.0, -1.0,
24 1.0 1.0, -1.0,
25 1.0 1.0, 1.0,
2S 1.0 -1.0, 1.0,
21 // Left face
2 8 -1.0 -1.0, -1.0,
2 Ъ -1.0 -1.0, 1.0,
3D -1.0 1.0, 1.0,
31 -1.0 1.0, -1.0,
32
Рис. 1 Пример кода на WebGl
Three.js — это распространенный фреймворк на JavaScript для отображения 3D-контента в интернете, предоставляющий возможность отображать модели, игры и другие виды визуализации контента. Библиотека может использовать в качестве рендера WebGl, Сanvas, SVG и CSS3D. Основными элементами являются сцены, камеры, геометрия, загрузчики трехмерных моделей, источники света, материалы, шейдеры, частицы, анимации и математические функции [3]. Особенностью библиотеки является то, что она распространяется по лицензии MIT, что означает, что она находится в открытом доступе. В отличие от чистого WebGL, имеет более компактный синтаксис и готовые функции для загрузки готовых моделей разных форматов.
Babylon.js — это библиотека с открытым исходным кодом, которая разработана поверх WebGL, JavaScript и TypeScript [4]. В ней есть средства для создания, отображения и наложения текстур на меши в пространстве, а также для добавления источников света и камер. Поскольку она ориентирована главным образом на игры, Babylon.js имеет некоторые дополнительные функции, не требующиеся в обычном движке 3D-графики. Она поддерживает обнаружение коллизий, гравитацию в рамках сцены, ориентированные на игры камеры (например, фиксированную камеру, которая отслеживает движущийся объект), а также изначальную поддержку Oculus Rift и других устройств виртуальной реальности.
Blend4web — открытый фреймворк, предназначенный для создания и отображения интерактивной трёхмерной графики в браузерах. Blend4Web использует открытый пакет 3D-моделирования Blender для подготовки контента. Подготовка аудиовизуального контента для Blend4Web осуществляется в пакете 3D-моделирования и анимации Blender. Контент воспроизводится посредством WebGL. Фреймворк содержит ряд компонентов, обычно присутствующих в игровых движках, включая систему позиционирования источников звука, физический движок Bullet, портированный на JavaScript, систему анимации и слой абстракции для программирования игровой логики. Открытую версию можно использовать в коммерческих целях, но только в платной версии имеется защита контента. На каждый объект может быть назначено до восьми анима-
L4QQ/J
ций различного типа, включая скелетную и вершинную анимацию. Скорость и направление анимации, а также параметры систем частиц (размер, начальная скорость и количество) могут быть заданы посредством API. Поддерживаются динамическая загрузка и выгрузка данных, карты освещения, имеется возможность симуляции подповерхностного рассеивания.
Verge3D — это инструментарий, который позволяет художникам 3ds Max или Blender создавать веб-приложения. Verge3D можно использовать для создания интерактивных анимаций, конфигураторов продуктов, 3D-презентаций, интернет-магазинов, обучающих материалов, 3D-портфолио и браузерных игр. Особенностью является конвертация сцен из 3ds Max и Blender в форму, пригодную для просмотра в браузере. С версии 2.10 поддерживается технология WebXR, необходимая для работы с устройствами виртуальной реальности и дополненной реальности из окна браузера. Поддерживаются шлемы HTC Vive Oculus Rift, а также устройства класса Google Cardboard. Приложения, работающие с AR/VR, разрабатываются с помощью визуального редактора Puzzles или JavaScript-кода.
Unity — игровой движок, предназначенный для создания приложений и игр с возможностью компиляции под различные платформы. Unity также подразумевает поддержку WebGL, что позволяет создавать трехмерные кроссплатформенные игры и приложения для веб.
Sketchfab viewer является продуктом интернет-площадки Sketchfab. Данная площадка, в первую очередь, нужна для того, чтобы художники размещали на ней свое портфолио в виде трехмерных моделей, которые можно вращать, масштабировать и перемещать. Также имеется API для размещения окна просмотра на любых сайтах, что позволяет использовать технологию в интернет-маркетинге. Sketchfab Viewer является высокоуровневой системой, которая не требует знаний программирования. Для рендера программа использует WebGL. Программа имеет встроенный конвертер в нативный формат воспроизведения, который включает в себя большой список входных форматов, в частности популярные obj, fbx, gltf, blend, 3ds, abc, dae, stl. Имеется выбор из трех шейдеров: стандартный, PBR и MatCap. Имеется возможность менять фон и отключать его видимость. Особенностью проекта является то, что при использовании бесплатного аккаунта модели доступны для скачивания всем пользователям. Для защиты своих моделей, а также для увеличения доступного облачного хранилища необходимо платить за подписку.
Marmoset viewer по функционалу схож с Sketchfab viewer. Он также использует для отображения WebGL. Главное отличие — отсутствие облачного хранилища, т. е. все модели должны храниться на собственном сервере. Исключением является внедрение API на сайт Artstation.com, который предоставляет хранилище для личного портфолио. Из особенностей можно выделить необходимость приобретения программного обеспечения для экспорта трехмерных моделей в необходимый для плеера формат, а также возможность использования собственных шейдеров.
Рассмотренные технологии можно поделить на две группы. Sketchfab viewer, Marmoset viewer, Blend4web и Verge3D — это те технологии, которые не требую знаний программирования для реализации подсмотрщика, поэтому могут быть использованы художниками. Для использования WebGL, Three.js, Babylon.js и Unity необходимы знания программирования. При этом программировать можно и в Blend4web Verge3D, что значительно увеличивает функционал. Самым большим функционалом обладает WebGL, потому что является низкоуровневым и не несет ограничений, наложенных разработчиками других фреймворков и программ, но при этом требует большей подготовки специалиста. При знании JavaScript Three.js и Babylon.js являются оптимальными технологиями из-за сравнительно небольшого веса, большого функционала и понятного синтаксиса.
L4QQ/J
Заключение. В результате проведенного анализа было определено, что при знании JavaScript оптимальными технологиями для реализации отображения трехмерных объектов на сайтах являются Three.js и Babylon.js, а при незнании языка программирования и владении 3D-пакетами оптимальными являются Sketchfab viewer, Marmoset viewer, Blend4web и Verge3D. Если необходимо реализовать на сайте, то использование Unity или Blend4web будет наилучшим решением.
Библиографический список
1. WebGL [Электронный ресурс] / MDN web docs. — Режим доступа: https://developer.mozilla.org/ru/docs/Web/API/WebGL_API/ (дата обращения: 15.11.2019).
2. Вильданов, А. Н. 3D-моделирование на WebGL с помощью библиотеки Three. Js : учебное пособие / А. Н. Вильданов. — Уфа : РИЦ БашГУ, 2014. — 114 с.
3. Тищенко, И. Д. Применение технологии three. js при реализации трехмерной графики для разработки браузерных игр / И. Д. Тищенко, О. В. Дубровина // Актуальные проблемы гуманитарного образования : материалы V Междунар. науч.-практ. конф. — Минск, 2018. — С. 92-96.
4. Чувиков, Д. А. Применение 3D технологий в Web при решении интеллектуальных задач / Д. А. Чувиков, В. П. Феоктистов //Автоматизация и управление в технических системах. — 2015. — № 1(13). — С. 130-138.
Об авторе:
Терентьев Александр Викторович, студент Донского государственного технического университета (344000, РФ, г. Ростов-на-Дону, пл. Гагарина, 1), shhhhurik@gmail. com
