Facebook совсем недавно сделал ReactVR открытым исходным кодом. Для тех, кто не слышал о ReactVR, это библиотека для создания VR-приложений в Интернете для просмотра в веб-браузерах.
Почему именно ReactVR?
Доступ к виртуальной реальности прямо в браузере дает множество преимуществ. Пользователям больше не нужно загружать установщик или плагин или заходить в магазин приложений. Разработчикам также удобно не проходить процесс проверки в магазине приложений, а также легче разрабатывать кроссплатформенный контент.
До сих пор мы использовали Unity для разработки наших VR-проектов. Однако, хотя можно экспортировать проекты в WebVR, полученная сборка далеко не идеальна. Кодирование напрямую для WebVR означает, что вы можете отправлять гораздо меньшие пакеты, оптимизированные для браузера.
Уже существует ряд библиотек и фреймворков для разработки содержимого WebVR (например, A-Frame), но так же, как React изменил ландшафт фронтенд-разработки, React VR принципиально отличается. Если вы посмотрите код большинства 3D-проектов, выполненных с помощью Three.js, вы, скорее всего, столкнетесь с очень императивным стилем программирования. Поскольку мы используем React в течение последних нескольких лет, мы менее чем счастливы вернуться к этому стилю. ReactVR позволит нам разрабатывать приложения VR с использованием того же декларативного, более функционального подхода, который упрощает разработку динамических приложений.
Физика
Когда я впервые экспериментировал с ReactVR, меня больше всего беспокоило то, как реализовать физику (для таких эффектов, как гравитация и столкновения). Unity делает это довольно легко с помощью Rigidbody и т. Д., Которые доступны непосредственно в графическом интерфейсе (так же просто, как и галочки). ReactVR не имеет встроенных физических возможностей. Итак, мы искали решение на javascript.
Физический движок: Cannon.js
Для Javascript существует ряд движков 3D-физики. Мы выбрали Cannon.js, потому что он казался более зрелым, чем остальные, но Oimo.js тоже выглядит неплохо. С помощью физического движка мы могли рассчитать, как различные объекты перемещаются во времени, учитывая их форму, движение и массу, которые абстрагируются как объекты Body. Эти объекты Body взаимодействуют в общем мире.
Например, давайте создадим физическое описание мяча:
Интеграция в проект ReactVR
Идея состоит в том, чтобы использовать ReactVR для рендеринга, а Cannon.js отвечает за расчет позиции во времени. Сначала нам нужно создать единый Мир, в котором все эти тела будут взаимодействовать. Затем мы связываем Body с каждым объектом в нашей сцене ReactVR таким образом, чтобы их форма и положение совпадали.
(Имейте в виду, что существует несоответствие единиц измерения в ReactVR и Cannon.js в 1:10 раз)
Затем мы создаем цикл анимации с помощью requestAnimationFrame. Цикл должен сначала вызвать `world.step ()`, чтобы имитировать течение времени в физическом движке, получить положение объектов и изменить положение объектов ReactVR с помощью `setState ()`.
Мы добавили немного силы тяжести, чтобы мяч упал. Полученный код выглядит так:
Есть много вещей, не включенных в приведенный выше код, которые необходимо будет обработать, например, удаление твердого тела на componentWillUnmount. Мы расскажем об этом в следующих статьях.
Что мы сделали до сих пор
Мы работали над нашей новой идеей Ken VR, платформой виртуальной реальности для изучения науки. Наш первый прототип - это Atom Builder, в котором вы можете создавать элементы, добавляя / удаляя протоны, нейтроны и электроны, а также выбирая элемент в периодической таблице. Мы экспериментировали с ReactVR в течение последних нескольких дней, чтобы воспроизвести тот же опыт в Интернете.
Следующий
Мы работали над тем, чтобы контроллеры Vive работали в ReactVR! Мы расскажем, как это сделать, в следующей статье. Быть в курсе.