Как поделиться 360 панорамными фотографиями с WebVR и A-Frame

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

Благодаря постоянно усиливающимся возможностям WebGL, виртуальная реальность также проникает в браузеры в форме WebVR, и вместе с ней появляются новые способы делиться фотографиями еще более захватывающими способами.

С фото в правильном формате и устройством виртуальной реальности, таким как Google Cardboard, HTC Vive и т. П., Можно заставить человека почувствовать, что он стоит именно в том месте, где была камера в момент съемки, с умение смотреть вокруг на окружающую среду, вглядываясь в глубину моделируемого трехмерного пространства.

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

Создание вашей собственной панорамы 360

В этом руководстве мы будем настраивать 360-градусные панорамы на основе WebVR тремя различными способами, используя инструменты, которые направлены на то, чтобы сделать WebVR доступным и простым в использовании:

• Стартовый комплект WebVR
• Рамка
• GuriVR, редактор A-кадров
  

Чтобы увидеть, к чему мы стремимся, ознакомьтесь с демонстрационными примерами каждого из вышеперечисленных инструментов, показывая тип изображения 360, которое мы будем делать:

• WebVR демо
• A-Frame демо
• GuriVR демо

Способы просмотра 360 изображений

Существует два способа взаимодействия и просмотра панорамы на 360 градусов.

Стереоскопический VR

Когда человек просматривает 360-градусную фотографию WebVR через соответствующее устройство, готовое к виртуальной реальности, такое как, например, Google Cardboard или HTC Vive, изображение будет разделено на два изображения и обработано таким образом, чтобы гарнитура могла использовать их создать иллюзию глубины.

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

Нажмите и перетащите (Fallback)

Когда человек просматривает через устройство, которое не поддерживает VR, 360-градусное изображение возвращается к отображению как отдельное изображение, которое можно перемещать, нажимая и перетаскивая.

Поддержка браузера

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

Настольный браузер

Пока браузер поддерживает WebGL, зритель будет видеть запасной вариант «щелкни и перетащи» для фотографии 360. WebGL теперь полностью функционален во всех основных браузерах.

Чтобы проверить, поддерживает ли используемый вами браузер WebGL, посетите get.webgl.org . Если вы видите вращающийся куб, WebGL запущен и работает.

VR на телефонной основе

Некоторые телефоны поддерживают WebVR в сочетании с гарнитурой, такой как Google Cardboard или Daydream . Учитывая недавний толчок Google к WebVR, неудивительно, что его версии Chrome для iOS и Android поддерживают WebVR «из коробки».

С другой стороны, если у вас есть гарнитура Samsung Gear VR , вам нужно использовать собственный браузер Samsung .

Для Oculus Rift или HTC Vive / SteamVR вы можете использовать либо экспериментальную сборку Chromium, либо Firefox Nightly . Сборка Chromium WebVR доступна только для Windows, а Firefox Nightly также доступна для macOS и Linux.

В настоящее время Oculus Rift поддерживает только Windows, о планах межплатформенной поддержки не сообщается, поэтому подходит любой браузер. Тем не менее, кросс-платформенная поддержка HTC Vice / SteamVR, как сообщается, появится очень скоро , поэтому, если у вас есть это устройство и вы думаете, что предпочитаете создавать свои панорамы в MacOS или Linux в то время, вы можете выбрать Firefox Nightly в качестве основного сейчас тестирую браузер.

Для получения подробных инструкций по настройке любого из этих браузеров для WebVR посетите Mozilla VR .

Начиная

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

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

У нас есть несколько замечательных статей, посвященных некоторым методам, которые вы можете использовать:

• Создайте Сферу Фотографии С Вашей Камерой DSLR
• Gettin ‘Round: как сделать сферическое изображение с помощью Google Camera

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

Создайте каталог для размещения панорамы, которые вы будете создавать, загрузите в него вышеуказанный файл, а затем переименуйте изображение в «fire.jpg».

Если вы планируете просматривать панораму в полном WebVR, а не просто как изображение, которое можно щелкнуть и перетащить в браузере на рабочем столе, вам, вероятно, потребуется загрузить версию «Оригинальный размер» при 10240 x 5120 для максимальной визуальной точности. Однако имейте в виду, что пользователи могут видеть пустой белый экран во время загрузки этого большого изображения, в зависимости от их интернет-соединения. Если это потенциально может быть проблемой, выберите один из меньших размеров.

NB: позже, если вы увидите черную дыру в нижней части панорамы, которую вы создаете с этим изображением, это означает, что файл не завершен, и вам нужно будет загрузить его снова.

Удаленный просмотр

Если вы хотите проверить свои панорамы на удаленном / дополнительном устройстве, например на телефоне с поддержкой картона, вам также понадобится способ просмотра файлов через локальную сеть. Вы можете сделать это так, как вам нравится, но вы можете использовать два возможных варианта:

• Prepros
• Browsersync

Основной HTML

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

В каталоге вашего проекта создайте три файла HTML:

• webvrstarterkit.html
• aframe.html
• gurivr.html

Затем вставьте стартовый код в каждый файл, при необходимости изменив содержимое <title>...</title> .

WebVR Starter Kit 360 Image

Если бы вы создавали панораму WebVR с нуля, это было бы довольно сложно, требуя довольно обширного кодирования. Тем не менее, с отличными средами, такими как WebVR Starter Kit, процесс сводится к двум этапам.

Все возможности виртуальной реальности, которые вы можете создать с помощью WebVR Starter Kit, основаны на одном файле JavaScript. Итак, для начала вам просто нужно загрузить этот JS-файл в раздел <head>...</head> вашего файла «webvrstarterkit.html», вставив следующий фрагмент:

Если вы не хотите загружать этот файл JS из внешнего источника, вы можете загрузить проект WebVR из его репозитория GitHub . Вы найдете файл «vr.js» внутри каталога «build».

С загруженным JavaScript WebVR страница готова к добавлению в нее VR-элементов. Чтобы создать 360-градусную панораму, вставьте следующий код в раздел <body>...</body> :

Вот и все! Ваша 360-градусная панорама готова к работе.

Обратите внимание, что значение в скобках — это путь к нашему равностороннему изображению. Это также можно настроить для загрузки внешнего изображения, вставив вместо него URL-адрес.

При предварительном просмотре файла «webvrstarterkit.html» он должен выглядеть следующим образом: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html .

A-Frame 360 ​​Image

A-Frame — это другая инфраструктура WebVR, но способы создания панорамы 360 очень похожи на те, что вы выполнили выше. Как и в случае с WebVR Starter Kit, A-Frame работает от одного файла JavaScript. Загрузите этот файл в раздел <head>...</head> вашего файла aframe.html с помощью этого кода:

Если вы не хотите загружать файл JS из внешнего источника, вы можете загрузить репозиторий A-Frame с GitHub . Из папки «dist» вы должны использовать минимизированную версию скрипта для текущей версии проекта, например, «aframe-v0.4.0.min.js».

Вместо использования тега script в теле страницы, A-Frame использует свои собственные элементы HTML. Первый добавляемый элемент — это всегда <a-scene> , чтобы создать контекст для элементов VR, которые нужно вставить.

Элемент <a-sky> используется для имитации неба в определенных сценариях, но он делает это, окружая зрителя сферическим изображением, что делает его идеальным для 360 панорам.

Затем, чтобы добавить свое 360-градусное изображение, вставьте следующий код в раздел <body>...</body> :

Ваши результаты должны выглядеть следующим образом: https://tutsplus.github.io/VR_Panoramas/aframe.html .

GuriVR 360 Image

Под капотом GuriVR фактически находится библиотека A-Frame. То, что он пытается сделать, — это дать интуитивно понятный и простой способ настройки виртуальной реальности через интерфейс редактора.

Чтобы использовать GuriVR, зайдите в редактор GuriVR . В интерфейсе редактирования вы можете просто ввести слово Panorama, а затем URL к сферическому изображению, и GuriVR позаботится обо всем остальном за вас.

Как только вы это сделаете, нажмите кнопку « Сохранить» в нижней части экрана, а затем нажмите кнопку « Поделиться ссылкой», и вам будет предоставлена ​​ссылка, которую вы можете дать другим, чтобы показать вашу панораму.

Кроме того, вы можете встроить панораму в веб-страницу с помощью элемента iframe . Обновите файл gurivr.html следующим кодом, добавив собственный URL-адрес GuriVR в атрибут src iframe:

После того, как вы сделали вышеупомянутое, вы должны получить 360-панораму, подобную этой: https://tutsplus.github.io/VR_Panoramas/gurivr.html .

Завершение

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

• Начальный комплект WebVR: загрузите файл JS фреймворка, добавьте тег script , а затем внутри него используйте VR.panorama() для создания изображения 360.
• A-Frame: загрузите JS-файл фреймворка, добавьте элемент <a-scene> , а затем внутри него используйте <a-sky> для создания изображения 360.
• GuriVR: зайдите в веб-редактор и добавьте слово panorama а затем URL-адрес вашей фотографии, чтобы создать изображение 360. При желании вставьте указанный URL-адрес в веб-страницу с помощью iframe .

Теперь, когда вы увидели, как быстро вы можете создать опыт WebVR из фото-сферы, я надеюсь, что вы вдохновились, чтобы выйти и захватить мир в трех измерениях!