Как создать веб-приложение VR для нескольких игроков

1656600267 kak sozdat veb prilozhenie vr dlya neskolkih igrokov

автор Сруштика Нилакантам

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

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

Что будем строить?

1*cmZG_OoXi3eVMxALqspC_g
Снимок, сделанный Мартином Сплиттом на Всемирном конгрессе WeAreDevelopers

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

Не знаете или не понимаете много терминов, которые я только что использовал? Не беспокойтесь, скоро мы все это рассмотрим, и скоро все начнет иметь смысл!

По сути, для каждого пользователя, присоединяющегося к вашей программе, в вашей VR-сцене появится новый аватар (Примечание: я просто использую модный термин «аватар» для того набора коробок, который едва напоминает настоящего человека 😛 ). Эти аватары будут вращаться/перемещаться в реальном времени в соответствии с движением телефонов пользователей в реальной жизни.

Это приложение было демонстрировано во время моего доклада на WeAreDevelopers World Congress 2018. Вы можете просмотреть слайды ниже.

Перейти к демонстрации в прямом эфире

Полный проект размещен на Glitch – я думаю, что это самый простой способ разместить ваши проекты сообщества или демонстрации. Это также позволяет нескольким разработчикам работать над проектом удаленно. Вы должны полностью проверить это.

Инструкции для живой демо:

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

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

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

Перейдите к полному исходному коду GitHub.

Что мы будем использовать?

Как упоминалось ранее, наша цель – получить доступ к VR непосредственно в браузерах, не требуя ничего загружать. Для этого мы будем использовать библиотеку WebVR.

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

1*VwBq28_q_l0J86HQd4GkdQ
Логотип WebVR

Однако, несмотря на то, что WebVR дает нам возможность использовать множество преимуществ Интернета, он все равно требует значительной сложной работы. На самом деле для этого может потребоваться знание WebGL и других библиотек, чтобы создать плавный опыт.

А-рамка

Это, опять же, имеет тенденцию быть узким местом для разработчиков Интернета, чтобы создать нечто, что в конечном счете будет обслуживаться в самой сети. Итак, команда Mozilla VR создала фреймворк поверх WebVR под названием A-Frame.

A-Frame полностью устраняет шаблонный код WebVR и позволяет разработчикам создавать программы VR с помощью простых пользовательских HTML-тегов. Конечно, JavaScript, как всегда, заставляет разные элементы работать вместе.

1*SGUnFgjYGIgK5dgm8q43Qw
Логотип A-Frame VR

Способно

Кроме того, мы будем использовать Ably Realtime для реализации всех функций реального времени – и многопользовательской – в программе. Ably – это платформа доставки данных в реальном времени, которая решает проблему доставки сообщений в реальном времени, предлагая такие функции, как Pub/Sub и Presence из коробки.

1*PzBxXwB9ydQRyPJmgYR4BQ
Логотип Ably Realtime

Примечание: Ограничения для бесплатной учетной записи Ably (используемой в демо-версии) позволяют в любое время запустить максимум два экземпляра программы. Если вы хотите запустить больше экземпляров, просмотрите пакет самообслуживания Ably и купите соответственно больше сообщений.

Глюк

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

Glitch – это очень удобный способ сделать это. Вы можете просто создать новый проект. Когда вы закончите, URL-адрес будет мгновенно доступен для использования на любой платформе или устройстве.

Аутентификация и назначение уникальных идентификаторов

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

Если внимательно наблюдать этот экспресс-сервер обслуживает файлы, присутствующие в корневом каталоге проекта. Поэтому убедитесь, что файл index.html, который вы строите дальше, находится в той же папке, что и auth-server.

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

Поскольку это учебное пособие, мы фактически не проверяем никаких учетных данных перед аутентификацией клиентов. В идеале сервер аутентификации имел бы этап проверки.

Структура проекта проста, со следующими файлами в одной родительской папке:

  • auth_server.js
  • index.html
  • main.js

Начинаем

Давайте начнем с создания базовых настроек VR для программы. Мы будем использовать систему entity-component-system (ECS) A-Frame. ECS позволяет легко строить какие-либо объекты на сцене. Каждый объект рассматривается как сущность, отличающаяся от других сущностей разными компонентами (или атрибутами), которые к нему присоединены.

В файле HTML начните с добавления скелетного кода HTML:

Ссылки ссылаются на следующее, соответственно:

  1. Клиентская библиотека JS Ably
  2. JQuery Framework
  3. Сборник JS A-Frame
  4. Локальный файл JS (“main.js”), куда мы добавим логику программы
  5. Сообщество A-frame внесло текстовый компонент, чтобы удобно добавлять стилизованный текст в нашу VR-сцену.

Все объекты, которые мы хотим включить в нашу VR-сцену, должны находиться в пределах a-scene тег в нашем HTML-файле, как сцена выше (каламбур)! Это аналогично body тег в обычных HTML-документах.

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

Не стесняйтесь использовать собственные ресурсы, чтобы придать программе индивидуальное чувство! Вы можете увидеть, что мы добавили два новых тэга в приведенный выше фрагмент кода, давайте рассмотрим их:

a-asset-item – вызывает загрузчики файлов three.js. Это можно использовать для загрузки файлов всех типов.

a-mixin — это очень полезный тег, позволяющий повторно использовать код, позволяя указать набор свойств (компонентов), применяемых к одной сущности. Вы можете дать ему id и ссылайтесь на него несколько раз, как мы увидим. У нас будет три миксина, каждый из которых определяет определенные атрибуты для аватара, который мы намерены создать глаза, зрачки и руки.

Теперь давайте добавим все статические визуальные элементы в нашу VR-сцену.

Как видите, мы ввели полное приложение с помощью ECS. Однако это не единственный способ добавлять объекты в сцену. A-Frame поставляется с несколькими пользовательскими объектами, такими как коробка, область и т.д. Эти пользовательские сущности называются примитивами.

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

Для новичков VR, вот что-то интересное — небо похоже на слой, покрывающий вашу 360-градусную сферу, внутри которой вы предполагаете, что стоите при использовании программы VR. Это, как правило, аналогично небу в реальной жизни, которое можно увидеть на вершине и, кажется, опускается у горизонта. Мы используем a-sky в A-Frame, чтобы добавить небо, а ресурсом, который будет использоваться, может быть 360-градусное изображение или просто сплошной цвет.

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

Вот как мы можем добавить объект камеры. По желанию мы можем придать ему форму и анимацию, которая поможет нам отслеживать его движение, служа курсором.

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

1*JNth10uakAwE1wwWKY5lJw
Первый взгляд

Вуаль! Мы только что завершили настройку базовой сцены VR.

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

Добавление функций реального времени

Пора включить магию в нашу VR-сцену. Используя Ably, это очень легко реализовать. Мы будем использовать Pub/Sub и Presence, которые Ably предлагает в качестве прямых функций прямого использования.

Начните с подключения клиента/пользователя к Ably. Поскольку мы используем аутентификацию по маркерам, мы просто добавим маршрут к серверу аутентификации, как показано ниже:

Примечание: мы уточнили echoMessage: false. Это предотвращает подписку вашего клиента на сообщения, опубликованные самостоятельно, обеспечивая меньшее количество/использование сообщений во всем приложении. По умолчанию этот параметр всегда верен.

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

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

Чтобы отправить данные в Ably, нам нужно создать канал. Я назвал это vr-channel. После этого мы можем опубликовать исходные атрибуты на этом канале.

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

a-box — это приметил в A-Frame, который можно использовать для создания трехмерного блока с основными атрибутами, такими как размеры, положение, поворот, цвет и т.д.

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

  • создать и сделать так, чтобы аватар появлялся на сцене только тогда, когда пользователь появляется в сети (переходит по URL)
  • а также сделать так, чтобы он исчез, как только пользователь выходит из программы (закрывает окно браузера на своем телефоне или браузере).

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

Использование channel.presence.get() вы можете получить список всех участников, которые сейчас подключены к Ably (находятся онлайн).

Использование channel.presence.subscribe('enter') вы можете получать уведомления каждый раз, когда пользователь подключается к Ably (появляется в сети).

Использование channel.presence.subscribe('leave') вы можете получать уведомления каждый раз, когда пользователь отключается от Ably (переходит в автономный режим).

Как только пользователь появится в сети, мы должны подписаться на изменение атрибутов аватара нового пользователя. Эти изменения, как вы можете заметить, будут в attr объект из-за изменения положения и вращения. Наша цель – обновлять аватар по мере обновления этих атрибутов.

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

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

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

После того как мы создали все разные части аватара, мы связываем их все вместе, присоединяя к корневому аватару. Это дает нам возможность выполнять такие действия как обновление позиции и так далее на аватаре в целом. Вы ведь не хотели бы, чтобы у зомби была ситуация, когда голова двигается в одном направлении, а глаза — в другом, не правда ли? 😉 Это также позволяет легко удалить весь аватар, когда пользователь выходит из системы.

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

Прокрутите назад к subscribeToAvatarChanges() функция. Вы заметите, что updateAvatar() является функцией обратного вызова перед подпиской на канал, которая вызывается, когда атрибуты существующего аватара изменяются. Благодаря этому нам очень легко постоянно обновлять фактический аватар в соответствии с изменяющимися данными. Мы просто обновляем положение и вращение новыми значениями, как показано ниже:

Наконец, мы должны убедиться, что аватар удаляется со сцены всякий раз, когда пользователь выходит из системы или переходит в автономный режим. Это можно сделать снова с помощью присутствия, обработав leave событие, упомянутое ранее. Вот несколько вещей, которые нужно сделать, когда пользователь выходит из системы:

Мы начинаем с удаления соответствующей записи в нашем массиве и следуем за ним, удаляя полный аватар со сцены.

Это!

Теперь мы успешно внедрили программу многопользовательской виртуальной реальности, которая работает в Интернете и работает в режиме реального времени. Попытайтесь вместе со своими друзьями и позвольте им стать свидетелями магии! Если вы работали в локальной среде, вам может понадобиться локальный сервер для размещения файлов, как указано выше. Я лично использую Glitch для всех моих VR-проектов.

Теперь вы знаете основы как A-Frame, так и Ably, что позволяет создавать как программы VR, так и программы в реальном времени или — еще лучше — программу для совместной работы, как то, которое мы только что сделали.

Идеи уже назревают в вашей голове? Создайте приложение, которое вы всегда хотели! Вот полный исходный код этого приложения. Не стесняйтесь крикнуть мне в Twitter, если вы застряли или хотите узнать больше о чем-нибудь.

1*HV4HpIxvpQPi6sM5ehvRfw
Srushtika Neelakantam является защитником разработчиков Ably Realtime. Фото: Строка Кляйн

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

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