|
Виртуальные
помощники для web.
Автор: Александр Бабков
team-leader "ЦЕРИП"
В последнее время Internet-технологии все больше интегрируются
с другими компьютерными областями. Наиболее привлекательной
и перспективной считается область слияния Internet с 3D-графикой.
Возможно, что через несколько лет эра векторной графики закончится,
а на смену ей придет эра объемного Internet. Но это пока фантастика
недалекого будущего. До сих пор идет война стандартов для
3D-Internet между Viewpoint,
Pulse3D,
Macromedia
и Cycore.
Впрочем, пусть эта война продолжается, ведь деньги — двигатель
прогресса. В этой статье мы рассмотрим другую проблему: как
привнести немного 3D в «плоские страницы».
Прежде
всего хочу сказать, что при создании виртуального помощника
мы не будем использовать ни Macromedia Flash, ни какую-нибудь
другую технологию, для которой потребуется установка дополнительных
модулей. Помощник будет сделан полностью в 3D и будет выглядеть
либо как маленькая ожившая игрушка, либо как реальный объект.
Все дело в качестве детализации и выборе персонажа. Для этого
создадим анимацию, а затем преобразуем ее в gif.
Из
программного обеспечения понадобятся всего два пакета. Для
создания модели помощника подойдет любой 3D-редактор, который
работает с полигонами (3D
MAX), Nurbs-кривыми (MAYA)
или b-сплайнами (Animation
Master). Настоятельно рекомендую не использовать 3D-редактор,
работающий с примитивами (Bryce
4). Используя примитивы, вы никогда не создадите приемлемого
помощника. Представьте себе, как будет выглядеть персонаж,
который сделан из кубов и шаров? А проблемы при анимировании?
Лично
я выбрал Animation
Master Millenium версии 8.5h.

В
принципе, Animation Master идеально приспособлен для подобной
работы. Легкий и понятный интерфейс, высокая скорость работы
с небольшими моделями, скромные системные требования — вот
далеко не полный список преимуществ АМ.
Для
перекодировки и правки видео-файла подойдет Gif Animator 4.0
от компании Ulead. Более удобную и полезную программу для
наших целей сложно отыскать.
Теперь
перейдем к расчету разрешения помощника. Оптимальный размер
анимированного gif-изображения составляет 10-15 кБ. Gif большего
размера, при учете качества отечественных телефонных линий
и стабильности работы неадаптированных модемов, будет долго
загружаться. Я предлагаю три наиболее приемлемых варианта
по критерию «размер\разрешение», при палитре в 32 цвета (см.
таблицу). Приведенные здесь виды помощника сделаны при разрешении
75х75.
Конечно,
вы можете выбрать любое другое разрешение, но при 50х50 вряд
ли будет что-то четко видно, а при 100х100 и более частота
кадров для стандартной трехсекундной сцены составит 3-4 кадра
в секунду. Такой частоты кадров явно недостаточно. Для нормальной
прорисовки и плавности движений требуется не менее 5 кадров
в секунду.
Разрешение
|
Количество
кадров
|
100x100
|
до
12
|
75х75
|
10-18
|
50х50
|
15-30
|
При
моделировании, как довольно сложной части создания помощника,
следует учесть множество различных факторов. Будет лучше,
если вначале будет готов эскиз модели на бумаге, а уж затем
в 3D-модели. Такой подход значительно экономит время. Но при
определенном навыке можно сразу создавать модель без эскизов.
Также продумайте примерное содержание состояний помощника.
Зная, для каких движений и действий готовится модель, вы сможете
сразу правильно подключить кости к различным частям. В результате
отпадает надобность каждый раз при создании новой сцены переподключать
кости к модели.
Помощник
должен быть максимально приближен к тематике web-сайта. После
появления на вашем сайте он станет своеобразной визитной карточкой,
которая должна вызывать ассоциации, понятные всем, а не только
3D-дизайнеру, сделавшему помощника. В противном случае эффективность
подобного метода будет равна нулю. К примеру, если вставить
сцену вышагивающего милитаризованного помощника с винтовкой
в руках на страничке сайта с военной тематикой, то все поймут,
что, нажав сюда, они попадут в раздел по легкому ручному вооружению,
но если то же состояние помощника поместить на страницах электронной
библиотеки или виртуального магазина, это вызовет как минимум
недоумение.
Если
вы уже продумали примерные состояния и общий вид помощника,
то можно приступать к моделированию. У человека, знакомого
с азами 3D-графики, процесс создания несложной модели займет
не более одной недели. У абсолютно начинающих моделирование
займет от 2 до 4 недель. Но не стоит пугаться. В конце концов
вы поймете, что 3D-моделирование – это процесс сродни рисованию,
только гораздо более автоматизированный и не требующий художественных
навыков. Свою первую сложную модель я делал в общей сложности
три месяца, а сейчас гораздо более трудоемкие модели делаю
всего за 7-8 рабочих дней. Модели вроде этого помощника-молотка
можно сделать всего за один рабочий день при наличии эскизов.
Запомнив
три основных правила моделирования помощника, вы сможете избежать
ошибок и разочарований. Первое правило — не делайте небольших
надписей, а также маленьких проекционных карт и мелких деталей
на теле помощника. Такой подход занимает много времени, и
в лучшем случае подобные детали просто незаметны или отображаются
в виде неясных пятен, а в худшем — портят общий вид модели.
Вспомним хотя бы спрайты военной техники из игры «Противостояние
III». Техника в игре выглядит просто отлично и кажется очень
детализированной, а просмотрев видеоролики, испытываешь легкое
разочарование от слишком угловатых форм и малой детализации.
А ведь модели использовались явно одни и те же. В нашем случае
ситуация точно такая же. Второе правило — в процессе моделирования
лучше сначала сделать общий каркас модели, а уж затем цеплять
на этот каркас элементы мимики и другие атрибуты личности
помощника. Иначе можно столкнуться с проблемой подгонки различных
частей между собой и буквально натягивать один элемент на
другой. Реальность персонажа в данном случае может намного
уменьшиться. Наконец, последнее и самое главное правило. Мимика
помощника должна быть максимально реалистична и многогранна.
Тогда при анимировании вы не столкнетесь с проблемой воссоздания
задуманной гримасы помощника. Если вы не делаете помощника
для сайта похоронных услуг, то небольшая доля юмора никогда
никому не мешала. Помощники с юморком всегда смотрятся гораздо
приятнее и реалистичнее.
Наиболее
простой способ придания комизма помощнику — это гипертрофированность
элементов мимики персонажа, т.е. непропорциональное увеличение
относительно тела помощника таких частей, как глаза, уши,
нос, рот и зубы.
Теперь
перейдем к самой сложной части создания помощника, а именно
к анимации состояний. При выборе количества состояний не руководствуйтесь
принципом «для каждой страницы свое состояние». Это долго,
дорого, а главное, в конце концов начинает надоедать посетителям.
Лучше воспользуйтесь принципом «один раздел — одно состояние»,
и не забудьте про такие общедоступные состояния, как «помощь»,
«информация», «добро пожаловать» и т.д. Обычно для сайта среднего
размера достаточно десяти состояний помощника. Стандартная
длина роликов равняется трем-четырем секундам при частоте
6 кадров в секунду. Такой длины роликов вполне хватает для
несложных движений. Многие, недоумевая по поводу того, какие
действия может сделать персонаж за такое время, начинают снимать
настоящие короткометражные фильмы. А когда дело доходит до
правки и перекодировки анимации, то получаются gif размером
по 40-50 килобайт. Если вы получили такой же результат, значит,
вы еще не до конца уяснили себе основной принцип подобной
анимации. Поэтому тщательно пересмотрите сделанную вами анимацию
и постарайтесь вырезать все ненужные движения и действия.
А лучше заново отснимите это состояние, только вначале мысленно
поставьте себя на место помощника и задайтесь вопросом «Какие
бы я сделал на его месте движения для выражения нужных ассоциаций?».
Также старайтесь сделать так, чтобы как можно больше второстепенных
движений (вроде махов руками при ходьбе и моргания) выполнялось
параллельно основному действию. Во-первых, это добавит реализма
помощнику. Во-вторых, такой подход позволит уменьшить
длину ролика, т.к. все действия будут проходить одновременно,
а не одноза другим.
Учитывая
малую частоту кадров, появляется вполне резонный вопрос о
проблеме создания резких и быстрых движений в анимации. К
таким действиям относится моргание, метание чего-нибудь и
т.п. Действительно, для подобных действий в нормальной анимации
требуется частота кадров не менее 30 в секунду. Для нас такая
частота кадров неприемлема из-за ограниченности размеров ролика.
Благодаря Ulead Gif Animator подобную проблему можно с успехом
обойти. Дело в том, что в этом пакете существует возможность
управления скоростью прорисовки для каждого кадра. Поэтому
можно поставить для одного кадра скорость прорисовки 50 раз
в секунду, а для другого 1 раз в секунду. Это чрезвычайно
помогает в том случае, когда требуется неравномерная скорость
прорисовки. К примеру, чтобы сделать персонажу эффект моргания,
понадобится всего два кадра. Один кадр — глаза открыты, другой
— глаза закрыты. Установив частоту прорисовки для первого
кадра в меню Delay равной 100, а для второго 2, вы получите
практически готовый gif. При анимации в 3D на такое могло
уйти до 5 кадров. Применяя подобный метод, вы сможете, как
минимум, на 20-30% уменьшить длину ролика.
Интересными
эффектами для помощника будут возможности прозрачного заднего
фона, toon render и замкнутых gif. Замкнутые gif (их еще называют
«вечными») физически имеют начало и конец, но если смотреть
на них, то они кажутся бесконечными. Подобный эффект достигается
путем такого проектирования движений помощника, когда, сделав
некоторые движения, помощник возвращается в то же положение,
в котором он был в начале ролика. В результате после перекодировки
в gif помощник неустанно совершает бесконечные движения. У
таких gif
один недостаток: они занимают на 30-50% больший объем, чем
незамкнутые.
Вопреки
устоявшемуся мнению, прозрачность в анимации сделать очень
легко. Эффект прозрачности достигается путем замены одного
выбранного цвета на прорисовку того, что на данный момент
закрыто gif-анимацией на вашей странице. Для начала выберите
в уже готовой сцене какой-нибудь однотонный цвет фона. Лучше,
если этими цветами будет либо черный, либо белый. Дело в том,
что при выборе убираемого цвета в Gif Animator он выдает сразу
весь набор палитры, которая использовалась в ролике. Поэтому
иногда довольно сложно выбрать из кучи оттенков тот, который
нужен. А черный и белый цвета видны сразу. Также не забудьте,
что цвет, который использовался для фона, уже нельзя будет
применять в этой сцене, иначе на помощнике могут появиться
прозрачные области.
Эффект
toon render – это рендеринг только очертаний объектов при
помощи линий.
Чтобы
сделать такой эффект в своей анимации, зайдите в меню рендеринга
Animation Master и поставьте флажки в подменю Toon render,
override lines, lines only.
В
появившемся подменю Toon lines можно управлять толщиной, расцветкой
и качеством
прорисовки линий.
Если
у вас будет свободное время, попробуйте поэкспериментировать
с совмещением между собой эффектов, описанных выше. Получаются
очень интересные результаты.
Зная
немного Dynamic Html, можно сделать так, чтобы помощник в
буквальном смысле слова ходил по страничкам вашего сайта.
Для этого сделайте замкнутую gif с шагающим помощником и используйте
возможности dhtml.
Как
видите, уважаемый читатель, сделать такого помощника довольно
легко. К сожалению, сайтов с их использованием почти нет.
Мода на них пока только начинается. Вживую можно посмотреть
большое количество анимированных состояний на
нашем сайте. Сходите еще на BeeOnLine,
там есть пчелка-помощник — рисованная, но как пример использования
подобной технологии вполне подходит. Успехов вам в 3D!
|
|