Общие сведения¶
Что такое Blend4Web¶
Blend4Web - это программная среда для подготовки и интерактивного отображения трехмерного аудиовизуального контента в браузерах, т.е. трехмерный «движок» (жаргонизм от англ. «engine»).
Платформа предназначена для создания визуализаций, презентаций, интернет-магазинов, игр и других “насыщенных” web-приложений.
Фреймворк Blend4Web имеет тесную интеграцию с пакетом 3D моделирования и анимации Blender (отсюда название). Отображение контента осуществляется средствами WebGL и других браузерных технологий без использования плагинов.
Технически Blend4Web представляет собой программную библиотеку, подключаемую к веб-странице, аддон (дополнение) к программе Blender, а также инструменты для отладки и оптимизации.
3D движок Blend4Web разрабатывается сотрудниками ООО «Триумф» с 2010 г. Первый релиз движка состоялся 28 марта 2014 г.
“Движоꔶ
Движок - это обособленная часть программного кода, используемая внешними приложениями для реализации нужного им функционала.
Типы движков: сайтовый движок, блоговый движок, движок интернет-магазина, wiki-движок, поисковый движок, игровой движок и т.д. Экономический смысл существования программных движков заключается в многократном использовании одного и того же функционала. Например, используя тот или иной движок, разработчики могут относительно дешево создавать интернет-магазины или игры.
Графический движок, трехмерный движок¶
Графический движок выполняет специализированные функции по отображению графики. Он является промежуточным звеном между:
высокоуровневой прикладной частью (игровой логикой, бизнес-логикой) и
низкоуровневой системной частью (например, графической библиотекой WebGL и нижележащими драйверами).
Графический движок может объединяться со звуковой системой, физическим движком, системой, реализующей искусственный интеллект, сетевой системой, а также редактором сцен и логики, образуя интегрированный инструментарий для создания 3D приложений - трехмерный движок.
Что такое WebGL¶
WebGL (Web Graphics Library, т.е. графическая библиотека для использования в веб-приложениях) - одна из современных браузерных технологий, позволяющая создавать трехмерные графические веб-приложения. Другими словами, WebGL - это “3D в браузере”.
Поддержка WebGL в браузерах¶
В настоящий момент технология WebGL в той или иной степени поддерживается во всех браузерах.
Браузеры¶
Мобильные платформы¶
- Android
- BlackBerry
- Firefox OS
- iOS 8
- Sailfish OS
- Tizen
- Ubuntu Touch
Более подробно поддержка WebGL описана в соответствующем разделе главы “Проблемы и решения”.
Преимущества WebGL¶
работает в браузерах без установки дополнительных программ (плагинов)
кроссплатформенный, предназначен для работы во всех стационарных и мобильных системах
является открытым стандартом, не требует лицензионных отчислений
поддерживается ведущими участниками рынка IT (Google, Apple, Microsoft, Nvidia, Samsung, Adobe и др.)
основан на знакомой разработчикам технологии OpenGL
интегрируется с другими браузерными технологиями
Что такое Blender¶
Blender - это популярная программа для создания 3D-моделей и анимации, бесплатная и с открытым кодом. Подготовленные в программе модели и сцены могут быть отображены, например, с помощью трехмерного движка на странице веб-сайта.
3D моделирование¶
Создание графических ресурсов требует наличия подготовленных специалистов - 3D-художников.
Типичный рабочий процесс может состоять из следующих этапов:
подбор фотографий и/или создание концепта и скетчей (“спереди”-“сбоку”-“сверху”) будущей модели или сцены
моделирование - создается трехмерная модель, состоящая из многоугольников (полигонов)
текстурная развертка - на модели создается разметка для последующего наложения текстур (плоских изображений)
текстурирование - на 3D-модель накладываются текстуры
подбор материалов - назначение различным частям модели материалов и их настройка (например, деревянная дверь с металлической ручкой)
риггинг (от англ. rigging, т.е. “оснастка”) - к модели прикрепляются управляющие элементы (“кости” “скелета”) с целью дальнейшей анимации
анимация - модель приводится в движение с целью визуализации действий (например, для персонажей)
экспорт - выполняется на любом этапе с целью отображения 3D-модели в ее конечном виде, например, на веб-странице
Кроме того, в процессе создания 3D-моделей часто используются техники повышения реализма, требующие отдельных этапов:
создание высокополигональной модели - создается детализированная версия модели
“запекание” карты нормалей - детали из высокополигональной модели переносятся на основную модель в виде специальной текстуры (карты нормалей)
создание карты отражения - различным частям модели назначается различный цвет и степень отражения света
запекание карт окружения - производится с целью реализации эффекта отражения окружающей среды на поверхности модели
настройка камеры и источников света на сцене
настройка параметров физической симуляции - частицы, ткань
Затраты времени при изготовлении 3D-моделей и анимации зависят от их сложности и требуемого качества, и могут изменяться от 1-2 дней (например, игровой предмет) до 1-2 недель (например, детализованная модель самолета) и даже нескольких месяцев (реалистичные персонажи с наборами одежды, волос, лиц, с анимацией и настройкой пропорций фигуры).
Браузерные технологии¶
Браузер (от англ. “browser”, т.е. “просмотрщик”) - программа для воспроизведения содержимого сети Интернет. На заре развития интернет-технологий роль браузера сводилась к просмотру текстовых страниц с включениями статических изображений (“гипер-текст”). Современные браузеры представляют собой полнофункциональные платформы для создания мультимедийных веб-приложений.
Среди реализованных в браузерах перспективных возможностей, используемых в Blend4Web, можно отметить следующие технологии:
трехмерная графика, WebGL
типизированные массивы, Typed Array
временной контроль анимации (requestAnimationFrame), Timing control for script-based animations
двухмерная графика, HTML Canvas 2D Context
обработка звука, Web Audio API
загрузка бинарных данных, XMLHttpRequest Level 2
полноэкранный режим, Fullscreen
захват курсора мыши, Pointer Lock
многопоточные вычисления, Web Workers
ориентация и перемещение мобильных устройств, Device Orientation
Другие перспективные технологии:
векторная графика, Scalable Vector Graphics (SVG)
безопасный доступ к файлам, File API, File API: Directories and System
потоковое соединение между браузерами, WebRTC
постоянное сетевое подключение, The WebSocket API
игровые пульты, Gamepad
Интерактивная графика¶
Термин “интерактивный” в приложении к компьютерной графике означает, что пользователь имеет возможность взаимодействовать с постоянно меняющимся изображением. Например, пользователь может изменять направление взгляда в 3D сцене, перемещать объекты, инициировать анимацию и выполнять другие действия, обычно ассоциирующиеся с компьютерными играми.
Интерактивность графики достигается за счет частой смены изображений, так что действие пользователя (например, движение курсора или нажатие кнопки) в промежутках между кадрами приводит к изменению изображения в следующем кадре. Изображения должны сменять друг друга так часто, чтобы человеческий глаз не был способен распознать их по отдельности (быстрее 30 кадров в секунду).
Близким по смыслу термином является также “графика реального времени”, или “рендеринг реального времени” (от англ. rendering, т.е. “отображение”).
Видео-карты и драйверы¶
Интерактивная графика реализуется специализированной аппаратной частью современных компьютеров, называемой графическим процессором, который может быть выполнен в виде отдельного устройства (видео-карты) или как часть центрального процессора.
Основные производители графических процессоров (в скобках указаны их торговые марки), для настольных компьютеров - Nvidia (GeForce, Quadro), AMD (Radeon), Intel (HD), для мобильных устройств - ARM (Mali), PowerVR (SGX), Nvidia (Tegra), Qualcomm (Adreno).
Доступ программ к ресурсам графического процессора осуществляется через программу-посредника, называемого драйвером. Важным условием для корректной работы интерактивных графических программ является наличие в системе драйверов последней версии. Драйверы можно установить (или обновить), загрузив их с соответствующих сайтов производителей графических процессоров. Подробнее в разделе Ошибка инициализации WebGL.