Анализ технологий для отображения трехмерных объектов в Интернете

УДК 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

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.

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

L4QQ/J

ций различного типа, включая скелетную и вершинную анимацию. Скорость и направление анимации, а также параметры систем частиц (размер, начальная скорость и количество) могут быть заданы посредством API. Поддерживаются динамическая загрузка и выгрузка данных, карты освещения, имеется возможность симуляции подповерхностного рассеивания.

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, который предоставляет хранилище для личного портфолио. Из особенностей можно выделить необходимость приобретения программного обеспечения для экспорта трехмерных моделей в необходимый для плеера формат, а также возможность использования собственных шейдеров.

L4QQ/J

Библиографический список

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