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! Мы расскажем, как это сделать, в следующей статье. Быть в курсе.