События

Самоучитель по Blend4Web. Глава 2: Основы моделирования

2016-10-19

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

Знакомство с 3D View

Это то, что встречает вас при запуске программы:

Рис. 1. Основной экран Blender.

Самое большое окно, где показывается сцена со всеми объектами. Здесь можно создавать, расставлять, компоновать всё, что захочется и в любых комбинациях —­ это основное поле для творчества.

Для того, чтобы начать работу, достаточно запомнить несколько правил навигации. Рассмотрим гипотетические вопросы от начинающего пользователя:

Хочу крутить сцену! Так вращайте на здоровье. Для этого достаточно зажать среднюю кнопку мыши. Кстати, с нажатой клавишей Shift сцену можно перемещать.

А масштабирование? Попробуйте использовать колесико мыши.

Я докрутился и у меня пустой экран. Есть "волшебная" кнопка на добавочной цифровой клавиатуре, та, что справа от вас. Нажмите Del (точка) и программа выведет в центр экрана выделенный объект в сцене.

А как выделять-то? Щелкаю левой кнопкой мыши по экрану, но только мечется какой-то "прицел". Это особенность Blender. Чтобы выделить любой объект в сцене нужно использовать правую кнопку мыши. После этого объект получит оранжевую окантовку. А вот "прицел" — это очень важный указатель при моделировании и мы к нему еще вернемся.

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

Рис. 2. Навигация с помощью цифровой клавиатуры.

Front (вид спереди) — клавиша 1.

Top (вид сверху) — клавиша 7.

Right (вид справа) — клавиша 3.

Camera (вид из камеры) — клавиша 0.

А теперь посмотрите на верхний левый угол окна. Для удобства Blender выводит там информацию о текущем режиме просмотра, так что не запутаетесь (Front Persp, Right Persp и т.д.).

Постойте... Вы еще не запустили Blender и надеетесь обойтись только скриншотами из урока? Не выйдет, друзья. Дальше у нас только практика.

Создание основной формы

Посмотрите на рисунок 3. Слева — готовая форма для телефона, которую, я надеюсь, вы создадите самостоятельно после прочтения этого урока. А вот справа — простой куб. Но для нас это не куб, а заготовка. Как вы думаете, почему при запуске Blender в центре экрана уже имеется этот примитив?

Рис. 3. От куба к мобильному телефону.

Всё дело в том, что большинство художников предпочитают работать именно с такой начальной формой. Ведь из куба можно сделать что угодно, даже превратить его в сферу. Хотя в наборе Blender имеются заготовки более подходящие для сферических объектов.

Разработчики программы учли пристрастия пользователей и заблаговременно подготовили нам куб для ускорения работы. Именно он стал основой для создания изящной формы, которая находится рядом с ним на рисунке.

Любой объект в трехмерном пространстве имеет три важные характеристики: координаты (место расположения), вращение и масштаб. Изменяя эти данные, художник и создает свою сцену. Поэтому наша с вами задача — изменить пропорции куба так, чтобы он стал похожим на мобильный телефон.

Blender предлагает различные способы для манипуляций с объектом. Пока мы рассмотрим самый простой.

Присмотритесь внимательно к кубу на первом рисунке, и вы увидите разноцветные стрелочки, исходящие из его центра. Несложно догадаться, что каждая из них отвечает за свою ось в трехмерном пространстве XYZ. Теперь попробуйте "ухватиться" курсором мыши (левая кнопка) за любую из них у своего объекта и перетащите в сторону.

Да, именно такой, простейший способ манипулирования объектами предлагает Blender. А для смены действия имеется специальная панель внизу окна, где можно выбрать необходимый вам манипулятор (см. рис. 4).

Догадались, как я сделал основную форму?

Рис. 4. Манипулятор масштаба.

Ничего сложного тут нет. Включаете манипулятор масштаба, как на рисунке 4 и, двигая за нужные шашечки, придаете примитиву необходимую форму.

Благородные очертания

То, что вы получили — это параллелепипед, который только внешне похож на телефон. Его нужно каким-то образом облагородить, придать изящные черты. Этим мы с вами сейчас и займемся.

В наборе Blender есть интересный инструментарий, который позволяет изменять объект с сохранением его настоящей формы. Представьте слоеный пирог, где на основной корж накладывается множество разной вкуснятины. И он уже выглядит совсем по-другому, хотя основа его остается неизменной. Такой подход в Blender называется модификацией, а сами инструменты — модификаторы.

Модификаторы располагаются на специальной панели в еще одном окне Blender, которое называется Properties (Свойства). Это самое важное окно программы, где сконцентрировалась основная масса настроек сцены и объектов. Для удобства все они располагаются в отдельных панелях, которые можно переключать, нажимая на кнопочки с рисунками вверху окна. Сами же модификаторы прячутся под стилизованным изображением гаечного ключа. Только не забудьте сначала выделить свой куб в сцене!

Вас встретит одинокая кнопка с характерным названием Add Modifier. Нажмите на нее и полюбуйтесь на богатство "начинки" (рис. 5).

Рис. 5. Список модификаторов.

Десятки функций самого различного назначения: деформации объектов, управление анимацией, физикой, текстурами и многое другое. На этом этапе нам понадобится всего один модификатор Bevel. Он отмечен на рисунке.

Этот замечательный инструмент позволяет скашивать грани объекта и создавать так называемые фаски. В нашем случае, необходимо изменить параметр Segments, который отвечает за количество сегментов при разбиении (рис. 6).

Рис. 6. Модификатор Bevel.

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

Для отдельного объекта вы можете использовать неограниченное количество различных модификаторов. И здесь очень важно учитывать порядок их наложения. Кнопки со стрелочками позволят переместить нужный модификатор вверх или вниз по списку.

Находящиеся рядом кнопки с изображениями фотокамеры и глаза контролируют работу модификатора в окне просмотра или конечного рендера соответственно. А вот кнопка Apply позволит применить все изменения и удалить модификатор из списка.

Итак, вы присоединили модификатор Bevel к своей модели. Скопировали все параметры, как на рисунке 6, а объект выглядит как-то не так.

Запомните одно важное правило! Для корректной работы многих инструментов требуется применить масштаб объекта, после его трансформирования. Это можно сделать в меню Object окна 3D View. Выберите пункт Apply | Scale. Теперь работа модификатора Bevel будет безукоризненной.

Последним штрихом станет включение общего сглаживания модели. Функция Smooth не изменяет форму объекта, а создает эффект за счет игры светотеней. Но с ней модель станет более естественной. Найдите одноименную кнопку на панели инструментов слева от 3D View и активируйте её (рис. 7).

Рис. 7. Включаем сглаживание модели.

Экспорт в веб

На прошлом уроке вы уже пробовали экспортировать свое приложение в WebGL. Это очень быстро и просто, но есть другой способ, который гораздо удобнее именно для тестирования промежуточных результатов.

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

Обратите внимание на верхнее меню программы. Там имеется выпадающее меню Engine, где можно выбрать рендер редактора. Откройте его и выберите пункт Blend4Web (см. рис. 8). Теперь при внимательном осмотре панелей Blender можно увидеть новые опции и настройки.

Рис. 8. Список движков для рендеринга.

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

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

Выделите модель, откройте панель Object окна Properties (кнопка с изображением куба) и найдите вкладку Export Options. Включите опцию Apply Modifiers (рис. 9).

Рис. 9. Флаг Apply Modifiers.

И последнее, для быстрого просмотра результата в окне браузера есть кнопка Fast Preview, которая расположена внизу окна 3D View. Программа выполнит экспорт и сразу откроет вашу сцену в специальном веб-приложении, которое буквально напичкано функциями для тестирования, но об этом мы поговорим в следующий раз.

А пока советую сохранить ваш проект (File | Save) и поздравляю — вы освоили базовые принципы моделирования в Blender!

Комментарии
13 фев. 2017 12:47
Странно я вроде отредактировал также как и у Вас куб на телефон, а в FIle->export html получается куб
13 фев. 2017 12:53
А херня как-то была может потому что blender обновился, отключил/включил plugin, переделал урок и все получилось
05 мар. 2017 11:31
Точно - сделал все по статье, а в итоговом экспорте вместо телефона получил кубик .
Делал в Blender 2.78 и последнем релизе blend4web
Хотя потом удалил тот телефон, который делал и заново создал - все стало отображаться в выгрузке нормально. Видимо руки выпрямились
20 мар. 2017 14:51
в engine не могу найти blend4web. Использую blender 2.78
А не, я понял в чем проблема. Я аддон не добавил.
20 мар. 2017 18:41
Ответ на сообщение пользователя Семен
в engine не могу найти blend4web. Использую blender 2.78
А не, я понял в чем проблема. Я аддон не добавил.

ну собственно не добавил вот его и нет ))) Блендер и Б4В это две разные программы !

устанавливаем аддон или СДК по инструкции продолжаем изучение..
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.