Шаг 1: Придумайте идею. Решите попробовать прототип социального VR-приложения, которое будет поддерживать многих пользователей, поскольку на сегодняшний день не существует ни одного такого приложения, и в идеале (если позволяет время) реализует звук в реальном времени.

Шаг 2: Обратите внимание, что A-Frame предположительно легко настроить и запустить. Покопайтесь в создании многопользовательских интерфейсов в A-Frame. Обнаружьте, что кто-то создал компонент Firebase в A-Frame, что сделало многопользовательскую часть очень простой.

Шаг 3: Реализуйте A-Frame и компонент Firebase в соответствии с примером. Создайте сцену, в которой, когда пользователь открывает страницу, появляется другой «аватар»! С отслеживанием головы!

Шаг 4. Осознайте, что при огромной степени абстракции очень сложно понять, что происходит, и, соответственно, сделать что-либо, чтобы настроить то, что перед вами.

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

Шаг 6: Реализуйте основы веб-сокетов. Застрять на том, как добавить элементы A-Frame (которые он называет «сущностями») в представление, когда пользователь переходит на страницу. Проведите несколько часов в замешательстве.

Шаг 7: Замените A-Frame на three.js, пытаясь избавиться от некоторых абстракций, которые он создает. Управляйте визуализацией представления, которое выводит куб на экран, когда кто-то нажимает на страницу.

Шаг 8: Запутайтесь, почему, когда вы открыли вторую страницу в режиме инкогнито, первого человека/элемента больше не было. (Перенесемся к шагу 14.5: это потому, что вы никогда не настраивали свои сокеты для этого. Упс.)

Шаг 9: Попытайтесь реорганизовать webvr-шаблон, чтобы вам было легче с ним работать. В итоге поломать кучу вещей.

Шаг 10: Пожалуйтесь однокласснику на то, насколько ужасна виртуальная реальность. Подумайте о том, чтобы начать другой проект, хотя сейчас 23:00 пятницы, а вы выступаете в понедельник. Создайте новый репозиторий GitHub для своего проекта. Начните настраивать электронно-реагировать-шаблон в соответствии с проектом, который вы задумали.

Шаг 11: Просыпайтесь на следующее утро, полные решимости еще раз покорить виртуальную реальность. Загрузите Unity в первый раз. Посмотрите вводное видео о том, как начать разработку приложения для Google Daydream с помощью Unity. Используйте Unity, чтобы успешно создать приложение с плавающей рамкой и просмотреть его в Daydream.

Шаг 12. Следуйте руководству, созданному для Google Cardboard, чтобы создать социальное VR-приложение с Unity. Застрять на полпути. Задумайтесь, почему человек в туториале смог удалить свою основную камеру, а вы не можете, а также почему вы не можете переключить камеру на поле, представляющее ваш аватар.

Шаг 13: Решите еще раз попробовать A-Frame. Поймите, что A-Frame — это всего лишь оболочка HTML вокруг объекта three.js. Также поймите, что из-за этого вы можете просто добавлять объекты A-Frame в DOM, как и все остальное. Чувствую себя немного глупо, потому что ты должен был понять это некоторое время назад. Но также чувствовать себя прекрасно, потому что это делает вашу жизнь бесконечно проще.

Шаг 14. Используйте половину функциональности вашего приложения, включая создание пользователя, получение всех существующих пользователей для нового пользователя и добавление нового пользователя в DOM всех остальных. Застрять на том, как обновить позицию каждого пользователя в представлении всех остальных.

Шаг 15: Поговорите с одним из основных участников A-Frame. Он рекомендует попробовать использовать встроенный компонент tick, который подключается к собственному циклу рендеринга браузера. Попытайтесь реализовать это. Что-то вроде успеха, за исключением того, что теперь довольно важная часть вашего приложения дает сбой: новый пользователь, который присоединяется, не может принимать уже существующих пользователей. Уже существующие пользователи вообще не отображаются в DOM нового пользователя. Решите закончить ночь и ложитесь спать.

Шаг 16: Проснувшись на следующее утро, проведите некоторое время в приюте, гуляя и играя с собаками. Потому что собаки делают все лучше.

Шаг 17. Продолжайте пытаться выяснить, что происходит не так и как это исправить. Потерпеть поражение. Время от времени общайтесь с ранее упомянутым основным участником, который путешествует и находится в самолетах, может говорить очень скупо и не может внимательно изучить ваш код. Не можете прийти к каким-либо осмысленным выводам.

Шаг 18: Обратитесь к своему товарищу, который разбирается в сокетах, потому что вы подозреваете, что это может иметь больше отношения к сокетам, чем к A-Frame. Он говорит, дайте ему несколько часов.

Шаг 19: Ешьте, потому что уже 14:00, а вы еще не ели. Исследование WebRTC.

Шаг 20: Встретьтесь со своим товарищем. Делайте МНОГО отладки, постепенно приближаясь к проблеме. Обнаружьте, что проблема заключалась в том, что объекты пытались отправить обновления новым объектам до того, как новые объекты смогли загрузиться в DOM нового пользователя.

Шаг 21: Реализуйте несколько окольный и, возможно, неидеальный способ исправить это, в том числе создайте переменную, которая переключается на true после того, как новый пользователь получит существующих пользователей, и посылайте несколько бессмысленных событий сокета туда и обратно между клиентом и сервер. В процессе в конечном итоге обновляйте позицию пользователя дважды для каждого цикла рендеринга, что означает, что новый пользователь испытывает какие-то странные судорожные движения.

Шаг 22: Узнай от этого парня, что встроенные элементы управления WASD в A-Frame могут фактически не обновлять положение. Возможно, вам придется либо программно временно отключить их (на очень короткий период времени), чтобы положение было обновлено, а затем снова включить после обновления положения, либо просто создать свои собственные элементы управления WASD.

Шаг 23: Отправляйтесь за продуктами. Ждать вечной очереди, потому что все ходят за продуктами в воскресенье вечером, а вы так и не научились не ходить в это время.

Шаг 24: Исправьте проблему с двойным обновлением позиции. Предварительно попробуйте просто обновить позиции пользователя с включенными обычными встроенными элементами управления WASD. ПОНИМАЙТЕ, ЧТО ЭТО РАБОТАЕТ, И ВАМ НЕ ОБЯЗАТЕЛЬНО ПРОВЕРЯТЬ СВОИ WASD CONTROL!!!!!!!! Успешно транслировать позицию каждого пользователя всем остальным пользователям с помощью слегка хакерского цикла setInterval и более бессмысленных событий сокета туда и обратно.

Шаг 25: Добавьте отслеживание вращения. Потратьте пару часов, чтобы ваша сцена выглядела красивой с деревьями и горами. Создайте очень простое слайд-шоу, чтобы начать презентацию на следующий день.

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

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

  1. Экспериментировать весело. Изучать новые технологии весело. Но, возможно, когда у вас есть всего пять дней на реализацию проекта, вам следует использовать что-то выше версии 0.4.0.
  2. ВР это тяжело. На самом деле никто не знает, что они делают. Разработка на платформе, выпущенной месяц назад, значительно усложняет задачу.
  3. Самое главное, прежде чем приступить к внедрению новой технологии, уясните, какие абстракции она создает. Я потратил гораздо больше времени на борьбу с A-Frame, чем на работу с ним, потому что не понимал ни одной из абстракций, которые он использует.

В соответствии с темпом жизни в Fullstack сегодня мы представили наши проекты Stackathon и сразу же приступили к нашему последнему проекту Capstone. Я нервничал (и нервничаю до сих пор) по поводу еще одного VR-проекта, потому что этот отнял у меня немало сил, и к концу я немного разочаровался в VR. Тем не менее, мои товарищи по команде были в восторге от того, что я смог развить то, что я сделал, и превратить это в полноценную вещь (и, несмотря на мое истощение и разочарование, я все еще был в восторге от этого) — так что это происходит! Пожелай нам удачи; он нам обязательно понадобится. Я с нетерпением жду приключения, в которое мы собираемся отправиться!

GitHub Repo для моего проекта здесь: ссылка

Живая демонстрация моего проекта здесь: ссылка

(Демонстрация, вероятно, будет более эффективной, если вы откроете два окна в режиме инкогнито или наймете друга, чтобы он работал одновременно с вами. Или, что еще лучше, если один человек использует устройство с поддержкой WebVR, а другой — рабочий стол. !)

Первоначально опубликовано на сайте bethqiang.com, где я пишу о том, каково быть студентом иммерсивного буткемпа, чему мы научились, и о моем личном путешествии в мир кода.