Путешествие в виртуальную реальность с React

Ух ты такие словечки - но работает

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

В праздничные дни я решил «поиграть в виртуальную реальность». Вот что произошло.

Рамка

A-Frame вышел совсем недавно, так что он был свеж в моей памяти и был моим первым набегом.

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

В дополнение к разметке A-Frame определяет, используете ли вы VR-совместимое устройство, и легко справляется с отслеживанием головы и изменениями презентации.

Использование HTML значительно снижает барьер для разработки виртуальной реальности, но в конечном итоге декларативный формат распадается, когда вы хотите что-то интерактивное. A-Frame прилагает усилия, чтобы помочь с этим (взгляните на этот пример взаимодействия), но у меня есть опыт втискивания интерактивной логики в декларативные форматы, и это редко заканчивается хорошо.

Интересным побочным эффектом использования HTML является то, что в вашем распоряжении есть все API-интерфейсы DOM, и вы можете свободно писать код взаимодействия на JavaScript. Но теперь вы вернулись к извечной проблеме написания веб-приложений таким образом, чтобы у нас не взорвалась голова. Я подумал: Разве мы это уже не решили?

A-Frame + React

Я был не единственным, кому пришла в голову эта идея (намекните на теплые пушинки). AFrame-React - довольно небольшая библиотека, которая позволяет создавать HTML-элементы A-Frame с помощью React.

Это работает, и мне стало легче работать с интерактивной логикой, но что-то меня настораживало.

Видите ли, A-Frame - это, по сути, абстракция разметки поверх Three.js (которая сама по себе является абстракцией поверх WebGL). Итак, используя AFrame-React, я использовал JavaScript для управления элементами HTML, которые контролировали… больше JavaScript. Связка обручей.

В сторону: элементы 3D DOM

A-Frame (и большинство веб-библиотек 3D) создают формы с текстурами, такими как изображения и цвета. Но я обнаружил, что делать эти формы текстурированными с использованием ванильных элементов DOM… интересно.

Все трехмерные вещи в браузере происходят внутри элемента холста, где браузер передает более низкоуровневые возможности рендеринга коду приложения. Невозможно взять элемент DOM, визуализированный за пределами холста, и сделать его первоклассным объектом внутри холста.

Но есть хитрость: вы можете синхронизировать свойства 3D-объекта внутри холста с преобразованием CSS элемента DOM за пределами холста. Эту статью связывают, когда вы хотите разобраться с этой концепцией, но из-за деталей реализации Three.js.

Я немного поработал, чтобы обычные элементы DOM React и A-Frame работали вместе. Но изменения, которые мне пришлось внести в A-Frame, в сочетании с моей бровью из-за прыжков с JS-to-HTML-to-JS сказали мне, что я должен придумать кое-что еще.

React-VR

Так что я сделал то злополучное дело, когда откатил свой собственный. Если вам 1) нужны возможности виртуальной реальности 2) все в порядке с примитивами ThreeJS 3) React API, тогда вам стоит проверить мой проект React-VR.

Это было не так уж и безумно в реализации. Большая часть тяжелой работы выполняется существующей библиотекой React-ThreeJS; Все, что я делал в моем проекте, - это добавление поддержки для настройки нескольких камер, необходимой для VR (код которой я взял из A-Frame).

Он не относится к NPM и, вероятно, не будет особо проработан в будущем, но этого было достаточно для меня, чтобы немного лучше почувствовать будущее VR (и себя) в Интернете.

Я не касался 3D или разработки игр с детства, и тот факт, что 3D-рендеринг работает, безумно впечатляет меня сейчас, чего я раньше не ценил.

Я не знаю, станет ли VR предметом в популярной культуре, но интересно думать о том, что могут сделать даже такие скромные веб-разработчики, как я - будь то использование A-Frame, React или подходящих инструментов, таких как Unreal и Unity.