программа дополненной реальности для компьютера

Топ-25 приложений дополненной реальности в 2020 году

Больше статей и новостей о дополненной реальности ищите на нашем канале.

Такое футуристичное понятие как «дополненная реальность» (AR) на самом деле существует уже много лет. AR — это наложение компьютерных изображений поверх реальных, которое создает комплексную картинку и тем самым дополняет реальный мир.

Приложения дополненной реальности могут быть самыми разными: от интерактивных наложений на карты и виртуальных демонстрационных залов до массивных многопользовательских шутеров. В то время как ARCore — это будущее Android (после закрытия Project Tango от Google), приложения ARKit завоевывают операционную систему iOS.

Следуя растущей популярности дополненной реальности, мы составили список лучших AR-приложений, доступных на Android и iOS.

Лучшие мобильные AR-приложения

1. Froggipedia

Быть может это приложение не для самых брезгливых, но Froggipedia определенно послужит отличным учебным пособием тем, кто не одобряет препарирование живых лягушек во имя науки. Froggipedia позволяет исследовать интересный и уникальный жизненный цикл земноводного, начиная от одноклеточного яйца и заканчивая превращением в автономный организм. Приложение также позволяет препарировать лягушку (с помощью Apple Pencil или пальцем) или сделать её прозрачной и внимательно рассмотреть внутреннее строение.

Приложение доступно на iOS.

2. BBC Civilisations AR

Дополненная реальность находит отличное применение в сфере образования, а такие приложения как BBC Civilisations AR прокладывают путь к AR-ориентированному будущему. BBC Civilisations AR даёт пользователям возможность полюбоваться различными историческими артефактами, рассмотреть их с разных сторон и изменить масштаб.

При первом запуске приложения доступно удобное руководство, которое ознакомит пользователя с египетской мумией, её историей и даже позволяет заглянуть внутрь с помощью функции рентгеновских лучей. BBC Civilisations AR содержит более 30 исторических реликвий, которые можно осмотреть, исследовать и запечатлеть на фото. Приложение отлично подойдет тем, кто увлекается историей или хочет заглянуть в музеи будущего.

Приложение доступно на iOS и Android.

3. SketchAR

В каждом из нас есть творческая сторона, но не у каждого есть время часами практиковать рисование от руки. Почему бы немного не сжульничать? Приложение SketchAR это по сути AR-трейсинг. Стоит нарисовать пару кругов на листе бумаги, выбрать эскиз — как приложение спроектирует рисунок на бумагу, позволяя обвести его. Технически это нельзя назвать AR-трейсингом, так как не получится точно обводить линии, однако для практики определенных техник рисования приложение подойдет отлично. SketchAR может показаться немного неудобным — держать телефон в одной руке и рисовать другой не является самой традиционной практикой, однако попробовать стоит. SketchAR работает с небольшими листами бумаги на многих телефонах, поддерживающих ARCore.

Приложение доступно на iOS, Android и Microsoft HoloLens.

4. Mondly

Подойдет тем, кто хочет выучить новый язык, но не может выделить на это время. Приложение предлагает 33 языка для изучения и благодаря ежедневным упражнениям пользователи смогут быстро освоить желаемый навык. Существует VR-версия Mondly для Gear VR со встроенной в приложение AR-технологией. В AR-режиме пользователя попросят найти плоскую поверхность, где будет проецирован AR-преподаватель, который проведет урок, предлагая примеры слов для запоминания. Хоть это и не самое привычное приложение на каждый день, оно несомненно внесёт новизну в процесс изучения языков.

Приложение доступно на iOS и Android.

5. Pokémon Go

Этот список не будет полноценным без упоминания Pokémon Go — игры, которая мгновенно привлекла всеобщее внимание, побудив людей выйти на улицы и ловить покемонов. Игра использует GPS для отметки местоположения и передвижения игрового аватара, в то время как камера используется для отображения покемона в реальном мире. При первом запуске предлагается не так много инструкций или информации об игровой механике (например, о цветных кольцах вокруг покемонов), но благодаря информации в Интернете, понять, что делать, не так уж и сложно.

Игроки Ingress, другого творения Niantic, могут заметить много общего между двумя играми, вплоть до локаций и тренажерных залов покемонов. На сегодняшний день игра получила много обновлений, включая обмен, рейды и битвы в стиле «игрок против игрока». И, конечно же, сотни новых покемонов были добавлены в игру. Компания Niantic намерена продолжать обновления игры и добавлять новые функции, так что можно предположить, что Pokémon Go ещё долго не будет терять популярность.

Приложение доступно на iOS и Android.

6. Ink Hunter

Приложение Ink Hunter пригодится тем, кто планирует сделать татуировку и хочет определиться с её местом расположения. Приложение позволяет опробовать готовые татуировки, а также «примерить» собственные разработки, которые можно разместить на любой части тела. Татуировки, сделанные с помощью Ink Hunter выглядят почти так же как настоящие, а благодаря возможности редактировать эскизы и менять цвет татуировок прямо в приложении, можно получить лучшее представление о том, как будет выглядеть эскиз, прежде чем превратить его в перманентный рисунок.

Приложение доступно на iOS и Android.

7. Star Walk 2 ($2.99)

Наблюдать за звездным небом — потрясающее удовольствие. Но зачастую бывает трудно понять, какое именно созвездие расположилось перед глазами. К счастью, чтобы развеять сомнения, достаточно направить приложение дополненной реальности в небо. Star Walk 2 позволяет узнать, какая звезда, планета или созвездие находится в поле обозрения.

Приложение имеет и другие функции, к примеру, астрономический календарь, расписание восхода и рассвета, и т.д. Иными словами, Star Walk 2 это очень интересное приложение для детей и взрослых, которое адаптируется ко всем уровням астрономических знаний.

Приложение доступно на iOS и Android.

8. Google Переводчик

Google Переводчик не является строго AR-приложением, но одна из его AR-функций делает его невероятно удобным для перевода текста. Речь идет о режиме камеры. Просто сделав снимок текста на иностранном языке, пользователь может увидеть его перевод в реальном времени.

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

Приложение доступно на iOS и Android.

9. Amikasa

Amikasa поможет оформить комнату и определиться с желаемой планировкой еще до покупки мебели. Используя камеру на iPhone или iPad, можно с легкостью обойти спальню, кухню, рабочий кабинет или любую другую комнату и разместить 3D модели различных предметов, чтобы увидеть, как они выглядят или определиться с их идеальной расстановкой. Amikasa также даёт возможность использовать мебель и предметы интерьера разных брендов, которые можно приобрести прямо в приложении.

Приложение доступно на iOS.

AR-игры и развлечения

10. Knightfall: AR

Приложение доступно на iOS и Android.

11. Just a Line

Just a Line — это экспериментальный проект от Google, который получился довольно забавным и, несмотря на свою простоту, может послужить отправной точкой потенциала AR. Принцип его таков: откалибровав приложение, вы рисуете любое изображение и, отступив на шаг назад, можете полюбоваться своим творением. Но это еще не всё. Обходя свой рисунок по кругу, вы способны рассмотреть его в 3D-пространстве, более того, по мере передвижения вокруг получившегося рисунка, у вас получится растягивать линии и менять конечный результат.

Приложение доступно на iOS и Android.

12. Ingress Prime

Ingress была первой попыткой Google выйти на AR-рынок и сейчас у игроков есть возможность опробовать обновленную версию Ingress Prime. Это ММО игра, которая делит игроков на два лагеря — Просвещенные и Сопротивление и заставляет их сражаться за контроль над виртуальными территориями.

В распоряжении у игроков имеется экзотическая материя (XM), которая используется для захвата виртуальных порталов. Когда одна из команд захватывает три или более портала, она получает контроль над территорией между этими порталами. Ingress Prime — это всеобъемлющая стратегия, основанная на научной фантастике и поддерживаемая непрерывным открытым повествованием.

Приложение доступно на iOS и Android.

13. Genesis Augmented Reality

Genesis Augmented Reality — это настольная AR-игра, являющаяся одним из самых успешных проектов на Kickstarter. Игра повествует о Рифтлорде, наделённого силой Генезиса, способной положить конец злому влиянию Раркона. Хотя разработчики изначально планировали довольно обширную игру, к сожалению, она не обновлялась с 2018 года. Тем не менее Genesis Augmented Reality предлагает крутой игровой опыт, хотя для этого сначала понадобится принтер, чтобы распечатать AR «якорь», на котором активируется игровой персонаж.

Приложение доступно на Android.

14. Zombies Go

С популярностью сериала «Ходячие мертвецы» многие наверняка задумывались над своими шансами выжить в зомби-апокалипсисе. Игра Zombies Go хоть и не даст точных ответов на этот вопрос, но зато позволит бороться с зомби во время прогулок или даже во время похода за покупками. Название Zombie Go напоминает Pokémon Go и это неспроста. Можно заметить сходства между двумя приложениями, такие как принцип использования телефона для поиска существ и дальнейшего взаимодействиями с ними.

Приложение доступно на iOS.

15. Quiver

Учитывая, что смартфоны больше предназначены для взрослых, чем для подростков, нехватка AR-контента для детей и вовсе неудивительна. К счастью, для детей и родителей, приложение Quiver (ранее известное как ColAR Mix) оживляет 2D-раскраски с помощью анимированных изображений, которые появляются прямо со страниц.

Пользователи могут загрузить один из нескольких бесплатных наборов раскраски на веб-сайте Quiver, каждый из которых включает в себя самые разные рисунки — от огнедышащих драконов и плюшевых мишек до высоких динозавров и диких жеребцов. А после того, как рисунок будет раскрашен, пользователям нужно просто посмотреть на него через камеру смартфона и наблюдать за оживающей раскраской.

Приложение доступно на iOS и Android.

16. Wanna kicks

Wanna kicks — это приложение, созданное специально для фанатов кроссовок, которое позволяет «примерить» виртуальную обувь и рассмотреть её с любого ракурса. Благодаря такой функции пользователи могут проверить, подойдут ли им те или иные кроссовки, не выходя из дома, что определённо делает онлайн-покупки еще удобнее. Приложение также позволяет поделиться «примеркой» с друзьями в соцсетях и в случае необходимости получить одобрение на покупку.

Приложение доступно на iOS и Android.

17. Holo

Holo берёт своё начало с AR-стикеров на Google Pixel и работает по схожему принципу. В приложении можно выбрать персонажей, как вымышленных, так и из реального мира, и перетаскивать в свое непосредственное окружение (этот процесс называется «Holo-Mixing»). Каждый из персонажей, от знаменитостей YouTube до вымышленных персонажей при размещении в реальном мире выполняет набор заданных анимаций и звуков, и может быть уменьшен и увеличен в соответствии с желаемым расположением.

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

Приложение доступно на iOS и Android.

Другие AR-приложения

18. Google Lens

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

Приложение доступно на iOS и Android.

19. AR Ruler

Одна из самых простых идей использовать технологию дополненной реальности — измерения. Используя способность AR определять, где начинаются и заканчиваются трёхмерные объекты, можно измерить расстояние и легко отобразить его. Однако речь идёт не только о простых прямых измерениях — AR Ruler (она же AR-линейка) также измеряет углы, объём и площадь. Более того, в приложении имеется функция создания плана комнаты по измерениям. AR Ruler может быть не самым идеальным, но тем не менее достаточно полезным приложением, чтобы получить примерные измерения, когда они необходимы.

Приложение доступно на Android.

20. Find Your Car with AR

Ситуация знакомая многим: заканчиваешь покупки, возвращаешься на парковку, а вспомнить или найти место парковки автомобиля не можешь. В такой ситуации на помощь придёт Find Your Car with AR — приложение, разработанное специально для поиска припаркованного автомобиля. После определения местоположения автомобиля приложение создает видимый маркер, показывающий автомобиль, расстояние до него и направление, в котором нужно идти. Find Your Car with AR особо полезно для парковок у таких мест как стадионы, конференц-центры, открытые концертные площадки и другие многолюдные места или места с большим количеством парковочных мест. В добавок, пользователи могут использовать приложение, чтобы найти свои места в больших театрах и концертных залах.

Приложение доступно на iOS.

21. Wanna nails

Wanna Nails позволяет примерить лаки для ногтей перед покупкой, наложив цвета на реальные ногти. В приложении доступны такие бренды как ORLY, CND Vinylux и essie — таким образом пользователи примеряют настоящие лаки для ногтей, а не просто абстрактные цвета.

Wanna Nails отлично распознает ногти, а затем точно наносит цвета в нужном месте. После того как подобран подходящий цвет лака, у пользователей есть возможность сразу перейти на Amazon и заказать продукт.

Приложение доступно на iOS и Android.

22. Snapchat

Когда-то таймер самоуничтожения сообщений в Snapchat пользовался большим успехом среди пользователей, сегодня же приложение расширило возможности, добавив функцию дополненной реальности в виде фильтров, преобразований в реальном времени и спецэффектов, называемых «линзами». Линзы могут преображать пользователей в животных, менять местами лица людей и украшать фотографии и видео cамыми разными забавными дополнениями.

Приложение доступно на iOS и Android.

23. Instagram

После добавления фильтров в стиле Snapchat в собственное приложение, Facebook также перенёс их в Instagram. Функции AR работают как через переднюю, так и на заднюю камеры телефона, а также со всеми режимами фото и видео в Instagram. Пользователи могут примерить различные короны, сыграть в викторины, превратиться в коалу или кролика или выбрать математические уравнения, плавающие вокруг их головы. Более того, пользователи могут создавать собственные фильтры и делиться ими с другими, что пополняет библиотеку фильтров самыми разными и креативными AR-эффектами.

Приложение доступно на iOS и Android.

24. Vuforia Chalk

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

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

Приложение доступно на iOS и Android.

25. Roar

Roar — это приложение, которое приносит пользу и потребителям, и бизнесу, но прежде всего оно полезно покупателям в их повседневной жизни. Для покупателей Roar — это советник по покупкам в дополненной реальности, который позволяет делать снимки тысяч блюд и напитков и узнавать о них всё необходимое: цены, ингредиенты, отзывы других покупателей и даже рекламных акциях. Ещё одной впечатляющей функцией приложения является возможность сканировать плакат фильма, чтобы быстро купить билеты на предстоящий показ. С новыми обновлениями Roar ожидаются и новые возможности, а также приятные дополнения, такие как музыка, анимация и 3D объекты.

Приложение доступно на iOS и Android.

Технология дополненной реальности медленно, но верно становится частью нашей повседневной жизни. Сегодня существует множество AR-приложений для Android и iOS устройств — от программ для совершения покупок до многопользовательских игр, и этот список только пополняется.

Если вспомнить ранние воплощения технологии, такие как Google Очки, можно заметить, что эти приложения уже заменяются более функциональными версиями. Пользователи могут рассчитывать на новые способы совершать покупки, путешествовать, учиться и оставаться в форме.

Источник

❓ Как освоить разработку приложений AR/VR с нуля

Разработка технологий дополненной (AR) и виртуальной реальности (VR) все еще находится в зачаточном состоянии – именно поэтому сейчас идеальное время, чтобы научиться создавать такой контент. Вы можете придумать захватывающие миры и среды с возможностью взаимодействия в трех измерениях. Порог вхождения в эту сферу все еще относительно невысок, однако новичку придется разобраться с 3D-моделированием и сканированием, движками 3D-игр, панорамными фотографиями и видео. Необходимо знание языков C, C++, C# и комплектов для разработки программного обеспечения (SDK). Давайте обо всем по порядку.

Аппаратное обеспечение

Дополненная и виртуальная реальность и вся 3D-разработка в целом требуют производительного оборудования. Если мы посмотрим на требования двух самых популярных платформ VR ( HTC Vive и Oculus Rift ), то увидим их схожесть. Рекомендуемые технические характеристики компьютера на сегодняшний день таковы:

Устройства виртуальной реальности

Устройства VR/AR классифицируются по степени свободы (DOF или Degrees of freedom), т.е. по способу перемещения объекта. Тут есть два варианта: 3-DOF и 6-DOF. Три степени свободы означают, что вы сможете взаимодействовать с виртуальным миром в трех измерениях (в системе координат X, Y, Z) с помощью головного дисплея (HMD), но не сможете двигаться вперед или назад. С шестью степенями свободы двигаться получится во всех шести направлениях.

Эти устройства поддерживают три степени свободы:

А у этих шесть степеней свободы:

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

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

Движки 3D-игр и языки программирования

3D-модели

Первое, что вам понадобится для разработки AR/VR – это 3D-модели. Есть два варианта: сделать их самостоятельно или использовать готовые шаблоны. Самостоятельное создание моделей – сложный путь, но в конечном итоге он может оказаться самым лучшим и рентабельным. В этом случае вам придется освоить специальные программы. Например, такие:

В интернете всегда можно найти и шаблонные 3D-модели:

Этот вариант подходит начинающим разработчикам без навыков.

Веб-разработка и виртуальная реальность

Стоит упомянуть два фреймворка:

Дополненная реальность

Проблемы

Первая проблема связана с новизной индустрии AR/VR – существует не так много передовых практик для разработки приложений. Еще один недостаток VR – это укачивание. При длительном использовании устройства у людей может возникнуть дезориентация, вызванная неестественными движениями. Возникает она из-за несоответствия между физическими и визуальными сигналами к действию.

Чтобы стать разработчиком AR/VR, необходимо пройти несколько этапов:

Несколько полезных ссылок для изучения технологий AR/VR:

Выводы

Технологии AR/VR пока сыроваты. Они имеют массу ограничений, да и оборудование стоит недешево. Тем не менее, потенциал виртуальной и дополненной реальности огромен, а большинство специализирующихся в этой области профессиональных разработчиков не имеет большого опыта. К тому же некоторые из приобретенных в процессе освоения модного направления навыков (например, языки C/C++) можно применить и в других областях программирования. Попробовав, вы ничего не теряете. Удачи!

Источник

VR/AR в браузере. Как быстро влиться и сделать свое первое приложение, используя WebVR API

Виртуальная и дополненные реальности активно развиваются и начинают предъявлять права на захват мира. Причем применение этих технологий разнообразно и не ограничивается только играми. А с появлением инструментов для работы с VR/AR технологиями в браузере интерес возрос еще больше. Уже сейчас можно экспериментировать и создавать MVP(Minimum Viable Product) веб-проекты с помощью JavaScript API, которое так и называется — WebVR. Давайте разбираться, что это и как с этим работать. И можно ли обойтись без этого самого WebVR API?

Эта статья носит ознакомительный характер, и она является первой в серии статей про WebVR API и Web AR реализации, которые я планирую. Если тема зайдет, то продолжу развивать ее, показывая уже более конкретные примеры с использованием различных техник и фреймворков. Я хочу поделиться своим личным опытом и обсудить в статье базовые принципы работы с WebVR, как сделать Web AR, что делать если у вас iOS, и рассмотрим устройства, под которые можно все это разрабатывать уже сегодня.

В Туту.ру я работаю в должности системный архитектор подразделения Frontend. Занимаюсь различными RnD (Research and Development ) задачами. Тема VR/AR — не пересекается напрямую с моей работой, но мы уже думаем в компании над применением данной технологии в контексте туристического бизнеса. Меня всегда манят технологии будущего и мне очень нравится Frontend стек. Скорее мне нравится сама идея того, что все можно делать в браузере. Пусть пока это и накладывает ряд ограничений и доставляет некоторые трудности. Но они все решаемы, а через какое-то время и вовсе нивелируются.

Откуда ноги растут

Саму спеку начали писать еще в 2014 году, но первая версия была представлена в начале 2016 года компанией Mozilla. Тогда была представлена первая полноценная черновая спецификация WebVR API. Эта спецификация описывает программный интерфейс для работы с различными VR устройствами типа Oculus Rift и им подобным (собственно данная спека и писалась изначально под окулус). Данная спецификация разработана при участии Брэндона Джонса (Brandon Jones) из компании Google и Джастина Роджерса (Justin Rogers) из Microsoft.

Поддержка новой спецификации WebVR уже реализована в Firefox и мобильном Chrome (точнее про степень реализации и нюансы будет сказано далее). А это значит, что уже сегодня можно свободно экспериментировать и пробовать технологию завтрашнего будущего. Если ваш браузер стар, странен или не обновляется — для всего этого есть полифилы.

Зачем нужен WebVR API?

WebVR API — это программный интерфейс для работы с устройствами. Он ничего не знает про 3D графику. Работа с графикой, отрисовка сцены, установка источников света и все прочее лежит на суровых плечах программистов. WebVR API всего лишь позволяет абстрагировать доступ к устройствам. Данное API предоставляет инструменты для рендеринга картинки, для получения информации об устройстве, его возможностях и технических характеристиках, но саму картинку и 3D мир нужно рисовать, используя уже ставшие привычными веб-технологии, такие как: HTML, CSS, WebGL, Canvas, etc…

WebVR API предоставляет нам несколько основных объектов для работы:

Hello VR world

Простой код бойлерплейта для работы с VR устройством на JavaScript выглядит так:

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

С какими устройствами работать?

Когда говорят про VR, то вспоминают Oculus Rift и им подобные. Если мы говорим про WebVR, логично предположить, что мы рассчитываем на разработку под браузеры.

Самые доступные и популярные на сегодня устройства — это так называемые Cardboard девайсы (или еще их называют VRBox’ы). Мобильный VR список устройств можно перечислить по пальцам:

Noname VRBox

Просто бокс с линзами. Бывают в очень разных исполнениях, вплоть до копий Samsung GR VR, но с подключением через Bluetooth любой модели телефона. Делаются в разных форм факторах и разных исполнениях. Можно докупить Bluetooth джойстик, который будет работать с любым смартфоном на любой ОС. Качество очень даже хорошее, к линзам нет претензий. Вся соль кроется в смартфоне, размере дисплея и разрешении экрана.

Xiaomi VRBox

Особенности: наличие механической кнопки-манипулятора, работающей по принципу стилуса, который тапает в “слепую зону” экрана в области переносицы (инженеры жгут :)). Застежка на молнии.

Samsung GR VR

Особенности: подключается к боксу через USB, наличие сенсорной панели и кнопок на шлеме. В момент подключения активируется функционал Oculus, и телефон прикидывается Oculus-совместимым устройством.

Google Cardboard

Особенности: наличие кнопки, выполненной в виде небольшого круглого магнита. В приложении считывается изменение магнитного поля встроенным магнитометром, и данное изменение засчитывается как действие по кнопке в Cardboard-совместимых устройствах.

Google Daydream

Особенности: основное отличие от Cardboard — более основательный и удобный хеадсет и наличие геймпада. Это уже полноценный VRBox, не из картона 🙂

Вот про них мы и будем говорить. Если у вас есть смартфон с браузером Chrome и какая-то вариация VRBox’a, то вы уже сможете проверить в действии WebVR. Лучший вариант — Chrome Canary или Samsung Internet. Конечно, надо сказать про исключение — это iOS. Но там VR можно использовать через полифилы, поэтому демки также будут доступны и с iOS устройств (зависит от реализации). Опять же, надо понимать, что WebVR API — это не про 3D графику, и сделать WebVR мир можно и под iOS без использования этого самого VR API (ну или с полифилами).

Взглянуть на VR мир можно и через окно десктопного браузера, с которым обычно происходит разработка. Сначала мир строится без шлемов, а затем уже добавляются возможности разбиения картинки под оптическую пару. Для этого используем либо Firefox Nightly, либо Chrome вот с таким вот плагином: WebVR API Emulation. Либо Chrome Canary с включенной поддержкой, либо специальную сборку Chromium… Ну вы поняли 🙂

Что с поддержкой в браузерах?

Итак, на сегодня WebVR API в той или иной мере поддерживается в следующих браузерах:

Не забываем включить поддержку WebVR API.

Полифилы и вспомогательные библиотеки

Если ваше устройство не поддерживает WebVR API, то можно воспользоваться полифилом, который можно подключить на страницу, либо использовать специальное расширение для браузера. Ссылка на полифил: github.com/googlevr/webvr-polyfill

WebVR API Emulation for Chrome

Про этот плагин стоит сказать пару слов отдельно. Он не просто добавляет эмуляцию WebVR API, но также позволяет делать различные манипуляции и интегрируется в DevTools.

WebVR-UI

Если ваше устройство не является VR девайсом (а браузер в смартфоне — это всего лишь браузер), то вы можете воссоздать VR интерфейс для переключения в режим хедсета, используя библиотеку webvr-ui. С помощью этой библиотеки вы сможете сделать красивый UI интерфейс с кнопками переключения в VR режим. Ссылка на проект: github.com/googlevr/webvr-ui

Добавив несколько строк кода:

Эта библиотека совместима с фреймворком A-Frame, что очень классно. Вам достаточно добавить всего лишь атрибут в ваш код:

И у вас будет доступен удобный VR интерфейс. Если будет доступен WebVR, то будет предложено перейти в VR режим, иначе будет предложено попробовать запустить ваше веб-приложение в режиме демонстрации без VR режима.

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

Чем нам мир построить?

Чтобы влиться в мир VR, нужно научиться работать с 3D-графикой. Это кажется сложной задачей, если вы будете осваивать WebGL с нуля. Но проще всего взять готовые библиотеки, такие как Threejs, D3.js или специализированные фреймворки для работы с VR (такие, как A-Frame от команды Mozilla). Уже даже есть превью релиз React VR для поклонников React и всего, что выходит из недр FB. Но это тема отдельной статьи.

Верстаем VR мир

Используя фреймворк A-Frame, можно сверстать VR мир с минимальными усилиями. A-Frame — это HTML-фреймворк для создания веб-приложений и сайтов под виртуальную реальность. Если смотреть на результат в браузере, то это выглядит как веб-страница, которая представляет 3D- изображение с возможностью навигации и взаимодействия с объектами. Вся картинка отрисовывается при помощи WebGL, а основная задача фреймворка — это предоставить простой инструмент, который бы позволил создавать трехмерный мир привычным для фронтендеров, похожим на HTML-разметку, способом. Сам фреймворк базируется на Threejs и является более высокоуровневой надстройкой.

Фреймворк A-Frame создает 3D-сцену через набор геометрических примитивов. Вы можете также добавлять более сложные компоненты и даже дописывать свои, если базовых вам уже не хватает. Для объектов сцены доступны типичные геометрические свойства, такие как: местоположение, вращение, масштабирование, кроме того, можно описывать расположение камер и источников света.

У A-Frame есть хороший инспектор, позволяющий делать отладку 3D мира.

Много хороших примеров можно посмотреть тут.

Они просты для понимания и, изучив их, можно очень быстро сделать свой первый «Hello VR world». A-Frame можно также использовать и для AR разработки. Если углубляться в A-Frame, то тут опять же можно наговорить на целую отдельную статью (которая появится, если будет интерес к данной тематике).

React VR

ReactVR — это фреймворк, базирующийся на Reactjs. Если будет интерес и пост наберет хороший рейтинг, сделаю отдельно статью про это… Пока просто оставлю ссылку:

Если статья наберет хороший рейтинг, тем самым показав что читателям интересна эта тема, то я сделаю отдельно статью про это.

Можем ли обойтись без WebVR?

Как уже было сказано выше, сам WebVR API нужен только для работы с VR устройствами, а точнее, для получения характеристик о дисплеях и для рендеринга картинки. Но если мы говорим про Mobile VR, то физически мы работаем с 1м экраном. Но мы можем эмулировать стереопару, и WebVR API нам может помочь абстрагироваться и инкапсулировать работу с экраном таким образом, что мы будем как бы работать с двумя физическими дисплеями. При этом наш код будет кроссплатформенным, и мы сможем наше WebVR приложение запускать на Oculus в браузере Carmel, к примеру.

Пример 3D мира на Threejs с использованием WebVR API

Здесь покажу пример работы с бойлерплейтом, благодаря которому можно делать WebVR проекты, которые заведутся на всех браузерах. Даже в iOS.

В следующих статьях можем более подробно разобраться в деталях разработки под WebVR. Ссылка на гитхаб с бойлерплейтом: github.com/borismus/webvr-boilerplate

Web AR(Augmented Reality) — также возможно создавать в браузере. Но «WebAR API» не существует, это просто обозначение дополненной реальности, реализованной на веб-технологиях.

Технически вся работа точно такая же, как и работа с WebVR, но дополнительно вы получаете видеопоток с веб-камеры, используя WebRTC. Дополнительно пишите логику покадровой обработки, для поиска нужных объектов. А далее, как и в случае с WebVR — уже рисуете 3D сцену на фоне видеопотока. И, надо сказать, что AR не обязательно подразумевает наличие хеадсета. Вспомним “Pockemon GO!” — это AR проект, но без VR шлема. Отсюда следует, что, чтобы создать AR проект, не обязательно иметь VR шлем. Но при этом VR и AR понятия могут пересекаются по некоторым параметрам и технологиям.

Что с поддержкой?

Здесь все упирается, в первую очередь, в поддержку WebRTC. Поэтому можно сказать, что Web AR можно реализовать на всех Android устройствах. В iOS — нет, но если очень хочется, то…

Как быть с iOS устройствами?

Если речь идет о WebVR — то в iOS устройствах все можно реализовать через полифилы (или вовсе обойтись без WebVR API, описывая все самостоятельно и реализуя отслеживание действий через акселерометр и прочие датчики, самому бить картинку и эмулировать два дисплея). Если говорить про AR, тут все плохо, так как нет поддержки WebRTC. Но есть такой проект как Argonjs. Это проект, который состоит из фреймворка, базирующегося на A-Frame, и, внимание, специального браузера.

Argon 4 by Georgia Tech

Суть работы браузера проста: есть два слоя. Один слой — это Webkit движок, второй слой (подложка) — это вывод видеопотока с камеры. В браузере есть свой API, чем-то похоже на работу самых первых версий PhoneGap (если кто-то пробовал на заре развития этого проекта, году эдак в 2008, тогда это был специальный браузер под iPhone с расширенным JS API).

При этом Argonjs можно использовать и для VR разработки под iOS. Точнее для обкатки MVP. Если все же нужно разрабатывать кроссплатформенное приложение под VR/AR на JS, то можно смотреть в сторону React Native вкупе с React VR либо попробовать упаковать все в PhoneGap.

Важно! В AppStore есть несколько версий браузера. На данный момент надо качать версию 4, не ниже, иначе фреймворк не заведется:

А что там с геймпадами?

Это дополнительная тема для изучения. Разбираемся с Bluetooth API и Gamepad API. Они есть в браузерах и поддерживаются как на десктопе так и на мобильных устройствах (опять же есть нюансы и список фаворитов среди браузеров). Изучаем документацию и учимся с ними работать. Про геймпады и взаимодействие с VR миром — это тема отдельной статьи (или даже нескольких), в двух словах не рассказать.

Юзкейсы и применение

Если говорить про Туту.ру, то у нас уже есть идеи юзкейсов для применения VR/AR на практике. К примеру, это 3D галереи для проекта Туры. Галереи 360 с небольшой доработкой можно адаптировать под VR шлемы, и все, у кого дома есть VR Box, могли бы “осмотреть” будущий отель и пляж с эффектом присутствия. Такую же технику можно применить и к 3D галереям для проекта Поезда, где можно посмотреть вагон изнутри и выбрать место прямо из VR шлема в Сапсане. Таким же образом, в будущем, можно было бы сделать и для междугородних автобусов. А для проекта экскурсии, который у нас также имеется, можно было бы делать демо-превью будущей экскурсии.

Еще один кейс — это развлечение туристов в оффлайн офисе. Пока турист ждет своей очереди к турменеджеру, вместо журналов и брошюр можно было бы положить Samsung GR VR шлемы и сделать опять же каталог путешествий, что могло бы способствовать выбору нужной турпутевки. Если развивать тему AR, то в оффлайн офисе можно было бы разместить информационные стенды и различные плюхи-приколюхи, для развлечения клиентов. Если брошюру клиент может пропустить, потому что реакция на рекламную макулатуру не всегда позитивна, то ту же рекламу, показанную через призму новых технологий, клиент может с удовольствием воспринять и остаться доволен.

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

Источник