Blend4Web: способ вставить 3D-содержание на веб-страницу с использованием WebGL


Blend4Web — фреймворк на основе 3D-редактора Blender, позволяющий вставить сцены и объекты 3D на веб-страницу, который использует WebGL. Кроссбраузерный, ОС Linux x32/64, OS X x64, Windows x32/64. Лицензия: GPL. Сайт: www.blend4web.com


Для отображение 3D-графики на веб-страницах не существует, по крайней мере пока, специального тега, как, например, для картинок, видео или аудио. 3D-графика в браузере может быть показана при помощи Adobe Flash или WebGL. Технология WebGL — это специальный программный интерфейс (API) на языке JavaScript для реализации OpenGL, и который имеется сейчас в большинстве браузеров.

UPD. В связи с переходом на Markdown и всеобщим злоупоnреблением JavaScript на веб-сайтах автор статьи потерял интерес к JavaScript. Тем не менее ограниченное использование JavaScript вполне допустимо. Что же касается внедрения 3D-объектов на веб-страницы, то считаю более правильным делать ссылку в виде скриншота на 3D-файл, который по клику откроется в отдельном 3D-просмотрщике, как например, View3Dscene

Российская компания «Триумф» создала специальный фреймворк Blend4Web, с помощью которого можно создавать трехмерного интерактивного содержания, без использования непосредственного программирования на WebGL. Также 3D-содержание, созданное с помощью Blend4Web, работает в браузерах без использования плагинов — воспроизведение осуществляется средствами WebGL, Web Audio и других браузерных технологий.

Фреймворк Blend4Web имеет тесную интеграцию со свободным пакетом 3D моделирования и анимации Blender. И для создания трёхмерных сцен практически требуется только хотя бы базовое знание этого редактора 3D-графики.

Blend4Web существует во-первых в виде аддона к Blender, который позволяет экспортировать сцены из программы Blender для просмотра стандартными браузерами. Получаемый в результате единый HTML файл не имеет внешних зависимостей, и может быть размещен на web-странице, отправлен по почте и т.д.

Также Blend4Web распространяется в виде дистрибутива, который содержит полный комплект средств разработки (Software Development Kit, SDK) интерактивных 3D веб-приложений. Ниже рассмотрим аддон к Blender, как самый простой способ.

Архив аддона к Blender нужно загрузить из раздела «Загрузки» официального сайта Blend4Web. Далее запустить Blender, загрузить сцену по умолчанию «File > New». Вызвать окно пользовательских настроек «File > User Preferences». Во вкладке Addons нажать «Install from File» и затем выбрать zip-архив с файлами аддона. После этого необходимо отметить галочку напротив «Import-Export: Blend4Web». Далее нажать «Save User Settings» и закрыть окно пользовательских настроек.

Рис. Установка Blend4Web в Blender
Рис. Установка Blend4Web в Blender

После этого создаём в редакторе нужные 3D-модели.

Рис. Пакет 3D моделирования и анимации Blender
Рис. Пакет 3D моделирования и анимации Blender

После того как необходимое 3D-содержание создано, экспортируем полученную сцену через меню «File > Export > Blend4Web (.html)» и указать путь сохранения. Полученный HTML-файл можно просто открыть любым браузером, поддерживающим технологию WebGL. Также полученный HTML-файл можно вставить на веб-страничку с использованием тега iframe. Пример такого HTML-кода:

 <iframe src="мойсайт.ру/3d.html">  </iframe>

Ниже практический пример. Работает пока практически только в браузере Firefox. В браузерах IE, Chrome, Opera 12 может выдать ошибку. Стабильная поддержка этих браузеров, надеюсь, скоро будет сделана.

Получилась готовая 3D-сцена. Вращать объект зажатой левой кнопкой мыши, Колёсико мыши — масштабирование.

Чтобы установить новую версию аддона, необходимо сначала отключить, а затем удалить старую версию. Для отключения аддона запустить Blender, загрузить сцену по умолчанию «File > New». Вызвать окно пользовательских настроек «File > User Preferences». Перейти на вкладку Addons и выбрать категорию «Import-Export». Снять галочку напротив «Import-Export: Blend4Web». Далее нажать «Save User Settings» и перезапустить Blender. Затем для удаления аддона снова вызвать окно пользовательских настроек, раскрыть панель информации об аддоне Blend4Web и нажать кнопку «Remove».

Особенности Blend4Web:

Минимальный размер HTML-файла 3D-сцены около мегабайта. Это для простейших 3D-композиций. Более сложные композиции потянут на несколько десятков мегабайт.

На май 2014-го года, то есть на момент написания этого очерка, Blend4Web является ещё молодым приложением. Может работать нестабильно и не так как хотелось. То есть часто при экспорте могут появляться в первом верхнем углу Blender сообщения о невозможности экспорта по каким-либо причинам.

Рис. Сообщение об ошибке экспорта Blend4Web
Рис. Сообщение об ошибке экспорта Blend4Web

Но при этом с Blend4Web уже можно создавать сложные 3D-композиции с анимацией и звуками. Примеры таковых композиций можно посмотреть на сайте Blend4Web в разделе «Демо».

Рис. Примеры 3D-сцен Blend4Web на официальном сайте фреймворка
Рис. Примеры 3D-сцен Blend4Web на официальном сайте фреймворка

Частные примеры использования Blend4Web на своих вебстраницах: Блог My Blender Artwork

Ⓜ ⬇ 2015-03-21


02-05-2014