Как мы перенесли рисунок из TiltBrush в дополненную реальность

Katya Yanzen
PHYGITALISM
Published in
4 min readNov 15, 2021

В нашем любимом проекте с ARTLIFE мы экспериментировали с XR-инструментом TiltBrush. Хочу подробнее рассказать как подружить VR и AR, рассмотрим все тонкости переноса рисунков из Oculus Quest2 в Unity на URP!

Что у нас было:

  • Oculus Quest 2
  • Проект Unity URP
  • Рисунок в TiltBrush

Основные проблемы

Первая сложность заключалась в рендер пайплайне. Для стандартного пайплайна существует известный Tilt Brush Unity SDK. Он позволяет открыть экспортированную из приложения модель fbx в Unity без потери материалов и шейдеров.

Для нашего URP проекта это не подходило.

Вторая сложность — шлем Oculus Quest, из него нельзя экспортировать .fbx, только .gltf. Несмотря на то, что последнее обновление SDK позволяет открывать в Unity .gltf, по какой-то причине у нас это не заработало.

Как мы поступили

Мы открыли TiltBrush через Steam с помощью Oculus AirLink и оттуда экспортировали fbx на компьютер. Вам понадобится ПО Oculus Link

Алгоритм такой:

  1. Включить AirLink в настройках ПО и в шлеме
  2. Запустить Steam
  3. Открыть там TiltBrush
  4. Экспортировать как обычно. Папка с моделью приземлится в документах

Заодно я прихватила папки с текстурами для кистей, чтобы потом их можно было использовать для импорта не только в Unity, но и в Blender, например. Они лежат вот тут.

Теперь идем в Unity

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

Да, все розовое, материалы слетели — не страшно. Наша задача сейчас перевести шейдер со стандартного на URP, поэтому создаем свой. Мне удобнее работать с шейдер графом, но вы можете переписать кодом.

Информация о цвете, которым мы рисовали, хранится в VertexColor. Из папки с кистями выше ищем подходящую, добавляем текстуру bump и main в проект, опрокидываем их в материале.

Шейдер для кисти Oil
Шейдер и материал для кисти WetBrush

Еще пара моментов

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

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

В рисунке художница использовала кисть-туман. Конечно, для нас было проще воссоздать туман обычными партиклами в Unity, поэтому мы попросили сгруппировать его отдельно и потом просто заменили его с использованием оригинальной текстуры.

Что касается оптимизации, рисунок создавался под AR, поэтому все лишние детали, наслоения и задники удалялись сразу. Гипотеза “что запустилось и хорошо работало в мобильном шлеме, с тем и в AR проблем быть не должно” подтвердилась.

Скрин из TiltBrush

А еще мы хотели добавить в картину художницу, поэтому записали ее на фоне зеленки и стилизовали в Phygital.Plus. Это наш внутренний продукт, где можно легко работать с нейронными сетями, создавать и редактировать контент. Если вам интересно, добавляйтесь в WaitList. Продукт получается легендарный 🔥.

Записанное видео мы залили в редактор, удалили фон и прогнали через StyleGAN. Получилось видео и маска. Все отправилось в Unity.

Слева референс, справа стилизованная художница

И в продакшн

Теперь добавляем анимации, появления, партиклы, туман, интерактив и все то, что душе угодно.

Билдим приложение и наслаждаемся дополненной реальностью.

Эту и еще 39 картин вы можете посмотреть в приложении Artlife

Ios / Android
Маркеры лежат вот тут. Пишите нам, на какие картины хотите обзор.

Если коротко:

  • Для стандартного пайпpлайна при импорте из TiltBrush используйте Toolkit SDK. Если вам нужен просто рисунок вне шлема, этого более чем достаточно;
  • Если вы работаете на UPR или LRP, придется переписывать шейдера. Вы можете использовать ShaderGraph;
  • Экспортировать .fbx можно с помощью Oculus Link/AirLink;
  • Возможно, вам повезет и вы сможете импортировать .gltf в Unity через обновленный Toolkit SDK;
  • Закладывайте в процесс рисования то, куда дальше пойдет рисунок: группируйте объекты, отделяйте то, что планируете анимировать, удаляйте лишние детали, если требуется оптимизация;
  • Если хотите стать первыми, кто получит доступ к нашему инструменту Phygital.Plus для работы с нейронками без кода, добавляйтесь в waitlist.

Отдельное спасибо художнице @margaritainwonderland за такой крутой рисунок в VR.

Физическую картину написал @aboohamid___asadi, для которого уже второй год мы рисуем в VR.

--

--

Katya Yanzen
PHYGITALISM

Product Designer at music streaming service with experience in AR/VR. Former Founding Designer of an AI Platform Phygital+