Статьи: Эксклюзив

Making Of "Yungo"

Для создания соответствующей атмосферы и лучшего восприятия текста включаем композицию The Lively Ones – Surf Rider и вперёд! 

Об авторах

Всем привет, меня зовут Горбунов Антон и сегодня я расскажу вам о создании демки «Юнго».

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

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

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

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

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

 

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

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

Цитата с сайта разработчиков: alternativaplatform.com/ru/alternativa3d

 

  

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

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

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

 - Gabe Askew: Two Weeks - Grizzly Bear

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

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

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


…и Dan Morris.

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

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

 

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

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

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

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

 

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

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

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

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

              

 

   Задник, с облаками и скалами – 1455                                 Корабль – 153                                         Волны (каждая) – 151

 

 

                   Молния – 139

         

                   Пушечное ядро – 73                                       Солнце – 58                                                       Осьминожка – 58

 

 Получилось даже лучше, чем задумывалось:  треугольников в сцене – 2389; точек  - 1 614.

На этом этапе также были созданы и применены к моделям текстурные координаты (UVW Mapping), благодаря которым текстура ляжет корректно и глаз осьминога не окажется в... Впрочем, совершенно неизвестно, где он мог бы оказаться 

 

 Развёртка всех моделей

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

 
                   

Wireframe render - Каркас

                   

                                                                         Wireframe render (with hiden edges) - Каркас (со скрытыми рёбрами)

 

 Ambient occlusion render - Глобальное затенение

 

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

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

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

                          

                                                                                       Свойства слайдера

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

         

                               Привязываем цель камеры                                                                                   Привязываем камеру

 

Анимируем в 3D Max солнце, волны, облака, молнию, корабль и осьминога.

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

  

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

 

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

                                                                                            Настройки для экспорта

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

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

 

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

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

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

                                

 Картонная основа для всех моделей (diffuse)          Окрашенный картон для задника               Карта неровностей (bump)

                 

       Карта бликов (specular)                                          Текстура для скал

 

А вот освещение и тени будут создаваться в 3D Max.

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

 

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

Настройки VRay.

Свойства источника света

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

Настройки RTT

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

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

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

                                                                  
       Текстуры с «запечёнными» тенями        Наложение слоёв для итоговой текстуры                                  Итоговая текстура

 

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

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

Ищем референсные шумы в интернете: www.findsounds.com. Последующая обработка производится в 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):

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

                              

                                 HTML+CSS                                                                                           Итоговые файлы

 

Подсчитаем:

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

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

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

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

 

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

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

 

Заходите в гости, мой сайт-портфолио: www.asg-3d.ru

ЖЖ: anton0antonov.livejournal.com

12535 Автор:
Актуальность: 576
Качество: 594
Суммарный балл: 1170
Голосов: 26 оценки

Отзывы посетителей:

аватар
 
asg 19 0
LabEG - неее, для меня он почти что родной, тем более самый первый сайт по трёхмерке, где я зарегистрировался))) Да и бываю здесь чаще, чем на других..

Цитирую:У тебя хоть кто нибудь купил такого рода сайт за ту сумму которую ты просишь?

Цена как цена)) Я же не имел в виду, что это стоимость такого-же сайта, как и "Юнго". "Юнго" - это простенькая демка, сам понимаешь, что возможности намного шире.
Очень хотелось бы конечно сделать сайт в стиле Jim Carrey - Official Site - http://www.jimcarrey.com/.
И скорее даже не с коммерческой стороны интересно, а направление завлекает: не просто застывшая трёхмерка, а что-то живое, ещё и в браузере крутится!

HTML5 - да, сейчас как-раз в этом направлении и копаю. Как накопаю, напишу

аватар
 
s_maliankin 16 0
Цитирую LabEG:
Ты все таки нашел вражеский ресурс =))


ВРАЖЕСКИЙ РЕСУРС??!!? WTF??? это что еще за, вы вообще о чем?
аватар
 
LabEG 56 0
Ты все таки нашел вражеский ресурс =))
Тока твой мейк оф уже несколько морально устарел, теперь тоже самое пожно сделать на HTML5 =)) Делай новый мейк оф =)))
У тебя хоть кто нибудь купил такого рода сайт за ту сумму которую ты просишь?
аватар
 
asg 19 0
ыых - что я могу вам сказать - ничего вы не понимаете в осьминогах!
аватар
 
ыых 2 0
хм, посмотрел результат на сайте - помоему стремно... особенно стремный шикарный рисунок осьминога Юхановой Алеси
аватар
 
Man5ON 2627 0
Куратор комьюнити
интересная штука) раньше с таким не встречался) спасибо!
аватар
 
asg 19 0
Цитирую Роман Цапик:
Отличный материал, спасибо автору!


Неожиданно и приятно)) Благодарю!
аватар
 
s_maliankin 16 0
гуд, сенкс, всегда было интересно как такие штуки делать 5\5
аватар
 
Роман Цапик 2496 0
Главный редактор
Отличный материал, спасибо автору!
аватар
 
asg 19 0
Цитирую:Изначально возникла идея протестировать и использовать в дальнейшей работе FLASH-движок Alternativa3D.

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

Да, в итоге конечно объёмными выглядят лишь горы и задник сцены. Остальные объекты можно было конечно сделать плоскостью+текстура с альфа-каналом, но это стало очевидно лишь на последних этапах работы и решили оставить без изменений.
аватар
 
ms..! 2 0
Не совсем понял зачем подключать было альтернативу и использовать макс. Нарезать в фотошопе плашки и сделать такой же параллакс и анимацию только во флеше, использую например stage3d.
Зарегистрируйтесь, чтобы добавить комментарий.
Эту страницу просмотрели: 452 уникальных посетителей