Здравствуй, хабрасообщество.

Поделюсь опытом работы нашей студии с дополненной реальностью на примере годового отчета ФИАБАНКа за 2009 год.
Что такое годовой отчет, думаю, многие знают. Это достаточно традиционный устоявшийся формат, в рамках которого банки и дизайнеры стараются переплюнуть своих коллег/конкурентов в креативности, красоте, изысканности, прикольности, серьезности. Одним словом, это профессиональный и осмысленный выпендреж. Дресс-код, если хотите, при входе в серьезное банковское сообщество.

Дизайнеры и отделы маркетинга/PR/рекламы каждый год бьются в поисках новых выразительных средств, но всегда ограничены 50-60 листами дорогой бумаги. И вдруг появляется она – дополненная реальность. А почему бы и нет? – спросили себя наши хорошие знакомые – ребята из агентства B5, работавшие над годовым отчетом ФИАБАНКа. Потом они задали такой же вопрос нам. Так родилась задача: дополнить дополненной реальностью годовой отчет. Совместить классику и современность. Подружить старое и новое. Как же проходила эта работа?

Для начала необходимо было определиться с концепцией.

Вариант 1. «Живая» инфографика.

В любом годовом отчете много информации. Цифры, графики, анализ. Как правило, такая сухая статистическая информация достаточно тяжело воспринимается. Почему бы не сделать ее «живой»? – подумали мы. Добавить анимацию, звуковое сопровождение, наглядные сравнительные визуалы.

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

Отметаем.

Вариант 2. «Живое» видео.

ФИАБАНК традиционно силен пиаром и хорошей командой – т.е. людьми. Т.к. в годовом отчете раскрываются различные направления банковской деятельности, то за каждым направлением стоит отдельная личность. Пусть эта личность неожиданно выступит со страниц годового отчета, эмоционально и от первого лица раскрыв свою тему. А что? Прикольно. Т.е. эта идея уже лучше, но чего-то не хватает.

Вариант 3. Видео + 3D.

Любой дизайн – это коммуникация компании с внешним миром. Годовой отчет – коммуникация на высшем уровне. На высшем, так на высшем. Значит обращаться к целевой аудитории будет никто иной как председатель правления банка. Анатолий Парфирьевич Волошин согласился на эту роль.

Но не просто же видеоролик показывать? Просто видео можно и так посмотреть. Значит видео должно быть с уместным сопровождением. Мы придумали к каждому видео-фрагменту создать виртуальную 3D-сцену, на которой будет выступать Волошин.

Так и родилась концепция комбинации видео и 3D, которая и была утверждена.

Пока готовились тексты к выступлению, мы принялись за 3D.

Что собой представляют 3D-сцены? По сути это несколько плоскостей с текстурами:

Горизонтальная плоскость («земля»), на которой располагается выступающий (плоскость с видео) и остальные вертикальные плоскости («объекты»).
Вертикальная плоскость с видео-выступлением.
Вертикальные плоскости-объекты.
Вертикальная плоскость с видео-фоном (небомореоблака).

Темы для сцен были известны и утверждены, необходимо было их визуализировать.

Тема №1. Вступление.

Вступление – это всегда что-то обобщающее. Обобщающим для ФИАБАНКа является сам ФИАБАНК. Нужно было как-то это визуализировать. Понятно, что это логотип и понятно, что это должно быть одно из зданий. Было решено использовать изображение не головного офиса, а бывшей гостиницы. Это очень интересный проект, который был заброшен, но, благодаря усилиям ФИАБАНКа, возобновлен и завершен. Т.е. банк имеет самое непосредственное отношение к зданию. Кроме того, несколько верхних этажей занимает офис банка.

Поиск решения.

Кругленькая подставочка.

Квадратненькая подставочка.

Экран для дополнительной информации.

Пседво-три-дэ.

Пейзаж с гостинницей. Так лучше.

Пейзаж с гостинницей и докладчиком.

Как это будет смотреться на фоне журнала и головы.

Дополнительный экран (который так и не задействуем) и дополнительный элемент фирменной символики (которого не будет).

Тема №2. Финансирование строительных объектов.

Показать здесь что-то конкретное было проблематично. Объектов много – фотографий нормальных не было. Поэтому был сделан подбор визуалов: строящиеся объекты, построенные объекты, some vehicles.

Поиск решения.

Смальта и пейзаж на стене.

Смальта, пейзаж на стене, докладчик, информационное табло.

Корпоративный подиум в полосочку и падаюшие пизанские башни.

А вот и информационное табло.

Трава, асфальт, первая линиия новостроек.

Трава, асфальт, первая линиия новостроек, вторая линия строящихся объектов, техника, брендмауэр.

Примерно здесь будет докладчик.

Примерно так это будет выглядывать из отчета.

Информационное табло и логотип (которых в итоге не будет).

Тема №3. ФИАБАНК – золото России.

У ФИАБАНКа есть золотодобывающие картели в Якутии. С точки зрения фотографий – снова ничего хорошего. Поэтому схема как в предыдущей теме: прииск, горы, some vehicles.

Поиск решения.

ФИАБАНК застолбил прииск и пригнал какой-то комбайн.

ФИАБАНК застолбил прииск и пригнал какой-то комбайн.

Информационное табло показывает какие бывают слитки.

Вот так примерно выглядит прииск.

Прииск высовывается из отчета.

Без докладчика будет скучно.

Жаль, что информационного меню не будет. Логотипа не жаль.

Тема №4. Центр проектного финансирования.

Финансирование новых технологий, если в двух словах. Футуристический пейзаж, что же еще.

Поиск решения.

Спутник пролетает очень низко над домом будущего. Летающий автомобиль пролетает над объектом, похожим на автобусную остановку будущего.

Спутник пролетает очень низко над домом будущего. Летающий автомобиль пролетает над объектом, похожим на автобусную остановку будущего.

Информационное табло не помешало бы, но его не будет.

Псевдо-три-дэ для наглядности.

Город будущего. Истребитель. Машинки. Уже лучше.

Докладчик.

Как это все примерно будет смотреться. Информационного табло даже здесь не будет.

3D-сцены сцены готовы. Вот как они будут выглядеть в дополненной реальности (без видео).

Вступление.

Строительство.

Золотодобыча.

Инновации.

Теперь съемки. Не просто съемки, а с использованием технологии «Хромакей» (chroma key). В двух словах. Объект снимается на однородном фоне (в нашем случае зеленом), далее видеоматериал обрабатывается таким образом, что вокруг снимаемого объекта однородный фон заменяется на прозрачность.
При съемках была одна большая сложность, связанная со временем. Необходимо было одновременно соединить во времени студию, оператора, руководителя съемок / специалиста по видео-монтажу и 3D, председателя правления банка. Задача, как оказалось, невероятно сложная. Все очень занятые люди. Т.к. все должно было сняться за один дубль, было принято решение сделать 2 съемки. Первая: приладочная/тестовая. Вторая: рабочая. На первую съемку мы пригласили Игоря Волошина, который в течение 3 часов стойко выступал перед камерой. Этот материал ушел в обработку. В результате была получена бета-версия дополненной реальности, на которой обкатали все нюансы.

Через две недели состоялась финальная съемки с участием Анатолия Парфирьевича Волошина, по результатам которой появилась окончательная рабочая версия.

Теперь осталось нарисовать веб-интерфейс и выложить дополненную реальность в сеть. Интерфейс состоит их 4 страниц, столько же сколько и тем. По умолчанию грузится вступление. На странице мы видим название темы, себя (вид из веб-камеры), разворот соответствующей страницы годового отчета и краткую инструкцию. Те, кто не имеет годового отчета, могут распечатать соответствующие страницы с маркером, скачав PDF-файл.

А вот и видео дополненной реальности:

С какими сложностями столкнулись.

Сжатые сроки –> мультимаркерность.

Все годовые отчеты делаются и сдаются в последний момент. Поэтому вопрос предоставления информации и согласования этапов стоит очень остро. Это также повлияло на некоторые технические моменты в реализации. Например, не удалось полноценно оттестировать мультимаркерный вариант интерфейса. Уже когда отчет ушел в печать, выяснилось, что фреймворк не совсем корректно обрабатывает 2 маркера из 4, т.е. при использовании в мультимаркерном режиме путает их. Решено было разделить экраны.

Скорость хоста.

Сайт банка расположен на собственном хосте. Скорость канала наверх – всего 2 мегабита. Объем данных, которые тянет пользователь (движок, 3D-модель, текстуры, 2 видео-потока), требует скорость канала не менее 1 мегабита. Т.е. теоретически, если канал свободен, то 2 пользователя одновременно могут посмотреть дополненную реальность нормально, а вот если появится третий, то уже начнутся тормоза. Фактически же канал постоянно используется, поэтому даже когда 1 пользователь начинает смотреть, подгрузка данных происходит очень медленно. Основной вес составляют текстуры и видео. Первые даже технически грузить с другого хоста невозможно. Подгрузку видео с другого хоста организовать возможно, но там мешают проблемы безопасности. В итоге зарегистрировали под проект отдельный домен, на котором и можно посмотреть вживую, что же получилось: www.fb-ar.ru.

Что в результате? В результате получился первый (и наверное пока единственный) годовой отчет с использованием технологии дополненная реальность. Сфера применений трендовой технологии постоянно расширяется.

Augmented Reality & Annual Report