Содержание
Что понадобится
- Телефон с гироскопом и на Android KitKat минимум.
- Google Cardboard.
- Unity3D — игровой движок версии 5.6 и выше.
- GoogleVR SDK для Unity.
- Видео 360 градусов.
Как создать приложение?
Если обычное видео ограничено прямоугольной рамкой, то панорамное имеет форму сферы. Поэтому для начала создадим сферический экран, на который будет спроецировано видео с обзором в 360 градусов. Игрок (или наблюдатель) будет находиться внутри этой сферы и сможет смотреть видео в любом направлении.
Шаг 1: Построить сферу ?
Создадим новый Project в Unity или новую Scene, если хотим интегрировать видеоплеер в уже существующий проект. Считайте, что Scene — это один уровень в игре, а Project — вся игра.
Поместите сферу (3D object → Sphere) радиуса 50 (Scale = 50, 50, 50) в центр Scene (Position = 0, 0, 0). Установите позицию камеры на 0, 0, 0. Камера — это глаза игрока: если поместить её не в центр, то видео будет искажённым.
Поместив камеру внутрь сферы, мы больше не видим её на сцене. Так происходит из-за того, что большинство игровых движков не отображает внутреннюю сторону 3D-объектов, так как нам почти никогда не нужно её видеть, а значит можно не тратить ресурсы на отрисовку.
Шаг 2: Перевернуть нормали сферы ?
В нашем случае нужно смотреть на сферу изнутри, поэтому мы вывернем её наоборот.
В Unity сферы на самом деле являются многогранниками, составленными из тысяч крошечных граней. Их внешние стороны видимы, а внутренние — нет. Чтобы увидеть сферу изнутри, необходимо перевернуть эти грани. В терминах трёхмерной геометрии такая трансформация называется переворачиванием нормалей.
Применим программу Shader к Material сферы. Материалы в Unity контролируют внешний вид объектов. Шейдеры — это небольшие скрипты, которые рассчитывают цвет каждого рендерированного пикселя, основываясь на информации о материале и освещении.
Создадим новый Material для сферы, к нему применим Shader, код для которого можно скопировать отсюда.
| Shader «Flipping Normals» { | |
| Properties { | |
| _MainTex («Base (RGB)», 2D) = «white» {} | |
| } | |
| SubShader { | |
| Tags { «RenderType» = «Opaque» } | |
| Cull Off | |
| CGPROGRAM | |
| #pragma surface surf Lambert vertex:vert | |
| sampler2D _MainTex; | |
| struct Input { | |
| float2 uv_MainTex; | |
| float4 color : COLOR; | |
| }; | |
| void vert(inout appdata_full v) { | |
| v.normal.xyz = v.normal * —1; | |
| } | |
| void surf (Input IN, inout SurfaceOutput o) { | |
| fixed3 result = tex2D(_MainTex, IN.uv_MainTex); | |
| o.Albedo = result.rgb; | |
| o.Alpha = 1; | |
| } | |
| ENDCG | |
| } | |
| Fallback «Diffuse» | |
| } |
Этот шейдер вывернет каждый пиксель сферы, и изнутри сфера будет выглядеть как большой белый шар.
Шаг 3: Спроектировать панорамное видео внутрь сферы ?
Импортируйте в проект видео с обзором в 360 градусов формата mp4, перенесите его на сферу. Появится компонент Video Player, и видео будет готово к воспроизведению. В окне этого компонента можно установить бесконечный повтор и отрегулировать настройки звука. Если у вас нет собственного видео такого типа, можно использовать чужие заготовки, свободно распространяемые в Интернете.
Шаг 4: Настроить поддержку Google Cardboard ?
Используя GoogleVR SDK, мы создадим стереоскопическое изображение. Совокупность эффекта рыбьего глаза, применённого к обеим частям разделённого наполовину экрана, и искажения пластиковых линз Google Cardboard создаёт иллюзию глубины картинки и погружения в виртуальную реальность.
Для того чтобы добавить GoogleVR SDK к проекту, скачайте и импортируйте плагин. Далее скорректируйте настройки Android:
- В верхнем меню выберите File → Build Settings. Добавьте сцену, если она еще не была добавлена, а из предлагаемых платформ выберите Android.
- Нажмите на Switch Platform. Переключение платформы займёт некоторое время.
- Нажмите на Player Settings. На панели инструктора появятся компоненты.
В окне Player Settings в секции Other settings:
- Отметьте галочкой Virtual Reality Supported. В выпавшем окне Virtual Reality SDKsнажмите на +, добавьте в список Cardboard.
- Выберите для вашего приложения уникальное имя и введите его в поле Bundle Identifier. Уникальные имена приложений под Android обычно имеют форму обратного доменного имени, например,
com.example.CoolApp. Подробнее про это можно почитать в официальной документации и в Википедии. - В меню Minimal API Level выберите Android 4.4 Kit Kat (API Level 19).
В панели Project Browser в папке GoogleVR/Prefabs выберите элемент GvrViewerMain и перетащите его на сцену. Задайте ему такую же позицию, как у центра сферы: 0, 0, 0.
Префаб GvrViewerMain контролирует все настройки режима виртуальной реальности, например, адаптацию экрана к линзам Cardboard. Он также получает данные с гироскопа телефона для отслеживания поворотов и наклонов головы. При повороте головы Camera в видеоплеере тоже повернётся.
Шаг 5: Запустить приложение на Android ?
Это можно сделать двумя разными способами:
- Выберите File → Build Settings. С помощью USB-кабеля подключите телефон к компьютеру, включите отладку по USB и нажмите Build & Run. Приложение загрузится сразу на телефон.
- Или нажмите Build only. Приложение не загрузится на телефон, но зато сгенерируется в APK-файл, который можно отправить другим людям или выложить в магазин мобильных приложений.
В течение процесса сборки вас могут попросить выбрать корневую папку Android SDK. В этом случае скачайте Android SDK и укажите расположение его папки.
Осталось только запустить приложение и вставить телефон в Cardboard. Теперь вы можете испытать погружение в виртуальную реальность с обзором в 360 градусов у себя дома.
Что дальше
Поздравляем, вы создали видео-приложение с обзором в 360 градусов! Теперь вы на шаг ближе к разработке видео-приложения виртуальной реальности. Да, между ними есть разница. В первом случае наблюдатель может только смотреть в любом направлении. Во втором случае добавляется интерактивность, то есть контроль над объектами.
Приложение, которое вы только что создали, может послужить отправной точкой в построении более разнообразной виртуальной реальности. Например, в Unity можно наложить на верхний слой видео 3D-объекты и эффекты частиц.
Вы также можете попробовать поместить внутрь панорамного видеоплеера трёхмерное изображение некоторой окружающей обстановки и использовать видеоплеер как skybox. Для навигации пользователя по созданному окружению можно использовать этот скрипт.
