Суетящиеся шарики
2014-08-05
Вступление
В этой статье мы расскажем о создании эффекта анимированных шариков, который использовался в статье Вебмастерам: 3D-веб тремя способами. Вкратце будет описано моделирование и анимация и более подробно - создание нодового материала.
Может показаться, что описанный в этой статье подход излишне усложнен, т.к. модели очень простые - шарики с текстурами. Как мы увидим, эта кажущаяся сложность является ценой создания максимально оптимизированного 3D контента.
Модель и анимация
Все 9 шариков представлены одной цельной моделью. Для модели создан один скелет с количеством костей, равным количеству шариков, чтобы каждая кость перемещала один шарик.
Геометрия стенок шариков с обратной от зрителя стороны была удалена в целях оптимизации:
Таким образом, мы имеем всего один анимированный объект на сцене. Далее стандартным для скелетной анимации способом было создано две анимационные последовательности: взлет шариков и последующее зависание в воздухе.
Текстуры
В общей сложности были подготовлены три текстуры. В двух из них собраны буквы слова "blend4web", размещенные в разных каналах изображения:
На заметку
Распределение масок по каналам одной текстуры - прекрасный способ уменьшения количества текстур и сокращения объема занимаемой видео-памяти. В результате создается резерв для увеличения качества текстур.
Для имитации эффекта отражения понадобится черно-белая текстура типа matcap (material capture). Вид из камеры на шарики будет фиксированным, так что такой текстуры будет вполне достаточно:
Шарики будут окрашиваться предварительно нанесенным на геометрию вертексным цветом:
На заметку
Использование вертексного цвета для окраски вместо текстур - еще один замечательный способ оптимизации.
Настройка материала
В этом примере мы создадим единственный универсальный материал для всех шариков, что позволит использовать всего лишь один вызов отрисовки для этой достаточно интересной сцены. Материал выглядит несколько громоздким, поэтому разберем его по частям.
Самый большой блок нод (1) предназначен для извлечения изображений букв из двух ранее созданных текстур и назначения их на шарики. С целью идентификации на шарики были нанесены маски вертексного цвета.
На заметку
Использование вертексного цвета в качестве масок - очень простой и удобный способ смешивать отдельные элементы нодового материала. Теоретически в один вертексный цветовой слой можно упаковать до 8 масок одновременно, используя цвета - красный, зеленый, синий, циан, пурпурный, желтый, черный и белый. В результате простых математических операций эти цвета могут быть преобразованы в черно-белые маски. Об этой интересной методике мы расскажем в одной из следующих статей.
Далее смешиваем (2) ранее созданную текстуру типа matcap с вертексным цветом, и добавляем текстуру с буквой (5).
С целью реализации прозрачности, а также создания эффекта плавного появления шариков, создадим процедурную маску для альфа-канала (3). Для этого задействуем вертикальный черно-белый градиент, выведенный из сокета Global ноды Geometry. Для создания эффекта меньшей прозрачности по краям шариков (эффект Френеля) используем ноду Dot Product.
Эта вертикальная черно-белая маска была также использована для бликов (4).
Чтобы отключить затенение от источника света, но при этом оставить блики, поступим следующим образом. Из ноды Material выведем Spec и добавим к чистому цвету (6). Полученный результат подадим напрямую в ноду Output.
В итоге мы получили реалистичный, насыщенный визуальными эффектами материал.
Заключение
Встроенный в Blender редактор нодовых материалов позволяет создавать очень удобные для настройки и отладки материалы. Нодовые материалы легко модифицируются при изменении требований к визуализации без необходимости создавать их заново, а также позволяют реализовать ряд стратегий по оптимизации.
Исходные файлы этого примера находятся в составе дистрибутива Blend4Web SDK.
Изменения
[2014-08-05] Изначальная публикация.
[2015-10-06] Обновлен код демо-приложения.