В продолжении темы о переносе своих моделей в web... В прошлый раз разговор шёл о самых базовых моментах работы с Blend4Web и Blender. Задача была простая — взять любую стороннюю модель и перенести её в WebGL. Посмотреть, что из этого вышло, какие переработки понадобятся и т.д. Кому интересно, читайте этот пост, а сейчас разговор пойдет о создании логики. Точнее, что можно сделать для своей сцены за 5 минут, не написав ни строчки кода.

---

Вся логика Blend4Web основывается на использовании отдельных логических блоков, которые соединяются между собой «проводниками». Разработчики движка не стали делать ничего нового, а приспособили для своих задач уже имеющийся механизм нод Blender. Поэтому, логика создается точно также, как и нодовые материалы. Это решение разработчиков выглядит очень удобным и правильным, так как всё выполняется стандартным для Blender способом.

Пример логики в Blender

Нодовая логика не охватывает все возможности APIBlend4Web. Её предназначение — исключительно для использования в плеере движка. Это упрощает работу, но и накладывает некоторые ограничения. Впрочем и с ней люди делают потрясающие вещи. Можете посмотреть на официальном сайте в разделе «Демо». Я же расскажу лишь об одной полезной фичи, что можно сделать с её помощью.

Для прошлого урока я взял модель дракона с ресурса blendswap и разместил её в плеере b4w.  Она уже имеет готовую анимацию, которая автоматически проигрывалась в первом примере. Но куда интереснее было бы, если пользователю позволить самому выбирать и запускать нужные анимации. Модель дракона, к сожалению, имеет всего одну анимацию, но принцип для множественных останется тот же. Поэтому я не буду мудрить, а оставлю всё как есть.

Итак, ставим задачу: добавить на экран кнопку для запуска нужной анимации. Приступим...

В качестве кнопки может быть любой объект в сцене (группа mesh). Кнопка — это модель. Например, можно взять плоскость и натянуть на неё текстуру, или ещё как-нибудь извратиться. В общем, суть от этого не меняется. Однако есть одна проблема.

Для кнопки необходима постоянная фиксация её в поле зрения камеры, вне зависимости от движения или поворота сцены. Проще всего прикрепить этот объект к камере (стандартная операция Set Parent To), но при изменении размера страницы браузера кнопка может «уплыть» в неизвестном направлении.

Разработчики движка добавили свой функционал для привязки объектов к сторонам камеры. Проще говоря, с помощью этого можно создать GUI с правильным показом вне зависимости от экрана устройства.

Как это сделать (см. рисунок ниже с результатом):

1. Добавить пустышку (объект Empty).
2. Присоединить Empty к камере с помощью Set Parent To (клавиши CTRL+P).
3. Открыть панель Object и включить Viewport Alignment. Выбрать в меню нужный угол и нажать клавишу Fit to Camera, чтобы перенести пустышку куда следует.
4. Добавить к пустышке кнопку (Set Parent To).

Привязка кнопки к углу камеры

А вот теперь поговорим о логике. Работать с нодовым редактором удобнее всего при специальной раскладке окон, которая называется Compositing. Выбрать раскладку можно в главном меню Blender. Для понимания происходящего смотрите на скриншот ниже, все ключевые моменты отмечены красным.

1. Первоначально нужно создать само нодовое дерево:
2. Переключить редактор в режим логики (кнопка с изображением двух соединенных квадратов).
3. Нажать кнопку New для создания дерева.
4. В панели Scene включить вкладку LogicEditor и установить в поле ActiveNodeTree созданное дерево. Учтите, что понадобится обновить список меню для появления в нем нового дерева. Нажмите на кнопку Updateрядом с меню (на рисунке кнопка выделена).

Теперь плеер b4w будет учитывать логику, которую сейчас начнем создавать.

Первоначальная настройка логики

Все возможные ноды доступны в меню Add. Для удобства они рассортированы по группам. Самая первая и главная нода, которую нужно добавить в окно — это Entry Point. Именно с неё начнет «расти» логическое дерево.

Меню Add и первая нода

Добавьте ещё пару нод в окно, а именно Switch Select (группа Control Flow) и Play Animation (группа Animation). Первая нода позволяет отследить клик мышью по нужному объекту и соответственно передать управление дальше по дереву. Вторая нода запускает анимацию у нужного объекта. Так на рисунке Plane — это моя кнопка, а объект Armature содержит анимацию.

Нодовое дерево для запуска анимации

Как видите, ноды соединены между собою по цепочке. Т.е., сначала выполнение начинается с Entry Point, затем управление передается ноде Switch Select, которая ждет клика мышью где-нибудь по экрану. Если клик произошел и именно на объекте Plane, то включается анимация. Если же клик пришелся на другое место, то управление возвращается обратно к Switch (это как раз та цепочка, где соединен выход Miss и вход ноды Switch).

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

А вот то, что у меня вышло буквально за 5 минут. Разглагольствования не в счет :)

2016-05-05

Спасибо за полезный пост. Там в конце поста неправильно какой то объект вставлен, нужно в редактировании поправить.

2016-05-05

Я решил выкинуть плеер из поста и вставил в виде ссылки на пример. Не знаю, что за проблема была. Вроде отображалось всё корректно.

2016-05-05

Скоро раздел "уроки" перекочует сюда...) Спасибо, очень инетресно.

2016-05-05

[quote=Prand] Я решил выкинуть плеер из поста и вставил в виде ссылки на пример. Не знаю, что за проблема была. Вроде отображалось всё корректно. [/quote]По моему поддерживается только вставка видео с ютуба и вимео, годный пост, спс.