VR-прототипирование — стратегии

Трудно найти подходящие инструменты дизайна для виртуальной реальности, а особенно для прототипирования. Благо, что растущее сообщество VR стремится к решению проблем и быстро разрабатывает новые стратегии.

Больше о новых инструментах виртуальной реальности, появляющихся в последнее время и их эффективности в рабочем процессе в детальной статье ниже.

Источник

Перед запуском нового дизайна-проекта будет логично сделать шаг назад и разработать план разработки от А до Я — начиная исследованиями и заканчивая проектированием, прототипированием и тестированием. За прошедшие годы мы разработали несколько передовых методов мобильного, веб- и VR-прототипирования.

Но мы имеем дело с дизайном виртуальной реальности, который пока что остаётся новой отраслью. VR это действительно иная вещь.

Трудно найти подходящие инструменты дизайна для виртуальной реальности, а особенно для прототипирования. Вместо них дизайнеры использовали софт для мобильного дизайна, который не очень хорошо подходит для 360-градусного интерфейса.

Однако, на горизонте замаячили и хорошие новости. Растущее сообщество VR стремится к решению проблем и быстро разрабатывает новые стратегии. Вероятно, вы видели много новых инструментов виртуальной реальности, появляющихся в последнее время, поэтому давайте взглянем на них и подумаем, как они могут вписаться в рабочий процесс вашего проекта.

В цифровом дизайне есть уже обжитый и проверенный годами рабочий процесс: эскизы, каркасные модели, низкокачественные прототипы, визуальные эффекты, прототипы с микровзаимодействием, редлайны и разработка. И работает это неплохо. С прожитыми десятилетиями плечом к плечу мобильным дизайном за плечами мы разработали вспомогательные инструменты, которые помогут дизайнеру решить его самые мучительные проблемы.

Мы можем успешно спроектировать 2D-опыт и протестировать его на 2D-девайсе.

Дизайн для VR — это не совсем такой же процесс. Для многих VR-приложений требуется создание 3D-моделей и анимаций, для чего существующие сегодня инструменты подходят с лихвой. Однако другая важная часть процесса состоит из создания прототипов и тестирования полных 360-градусных сцен — именно здесь мы и сталкиваемся с проблемами:

Как мы можем увидеть наши проекты в 360°, когда все наши инструменты плоские и двумерные?

Традиционные 2D-инструменты просто не работают должным образом с VR, что создаёт проблемы для рабочего процесса. Существуют совершенно новые типы прототипирования для виртуальной реальности: от набросков на бумаге до тестирования 3D-моделей в сцене со взаимодействиями. Это не те соображения, о которых нам когда-либо приходилось беспокоиться при проектировании 2D.

Из всего этого возникает вопрос: как нам подойти к фрагментированному рабочему процессу с ограниченным количеством подходящих инструментов?

Скажем сразу, что программирование всего с нуля в Unity только ради прототипирования может быть излишним. Это тяжелая работа, занимающая много времени. Мы определённо хотим использовать более простой подход для быстрой обратной связи.

К нашему счастью, существуют отличные новые инструменты прототипирования, специфичные для виртуальной реальности под различные типы проектов — создания эскизов, работы с 2D-изображениями и 3D-моделями. Объедините их с оптимизированной стратегией рабочего процесса и вы встанете на путь истинный.

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

Например, если я хочу протестировать размещение в комнате 3D-объектов (мой вопрос), которые будут создаваться в Unity (цель) с помощью 3D-ассетов (мои ресурсы), тогда я могу захотеть использовать подход к созданию 3D-прототипов посложнее. Однако, если же я создаю статичный UI для Cardboard, мне может понадобиться просто набросать и протестировать 2D-картинки.

Давайте же рассмотрим некоторые из этих инструментов поподробнее и найдём способы адаптировать их под ваши ресурсы и типы проектов.

Допустим, у вас нет ничего, кроме идеи. Значит берём карандаш и начинаем эти идеи зарисовывать!

Скорее всего, вы быстро поймёте, что нарисовать 360° дизайн на бумаге ой как не просто. Я до сих пор начинаю любой проект с зарисовки, потому что в процессе можно записать основные идеи. Но если вы хотите углубиться в процесс быстрой визуализации, есть несколько инструментов, которые могут вам помочь.

Это отличный способ быстро визуализировать вашу сцену. Просто скачайте шаблон, распечатайте его и примерно так, как вам нравится, разместите элементы в каждой части сцены.

Используйте сетку, чтобы нарисовать перспективный вид ваших сцен. Рисовать в таком ракурсе сложновато, но немного попрактиковавшись, вы сможете перенести все свои идеи на бумагу. Кроме того, их можно быстро поместить в приложение для просмотра 360° сцен (GoProVR, например). Хороший вариант для быстрого фидбека.

Теперь, когда вы воплотили все свои идеи на бумаге (или закончилось терпение рисовать от руки), вы можете сесть за компьютер, чтобы попробовать несколько простых визуализаций.

Допустим, вы нашли несколько картинок-затычек, с которыми хотите сразу же начать работу. Вы можете поместить их в [вставьте сюда свой инструмент дизайна], а после попробуйте добавить немного перспективы с помощью инструмента искажения или разместите мелкие размытые элементы на заднем плане, чтобы имитировать глубину.

А теперь возьмите свой маленький хитрый дизайн и представьте, что вы находитесь внутри него. «Вроде бы вижу», говорите вы себе, прищурившись и наклонив голову.

Быстрый способ выразить основную идею, но не самый лучший опыт в 360°. Пора бы уже перейти к следующему шагу.

Чтобы развить идею плоского визуализированного макета, можно совместить несколько 2D-изображений, добавить текст и посмотреть на это, как на плоскую обёртку. Если вы хотите создать виртуальную реальность с фиксированным положением для Cardboard, GearVR и т.д., то это может стать хорошим началом для визуализации того, как на самом деле будет выглядеть ваш интерфейс. Для ощущения масштаба комнаты можно продумать приблизительную планировку в комнате.

Разместите свои изображения и ресурсы с руководством по шаблонам Sketch или PS (трёхмерные ассеты тоже будут работать, но с ними нельзя взаимодействовать). После чего перетащите изображение в Unity, чтобы посмотреть на своё творение в игровом режиме, в Rift или Gear VR.

Если надеть шлем и увидеть макет своими глазами, то высока вероятность получения хорошего фидбека. Отличный вариант для просмотра 2D-набросков, но не обязателен при создании слоёв в пространстве. В конце концов, мы просто имитируем 360°, что уже довольно хорошо.

Похоже на 2D-оболочку, но с фоновым изображением на 360°. Большим преимуществом является наличие настоящего скайбокса вокруг вашей сцены. Вам просто нужно найти равнопрямоугольную фотографию в 360°.

Создайте макет в Sketch и запустите его в программе просмотра GoProVR.

Добавьте своё 360-градусное равнопрямоугольное изображение в шаблон Sketch и экспортируйте его как png или jpeg. Неплохой вариант если вы хотите быстро увидеть свою идею в браузере или на мобильном устройстве.

Используйте этот плагин Sketch для создания 360°-макета и просмотра его в вебе.

Добавьте своё 360-градусное равноугольное изображение и 2D-ассеты на два разных артборда. Экспортируйте папку и просмотрите, что получилось в браузере. Результат такой же, как и у инструмента Kickpush, но здесь нам не нужен GoProVR Viewer. Ещё один этап, который следует учесть — настройка локального сервера для просмотра проекта.

Дизайн создавайте в Sketch, а Framer используйте для детальной проработки анимаций и интерактива.

Framer — это мощный инструмент для создания 2D-прототипов, который можно использовать и для 360°. Лучший выбор, если вы хотите донести до пользователя свои слои и интерактивность.

— Во Framer добавьте новый

VRComponent

и ваши шесть изображений с кубической текстурой, чтобы сформировать скайбокс.

— Используйте

layerA =

new VRLayer

для проецирования слоя (в сферической системе координат) или добавления анимации. Также можно использовать артборды из Sketch.

— Перемещайтесь по прототипу во Framer или на мобильных устройствах.

Выводы:

— Идеально подходит для проверки значений и состояний анимации. Полезно, если нужно передать эти значения разработчику.

— Не лучший вариант для создания прототипов с таким сложным интерактивом, как физика или с контроллерами от первого или третьего лица. Однако, это хороший вариант для менее сложных 360° взаимодействий с элементами UI.

— У Framer всегда есть удобные для пользователя параметры, но знайте, что он использует CoffeeScript. Он далеко не для людей с шаткими нервами, особенно если вам неудобно работать с кодом.

У вас уже есть 3D-ассеты? Или, может быть, вы нашли несколько сайтов с бесплатными и необходимыми для старта моделями. Чтобы увидеть, как они будут себя вести — их можно поместить в рабочую сцену-прототип. Да, потребуется немного больше усилий, особенно если вы захотите добавить интерактивности, но это будет максимально приближенный к реальности результат. Даже если вам неудобно работать с Unity или другими игровыми движками, вы всё равно сможете создать рабочий 3D-прототип.

Симулятор движка HTML 3D на основе браузера.

A-Frame действительно продолжает развиваться как мощный инструмент с инспектором, компонентами и многим другим. Вы можете добавлять интерактивные 2D- или 3D-объекты в статичные сцены или сцены в масштабе комнаты. A-Frame соперничает по силе с Unity, поскольку многие взаимодействия обычно контролируются сценариями C#, но вместо этого он использует HTML — язык, с которым знакомы многие дизайнеры. Это большое преимущество A-Frame. Кроме того, есть хороший вариант для работы в Codepen. Результатом является 360° веб-сцена, которую можно редактировать с другими людьми, у которых может и не быть доступа к Unity или HMD.

— Доступно для просмотра с HMD или без него.

— Стили и добавление взаимодействий VR с HTML (с некоторыми пользовательскими модами A-frame).

— Мощный браузерный интерфейс.

А вот тут уже становится по-настоящему весело. Если вы уже прошли путь 2D-прототипирования, испробовали все альтернативные 3D-методы или же просто хотите всё это пропустить и перейти в Unity со своим HMD, тогда этот метод именно для вас.

Для работы в Unity нужно будет получить некоторые скилы, если вы новичок. Этот метод лучше всего подходит для визуализации впечатлений в масштабе виртуальной комнаты, потому что вы сможете проверить движения во всех трёх плоскостях. Давайте же погрузимся в VR!

Оба этих тулкита можно бесплатно загрузить из Unity Asset Store. Импортируйте их в Unity, настройте под Vive или Rift и запустите примеры сцен на своем HMD.

— Предоставляются примеры сцен (более 20) с моделями и сценариями, которые обрабатывают множество основных взаимодействий.

— Отличный вариант для работы с контроллером от первого и третьего лица.

— Steam VR & Oculus Rift ready.

— Oculus Avatar SDK для визуализации рук.

— Если вы находитесь далеко от своего HMD (или у вас нет доступа к нему, но вы всё равно хотите это попробовать), у VRTK есть сборный модуль Simulator, который довольно хорошо работает в качестве превью в Unity. Взаимодействия с контроллерами конечно не заменит, но может стать хорошим «рабочим удалённым» вариантом.

— Хороший ресурс для изучения взаимодействий, 3D-моделей и скриптов управления объектами.

— Используйте эти тулкиты по отдельности или вместе, чтобы получить ещё больше функциональных возможностей. Подробнее о том, как это сделать:

Да, вы можете использовать эти инструменты для создания собственных проектов. Местами это может выглядеть как читерство, а может быть и не очень, но не расстраивайтесь. Переделка образцов под собственный дизайн доведёт вас до седьмого пота.

Вам нужно будет заменить существующие модели на свои 3D-ресурсы и, соответствующе, переписать скрипты. Чтобы правильно воспроизвести взаимодействия внутри объекта, обязательно учитывайте оснащение и анимацию ваших пользовательских моделей (например, нажатие на спусковой крючок или застегивание молнии).

— Хороший вариант, если вы уже знакомы с Unity.

— Если вы планируете создать опыт именно в Unity, создать его можно прямо с прототипа, а не копипастить работу из другой системы (например, Framer или A-Frame).

— Воспользуйтесь этой обширной выборкой общих сценариев взаимодействия.

Подробно описать шаги для этого варианта невозможно, потому что каждый случай индивидуален. Сценарии для контроллеров от первого или третьего лица, взаимодействия и движения объектов, физика — практически всё, что нужно знать о создании игры. Самостоятельное создание может быть хорошим способом изучить основы VR — и всегда хорошо знать основы (или, по крайней мере, немного в них разобраться).

Рисуйте, лепите и делайте наброски в VR, чтобы создавать 3D-объекты или планировать пространство. Вы даже можете поделиться своими творениями в Sketchfab — растущем сообществе 3D-художников. Я не буду вдаваться в подробности, но об этом определённо стоит упомянуть. Люди создают удивительное искусство с помощью Quill, Tilt Brush и Medium.

Это может быть Святой Грааль или что-то очень близкое к нему. Вы наверняка узнаете этот порядок:

Вместо этого вы наденете гарнитуру, оставите её включённой и начнете проектировать прямо в виртуальной реальности.

EditorVR — это новая функция, которая находится поверх традиционного интерфейса Unity. Она позволяет создавать целые макеты внутри VR. Вы можете добавлять и изменять ассеты, использовать плавающие воркспейсы, «шахматные доски» с несколькими сценами и многое другое. Она всё ещё экспериментальна и нуждается в доработке, но это отличный первый шаг к будущему дизайна в виртуальной реальности.

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

Поиск отличного подхода к созданию прототипов для виртуальной реальности, безусловно, продолжается. Я уверена, что рассказала далеко не всё, поэтому, если я упустила какие-нибудь интересные инструменты или подходы, не стесняйтесь сообщить мне.

За будущее!