В этом уроке вы узнаете, как  создать приложение для просмотра так называемых фотосфер, или круговых панорамных фото и видео в формате 360 градусов, с помощью очков Cardboard. Используем официальный туториал от Google, ссылка в конце статьи.
Для разработки нам понадобится:
  • Смартфон  Android 5.0 (Lollipop) или выше, подключенный к компьютеру с помощью USB кабеля. Например, Nexus 5.
  • Настольный компьютер Android Studio версии 2.0 или выше.
  • Android SDK включая следующие компоненты:
  • Android 6.0 (API 23)
  • Google VR SDK для Android — это набор инструментов для разработки приложений с виртуальной реальностью.
  • Приложение Cardboard Camera на устройстве, с помощью которого можно отснять и создать круговую панораму — фотосферу.
  • Также понадобится приложение Cardboard для настройки очков виртуальной реальности.
  •  И наконец, сами очки виртуальной реальности Cardboard, или как их называют еще, Oculus Rift.
Подойдут недорогие очки, изготовленные из картона, которые можно заказать, например, здесь: http://www.3dmania.xyz/
New-Cardboard---Top-copy
Такие очки можно использовать для просмотра 3D фильмов, игр с виртуальной реальностью, для просмотра видео в формате 360 градусов на Youtube, путешествий по красивым местам планеты не выходя из дома, и даже для просмотра трехмерного видео для взрослых)

Клонируем проект

Для быстрого старта будем использовать заготовку приложения с двумя вкладками — фрагментами.
Клонируем  гугловский проект с github (ссылка под видео). Копируем ссылку на проект:
Чтобы иметь возможность работать с Git, нужно установить его на компьютер. Как это сделать, смотрите видеоуроки по работе с Git: https://youtu.be/mcOq0FbkfWI
Запускаем Android Studio и в окне приветствия выбираем «Check out project from Version Control», в выпадающем списке жмем GitHub. Вставляем ссылку, выбираем папку, куда будет сохраняться проект и жмем Clone.
Далее, если при открытии проекта возникает ошибка «Не найден SDK», попробуйте открыть проект из папки, куда он был клонирован.
После клонирования нужно выполнить сборку проекта через пункт меню Build > Make Project.  После этой первой сборки все изменения проекта будут автоматически обнаружены Android Studio.
Теперь нам понадобится  панорамный снимок со стереоскопическим эффектом. Чтобы его создать, используем приложение Cardboard Camera на реальном устройстве.
Нажимаем на кнопку камеры и следуем инструкциям на экране, чтобы сделать снимок. Приложению понадобится некоторое время, чтобы обработать изображение и сохранить его.
Cardboard Camera довольно привередливо к устройствам. Если вы не сможете сделать панорамный снимок, используйте готовое изображение в папке проекта по пути  app/assets/sample_converted.jpg
Если же у вас получилось сделать снимок с помощью смартфона, скопируйте его на компьютер. Самый простой способ сделать-  подключить телефон к компьютеру в качестве мультимедийного устройства. Затем скопируйте изображения с Cardboard Camera , который находится в папке DCIM / CardboardCamera.
Он будет иметь название что — то вродеIMG_20160512_105228.vr.jpg . и выглядеть примерно так.
IMG_20160719_144033.vr
Теперь у нас есть изображение, но, к сожалению, оно не совсем в том формате, что нам нужно. VR View имеет специфические требования к конфигурации изображения:
  • изображения должны быть в формате  PNG, JPEG или GIF. Рекомендуется использовать формат JPEG для улучшения сжатия.
  • Для обеспечения максимальной совместимости и производительности, размеры изображения должны быть степенью двойки (например, 2048 или 4096).
  • Моно-изображения должны иметь соотношение сторон 2:1 (например, 4096 х 2048).
  • Стереоизображения должны иметь соотношение сторон 1:1 (например, 4096 х 4096).
  • Изображения должны быть еквидистантной, или  равнопромежуточной проекции. В такой проекции, например, отображается географическая карта мира.
  • Если у вас есть изображения в других форматах , таких как cubemap , они должны быть преобразованы в еквидистантную проекцию для того , чтобы  отображаться в режиме VR.
Мое изображение имеет размер  10430×1678. Используем гугловский онлайн-конвертер, чтобы преобразовать изображение в нужный нам формат: https://storage.googleapis.com/cardboard-camera-converter/index.html
Выберем изображение  или перетащим его на страницу конвертера. Затем загрузим преобразованный файл и скопируем его в   app/src/main/assets/converted.jpg

Добавим Google VR SDK в проект

Загрузим  Google VR SDK с GitHub. Для этого откроем окно терминала в Android Studio, и клонируем SDK:
$ git clone https://github.com/googlevr/gvr-android-sdk.git
Откроем settings.gradle в Android Studio допишем набор библиотек VR SDK для Android с директивой include:
Сохраним файл и нажмем «Синхронизировать сейчас» . Теперь мы можем ссылаться на компоненты библиотеки в нашем проекте.
Примечание : Если вы получаете уведомление «обнаружен незарегистрированный VCS корень», можете нажать кнопку «Пропустить».

Добавим изображение в окне приветствия фрагмента

Теперь, когда у нас есть панорамное (и стерео) изображение, давайте добавим его в наше приложение.
Во-первых,  добавим зависимости в файл сборки. В менеджере проекта развернем «Gradle Scripts» и Откроем build.gradle  (Module: app).
Добавим зависимости библиотеки VR SDK
В разделе зависимостей, добавим VR SDK для Android компонентов библиотеки:
    • compile project(‘:gvr-android-sdk/libraries:common’)
    • compile project(‘:gvr-android-sdk/libraries:commonwidget’)
    • compile project(‘:gvr-android-sdk/libraries:panowidget’)

Это будет выглядеть следующим образом:

Затем нажмем кнопку «Sync Now», чтобы обновить проект.

Добавим VrPanoramaView в макет
Теперь, когда мы добавили зависимости,   отредактируем макет, заменив статическое изображение панорамным.
Открыть app/res/layout/welcome_fragment.xml
 Убедитесь , что вы выбрали вид «текст» в нижней части панели редактора макетов.
Найдем ImageView элемент и заменим его на VrPanoramaView

Добавим код для управления VrPanoramaView

Откроем файл  app/java/com.google.devrel.vrviewapp/WelcomeFragment.java  в Android Studio.
В верхней части класса, добавим переменную VrPanoramaView :
Убедитесь, что класс импортируется, добавив оператор импорта класса:
Для этого нажмем Alt-Enter.
Тогда, в методе  onCreateView (), инициализируем panoWidgetView. Замените содержимое onCreateView () :
Кроме того, добавим методы жизненного цикла OnPause (), onResume (), и OnDestroy () , чтобы передать им VrPanoramaView,  добавим их чуть ниже метода onCreateView ().

Теперь добавим код для загрузки изображения.
Загрузим изображение асинхронно
Так как изображение велико , нельзя  загружать его в главном потоке пользовательского интерфейса при запуске приложения, поскольку интерфейс будет заметно тормозить. Нужно загрузить картинку в асинхронном режиме. Для получения более подробной информации по теме смотрите наш урок по ссылке. https://goo.gl/0XcWWg

Создадим новый класс

Выберем папку app / Java в менеджере проекта, а затем правой кнопкой мыши и Выберем New> Java Class . Назовите класс ImageLoaderTask .

Примечание : Если вам будет предложено добавить файл в Git, вы можете выбрать «нет».
Необходимо унаследоваться от класса AsyncTask, чтобы выполнить загрузку изображений в фоновом потоке. Параметрами для AsyncTask являются:
  • AssetManager используемый для загрузки изображения.
  • Пустой параметр для метода прогресса (который мы не используем).
  • Изображение,  возвращаемое обратно в основной поток.

Убедитесь в том, что такие классы импортируются:

AsyncTask является абстрактным классом, так что нам нужно реализовать абстрактные методы.
Совет : Для того, чтобы быстро устранить эту ошибку в Android Studio, на строке с ошибкой нажмем Ctrl+Enter и Выберем Выполнить методы.
добавим реализацию метода doInBackground в нижней части класса, чтобы устранить ошибку.
Добавим переменные и конструктор
Когда мы загружаем изображение, нам нужно передать, какое изображение загружать и где его отображать. Мы будем передавать эту информацию через конструктор. Кроме того, добавим элемент TAG по которому мы сможем регистрировать ошибки. Чуть ниже открывающей скобки этого класса объявляем
Мы используем WeakReference для VrPanoramaView , так как  view может быть уничтожено при загрузке изображения. Общей причиной этого является поворот телефона в другую ориентацию. С использованием слабой ссылки, объект может быть уничтожен сборщиком мусора, не дожидаясь этой асинхронной задачи.
Убедитесь в том, что импортировали класс для VrPanoramaView. Если вы еще не добавили их, добавим операторы импорта в настоящее время:
Чтобы избежать повторной загрузки изображения, когда устройство вращается, мы будем кэшировать последнее загруженное изображение. Добавим эти переменные класса:
Так как эти переменные класса являются окончательными, они должны быть инициализированы в конструкторе. Добавим требуемый конструктор ниже переменных класса:

Загрузим изображение в фоновом режиме

Для этого примера, мы добавили изображение в папку  assets проекта, поэтому мы будем использовать AssetManager , чтобы получить картинку. Затем передаем его в BitmapFactory , чтобы загрузить изображение и вернуть его обратно в основной поток. Если есть проблема, мы будем регистрировать ее и возвращать null вместо картинки. Мы проверяем последнее загруженное изображение перед открытием потока в целях экономии памяти.
Пишем в методе doInBackground (AssetManager ... PARAMS)  следующий код:

 

Затем добавим операторы импорта в верхней части

Отображение изображения

Чуть ниже doInBackground () , добавим такой код:

 

После того, как фоновый поток отработает, AsyncTask вызывает метод onPostExecute(Bitmap bitmap) в главном потоке. Здесь мы будем передавать изображение в VrPanoramaView.
Запуск фоновой загрузки
OK , мы создали AsyncTask для загрузки и отображения изображения, осталось только вызвать его.
Вернитесь к WelcomeFragment.java. Нам нужна новая переменная класса, объявим ее:

Затем в нижней части класса добавим новый метод loadPanoImage (). Это позволит создать новую задачу загрузчика и запустить его.

И, наконец, нам нужно привязать загрузчик к событиям жизненного цикла , чтобы начать фактическую загрузку. Во фрагменте мы добавим его в метод onActivityCreated () переопределим его в конце класса WelcomeFragment:

Теперь можно испытать VR изображение!
Убедитесь, что ваше устройство подключено к компьютеру, и выберите пункт Run.
Когда приложение запустится, вставьте смартфон в очки виртуальной реальности.  Теперь оденьте очки и покрутите головой. Изображение будет  менять вид таким образом, как будто вы вы находитесь внутри панорамы и оглядываетесь вокруг.
При нажатии на иконку «весь экран» в правом нижнем углу изображения, изображение будет отображаться с использованием всего экрана.
Если щелкнуть значок Cardboard , он начнет вид в режиме Cardboard для стерео режима  VR.
Давайте попробуем проделать то же самое с видео!

Добавим видео фрагмент с гориллами

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

Используем общий подход, просто заменим ImageView на VideoWidget . Также добавим элемент управления SeekBar, чтобы мы могли управлять видео.
Добавим зависимости библиотеки VR SDK

Откроем снова файл сценария сборки build.gradle для модуля приложения. Затем в разделе зависимостей, добавим компонент VideoWidget:

  • anroid-sdk/libraries:videowidget

Это будет выглядеть следующим образом:

 

Нажмем кнопку «Sync Now», чтобы обновить проект.

добавим видео в макете

Откроем  res/layout/gorilla_fragment.xml  и заменим ImageView   следующими элементами:
Добавим переменные класса
Откроем теперь  app/java/com.google.devrel.vrviewapp/GorillaFragment.java , и в верхней части добавим эти переменные класса:

 

 

Не забудьте добавим операторы импорта, если их еще нет:

Инициализируем переменные класса

Теперь, когда мы объявили нужные переменные, мы должны инициализировать и найти view компоненты по ID. Допишем в метод  onCreateView () такой код:

Инициализируем SeekBar Слушатель

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

Добавим слушателя onCreateView () перед оператором return.

Метод updateStatusText () еще не определен. Он будет добавлен позже.

Инициализируем VrVideoView Слушатель

VrVideoView должен иметь слушателя, чтобы реагировать на изменения состояния.
Добавим слушателя в onCreateView ()  перед оператором return . Также нужно переопределить методы слушателя.
  • onLoadSuccess — вызывается при успешной загрузке видео. Здесь мы устанавливаем длительность видео для компонента seekBar и активируем его. Также здесь обновляем текст состояния.
  • onLoadError — вызывается при ошибке загрузки видео. Здесь создаем тост с сообщением об ошибке.
  • OnClick — вызывается при касании или клике по video view. Будем приостанавливать видео и возобновлять воспроизведение поочередно. Также здесь обновляем текст состояния.
  • onNewFrame — называется при воспроизведении каждого видеокадра. Здесь обновляем пользовательский интерфейс — текст состояния и текущее положение ползунка.
  • onCompletion — вызывается по окончании видео. Воспроизводим видео в цикле. Этот метод также может использоваться для перемещения к следующему видео в списке воспроизведения.

Проследите за добавлением таких операторов импорта в верхней части:
Этот код почти готов, осталось добавить метод обновления строки состояния видеоплеера updateStatusText () . Давайте сделаем это в конце класса.

И добавим еще один оператор импорта:

Обработка сохранения состояния видео

При вращении телефона, активити будет пересоздаваться. После начальной загрузки видео необходимо установить значение ползунка SeekBar, поэтому нужно сохранять это значение для использования в случае пересоздания активити. Также нужно сохранить текущее состояние видео, чтобы при повороте телефона не начиналось воспроизведение видео, если оно было установлено на паузу.
Для этого перегрузим метод: onSaveInstanceState () , добавим это в конце класса:

Будем считывать сохраненное состояние в методе onCreateView (). Добавим этот код сразу после инициализации переменных класса,
(где Eсть комментарий » // Добавление восстановления состояния кода здесь. «)

Обработка события жизненного цикла

Нам нужно обработать события жизненного цикла OnPause , onResult и OnDestroy в VrVideoView. Переопределим эти методы в конце класса, перед последней фигурной скобкой:

Запускаем видео при открытии фрагмента

Так как мы используем фрагменты, есть только один активити для обоих фрагментов WelcomeFragment и GorillaFragment. Мы не хотим, чтобы началась загрузка видео , пока мы не переключимся на GorillaFragment. Чтобы реализовать это, перегрузим метод setUserVisibleHint () в GorillaFragment. Этот метод будет вызываться при изменении видимости фрагмента.
Когда фрагмент виден, проверим, загружено ли видео, и если нет, то стартуем загрузку. В противном случае, просто приостановим воспроизведение видео, так как его больше не видно.
Добавим этот метод к концу класса:
Сохраните и запустите приложение. Для просмотра видео выберите вторую вкладку.
При повороте устройства вы можете смотреть панорамное видео по кругу на 360 градусов.
Теперь вы знаете, как создавать приложения с виртуальной реальностью в android.
Сайт разработчиков Google VR: https://developer.google.com/vr
Источник https://goo.gl/2fDCwR
Исходный код полностью: https://yadi.sk/d/H2BfOwSCtrmEA
Как создать андроид-приложение с виртуальной реальностью — работаем с VR SDK Android обновлено: Август 2, 2016 автором: admin

  1. Спасибо за статью, но исходный код полностью: https://yadi.sk/d/H2BfOwSCtrmEA не содержит всех файлов. Хотя-бы даже «settings.gradle» и при попытке сбилдить проект выдает ошибку Error:(1, 0) Plugin with id ‘com.android.application’ not found.

    Помогите в исправлении пожалуйста

  2. загуглите ошибку — есть масса решений

  3. Добрый день. Пробую запустить приложения с изображением на 360 гр. Но при запуске вылазит ошибка
    FATAL EXCEPTION: main
    ругается на строку
    panoWidgetView.resumeRendering();
    в WelcomeFragment.java. Кто-нибудь сталкивался ?
    p.s. примеры кода брал с этой страницы, а так же пробовал с оф. страницы от гугла.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*
Website