Давайте создадим ваш первый проект WebAR с помощью JavaScript

Моя красота

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

WebAR, я выбираю тебя

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

К счастью, браузеры и библиотеки 3D-моделей теперь очень удобны и производительны, так что мы можем гарантировать достойный результат без использования новых API-интерфейсов WebXR.

Заострите наши инструменты

Вот мои рабочие инструменты:

iPhone 12 Pro с последней версией iOS.
На моем iPhone должны быть установлены последние версии приложений Safari и Chrome.
THREE.js r139 — последняя версия THREE.js на момент написания этой статьи.
Сервер Node.js с HTTPS.

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

Настройка проекта

Для любого веб-приложения нам понадобится сервер и шаблон HTML по умолчанию. Итак, давайте создадим server.js и index.htmlсоответственно.

Также мы создаем простой style.css в папке css.

Теперь в своем терминале введите npm start и откройте браузер на своем телефоне с помощью https://{YOUR IP ADDRESS}:3000, помните, что у нас включен SSL, поэтому мы должны использовать https.

Sketchfab — найди себе модель

Большое спасибо Nyilonelycompany, которая предоставляет потрясающие модели на Sketchfab. Для своего проекта я выбрал модель Бенгальский кот и сохранил загруженные файлы в папку models/source.

На Sketchfab вы можете бесплатно найти множество качественных 3D-моделей. Однако, пожалуйста, не забудьте указать авторов и имейте в виду, что ни один из них не предназначен для коммерческого использования.

Настроить сцену

Есть четыре основных переменных для инициализации 3D-мира: сцена, камера, свет и средство визуализации. Итак, давайте создадим скрипт в index.html.

axesHelper является необязательным. Если вы новичок в ThreeJS и его мире, вам будет очень удобно лучше понять, как представлены модели.

Теперь мы вызываем функцию инициализации при загрузке окна. Поместите следующее внутри ‹script›. Здесь я определяю еще две глобальные переменные: mixer и target.

Первая демонстрация

Введите npm start и откройте https://{YOUR IP}:{YOUR PORT} в мобильном браузере. Если все в порядке, нажмите кнопку Start AR вверху слева. Вы увидите всплывающую модель нашей кошки! Я изменил размер моего снимка, но вы можете увидеть свой на своем телефоне.

Доступ к камере

Одной из важнейших особенностей любого проекта дополненной реальности является сочетание виртуального и реального мира. Поэтому нам нужно будет получить доступ к камере и включить ее.

Я решил использовать webcam-easy, чтобы включить камеру. Давайте включим его ссылку CDN и добавим другие переменные. Обновленный код будет выглядеть так:

Давайте снова запустим наш сервер и включим камеру.

Настоящая забавная часть

Ура! Мы можем видеть, как наша модель движется в представлении AR. Но остался еще один момент — модель закреплена в фиксированном положении, но на самом деле модели должны двигаться/вращаться/масштабироваться в соответствии с моей позицией.

Для этого нам нужно будет получить данные с оборудования. Современные смартфоны имеют много сложного оборудования для сбора физических данных. Для этого проекта мне понадобятся данные гироскопа.

Следующее кодирование требует базового вычисления матрицы и понимания того, как работает гироскоп. Давайте перейдем к коду.

Получить доступ к гироскопу

Первым делом нужно попросить разрешения на использование гироскопа. Нам нужно использовать DeviceMotionEvent API, и он доступен, только если мы включим SSL. Вот почему я упомянул, что необходим SSL-сервер.

Если вы не знакомы с ориентацией устройства, настоятельно рекомендуется использовать Chrome DevTools, чтобы поиграть с ней. Вот ссылка".

Просто помните, что я работаю в портретном режиме, и угол по умолчанию равен 0, 90, 0 для альфы, беты и гаммы соответственно. Для получения более подробной информации перейдите по этой ссылке.

Манипуляция углами с матрицей вращения

Следите за handleOrientation и createRotationMatrix.

Поскольку гироскоп возвращает угол Эйлера, который является изменением углов, а не тем, насколько мы фактически вращаемся вдоль определенной оси. Итак, я сначала конвертирую их в матрицу вращения, и с помощью тригонометрических функций мы можем получить накапливающиеся значения. Эти значения точно определяют, насколько мы вращаемся.

Я написал еще одну статью, рассказывающую об этом механизме. Настоятельно рекомендуется ознакомиться.

Поверните мою модель с углами

Давайте сосредоточимся на totalRightAngularMovement и totalTopAngularMovement. Это то, насколько моя камера вращается по осям y и x, и они получены из значений beta и gamma соответственно.

Кроме того, я зажимаю эти угловые значения, чтобы получить более стабильный результат. Давайте посмотрим, что происходит в функции animate.

Теперь мы знаем, что totalRightAngularMovement — это то, на сколько градусов мы поворачиваемся. Я зажимаю значение, определяя диапазон.

Окончательный результат

Будущая работа

Предварительный результат может успешно продемонстрировать мои мысли. Тем не менее, есть много, чтобы желать лучшего.

Перемещение/масштабирование моей модели при перемещении камеры — для лучшего AR-проекта важно показать, как мы взаимодействуем с виртуальной моделью.
Обработка резкого смещения моделей — я думаю, это потому, что данные датчиков приносят шумы и вызывают нежелательное движение модели.
Используйте более стабильные источники данных — данные датчиков не являются надежными и всесторонними при разработке более деликатного проекта AR. Я думаю, что могу использовать другой источник данных, например GPS, для оптимизации своей реализации.

Заключительные слова

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

Спасибо! Удачного кодирования!