Видео на Ютуб:

Введение

Приветствую всех, кого интересует VR. В этой статье хочу рассказать на примере своей последней работы, как анимированную 2D иллюстрацию можно интегрировать в VR среду, создав у зрителя полноценный 3D опыт.

Почему я вообще этим занялся?

Еще в институте я хотел соединить объем от скульптуры и живописность от картины, при этом доступность для зрителя в любой точке мира. Сначала это были анаглифные картины, напечатанные на бумаге, затем мое творчество эволюционировало в контент для VR-box на смартфоне, и вот 1.5 года назад купил Pico4, стал пробовать свое творчество на нем и заодно ознакомился играми. Оказалось, что большинство игр - это 3D с графикой уровня 2010-х. Эффект погружения и управление руками - это круто, но визуально многие игры выглядят скромно.

Мне так и не попались игры с красивой рисованной графикой. Хотя на мобильных телефонах и ПК такой стиль давно и успешно используется. Почему его нет в VR? Почему в VR так мало проектов, где можно просто сидеть на диване и наслаждаться красивым миром, без активного движения?
Качественный 3D слишком тяжеловесен для скромного по производительности железа, которое стоит в массовых шлемах. А красивую графику хочется, но при этом хочется сохранить 3D эффект.

Что же у меня получилось?

Мне удалось создать полноценный 3D опыт из 2D иллюстрации и скелетной анимации в Spine 2D.

На выходе получается:
1 - Два файла json с синхронной анимацией для каждого из глаз.
2 - Все кости и риг сохранены.
3 – Эти два json можно интегрировать в движок игры.
4 - Можно создать заготовку и далее продолжать работу в After Effects (эффекты, сборка в видео, озвучка).
5 - Можно запечь в секвенцию и собирать из нее последовательность анимаций. Например отдельно персонажа или объект, для последующей вставки в сцену игры.

Схема работы

В этом проекте я прошел полный цикл: задумка, эскизы, иллюстрация, анимация, адаптация 2D в VR.

Но это не обязательно делать одному человеку, работу над подобным проектом можно разделить на 3х человек. Иллюстратор может сделать красивую иллюстрацию. Аниматор - профессионально оживить ее. А дальше есть этап VR адаптации и сборки. Важно, чтобы файлы были подготовлены определенным образом и были соблюдены технические ограничения, чтобы восприятие VR-контента пользователем было качественным. Если все сделать правильно, то результат будет выглядеть как полноценное живописное 3D, но при этом сохранит легковесность мобильного гейминга.

Сколько это заняло

Сразу оговорю условия, в которых создавалась иллюстрация. Я делал ее по выходным и вечерами после основной работы с графиком 5/2 (я работаю иллюстратором, аниматором, креативщиком).

Вот фактические часы по этапам:
1 – иллюстрация заняла (задумка, эскиз, 3д, живопись, слои) - 117 часов.
2 - Анимация в Spine 2D - 54 часа.
3 - VR адаптация - 44 часа.
4 - сборка в After Effects - 9 часов.
Не учтено время рендеров. А они нужны, чтобы проверять результат на очках, оценивать качество 3D эффекта - как статичного, так и анимированного.
Если есть команда профессионалов - иллюстратор и аниматор, они, скорее всего, сделают свою часть быстрее. VR адаптация и сборка - этап, который требует специфической технологии, время работы над ним можно примерно представить, соотнеся сложность данной иллюстрации и вашего текущего проекта.

Что нужно проконтролировать в работе иллюстратора

Чтобы иллюстрация подходила для VR адаптации, нужно учесть несколько моментов.

Перспектива и пространство
Иллюстрация должна быть реалистично встроена в пространство. Никаких оптических иллюзий, невозможных геометрий и явных ошибок в перспективе. Нужно именно сцена, имеющая объем и пространство.
3D болванка
Для работы в VR понадобится 3D болванка (я использую Blender). Она достаточно грубая, но подробная в ключевых местах. Сетка, количество полигонов, текстуры, цвет, свет - не имеют значения. Важно другое: реальные размеры предметов, их место в пространстве, правильная перспектива, а также рендеры областей, которые скрыты с одного ракурса анимации, но видны с другого. Этот этап пропустить нельзя.
Слои
Предметы, которые двигаются и смещаются относительно фона и самих себя, должны быть на разных слоях. Здесь все стандартно.

Что нужно объяснить аниматору

Есть несколько ключевых ограничений и возможностей.

Можно:
1 - Двигать кости и элементы по осям вверх-вниз, вправо-влево (2.5D эффект, движение формы за костью).
2 - Увеличивать и уменьшать (например, дыхание).
3 - Двигать точки отдельно (моргание, улыбка, брови).
4 - Делать легкое качание (даже если есть 3D эффект).
5 - Сочетать все эти эффекты одновременно.
6 - Динамическое приближение и отдаление объектов тоже возможно.
Нельзя:
1 - Крутить вокруг оси элементы, которые в сцене будут объемными (плоские можно)
2 - Произвольно копировать, искажать, перемещать или менять размер элементов. Любое серьезное отклонение от исходной иллюстрации может непредсказуемо сломать 3D-эффект в VR.
Технические требования к файлам:
1 - Исходник должен быть подготовлен к анимации по слоям
2 - Названия слоев не должны изменяться
3 - Не должно быть фантомных пикселей далеко за пределами рабочей формы и прочие грубые ошибки.
4 - Слои не должны быть слиты, если они должны двигаться друг относительно друга в параллаксе.

Где это может пригодиться

Мне кажется, этот подход может работать в таких жанрах:

визуальные новеллы, квесты (point-and-click), карточные игры, 2.5D игры с видом сбоку, комиксы, катсцены и заставки во время загрузки, начальные интерфейсы, мобильные игры-головоломки, элементы интерфейса для 3D игр в VR, образовательные проекты с иллюстративным стилем и прочие инди-игры, где важен узнаваемый художественный стиль. Уверен, что список можно продолжить.

Видео и материалы
Все, что перечислено ниже, можно посмотреть на Google Диске по ссылке: [https://drive.google.com/drive/folders/1Y4FV-wptH3tjriqu8-b_ZwUlk3azZjCW?usp=drive_link]

Визуальные материалы:
[Иллюстрация карго культ.jpg] - готовая иллюстрация
[карго культ моно.mp4] - анимация, плоский вариант
[карго культ VR.mp4] - готовая стереопара с анимацией (VR версия)
Технические материалы:
[таймлапс каргокульт.mp4] - таймлапс процесса иллюстрации
[спайн макет.mp4] - видео с ригом и костями в Spine
[3д болванка.png] - скриншоты 3D болванки из Blender
[эскизы сборка.jpg] - эскизы и дизайны
[проект фотошоп.mp4] – видео со слоями Photoshop

Контакты и обратная связь
Буду рад обратной связи и конструктивному диалогу.
Почта: [syvorov1ilia@gmail.com]
Boosty: [https://boosty.to/ilia1syvorov]

Youtube: [https://www.youtube.com/@syvorov1ilia]