Дополненная реальность для Интернета

Joe Medley

В Chrome 67 мы анонсировали API устройств WebXR как для дополненной реальности (AR), так и для виртуальной реальности (VR), хотя были включены только функции VR. VR — это опыт, основанный исключительно на том, что находится в вычислительном устройстве. С другой стороны, AR позволяет визуализировать виртуальные объекты в реальном мире. Чтобы разрешить размещение и отслеживание этих объектов, мы только что добавили API проверки нажатия WebXR в Chrome Canary — новый метод, который помогает иммерсивному веб-коду размещать объекты в реальном мире.

Где я могу его получить?

Этот API в ближайшем будущем останется на Канарских островах. Нам нужен длительный период тестирования, потому что это совершенно новое предложение API, и мы хотим убедиться, что оно надежное и подходит разработчикам.

Помимо Chrome Canary вам также понадобится:

• Совместимый смартфон под управлением Android O или более поздней версии.
• Чтобы установить ARCore .
• Два флага Chrome (chrome://flags): API WebXRDevice (#webxr) и проверка нажатия WebXR (#webxr-hit-test).

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

• Чакмул
• Иммерсивный веб- пример
• Кодлаб

Это просто Интернет

В этом году на Google IO мы продемонстрировали дополненную реальность с помощью ранней сборки Chrome. В течение этих трех дней я неоднократно говорил как разработчикам, так и неразработчикам то, что мне хотелось бы включить в свою иммерсивную веб-статью : «Это просто Интернет».

«Какое расширение Chrome мне нужно установить?» «Никакого расширения. Это просто Интернет».

«Нужен ли мне специальный браузер?» «Это всего лишь Интернет».

«Какое приложение мне нужно установить?» «Специального приложения нет. Это просто Интернет».

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

Говоря об IO, если вы хотите узнать больше о иммерсивной сети в целом, о том, где она находится и куда она движется, посмотрите это видео .

Чем это полезно?

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

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

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

Одна вещь, которую не показывают демо и видео, — это то, как AR может передать размер реального объекта. В этом видео показана созданная нами обучающая демонстрация под названием Chacmool . Сопутствующая статья подробно описывает эту демонстрацию. Важным моментом в этом обсуждении является то, что когда вы помещаете статую Чакмула в дополненную реальность, вы видите ее размер так, как если бы она действительно находилась с вами в комнате.

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

Забросы лучей, тесты на попадание и прицелы

Ключевая проблема, которую необходимо решить при внедрении дополненной реальности, — это размещение объектов в реальном мире. Метод для этого называется рейкастингом . Приведение лучей означает вычисление пересечения луча-указателя и поверхности в реальном мире. Это пересечение называется попаданием , а определение того, произошло ли попадание, представляет собой проверку попадания .

Сейчас подходящее время, чтобы опробовать новый пример кода в Chrome Canary. Прежде чем что-либо делать, дважды проверьте, включены ли у вас правильные флаги . Теперь загрузите образец и нажмите «Начать AR».

Обратите внимание на несколько вещей. Во-первых, измеритель скорости, который вы можете узнать по другим иммерсивным образцам, показывает 30 кадров в секунду вместо 60. Это скорость, с которой веб-страница получает изображения с камеры.

Демо-версия AR Hit Test

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

Изображение, которое перемещается вместе с вашим устройством и пытается привязаться к поверхности, называется прицельной сеткой . Сетка — это временное изображение, которое помогает поместить объект в дополненную реальность. В этой демонстрации прицельная марка представляет собой копию размещаемого изображения. Но это не обязательно. Например, в демо-версии Chacmool это прямоугольная коробка примерно той же формы, что и основание размещаемого объекта.

Вплоть до кода

Демо-версия Chacmool показывает, как может выглядеть AR в рабочем приложении. К счастью, в репозитории образцов WebXR есть гораздо более простая демонстрация. Мой пример кода взят из демонстрации AR Hit Test в этом репозитории. К вашему сведению, мне нравится упрощать примеры кода, чтобы вы могли понять, что происходит.

Основы входа в сеанс AR и запуска цикла рендеринга для AR такие же, как и для VR. Вы можете прочитать мою предыдущую статью, если вы незнакомы. Если быть более конкретным, вход и запуск сеанса AR выглядит почти так же, как вход в сеанс волшебного окна VR . Как и в случае с волшебным окном, тип сеанса должен быть неиммерсивным, а тип рамки ссылки должен быть 'eye-level' .

Новый API

Теперь я покажу вам, как использовать новый API. Напомним, что в AR прицел пытается найти поверхность перед размещением предмета. Это делается с помощью теста на попадание. Чтобы выполнить проверку попадания, вызовите XRSession.requestHitTest() . Это выглядит так:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

Три аргумента этого метода представляют собой преобразование лучей. Приведение луча определяется двумя точками на луче ( origin и direction ) и местом расчета этих точек ( frameOfReference ). Начало координат и направление являются трехмерными векторами. Независимо от того, какое значение вы отправите, они будут нормализованы (конвертированы) в длину 1.

Перемещение сетки

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

Начните с обратного вызова requestAnimationFrame() . Как и в случае с виртуальной реальностью, вам нужна сессия и поза.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Определив сеанс и позу, определите, куда падает луч. В примере кода используется математическая библиотека gl-matrix . Но gl-матрица не является обязательным требованием. Важно знать, что вы с его помощью рассчитываете, и что это зависит от положения устройства. Получите положение устройства из XRPose.poseModalMatrix . Имея в руках приведение лучей, вызовите requestHitTest() .

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

Хотя в примере теста попадания это не так очевидно, вам все равно придется пройтись по представлениям, чтобы нарисовать сцену. Рисование выполняется с использованием API WebGL. Вы можете сделать это, если вы действительно амбициозны. Тем не менее, мы рекомендуем использовать фреймворк. В иммерсивных веб-примерах используется созданный специально для демонстраций вариант под названием Cottontail , а Three.js поддерживает WebXR с мая.

Размещение объекта

Объект помещается в AR, когда пользователь касается экрана. Для этого вы используете событие select . На этом этапе важно знать, где его разместить. Поскольку движущаяся сетка дает вам постоянный источник проверок на попадание, самый простой способ разместить объект — нарисовать его в том месте, где находилась сетка во время последней проверки на попадание. Если вам нужно, скажем, у вас есть законная причина не показывать прицельную марку, вы можете вызвать requestHitTest() в событии выбора , как показано в примере .

Заключение

Лучший способ разобраться в этом — просмотреть пример кода или попробовать работу с кодовой лабораторией . Надеюсь, я дал вам достаточно информации, чтобы понять и то, и другое.

Мы еще далеко не закончили создание иммерсивных веб-API. Мы будем публиковать здесь новые статьи по мере продвижения.