Самоучитель по Blend4Web. Глава 1: Введение и начало работы

Предисловие редактора

Андрей Прахов – разработчик компьютерных игр и автор многочисленных книг по Blender, которые наверняка помогли многим нашим пользователям познакомиться с этим замечательным инструментом. Андрей имеет обширный опыт применения Blender в самых разных областях и использовал его при разработке большого количества приложений. В цикле из 8 статей он расскажет вам о том, как начать работу со связкой Blender + Blend4Web и опишет основные приемы, необходимые для создания полноценной интерактивной трёхмерной презентации. Приятного чтения и удачи в мире 3D веба!

От автора

Мир Интернета изменчив. Многие привычные технологии устаревают, уступая место новым, более современными решениям. Кто бы мог подумать, что столь популярный флэш постепенно уйдет в небытие, а на его смену придет мощный и кроссплатформенный WebGL. «Свято место пусто не бывает» — так гласит мудрость веков и новое активно заявляет о своем наступлении.

«Осмотритесь» вокруг в сети Интернет. Уже многие сайты используют технологии HTML5 и WebGL для создания разнообразных крутых вещей. Трёхмерные конфигураторы для изготовления продуктов под заказ, интегрированные с онлайн-магазинами, приложения для дистанционного обучения инженеров и 3D отчеты экспедиций NASA — список возможных применений бесконечен и ограничивается только фантазией создателей. Так в чем же уникальность технологии WebGL и почему она становится столь популярной?

Дело в том, что благодаря WebGL 3D графика работает во всех Интернет-браузерах.... Требуется только браузер с поддержкой WebGL и к таким относятся все современные веб-обозреватели. Можете быть уверены - ваше приложение увидят все желающие.

...и на всех устройствах. Неважно, на чем работает пользователь — компьютер с операционными системами Windows, Linux или Mac OS X, а может быть у него планшет с Android или iOS? Нет проблем, WebGL работает и там.

Однако, создавать приложения для «чистого» WebGL — удел немногих. Слишком много нужно знать, слишком кропотливая работа. Поэтому на помощь приходят всевозможные «движки».

Blend4Web — это не просто «движок», а целая экосистема, предлагающая удобное окружение для полноценной работы над проектом WebGL. Мало какие «движки» могут предоставить такой набор инструментария и возможностей. Здесь и работа над трехмерной сценой в полнофункциональном редакторе, удобный менеджер для управления и развертывания приложений, редактор логики, богатый функциями API и многое другое. Добавьте к этому открытость и полный доступ к исходникам кода.

Задачи бывают разные и у читателя наверняка возник вопрос о применимости Blend4Web. Так для чего же его можно использовать?

Маркетинг. Какой электронный магазин обходится без демонстрации своего товара? Таких, наверное, и в природе нет. Ведь, чем красочнее вид, тем больше «текут слюнки» у посетителя. Даже простейшая объемная модель, которую клиент может покрутить и рассмотреть, уже привлекает его внимание.

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

Конструкторы товаров. Покупатели хотят не только смотреть, но и выбирать комплектацию товара. Большое количество вариаций — залог успеха, а веб-сайт может стать прекрасной витриной для ознакомления с продукцией и дальнейшим её приобретением. Изменение цветовой палитры, компоновка изделия из составных частей, подбор конфигурации в зависимости от стоимости, создание уникального продукта на любой вкус и не только это. Вы можете предложить своим клиентам максимально ознакомиться со всеми вариантами, позволить конструировать нечто уникальное, оформить заказ и приобрести товар, не выходя из браузера.

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

Игры. Да, да, Blend4Web идеально подходит для создания браузерных игр. Легкие файлы самого движка, функциональное API, естественный для браузеров язык программирования JavaScript, работа над сценой в редакторе, возможности компиляции и уменьшения размера файлов, тестирование в специальной программе- просмотрщике и инструменты отладки. Но это больше интересно программистам, а вот дизайнеров ожидают свои плюшки и возможности: смена дня и ночи, мягкие цветные тени, масса пост-эффектов для улучшения картинки, реалистичная анимация деревьев и травы, и многое, многое другое.

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

Вы узнаете о работе с моделями, научитесь использовать материалы и текстуры, разберетесь с анимацией и программированием логики, а главное — в дальнейшем сможете создавать свои собственные презентации с помощью замечательного фреймворка Blend4Web!

А мне осталось только выразить признательность команде Blend4Web за помощь и советы при создании презентации для уроков.

Blend4Web и Blender

Главная особенность Blend4Web — это использование полноценного редактора для создания и настройки сцен. Причем в качестве редактора выступает популярный, открытый пакет трехмерного моделирования и анимации Blender.

Blender — один из самых популярных трёхмерных редакторов. С его помощью создаются мультфильмы, композиции к фильмам, модели и сцены для игр. Он имеет богатый инструментарий для моделирования, анимации, физической симуляции. Не важно какую операционную систему вы используете. На официальном сайте Blend4Web можно скачать сборку под Windows, Linux, Mac OSX. И да, он полностью бесплатен!

Конечно, ничто не мешает создавать модели и анимации в другой программе. Blender «понимает» многие популярные форматы 3D. Например, вы можете экспортировать сцену из 3ds Max или Maya в формате FBX и уже настроить необходимые параметры в самом Blender.

Готовимся работать

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

Итак, вот что нам понадобиться сделать для создания презентации:

1. Скачать и установить редактор Blender для своей операционной системы.

2. Скачать и установить Blend4Web.

Прежде чем броситься за скачивание Blender, советую вам обратить внимание на страницу загрузки Blend4Web, а именно на сравнительную таблицу версий. Дело в том, что для полноценной работы конкретной сборки SDK требуется конкретная версия Blender. Скачать её вы можете как с этой страницы (щелкните на нужный номер версии Blender), так и с официального сайта программы.

Определитесь с дистрибутивом редактора под свою операционную систему. Как правило, сборки распространяются в архивах или в виде запускаемого файла (последнее только для системы Windows). Если вы сторонник Windows, то загружайте готовый инсталлятор в виде файла msi. В остальных случаях вам потребуется распаковать загруженный архив в подходящее место в соответствии с требованиями конкретной ОС.

Теперь разберемся с загрузкой Blend4Web. Разработчик предлагает два варианта — дистрибутив в виде полноценного SDK и отдельный плагин для Blender. Мы будем работать с SDK, так как возможностей здесь неизмеримо больше.

Итак, откройте страницу загрузки и выберите ссылку «Загрузить (версия XX.YY)» из области «Бесплатный дистрибутив Blend4Web», конечно, если вы не владелец коммерческой сборки. Вообще, установка обоих вариантов ничем не отличается. Вы просто распаковываете архив в удобное место на диске.

Запустите Blender, откройте окно User Preferences (меню File | User Preferences), закладку File и укажите путь к корневой папке SDK для поля Scripts. После этого, сохраните настройки, нажав кнопку Save User Settings (здесь и далее ключевые опции будут выделятся красным цветом на сопроводительном скриншоте).

Перезагрузите Blender и снова откройте окно User Preferences, но теперь уже на вкладке Add-ons. Здесь Blender хранит большое количество сторонних плагинов, которые вы можете использовать в своих проектах. Однако, сейчас необходимо найти и включить только один аддон с названием Blend4Web. Проще всего это можно сделать, если впечатать несколько ключевых букв в поисковом окне (см. рис. ниже).

Установите галочку справа у названия плагина и снова сохраните изменения (кнопка Save User Settings).

Вот и все. Настройка Blend4Web и Blender завершена. Теперь вы можете удостовериться, что наша связка работоспособна. Самое время выполнить свой первый экспорт.

Откройте меню File | Export. Если все настроено корректно, то вы увидите два пункта меню: Blend4Web (.json) и Blend4Web (.html). Выберите последний, укажите название и место для сохранения результата и нажмите кнопку B4W Export HTML.

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