// Разработка

Как Внедрить VR/AR в Свое Приложение или Веб-Сайт?

Содержание

#1. Значение AR для сайта или приложения
#2. Виртуальная и дополненная реальности как способы усовершенствования приложения
#3. Формат USDZ
#4. Добавление контента AR на сайт
#5. Рекомендации по внедрению AR/VR в приложения и вебсайты
#6. Обнаружение плоскости
#7. API глубины
#8. Правильное восприятие света
#9. Примеры использования виртуальной и AR

Появились вопросы?
Юрий Мусиенко
Автор статьи
Merehead занимается разработкой веб проектов

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

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

How to Embed VR/AR in Your App or Website?

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

VR предоставляет разработчикам возможность встраивать изображения и видео VR с обзором в 360 градусов на веб-сайты для отображения на настольных компьютерах и мобильных устройствах. AR, в свою очередь, тоже используется в самых разных отраслях: недвижимости, дизайне интерьера, автомобилях и транспорте, здравоохранении и медицине, образовании, играх, рекламе и других. VR/AR также можно встраивать в собственные приложения на Android и iOS.

Рассмотрим, как осуществляется реализация VR/AR на свой сайт или в мобильное приложение.

Значение AR для сайта или приложения

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

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

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

How to Embed VR/AR in Your App or Website?

Пример использования дополненной реальности в приложениях IKEA. Источник.

В игровой сфере AR тоже нашла отражение – известная игра с ловлей покемонов построена как раз на базе этой технологии. Миры AR демонстрируют, насколько взаимодействие с пользователем может быть эффективным, а информация – доступной.

Виртуальная и дополненная реальности как способы усовершенствования приложения

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

Технология VR может применяться и уже используется в игровых и развлекательных приложениях, медицинских, образовательных, коммерческих и даже военных программах. Первый этап развития этой технологии наблюдался еще в 60-е годы 20-го века, когда для военных были разработаны специальные шлемы виртуальной реальности. Правда, в то время это еще была не полноценная виртуальная реальность, поскольку, исходя из современных определений, больше походила на дополненную.

Интерактивный опыт, в котором за основу берется реальный мир и дополняется различными стимулами – визуальными, слуховыми, проецирующими объекты и звуки, и является дополненной реальностью в чистом виде. Однако AR может воздействовать и на другие органы чувств. В любом случае технология AR добавляет перцептивную информацию к восприятию пользователем естественной среды, а виртуальная – полностью заменяет среду искусственной информацией о ней.

С 2013 года технология AR уже была строго определена как система, выполняющая 3 функции:

  • сочетание естественной среды с виртуальными активами;
  • возможность взаимодействия в реальном времени;
  • точная объемная регистрация как природных, так и виртуальных объектов.
Таким образом, именно эта комбинация реального и виртуального лучше всего определяет технологию AR и ее отличия от виртуальной. Несмотря на кажущееся четкое разделение (виртуальная реальность стремится заменить естественную среду, в то время как дополненная – просто дополнить), временами в некоторых проектах эти понятия могут размываться и пересекаться, в результате чего становится достаточно сложно определить их фундаментальное различие. Однако добавление AR обычно востребованнее, поскольку владельцы сайтов и приложений стремятся расширить, а не заменить существующий опыт пользователей.

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

Формат USDZ

Прежде чем углубляться в тему внедрения AR на вебсайт, стоит коснуться формата USDZ. Эта аббревиатура означает «стандарт универсального изображения сцены» и обычно является стандартом для добавления возможностей АR к 3D-контенту. В случае с устройствами Apple файлы этого формата заменили файлы reality и .rcproject, а также специальный код.

Именно от этого формата в дальнейшем будут зависеть возможности AR для iOS и MacOS. Несмотря на то, что Гугл сделал свои шаги в этом отношении, полагаясь на Хром Канари, USDZ остается золотым стандартом сегодня. Таким образом, этого мы коснемся далее, очень важно, чтобы ваше программное обеспечение для 3Д-моделирования предполагало этот вариант экспорта. И наоборот, вам также пригодится конвертер для стандартных форматов файлов, таких как OBJ, STL и gITF.

How to Embed VR/AR in Your App or Website?

Пример конвертирования файлов в формат USDZ при помощи онлайн-сервиса ViewAR. Источник.

Добавление контента AR на сайт

Для внедрения AR/VR-контента, по сути, необходимо следующее:
  • 3Д-модели в упомянутом ранее формате USDZ;
  • функциональный веб-сайт с поддержкой технологий дополненной или виртуальной реальности;
  • возможность встраивания и модификации.
Создание объемной модели осуществляется при помощи любого подходящего для этих целей программного обеспечения, например Vectary. Кстати, это ПО очень удобно в эксплуатации, так как позволяет экпортировать модели и одновременно конвертировать обычные файлы в USDZ. При помощи этой программы можно открыть или создать с нуля собственную модель. Если у вас нет навыков в 3Д-моделировании, вы можете обратиться к нашим специалистам, которые сделают все необходимое за вас.

В программе можно выбрать параметры экспорта, включая формат файла и максимальный размер текстуры, а после экспорта вы получите ссылку для загрузки окончательного файла. Также указанное ПО предоставит код для встраивания средства просмотра контента виртуальной и AR на ваш сайт или в приложение. Его нужно скопировать в буфер обмена и продолжить работу.

Если вы используете другое ПО на этом этапе, все равно можно параллельно использовать Vectary для некоторых действий. В результате встраивание контента AR заключается в копировании и вставке сгенерированного программным обеспечением кода в HTML-код вашего сайта и код приложения.

Для внедрения контента дополненной реальности, а в частности для моделирования, существуют и другие программы:

ScetchUP – очень известный вариант на основе браузера, который предлагает мощность и гибкость. Он может похвастаться плавной кривой обучения и обширной библиотекой пользовательских моделей. Различия между платной и бесплатной версией ощутимы, но даже на бесплатной можно создать стоящие вещи.

How to Embed VR/AR in Your App or Website?

Интерфейс программы ScetchUP. Источник.

«Мешмиксер» – столь же удобный и распространенный вариант, который больше ориентирован на 3D-печать. Тем не менее он предоставляет все функциональные возможности, которые могут пригодиться новичкам: от инструментов моделирования до инструментов анализа и оптимизации.

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

FreeCAD. В отличие от предыдущих программ, эта, вероятно, будет довольно сложна для начинающих. Тем не менее это решение с открытым исходным кодом предлагает функциональные инструменты для моделирования и множество плагинов, модулей и прочих вспомогательных инструментов совершенно бесплатно.

How to Embed VR/AR in Your App or Website?

Интерфейс программы FreeCAD. Источник.

«Леополия». Эффективная и простая в освоении программа, специализирующаяся, как и «Мешмиксер», на 3Д печати. Она специально разработана для образовательных целей, поэтому отлично подойдет новичкам.

После создания модели с использованием любой программы из вышеуказанных необходимо преобразовать ее в файл с нужным форматом – USDZ.

Отдельно стоит уделить внимание созданию сайта, если его еще у вас нет. Это можно сделать с помощью любой CMS, из известных на сегодняшний день. Рассмотрим наиболее популярные из систем управления контентом, которые можно использовать для создания собственного веб-ресурса с дополненной или виртуальной реальностью.

  1. WordPress. Эта система работает с 2003 года и на сегодняшний день обеспечивает более 40% всего интернета. Помимо огромного потенциала за счет архитектуры и библиотеки плагинов она предлагает простой процесс создания веб-сайтов. Сотрудники этой системы называют свой процесс сборки «без кода, без руководств, без ограничений», предоставляя широкий спектр тем на выбор. Вы можете разрабатывать дизайн в прямом смысле без дизайнера, поскольку их редакторы позволяют осуществлять модификации буквально в один клик.
  2. SquareSpace. Не менее известный поставщик веб-сайтов и хостинга, который предлагает большое число кастомизируемых шаблонов. Кроме создания сайта, эта компания предоставляет аналитику, SEO, электронную коммерцию, пользовательские домены, интеграцию с социальными сетями, что делает ее универсальной.
  3. WIX. Вполне жизнеспособная и достойная альтернатива двум предыдущим системам. Платформа с 500 настраиваемыми шаблонами доступна каждому пользователю, при этом также можно окунуться в творческий процесс и создать свой сайт с нуля. Встроенные инструменты позволяют настроить онлайн-планирование, создавать логотипы и работать с SEO.
При разработке мобильных приложений, поддерживающих встраивание виртуальной и дополненной реальности, стоит также уделить внимание устройствам, для которых оно будет доступно, поскольку не каждый современный телефон сможет открыть AR/VR контент.

Рекомендации по внедрению AR/VR в приложения и вебсайты

Преимущества WebAR-сервисов для онлайн-торговли, в онлайн-поиске, а также в распознавании лиц неоспоримы. Но как встроить это в веб-сайт? Ответ заключается в нескольких простых шагах.
  1. Совместимый браузер. Начните с браузера, совместимого с WebXR. Если вы используете Android, убедитесь, что ваша система совместима с ARCore в последней версии Chrome или Firefox. Для пользователей iOS выбор – AR Quick Look, расширение, позволяющее использовать ARKit для пользователей в Safari.
  2. A-Frame. Эта развивающаяся мощная технология от Mozilla позволяет пользователям создавать 3D-сцены вместе с опытом виртуальной реальности. Все, что требуется, – это несколько тегов HTML. A-Frame построен на основе WebGL, Three.js и Custom Elements. A-Frame оснащен рядом плагинов, которые делают его еще более привлекательным, поскольку он поддерживает простой синтаксис.
  3. Добавление поддержки AR в Интернет. Последний шаг также является одним из самых простых. Просто загрузите три файла .ar.js и frame-ar, а затем добавьте атрибут ar в 3D-сцену.
Поскольку привлекательность AR для веб-сайтов по всему миру выросла во много раз за последние годы, мы подробнее рассмотрим, что делает решения WebAR столь востребованными.

Обнаружение плоскости

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

API глубины

Технологии интеллектуальной реальности, такие как дополненная реальность, используют обнаружение плоскости, хотя это только одна из причин, которые делают его умным. Устройство, на котором используется AR, должно быть способно понимать свое окружение. Оно может сделать это через признание своей позиции и восприятие глубины. Это помогает придать визуальным эффектам AR реалистичное ощущение, когда объекты не отображаются просто вставленными на экран устройства.

Правильное восприятие света

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

Примеры использования виртуальной и AR

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

Компания DeLaval, производящая оборудование для оснащения ферм, при помощи AR демонстрирует потенциальным заказчикам свою продукцию.

How to Embed VR/AR in Your App or Website?

Демонстрация оборудования компании Делаваль прямо на офисном столе. Источник.

  • Автомобильный салон Vroom разработал приложение VR, которое погружает покупателя в увлекательный процесс тест-драйва. С его помощью можно виртуально «прокатиться» на любом из представленных авто и оценить их что называется изнутри.
  • Всемирно известный бренд «Тойота» создала приложение комбинированной реальности, которое позволяет комплектовать реальные автомобили разными компонентами: от аккумулятора и выхлопной системы до двигателя.
  • Компания «АУДИ» тоже оснастила несколько дилерских центров виртуальными тест-драйвами, что позволило улучшить качество обслуживания клиентов и сделать их опыт от общения с выбранным авто еще более ярким.
  • В компании «Икеа» предложили покупателям виртуальную «примерку» мебели и интерьерных аксессуаров при помощи технологии дополненной реальности. Благодаря AR они могут посмотреть, как будет выглядеть собранная мебель в их квартире, причем они идеально встраиваются в интерьер и подчиняются внешним факторам – например, освещению, а также полностью соответствуют размерам окружающих предметов. Для того чтобы воспользоваться этим приложением, смартфон должен поддерживать эту технологию. Точность изображения – 98%, что делает изображение очень реалистичным и практически не отличимым от реальной мебели в помещении. К тому же, как считают разработчики, так получится снизить количество отказов от приобретения – клиент с большей вероятностью согласится на покупку, если уже визуально оценил, как хорошо вещь будет смотреться в его жилище.
Как уже было сказано, технологии виртуальной и AR нашли применение не только в коммерческой, но и в других сферах жизни. Например, еще в 2015 году в «Дисней» разработали приложение-раскраску, которое позволяет детям раскрашивать трехмерные изображения сказочных персонажей. Красочная визуализация увлекает и развивает воображение, представляя модели в режиме реального времени.

В образовательных целях тоже используют технологии AR/VR. Например, в Смитсоновском музее естественной истории такое приложение появилось еще в 2015 году. С помощью AR каждый посетитель мог почувствовать себя рядом с динозаврами, а звуковое сопровождение имитировало их естественные звуки. Несмотря на неидеальный и довольно ограниченный уровень взаимодействия, который обеспечивала данная технология в этом случае (ведь было это еще в 2015, когда она была на достаточно примитивном уровне развития), это все равно позволяло подарить посетителям новый интересный опыт, несравнимый с плоскими изображениями в 2D. По мере развития технологии AR взаимодействие будет совершенствоваться – может добавляться ряд других стимулов, помимо визуальных и слуховых (тактильные, обонятельные).

How to Embed VR/AR in Your App or Website?

Пример дополненной реальности в музее – программа облекает скелеты за стеклом в плоть, демонстрируя, как выглядят живые животные, которым принадлежит конкретный скелет. Источник.

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

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

Есть вопросы? Задайте их здесь

Имя *
Email *
Телефон
Ваш бюджет
Сообщение
TorMarket - маркетплейс с гибкой системой фильтрации и удобным кабинетом для поставщиков.