Автор оригинала: FreeCodeCamp Community Member.
Срушика Нилакантам
В этой статье мы узнаем о трех отличных рамках/библиотеках, которые позволяют любому веб-разработчику создать приложение VR, которое работает на любом устройстве за считанные минуты. Это также позволит сетевым взаимодействием в реальном времени в реальном времени со всеми миром.
Виртуальная реальность (VR) пришла к удивительному уровню, где он не нуждается в введении. Однако из перспективы разработчика построение простых VR-приложений все еще кажется сложной задачей, не говоря уже о сетевых многопользователях.
Что мы будем строить?
К концу этого учебника у вас будет приложение VR, похожее на то, что увидено на приведенной выше картинке. Он будет иметь базовую сцену VR, где несколько пользователей могут подключаться к вашему приложению с их мобильных телефонов, просто ударяя URL на браузерах мобильного телефона.
Не знаю или не понимаю много терминов, которые я только что использовал? Не волнуйтесь, мы посмотрим на все это вскоре, и все начнут в ближайшее время!
В основном, для каждого пользователя, которые присоединяются к вашему приложению, в вашей VR появится новый аватар (Примечание: я просто использую причудливый термин «аватар» для этого набора ящиков, которые едва напоминают настоящий человек: P). Эти аватары будут вращаться/передвигаться в реальном времени, в зависимости от движения телефонов пользователей в реальной жизни.
Это приложение было демонстрируют во время моего разговора на Издеватели Всемирный конгресс 2018. Вы можете проверить слайды ниже.
Перейти к живой демонстрации
Полный проект размещен на Сбой – Я думаю, что это самый простой способ принять ваши сообщества проекты или демонстрации. Он также позволяет нескольким разработчикам сотрудничать в проекте удаленно. Вы должны полностью проверить это.
Инструкции для Живая демонстрация :
- Откройте ссылку в окне браузера на вашем компьютере/мобильном телефоне.
- Откройте другой экземпляр приложения в другом окне браузера/мобильный.
Вы можете увидеть аватар каждого из этих экземпляров в другом. Попробуйте переместить мобильный телефон в воздухе, и вы увидите, что соответствующий аватар, который видел на компьютере браузера, а также. Если у вас есть две гарнитуры VR (даже картонные доски в порядке), вы и друга можете включить их и увидеть аватары друг друга двигаться в сцене, когда вы перемещаете голову в реальной жизни.
Играйте немного или прочитайте дальше, чтобы понять, что происходит и как. Вы также можете проверить полный код, размещенный на GitHub. Обязательно прочитайте файл Readme:
Перейти к полной исходный код на github.
Что мы будем использовать?
Как уже упоминалось ранее, наша цель состоит в том, чтобы получить доступ к VR непосредственно в браузерах, не загрузка ничего. Мы будем использовать Webvr библиотека для того, чтобы достичь этого.
WebVR – это веб-каркас, которая позволяет нам создавать приложения VR, которые доступны непосредственно в Интернете. Это полностью устраняет тяжелые загрузки и устанавливает, а также создание устройства VR-устройства.
Однако, хотя WEBVR дает нам возможность использовать множество преимуществ в Интернете, он все еще требует значительного количества сложной работы. Это может, на самом деле, требуют знания WebGL и другие библиотеки, чтобы иметь возможность построить плавный опыт.
Рамка
Это, опять же, имеет тенденцию быть узким местом для разработчиков сети, чтобы построить то, что будет в конечном итоге служить в самой сети. Итак, команда VR Mozilla построила рамки на вершине WebVR под названием A-кадр Отказ
A-кадр полностью устраняет код Bovertlate WebVR и позволяет разработчикам построить VR-приложения с помощью простых пользовательских тегов HTML. С, конечно, JavaScript делают различные биты и кусочки, как всегда.
Умело
Далее мы будем использовать Умело в реальном времени Для реализации всего реального времени – и многопользовательский – функциональность в приложении. Bably – это платформа доставки данных в реальном времени, которая решает проблему доставки сообщений в реальном времени, предлагая такие функции, как Паб/подразделение и Присутствие из коробки.
Примечание : Пределы для значительной бесплатной учетной записи (который используется в живой демонстрации) позволяют иметь максимум два экземпляра приложения в любое время. Если вы хотите иметь больше экземпляров, посмотрите на умелое Пакет самообслуживания и покупайте больше сообщений соответственно.
Сбой
Как вы знаете К настоящему времени каждое приложение WebVR можно доступ к браузеру. Это означает, что нам нужно будет провести наши файлы, чтобы иметь возможность получить доступ к ним на мобильном устройстве, используя URL.
Глюк очень удобный способ сделать это. Вы можете просто создать новый проект. Когда вы закончите, URL легко доступен для использования на любой платформе или устройстве мгновенно.
Аутентификация и назначение уникальных идентификаторов
Первые вещи в первую очередь. Нам нужно будет настроить сервер auth, который проверяет учетные данные наших пользователей и аутентификацию их легко, а также присвоение случайных ID клиента каждому из них. Это клиент Послушат способ выявления каждого из этих аватаров отдельно, и обрабатывать информацию, такую как их соответствующие обновления позиции, и внешний вид/исчезновение в соответствии с логинцом/выбором. Мы настроим простой Express Server Для этого, как показано ниже:
Если вы внимательно соблюдаете, этот экспресс-сервер обслуживает файлы, присутствующие в корневом каталоге проекта. Поэтому убедитесь, что файл «index.html», который вы создаете дальше, находится в той же папке, что и «auth-Server».
Если вы хотите обслуживать эти файлы локально, а не на Glitch, замените код для Слушатель переменная со следующим:
Поскольку это только учебное пособие, мы на самом деле не проверяем никаких учетных данных до аутентификации клиентов. В идеале сервер auth будет иметь шаг проверки.
Структура проекта проста с следующими файлами все в одной родительской папке:
- auth_server.js.
- index.html.
- Main.js.
Начиная
Давайте начнем с создания базовой настройки VR для приложения. Мы будем использовать Сущно-компонент-система
В вашем файле HTML начните, добавив HTML-код скелета:
Ссылки ссылаются на следующее соответственно:
- Js js Клиентская библиотека
- Jquery Фреймворк
- A-кадр JS Build.
- Местный файл JS («Main.js»), где мы добавим логику приложения
- A-кадр Сообщество способствовало Текстовый компонент для удобного добавления стилизованного текста на нашу сцену VR.
Все объекты, которые мы хотим включить в нашу сцену VR, должны пойти в A-сцена Тег в нашем HTML-файле, как сцена выше (каламбур)! Это аналогично Тело Тег в обычных документах HTML.
Далее мы добавим все активы, которые мы хотим использовать в А-активы ярлык. Добавление всех ресурсов в этом теге гарантирует, что все ваши активы предварительно загружаются до появления вашего приложения. Это предотвращает дерьмовый первый внешний вид из-за медленной нагрузки части ресурсов.
Не стесняйтесь использовать свои собственные ресурсы, чтобы дать приложению настроенное чувство! Вы можете увидеть, что мы добавили два новых тега в приведенном выше фрагменте кода, давайте копать в них:
A-Asset-item – вызывает файловые погрузчики Threy.js. Вы можете использовать это для загрузки всех типов файлов.
A-MIXIN – это очень полезный тег, который позволяет повторно использовать код, позволяя вам указать набор свойств (компонентов), которые будут применяться к одному объекту. Вы можете дать это ID и ссылаться на это несколько раз, как посмотрим. У нас будут три смесины, каждый из которых определяет определенные атрибуты для аватара, который мы намерены создавать – глаза, ученики и руки.
Теперь давайте добавим все статические визуальные элементы на нашей сцене VR.
Как видите, мы внедрили полное приложение с помощью ECS. Однако это не единственный способ, которым вы можете добавить объекты на сцену. A-кадр поставляется с несколькими пользовательскими объектами, такими как коробка, сфера и так далее. Эти пользовательские объекты называются Примитивы Отказ
Код содержит очень легко следовать комментариям, которые объясняют, что каждый из наборов компонентов объектов пытается реализовать в нашем приложении.
Для новичков VR, Вот что-то интересное – Небо похоже на слой, который охватывает вашу сферу 360 градусов внутри, которую вы предполагаете, что вы должны стоять во время приложения VR. Обычно это аналогично небу в реальной жизни, которую можно увидеть сверху и кажется, что падает рядом с горизонтом. Мы используем A-Sky В A-кадре для добавления неба и используемого ресурса может быть либо изображением 360 градусов или просто сплошным цветом.
Теперь приходит еще одна интересная часть. Нам требуется камера организация. Это особая сущность, предлагаемая A-кадром. Он захватывает непрерывно меняющееся положение, а также значения вращения вашего мобильного телефона, когда вы используете приложение VR-кадров в браузере. Предприятие пользуется различными гироскощими датчиками в вашем телефоне для достижения этого недостаточности. В компьютере сущность камеры следует за Wasd Органы управления для захвата положения и вращения.
Вот как мы можем добавить объект камеры. Мы можем необязательно дать ему форму и анимацию, что помогает нам отслеживать его движение, служа в качестве курсора.
К концу этого раздела ваше приложение VR должно в идеале выглядеть как то, что показано ниже. Но Только если вы не переключили ресурсы своими пользовательскими, конечно!
Воила! Мы только что закончили создать основную сцену VR.
Теперь пришло время добавить некоторую функциональность – чтобы появиться аватары, исчезнуть и перемещаться в реальном времени, когда пользователи входят в систему и выходит из вашего приложения или просто переместить свой телефон.
Добавление функций в реальном времени
Пришло время раскрутить некоторую магию в нашу сцену VR. Используя это очень легко реализовать это. Мы будем использовать Паб/подразделение и Присутствие , которые оба предложены как непосредственное использование вне коробки умело.
Начните с подключения своего клиента/пользователя для умелых. Так как мы используем Аутентификация токена , мы просто добавим маршрут на сервер auth, как показано ниже:
Примечание : Мы указали Echomessage: false Отказ Это мешает вашему клиенту быть подписано на сообщения, опубликованные сам по себе, обеспечивая более низкое количество сообщений/использование в целом приложение. По умолчанию эта опция всегда верна.
После успешного аутентификации клиента мы будем хранить идентификатор, возвращенный сервером auth в переменной, чтобы мы могли использовать его позже.
Далее давайте настроим первую функцию, которая инициализирует наше приложение. В этой функции мы устанавливаем начальную позицию аватара. Для простоты мы будем ограничивать вращение/движение аватара только к оси X, сохраняя при этом координаты на двух других плоскостях как ноль. Начальная позиция на оси X выбирается случайным образом, чтобы несколько аватаров не беспорядок в той же точке в сцене, как только они появляются. Мы также устанавливаем некоторые исходные атрибуты, такие как цвет и размеры.
Для того, чтобы прислать эти данные, нам нужно создать канал. Я назвал это VR-канал Отказ После этого сделано, мы можем опубликовать начальные атрибуты на этом канале.
Тем не менее, мы хотим постоянно публиковать эти данные, поэтому все остальные пользователи могут получить его в реальном времени. Другими словами, мы хотим опубликовать данные в качестве атрибутов позиции и вращения. Эти данные напрямую передаются нам при объекте камеры в A-кадре. Нам просто нужно публиковать эти данные на том же канале с высокой частотой. В этом случае я публикую каждые 100 мс.
я-коробка это Примитивный В A-кадре, которая может быть удобно использоваться для создания 3D-коробки с базовыми атрибутами, такими как размеры, положение, вращение, цвет и так далее.
Вы можете видеть, что в рамках вышеуказанной функции есть три подсказывания, которые мы еще не обсуждали. Присутствие Это общий термин в мире в Realtime, который дает вам информацию о состоянии пользователя или состоянии подключения пользователя/устройства. В нашем случае мы бы:
- Создайте и сделать аватар появиться в сцене только тогда, когда пользователь наступит в Интернет (попадает в URL)
- И, также заставляют его исчезнуть, как только пользователь прекращает приложение (закрывает окно браузера на своем телефоне или браузере).
Кроме того, умело позволяет подписаться на присутствие событий. Обратный вызов уволен каждый раз, когда новый пользователь регистрируется или существующий пользователь выходит из системы. Это именно то, что нам требуется для нашего приложения.
Использование Channel.presence.get () Вы можете получить список всех участников, связанных в настоящее время, подключенных к умелая (на сайте).
Использование Channel.presence.subscribe ('Enter') Вы можете получить уведомление всякий раз, когда пользователь подключен к умелая (поставляется в сети).
Использование Channel.Presence.subscribe («отпуск») Вы можете получить уведомление всякий раз, когда пользователь отключен от умелой (в автономном режиме).
Как только пользователь наступит в Интернет, нам нужно подписаться всем другим изменениям атрибута аватара нового пользователя. Эти изменения, как вы можете наблюдать, будет в attr Объект из-за смены положения и вращения. Наша цель – обновить Avatar в качестве обновления этих атрибутов.
До этого нам нужно убедиться, что аватар вообще существует, или должен быть создан новый. Мы делаем это с помощью простой карты аватаров, где мы храним удостоверения личности всех существующих аватаров, как показано:
Далее нам нужно сделать все пользователи подписаться на изменения в атрибутах всех остальных, кроме себя. Мы делаем это, сделав их подписаться на конкретное событие на том же канале, к которому он публикуется, вроде так:
Когда вводит новый пользователь, нам нужно создать новый аватар со всеми необходимыми атрибутами. Следующая функция получает все начальные атрибуты на умелое. Это создает новый аватар с этими атрибутами и прикрепляет другие части, такие как глаза, ученики и руки относительно позиции главного ящика (представляющие голову аватара). Это ручное позиционирование становится легче с использованием Визуальный инспектор Инструмент, который поставляется с A-кадром.
После того, как мы создали все разные части аватара, мы связываем их все вместе, прикрепляя их к корневому аватару. Это дает нам способ выполнять такие действия, как обновления позиций и так далее на аватаре в целом. Вы бы не захотете ситуацию, подобную зомби, движущейся в одном направлении, и глаза движутся в другой, верно? 😉 Это также позволяет легко удалить весь аватар, когда пользователь выходит из системы.
Если аватар уже существует, мы просто обновляем его положение и вращение от постоянно обновления данных в attr объект соответствующих пользователей.
Прокрутите обратно до Подпискивааватаршерги () функция. Вы будете наблюдать, что UpdateAvatar () является функцией обратного вызова к подписке канала, которая вызывается, когда атрибуты существующего изменения аватара. Это позволяет нам постоянно легко обновлять фактический аватар, в соответствии с изменяющимися данными. Мы просто обновляем позицию и вращение новыми значениями, как показано ниже:
Наконец, нам нужно убедиться, что аватар удален со сцены всякий раз, когда пользователь выходит из системы/выходит в автономный режим. Это можно сделать, используя присутствие снова, обработав уйти Мероприятие упоминается ранее. Вот несколько вещей, которые вам нужно сделать, когда пользователь выходит из системы:
Мы начинаем с удаления соответствующей записи в нашем массиве и следуйте за ней, удалив полный аватар со сцены.
Вот и все!
Теперь мы успешно реализовали многопользовательское приложение VR, которое запускается в Интернете и работает в реальном времени. Идите вперед и проверьте его с друзьями и позвольте им свидетельствовать магию! Если вы работаете в местной среде, вам может понадобиться локальный сервер для размещения ваших файлов, как упоминалось выше. Я лично использую Глюк для всех моих проектов VR.
Теперь вы знаете основы как A-Crass, и умелый, позволяя вам создавать как VR-приложения, так и приложения в Realtime, либо – еще лучше – совместное приложение, подобное тому, что мы только что сделали.
Идеи уже завариваются в вашем уме? Продолжай и постройте это приложение, которое вы всегда хотели! Вот полный Исходный код Для этого приложения. Не стесняйтесь дать мне кричать на Twitter Если вы застряли или хотели бы узнать больше о чем-то.
Оригинал: “https://www.freecodecamp.org/news/how-to-build-a-multiplayer-vr-web-app-7b989964fb38/”