Blend4Web, открытая платформа для создания трехмерных веб-приложений

Ниже изложено содержание обзорной статьи о платформе Blend4Web ^[1], написанной мной для ресурса Mozilla Hacks, с изменениями и дополнениями.

В марте 2014 года командой российских разработчиков был представлен первый публичный релиз Blend4Web, открытой платформы для создания трехмерных веб-приложений. В этой статье рассматривается история развития платформы и перспективы ее применения.

Что такое Blend4Web?

Если коротко, Blend4Web — это открытая платформа для создания трехмерных веб-приложений. В качестве основного инструмента для создания контента в ней используется Blender ^[2] — популярный пакет 3D моделирования с открытым исходным кодом. Отображение трехмерной графики осуществляется средствами технологии WebGL, также являющейся открытым стандартом. Эти два ключевых слова — Blender и Web(GL) — наиболее полно описывают назначение этой платформы.

Полный исходный код платформы Blend4Web, а также несколько примеров ее использования находятся в открытом доступе на сайте GitHub ^[3], под лицензией GPLv3 (также предлагается коммерческая лицензия).

3D Интернет

2 июня компания Apple представила новые операционные системы — OS X Yosemite и iOS 8 — включающие поддержку WebGL в браузере Safari. Это событие отметило конец 5-летнего цикла развития технологии WebGL, начавшегося с первых нестабильных сборок браузеров (таких как альфа-версия Firefox 3.7). В настоящее время все основные браузеры настольных и мобильных систем поддерживают этот открытый стандарт для отображения 3D графики, более не требуя установки каких-либо плагинов.

Это был долгий и сложный путь, по которому разработчики Blend4Web следовали за развитием технологии WebGL. Неработающий функционал, зависающие браузерные вкладки, предупреждения о «небезопасности» технологии от некоторых крупных игроков ^[4], недоступность технологии в публичных релизах браузеров были источниками определенных рисков. И все же уникальная возможность воспроизведения трехмерной графики (и звука) в браузерах этого стоила.

Blender

Первые версии пакета Blender 2.5x появились летом 2010 г. Именно тогда под впечатлением короткометражного фильма Синтел ^[5] разработчики начали изучать основы 3D моделирования. Blender позволил организовать полностью независимый рабочий процесс на основе инструментов с открытым исходным кодом (в качестве операционной системы использовался Linux). Впоследствии к команде Blend4Web присоединились талантливые художники из сообщества Blender.

Эволюция Blend4Web на примере демо-приложений

Демонстрационные приложения, созданные на основе Blend4Web, отражали степень зрелости самой платформы. Первым из них стал «Остров» ^[6], практически неинтерактивное приложение с достаточно простой графикой. Демо появилось в 2011 г и было несколько отшлифовано перед публичным релизом. В нем был впервые реализован основанный на Blender технологический процесс, в котором все ресурсы хранились в отдельных (библиотечных) файлах и подключались к главному файлу для использования в дизайне сцены и дальнейшего экспорта (по этой причине некоторые пользователи Blend4Web называют его «бесплатным Unity Pro»).

В «Показе мод» ^[7] продемонстрированы техники анимации одежды. Пост-процессинговые эффекты, динамический эффект отражения и системы частиц были добавлены позднее. После того, как состоялся публичный релиз Blend4Web, приемы симуляции одежды были изложены в одном из уроков ^[8].

«Ферма» ^[9] — огромная сцена, особенно с точки зрения браузерных приложений: площадью более 25 гектар, с постройками, анимированными животными и растительностью. В демо реализованы некоторые игровые моменты, такие как возможность перемещения в режиме от первого лица, взаимодействие с объектами, управление транспортным средством. В приложении задействованы позиционные источники звука (средствами Web Audio) и физическая подсистема (на основе Bullet ^[10] и Asm.js ^[11]). Разработчики, связанные с проектом Freedesktop ^[12], использовали это демо-приложение для отладки драйверов в составе Mesa.

Приложение «Натюрморт» ^[13] продемонстрировало возможности платформы в области визуализации. В этой сцене были использованы тщательно подготовленные текстуры и материалы, а также различные графические эффекты с целью повышения реализма. Тем не менее, технологии, использованные для ее создания были простыми и несколько консервативными, поскольку на тот момент инструмент для визуального редактирования шейдеров еще не существовал.

Новая эпоха в развитии платформы наступила после реализации поддержки узловых материалов пакета Blender. Так, художники команды Blend4Web создали более 40 различных материалов для модели Спорткара ^[14]: хромированное покрытие, лакированный металл, стекло, резина для покрышек, кожа сидений и т.д.

В одной из недавно выпущенных версий в Blend4Web была добавлена функция управления анимацией в зависимости от действий пользователя. В результате интерактивные приложения могут быть созданы без необходимости написания программного кода. С целью демонстрации новых открывающихся возможностей была представлена интерактивная трехмерная инфографика легкого многоцелевого вертолета Ми-34 ^[15].

Этот простой, но эффективный инструмент (названный разработчиками NLA Script) может иметь разнообразное применение: интерактивный вебдизайн в трех измерениях, презентации товаров и услуг, наглядные обучающие материалы, мульфильмы с возможностью выбора сюжета, игры жанра point-and-click и любые другие приложения, которые ранее обычно создавались с помощью технологии Flash.

Как это работает

Порог вхождения в технологию крайне низкий — достаточно загрузить и установить аддон к программе Blender, как рассказано в следующем видео-уроке:

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

Для разработчиков сложных интерактивных 3D веб-приложений предлагается комплект средств разработки (SDK) ^[16]. Некоторые примечательные случаи использования интерфейса прикладного программирования (API) ^[17] продемонстрированы в уроках по программированию ^[18], начиная от вебдизайна и заканчивая играми.

Программирование 3D веб-приложения с помощью платформы ненамного сложнее создания среднего «насыщенного» Интернет-приложения. В отличие от некоторых других основанных на WebGL фреймворков, в Blend4Web задачами по подготовке графического контента, анимации и звукового сопровождения занимаются соответствующие профессионалы. Программисту остается загрузить сцену…

var m_data = require("data");
m_data.load("example.json", load_cb);

… и описать логику, согласно которой в 3D сцене происходят изменения, заложенные художниками, например, воспроизводится анимация объекта, на который нажали мышью:

var m_scenes = require("scenes");
var m_anim = require("animation");

var myobj = m_scenes.pick_object(event.clientX, event.clientY);
m_anim.apply_def(myobj);
m_anim.play(myobj);

Как можно видеть, API структурирован в модульном стиле (в стиле CommonJS), что, по мнению разработчиков, является важным для создания компактных и быстрых веб-приложений.

Перспективы

Сложно предсказать по какому пути направится развитие Интернет-технологий (и информационных технологий вообще), однако можно утверждать, что третье измерение Сети уже имеет под собой прочные основания. Можно ожидать, что все большее количество пользователей изменит представление о том, как должен выглядеть Интернет. В свою очередь команда Blend4Web продолжает улучшать инструменты для веб-разработчиков, повышает стабильность и производительность и реализует поддержку новых графических эффектов.

Разработчики Blend4Web также с интересом следят за разработкой стандарта WebGL 2.0 ^[19], который позволит кардинально увеличить возможности по отображению трехмерной графики в Сети.

Информация и поддержка

В блоге разработчиков Blend4Web ^[20] регулярно публикуются новости и обучающие материалы, о чем можно также прочитать Вконтакте ^[21] и Google+ ^[22]. На канале YouTube ^[23] публикуются видео-версии демо-приложений и видео-уроки. Задать вопрос можно на форуме ^[24].

Автор: gfxdevrus

Источник ^[25]