На Дежурке мы хотим  представить различные стили и направления в веб-дизайне, ознакомить читателя с последними новинками и, конечно же, рассказать как создать тот или другой элемент. Так, в поле нашего зрения попал замечательный урок по созданию 3D-Flash демки отечественного дизайнера Горбунова Антона. В уроке Антон детально рассказывает о том, как создать вот такую замечательную демку «Юнго». 

Возникновение идеи: ради чего всё затевалось

Изначально возникла идея протестировать и использовать в дальнейшей работе FLASH-движок Alternativa3D. Путём подключения нескольких библиотек этот движок позволяет использовать настоящие трёхмерные объекты в стандартной среде FLASH. Представляете, какой простор для творчества! Это и объёмные сайты с интерактивными возможностями FLASH, виртуальные туры (интерьерные, экстерьерные), архитектурные презентации (где всё можно покрутить, собрать/разобрать, сменить цвет/свет/тени/текстуры и пр.) и другие интересные штуки.

«Технология Alternativa3D предназначена для отображения трёхмерной графики в среде Flash Player. Возможности Alternativa3D 7 многогранны и разнообразны, а сферы применения варьируются от создания полностью трёхмерных сайтов в сети Интернет до разработки многопользовательских браузерных игр и проектов для социальных сетей в «честном» 3D.

Alternativa3D уже зарекомендовала себя в самых разных областях IT-индустрии. Ярким примером коммерчески успешного и быстро развивающегося проекта на её основе является первый в мире браузерный, полностью трёхмерный онлайн-шутер «Танки Онлайн». Технология также нашла широкое применение в архитектурно-строительной отрасли, в дизайне интерьеров и в интернет-рекламе.» (Источник)

Сценарий и референсы

Начнём со сценария и референсов: что-нибудь движущееся, простое для воплощения (не забывайте, дело для нас новое, надо оставить время для отладки) и в тоже время не совсем убогое  ;-)

Одной из первых, на ум пришла идея с картонными декорациями. В ходе исследования просторов интернета нашлись:

— Gabe Askew: Two Weeks — Grizzly Bear

— один из участников сообщества демосцен pouet.net (автора, увы, не помню, остались лишь несколько скриншотов с видео)

— и создатели видео-клипа “Innuendo” моей любимой группы Queen.

Добавим творчества Кацусика Хокусая…

…и Dan Morris.

Вырисовывается что-то морское и слегка театральное: передний план декораций – морские волны, ограниченные скалами по обеим сторонам сцены; в центре сцены и внимания – кораблик плюс неугомонный осьминог; ещё повесим лучистое солнце и раскидаем облаков.

Теперь об интерактивности. Скалы, понятное дело, двигаться не могут, зато всё остальное можно анимировать: волны волнуются, корабль покачивается, солнце и облака оживают при наведении курсора мыши. Осьминог движется по одному ему известному маршруту...

Планируем работу

Исходя их технических особенностей движка (и FLASH-а в том числе), трёхмерная сцена должна состоять из как можно меньшего количества полигонов (треугольников). Пределом для 7-й версии Alternativa3D (актуальной на момент создания работы) являются 12000 полигонов, но мы постараемся уложиться тысяч в 5‒7. Дело в том, что все просчёты берёт на себя центральный процессор, а у него и без нас хлопот хватает.

Также нужно оптимизировать и размер файлов с моделями, текстурами, они ведь все должны будут передаваться по интернету конечному пользователю. Большое значение имеет разрешение текстур. Конечно, чем оно больше, тем итоговая картинка качественнее, но мы проигрываем в производительности. Поэтому разрешение постараемся сохранить в пределах от 512×512 до 2048×2048. Начнём с максимального и, по мере уменьшения разрешения (и ухудшения детализации), будем определять минимально допустимое значение.

Предстоит нарисовать собственно саму трёхмерную сцену с объектами, осветить её, создать виртуальную камеру и выбрать лучший ракурс.

Моделирование, UVW Mapping в 3D Max

Пришло время 3D Max. Версия программы 2011, т.е. именно для неё предусмотрен плагин экспорта в формате Collada для ALternativa3D.

В данной работе моделирование было достаточно тривиальной задачей и сводилось в основном к отрисовке контура модели по подготовленному изображению с последующей экструзией (выдавливание, придание объёма плоской фигуре). Таким образом были смоделированы все объекты, за исключением скал, которые, кстати, являются зеркальными копиями друг друга.

Итак, трёхмерные модели и количество треугольников в них (в порядке убывания):

Получилось даже лучше, чем задумывалось: треугольников в сцене – 2389; точек — 1 614.  На этом этапе также были созданы и применены к моделям текстурные координаты (UVW Mapping), благодаря которым текстура ляжет корректно и глаз осьминога не окажется в... Впрочем, совершенно неизвестно, где он мог бы оказаться.

Объединяем модели, не участвующие в анимации, в единый объект, добавляем на сцену динамичные объекты (молния, корабль, осьминог, волны) и получаем следующую композицию:

Анимация в Максе, использование helper-а и экспорт во FLASH

Хотелось ещё добавить, что некоторую интерактивность можно получить ещё в ходе работы в 3D Max до момента финальной сборки во FLASH. Речь идёт о контроле движения камеры, ведь нам нужно чётко понимать, что должен увидеть зритель, а чего, напротив, показано быть не должно. По сценарию камера может перемещаться вправо-влево относительно центра сцены. Цель камеры, в свою очередь, движется в это время влево-вправо (в противофазе относительно самой камеры), что дополнительно создаёт ощущение глубины.

Для создания этого эффекта необходим вспомогательный объект 3D Max: Helpers -> Manipulators -> Slider.

Для его использования необходимо задать соответствие (зависимость) между положением бегунка и цифровыми значениями положения камеры и её цели. Эта зависимость может быть как прямой (линейной), так и определяемой формулой, например, мы можем указать, что цель камеры движется в несколько раз медленнее самой камеры и в противоположном направлении:

Анимируем в 3D Max солнце, волны, облака, молнию, корабль и осьминога. Используем простую keyframe-анимацию (анимация по ключевым кадрам), т.е. необходимо задать положение объекта лишь в нескольких ключевых кадрах, а остальное движение программа рассчитает сама:

      

Анимация молнии (ключевые кадры в моменты времени 5, 10, 15, 20, 25, 30 и 35)

Отдаём всё это дело (экспорт в Alternativa3D) в заботливые руки FLASH-программиста.

Наблюдаем вместе с ним пустой экран, думаем, меняем настройки экспорта и импорта, наблюдаем пустой экран, думаем и пробуем разные варианты дальше…Наверно, всем знакома подобная ситуация.

Освещение и тени в Максе: рендер и «запекание теней»

Приступаем к созданию текстур. Могу порекомендовать бесплатную библиотеку на Сgtextures

Сами текстуры будут нарисованы в Photoshop CS5, что является достаточно простой задачей, и останавливаться на ней смысла не вижу, просто нужно помнить о единстве цветовой гаммы, чтобы в глазах не рябило и картинка не «разваливалась». Сохраняем итоговую текстуру в разрешении 2048x2048px и в дальнейшем проведём несколько экспериментов с уменьшением размера (и соответственным уменьшением качества детализации) для нахождения оптимального соотношения.

А вот освещение и тени будут создаваться в 3D Max. Для рендера (просчёта освещения) в 3D Max я использовал подключаемый плагин VRay. Можно, конечно, использовать и встроенные системы рендера, но мне нравятся достаточно быстрые «мягкие» тени VRay. Система освещения состоит из одного источника света, глобальное освещение не просчитывается, гамма 2.2.

Положение источника света и камеры относительно сцены

Используя «рендер в текстуру» (RenderToTexture) «запекаем» тени.

Для вывода я использовал HDRI (High Dynamic Range Image) что позволяет иметь больший контроль над изображением.

По первоначальной задумке тени должны были быть динамическими, т.е. реагировать (передвигаться) на изменение положения объектов сцены. Задача эта достаточно ресурсоёмкая и в итоговой сцене от динамических теней решили отказаться. Не забывайте, что в среде FLASH (до версии 10 включительно) видеокарта в просчётах не участвует.

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

После наложения полученных теней на исходные текстуры, тестирования с разными разрешениями (от 512×512 до 2048×2048) и соединения всех текстур в один файл получаем итоговое изображение в формате jpg, 1024x1024px.

Наложение слоёв для итоговой текстуры

Добавляем звук

Подведём промежуточный итог: все модели созданы, с анимацией, наложенными текстурами и корректно работают во FLASH-е. Остаётся добавить звук, для создания соответствующей атмосферы.

Ищем референсные шумы в интернете (на Findsounds). Последующая обработка производится в Sony SoundForge 10 и кодируем в формате mp3.

• ambient – фоновый звук (длительность 15 секунд, зациклен), скрип снастей и деревянных частей корабля, шум волн, крик чайки, всякие таинственные звуки;
• bullet – при клике по кораблю включается анимация пролёта пушечного ядра и воспроизводится шум выстрела из орудия;
• wind – воспроизводится шум ветра при наведении на любое облако;
• lightning – при клике по любому облаку слышны раскаты грома и включается анимация молнии;
• focus on the sun – начинает воспроизводиться при наведении курсора мыши на солнце, одновременно включается анимация центральной части солнца;
• click on the sun – проигрывается при клике по солнцу, также по клику открывается полупрозрачное окно с перечислением авторов демки.

Собираем воедино, верстаем html-страницу, закладываем «пасхалку»

Что же, звуки добавлены, остаётся сверстать простенькую html-страницу, надо ведь ознакомить общественность с нашим творением.

Запускаем Adobe Dreamweaver CS5, создаём новую html-страницу: центрируем swf-объект, добавляем возможность масштабирования FLASH-ки (небольшой самописный javascript):

<script type="application/javascript">

function plus()

{

o1 = document.getElementById(«scale_flash»);

o1.width=(o1.width-50)+100;

o1.height=(o1.height-50)+100;

}

function minus()

{

o1 = document.getElementById(«scale_flash»);

o1.width=o1.width-50;

o1.height=o1.height-50;

}

function reset()

{

o1 = document.getElementById(«scale_flash»);

o1.width=800;

o1.height=450;

}

</script>

Также добавим счётчик посещений, элементы социальной оптимизации (добавить/поделиться в популярных соцсетях) и копирайт. Т.к. ещё на этапе освещения сцены мы предусмотрели, что сцена будет плавно растворяться в темноте, выставляем чёрный цвет фона страницы.

Подсчитаем:

• Размер текстур (все текстуры хранятся в одном файле) — 209 КБ
• Звуки — 269 КБ
• Исполняемый файл (swf) — 265 КБ
• Трёхмерная сцена (подгружается в swf) — 354 КБ

Итого (FLASH+3D+звуки): 1,07 МБ.

И обещанное «пасхальное яйцо» 8-)

Если открыть не главную демо-страницу, а специальную, можно увидеть количество треугольников сцены, некоторую другую техническую информацию и проверить производительность своей системы.

Помимо указанных в статье программ можно было использовать любые другие аналогичные, позволяющие добиться желаемого результата: трёхмерной модели, смешения текстур, микширование звуков и пр. Например, бесплатные Blender (для моделирования), GIMP (создание текстур) и тому подобные.

Конечно, не стоит забывать о pipeline и понимать, что экспорт из других пакетов трёхмерного моделирования (кроме 3D Max) в Alternativa3D будет затруднён ввиду отсутствия (или «сырости») плагинов. Так что постарайтесь распланировать весь процесс до начала работ, а не после возникновения трудностей.

Немного об авторах

Удивительно, но вот только сейчас, начав писать статью, я задумался, с чего же именно началось моё увлечение трёхмерной графикой, да и графикой вообще. А началось всё с короткометражки Джеффа Лью «Убить Боба» (Jeff Lew – “Killer Bean”) 1999г., где в титрах был указан Animation Master, пакет для анимации 3D персонажей. Поиздевавшись некоторое время над Animation Master, я переключился на 3D Studio MAX, если не ошибаюсь, версии 3.2.

Потом рисовал какие-то цеха с электрооборудованием (по образованию я инженер-электрик), интерьеры и экстерьеры для компании, занимающейся ландшафтным дизайном, рекламу для местного телевидения, рекламу для рекламных экранов местного рекламного агентства.  Одним словом, затянуло!

Эта демка не была бы создана без помощи: Кистерева Евгения (FLASH-программирование, бета-тестирование и множество замечательных советов), Юхановой Алеси (шикарный рисунок осьминога и море позитива), Гаглоевой Елены (отрисовка текстуры облаков, да и вообще—отличный человек).

Заходите в гости на сайт-портфолио



Комментарии