Ниже изложено содержание обзорной статьи о платформе Blend4Web, написанной мной для ресурса Mozilla Hacks, с изменениями и дополнениями.
В марте 2014 года командой российских разработчиков был представлен первый публичный релиз Blend4Web, открытой платформы для создания трехмерных веб-приложений. В этой статье рассматривается история развития платформы и перспективы ее применения.
Что такое Blend4Web?
Если коротко, Blend4Web — это открытая платформа для создания трехмерных веб-приложений. В качестве основного инструмента для создания контента в ней используется Blender — популярный пакет 3D моделирования с открытым исходным кодом. Отображение трехмерной графики осуществляется средствами технологии WebGL, также являющейся открытым стандартом. Эти два ключевых слова — Blender и Web(GL) — наиболее полно описывают назначение этой платформы.
Полный исходный код платформы Blend4Web, а также несколько примеров ее использования находятся в открытом доступе на сайте GitHub, под лицензией GPLv3 (также предлагается коммерческая лицензия).
3D Интернет
2 июня компания Apple представила новые операционные системы — OS X Yosemite и iOS 8 — включающие поддержку WebGL в браузере Safari. Это событие отметило конец 5-летнего цикла развития технологии WebGL, начавшегося с первых нестабильных сборок браузеров (таких как альфа-версия Firefox 3.7). В настоящее время все основные браузеры настольных и мобильных систем поддерживают этот открытый стандарт для отображения 3D графики, более не требуя установки каких-либо плагинов.
Это был долгий и сложный путь, по которому разработчики Blend4Web следовали за развитием технологии WebGL. Неработающий функционал, зависающие браузерные вкладки, предупреждения о «небезопасности» технологии от некоторых крупных игроков, недоступность технологии в публичных релизах браузеров были источниками определенных рисков. И все же уникальная возможность воспроизведения трехмерной графики (и звука) в браузерах этого стоила.
Blender
Первые версии пакета Blender 2.5x появились летом 2010 г. Именно тогда под впечатлением короткометражного фильма Синтел разработчики начали изучать основы 3D моделирования. Blender позволил организовать полностью независимый рабочий процесс на основе инструментов с открытым исходным кодом (в качестве операционной системы использовался Linux). Впоследствии к команде Blend4Web присоединились талантливые художники из сообщества Blender.
Эволюция Blend4Web на примере демо-приложений
Демонстрационные приложения, созданные на основе Blend4Web, отражали степень зрелости самой платформы. Первым из них стал «Остров», практически неинтерактивное приложение с достаточно простой графикой. Демо появилось в 2011 г и было несколько отшлифовано перед публичным релизом. В нем был впервые реализован основанный на Blender технологический процесс, в котором все ресурсы хранились в отдельных (библиотечных) файлах и подключались к главному файлу для использования в дизайне сцены и дальнейшего экспорта (по этой причине некоторые пользователи Blend4Web называют его «бесплатным Unity Pro»).
В «Показе мод» продемонстрированы техники анимации одежды. Пост-процессинговые эффекты, динамический эффект отражения и системы частиц были добавлены позднее. После того, как состоялся публичный релиз Blend4Web, приемы симуляции одежды были изложены в одном из уроков.
«Ферма» — огромная сцена, особенно с точки зрения браузерных приложений: площадью более 25 гектар, с постройками, анимированными животными и растительностью. В демо реализованы некоторые игровые моменты, такие как возможность перемещения в режиме от первого лица, взаимодействие с объектами, управление транспортным средством. В приложении задействованы позиционные источники звука (средствами Web Audio) и физическая подсистема (на основе Bullet и Asm.js). Разработчики, связанные с проектом Freedesktop, использовали это демо-приложение для отладки драйверов в составе Mesa.
Приложение «Натюрморт» продемонстрировало возможности платформы в области визуализации. В этой сцене были использованы тщательно подготовленные текстуры и материалы, а также различные графические эффекты с целью повышения реализма. Тем не менее, технологии, использованные для ее создания были простыми и несколько консервативными, поскольку на тот момент инструмент для визуального редактирования шейдеров еще не существовал.
Новая эпоха в развитии платформы наступила после реализации поддержки узловых материалов пакета Blender. Так, художники команды Blend4Web создали более 40 различных материалов для модели Спорткара: хромированное покрытие, лакированный металл, стекло, резина для покрышек, кожа сидений и т.д.
В одной из недавно выпущенных версий в Blend4Web была добавлена функция управления анимацией в зависимости от действий пользователя. В результате интерактивные приложения могут быть созданы без необходимости написания программного кода. С целью демонстрации новых открывающихся возможностей была представлена интерактивная трехмерная инфографика легкого многоцелевого вертолета Ми-34.
Этот простой, но эффективный инструмент (названный разработчиками NLA Script) может иметь разнообразное применение: интерактивный вебдизайн в трех измерениях, презентации товаров и услуг, наглядные обучающие материалы, мульфильмы с возможностью выбора сюжета, игры жанра point-and-click и любые другие приложения, которые ранее обычно создавались с помощью технологии Flash.
Как это работает
Порог вхождения в технологию крайне низкий — достаточно загрузить и установить аддон к программе Blender, как рассказано в следующем видео-уроке:
Одной из замечательных особенностей платформы является возможность экспорта 3D сцены в единственный HTML файл, который может быть, например, отправлен по почте, размещен на собственном сайте или в облаке — одним словом, распространен любым способом по вкусу. В этом состоит фундаментальное отличие Blend4Web от многочисленных веб-сервисов, предлагающих услуги публикации 3D контента, поскольку пользователи не принуждаются к использованию того или иного Интернет-ресурса.
Для разработчиков сложных интерактивных 3D веб-приложений предлагается комплект средств разработки (SDK). Некоторые примечательные случаи использования интерфейса прикладного программирования (API) продемонстрированы в уроках по программированию, начиная от вебдизайна и заканчивая играми.
Программирование 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, который позволит кардинально увеличить возможности по отображению трехмерной графики в Сети.
Информация и поддержка
В блоге разработчиков Blend4Web регулярно публикуются новости и обучающие материалы, о чем можно также прочитать Вконтакте и Google+. На канале YouTube публикуются видео-версии демо-приложений и видео-уроки. Задать вопрос можно на форуме.
Автор: gfxdevrus
