Геометрия и справочные пространства в WebXR

На базовом уровне, рендеринг сцен для WebXR представления в контекстах дополненной или виртуальной реальности выполняется с использованием WebGL, поэтому оба API используют значительную часть одного и того же языка проектирования. Однако, чтобы предоставить возможность представлять сцены в истинном 3D с помощью шлемов XR и подобного оборудования, WebXR имеет дополнительные концепции, которые необходимо понять.

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

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

Хотя мы рассмотрим здесь необходимые математические операции, используемые для вычисления позиций, ориентаций и перемещения объектов в виртуальном пространстве — плюс необходимость интегрировать в микс человеческого наблюдателя сцены — исчерпывающее введение в геометрию и использование матриц и векторов для управления 3D представлениями сцены выходит за рамки возможностей данной статьи. Вы можете узнать больше об отдельных операциях в Матричная математика для веб.

Прежде чем обсуждать детали геометрии 3D пространства, используемого WebXR, полезно сначала понять единицы измерения, применяемые к 3D миру.

Длины и расстояния

WebGL измеряет все расстояния и длины в метрах. WebXR наследует этот стандарт, а также тот факт, что мир представляет собой куб шириной два метра, высотой два метра и глубиной два метра. Каждая из трех осей имеет минимальное значение -1,0 и максимальное 1,0, а центр куба расположен в (0, 0, 0).

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

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

Углы

Углы задаются с использованием радиан. Для преобразования градусов в радианы умножьте значение в градусах на π/180. Следующий фрагмент кода демонстрирует две простые функции, degreesToRadians() и radiansToDegrees(), которые преобразуют значения между этими единицами измерения углов.

const RADIANS_PER_DEGREE = Math.PI / 180.0;

let degreesToRadians = (deg) => deg * RADIANS_PER_DEGREE;
let radiansToDegrees = (rad) => rad / RADIANS_PER_DEGREE;

Времена и продолжительности

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

Время в первую очередь используется для определения прошедшего времени с момента отрисовки предыдущей кадровой анимации сцены. Как таковое, время, как правило, соответствует частоте обновления экрана или какой-либо его доле, если частота кадров должна быть ограничена из-за проблем с производительностью. Это означает, что кадр обычно будет рендериться с интервалами в 1/60 секунды, предполагая частоту кадров 60 FPS. Выполнив вычисления, мы обнаружим, что это означает, что каждый кадр предположительно должен рендериться с интервалами в 16,6667 миллисекунд.

Мы предлагаем руководство по матричной математике в отношении 3D геометрии, включая то, как матрицы используются для трех основных преобразований, которые необходимо выполнить при рендеринге 3D сцен:

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

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

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

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

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

В WebXR фундаментальное понятие пространства — то есть координатного пространства, в котором происходит сцена — представлено экземпляром XRSpace. Пространство используется для определения относительных позиций и перемещения объектов и других сущностей (таких как источники света и камеры) в среде пользователя.

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

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

Направление системы координат можно увидеть на следующей диаграмме:

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

Положение точки в пространстве относительно начала определяется по определению ее расстояния вдоль каждой из трех пространственных осей, показанных на диаграмме выше. Начало пространства — это точка (0, 0, 0), расположенная в центре пространства и в нулевой позиции вдоль каждой оси. В частности, в начальных условиях, с умолчательным направлением взгляда пользователя в пространстве:

• Ось x простирается горизонтально слева направо от начала, при этом координата x +1,0 находится на правом краю мира. Отрицательные значения x простираются влево от начала, достигая значения -1,0 на левом краю пространства.
• Ось y положительна, простираясь вверх от начала к верхней части экрана, достигая значения +1,0 в верхней части мирового пространства. Значения y, меньшие 0, находятся ниже начала, простираясь к нижней части экрана и достигая -1,0 в нижней части пространства мира.
• Ось z простирается от начала наружу от экрана, достигая значения +1,0 в ближайшей точке к пользователю в этом направлении. Отрицательные значения z простираются дальше от пользователя внутрь экрана, при этом самая удаленная точка мира имеет z -1,0.

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

Однако для полезного применения пространственного отслеживания и геометрии сцены вам нужно сопоставить воспринятое устройство XR с системой координат пространства. Именно здесь появляются справочные пространства.

Из-за разнообразия доступного XR-оборудования, представленного в различных форматах многими разработчиками, непрактично и не масштабируемо ожидать, что разработчики будут напрямую взаимодействовать с используемой технологией отслеживания. Вместо этого API WebXR Device API разработан для того, чтобы разработчики планировали опыт пользователей и запрашивали соответствующее пространство отсчета, которое наилучшим образом отражает эти потребности. Это делается путем запроса у пользовательского агента XRReferenceSpace, соответствующего этим потребностям.

Объект XRReferenceSpace служит средством адаптации одной системы координат к другой. После надевания шлема, представьте виртуальный мир вокруг вас, имеющий систему координат, в которой ваше положение равно (0, 0, 0) — то есть вы находитесь в центре всего. Разве это не мотивирует? Направление вперед, прямо перед шлемом, — это ось -Z, а ось +Z — позади вас. Ось X положительна справа и отрицательна слева. Ось Y отрицательна, когда вы двигаетесь вниз, и положительна, когда вы поднимаетесь. Это указывает на положение шлема в пространстве в начале использования XR-системы, при этом начало координат (0, 0, 0) расположено в области переносицы. Это пространство называется пространством мира.

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

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

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

Независимо от типа пространства отсчета, его тип является XRReferenceSpace или является типом, полученным от XRReferenceSpace. Доступные в настоящее время типы пространств отсчета показаны ниже.

bounded-floor

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

local

Пространство отслеживания XRReferenceSpace, у которого исходная точка находится вблизи положения зрителя в момент создания сеанса. Точное положение зависит от базовой платформы и реализации. От пользователя не ожидается перемещения далеко от начальной позиции, а отслеживание оптимизировано для этого случая. Для устройств с отслеживанием шести степеней свободы (6DoF) пространство отсчета local пытается поддерживать стабильность начала координат относительно окружающей среды.

local-floor

XRReferenceSpace подобен типу local, за исключением того, что начальная позиция размещается в безопасном месте для стояния зрителя, где значение оси y равно 0 на уровне пола. Если уровень пола неизвестен, пользовательский агент оценит уровень пола. Если оцененный уровень пола не равен нулю, ожидается, что браузер округлит его таким образом, чтобы избежать отслеживания (вероятно, до ближайшего сантиметра).

unbounded

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

viewer

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

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

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

Однако независимо от типа используемого пространства отсчета, вы можете использовать одни и те же функции для преобразования координат из пространства в родительское пространство.

Сразу скажем, что самый простой шаг в процессе определения типа пространства отсчета: пространства отсчета, которые вы, скорее всего, будете использовать, это local, local-floor, unbounded, или bounded-floor.

Пространства отсчета на уровне пола

Пространства отсчета с -floor в их названиях работают так же, как и соответствующие пространства без учета уровня пола, за исключением того, что они пытаются автоматически обеспечить, чтобы зритель размещался в безопасном месте на уровне или вблизи (но всегда выше) уровня земли. Это плоскость, на которой координата y всегда равна 0, если не определен другой пол. Эти типы пространств не являются жизнеспособными, если комнаты имеют неровный пол или пол, высота которого над уровнем земли изменяется, так как они не поддерживают изменение вертикального положения аватара.

Основные типы пространств отсчета

Пространство отсчета viewer соответствует положению зрителя в пространстве; оно используется XRViewerPose, возвращаемым методом XRFrame getViewerPose(). В иных случаях оно обычно не используется напрямую. Единственное реальное исключение состоит в том, что вы, скорее всего, будете использовать пространство отсчета viewer при выполнении XR-сцены встраиваемо в веб-контент.

Пространство отсчета local обычно используется для описания относительно небольшой области, например, одной комнаты. Оно не только всегда доступно при использовании интерактивного режима сеанса (immersive-vr или immersive-ar), но всегда включено в качестве необязательной функции при запросе нового сеанса; таким образом, каждый сеанс, созданный navigator.xr.requestSession(), поддерживает тип пространства отсчета local.

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

Тип пространства отсчета bounded-floor не имеет соответствующего типа, который не привязан к полу. Если оборудование XR пользователя позволяет ему перемещаться по своему реальному пространству, и вы можете это сделать, может быть полезно использовать пространство отсчета bounded-floor, которое позволяет вам конкретно определить границы области, в которой проход разрешен и безопасен. См. статью Использование ограниченных пространств отсчета, чтобы узнать больше об использовании ограниченных пространств отсчета.

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

Пространство самого верхнего уровня — то, которое получается при вызове метода XRSession requestReferenceSpace() — описывает систему координат, используемую для всего мирового пространства. Всё фундаментально связано с этой системой координат, которая представляет собой взаимоотношения между положением оборудования пользователя и виртуальным миром.

Хотя вы можете использовать WebXR для всего, от дополнения мира аннотациями до воспроизведения видео в 360° и научных симуляций до систем обучения виртуальной реальности или чего угодно еще, что вы можете себе представить, давайте рассмотрим 3D-видеоигру в качестве примера типичного приложения WebXR. Представьте модель аватара игрока, стоящего в пространстве игрового мира. Вы позиционируете этого аватара относительно мирового пространства, используя систему координат, определённую эталонным пространством мира.

Чтобы переместить игрока в новое положение, вы могли бы перезаписать все его координаты или вручную применять преобразование каждый раз, когда он перемещается, но есть более простой способ, благодаря пространствам ссылок и их способности создаваться относительно друг друга. Создайте объект XRRigidTransform, представляющий новое положение и ориентацию аватара игрока, затем создайте новое пространство ссылок, чтобы представить точку зрения аватара в новом положении, используя метод XRReferenceSpace getOffsetReferenceSpace(). Это особенно полезно при реализации поддержки использования устройств, не поддерживающих XR, таких как клавиатура или мышь, для перемещения аватара игрока по миру.

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

В случае с примером игрового аватара редко бывает, чтобы аватар (или любое другое движущееся существо или машина) был простым объектом, скользящим по миру. Обычно у них есть дополнительная форма, а также внутреннее движение, такое как перемещение ног, рук, которые машут при ходьбе, головы, которая поворачивается или подпрыгивает, оружия, которое перемещается и так далее. Оживите их с помощью стандартных WebGL-техник и матрицы позиционирования или XRRigidTransform для смещения объектов в правильное положение относительно эффективного начала отсчёта.

Некоторые устройства XR не могут поддерживать определённый опыт, несмотря на усилия API по компенсации отсутствующих возможностей. Например, нет способа заставить такое базовое устройство, как GearVR, работать в приложении, которое требует поддержки перемещения пользователя по среде путём отслеживания его реальных движений.

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

Возникающие проблемы совместимости могут быть столь же фундаментальными, как невозможность поддержки immersive-ar режима (сессий дополненной реальности) на гарнитуре только для VR, или могут включать запрос одного или нескольких необходимых параметров, которые не могут быть выполнены при попытке создания сессии XR.

Сессии XR создаются с помощью метода navigator.xr.requestSession(). Одним из его необязательных параметров является объект, который вы можете использовать для указания необходимых и/или необязательных функций, которые сессия должна (или должна, в идеале, поддерживать). В настоящее время единственными поддерживаемыми параметрами являются строки, идентифицирующие стандартные пространства ссылок. С помощью этих строк вы можете убедиться, что перед запуском вашего кода у вас есть доступ к сессии WebXR, которая может поддерживать требуемый или предпочтительный тип пространства ссылок.

Вся пространственная (положение, ориентация и движение) информация, обмениваемая между вашим приложением и WebXR API, выражается относительно определенного пространства в момент отрисовки кадра. Любое дальнейшее управление положением и ориентацией осуществляется между вами и WebGL, хотя вы используете смещение от начала отсчёта пространства ссылок, чтобы правильно разместить объекты в 3D-мире.

Когда пришло время отрисовать кадр анимации, функция обратного вызова, указанная при вызове метода XRSession объекта сессии WebXR requestAnimationFrame(), вызывается. Обратный вызов получает в качестве одного из своих параметров временную метку, указывающую время, в которое происходит кадр, и должен выполнить всю отрисовку для соответствующего кадра анимации.

Поскольку обратный вызов многократно вызывается со всё возрастающими значениями времени, обратный вызов генерирует последовательность кадров, которые отображаются с помощью аппаратного обеспечения XR, тем самым показывая пользователю 3D-сцену.

Подробнее об анимационном процессе вы можете узнать в статье Отрисовка и обратный вызов анимации кадра WebXR.

Пример и более подробное, на уровне кода, объяснение того, как разместить, ориентировать и перемещать объекты в виртуальном пространстве, см. в статье Движение, ориентация и движение.

• WebXR API устройств
• WebGL: 2D и 3D отрисовка для веб
• Матричная математика для веб