XRView

Интерфейс XRView API устройства WebXR описывает один вид на XR-сцену для определённой кадра, предоставляя информацию об ориентации и положении точки обзора. Можно представить это как описание конкретного глаза или камеры и того, как она видит мир. 3D кадр будет включать два вида, по одному для каждого глаза, разделённые подходящим расстоянием, приближённым к расстоянию между глазами зрителя. Это позволяет двум видам, когда они отображаются изолированно в соответствующие глаза, моделировать 3D мир.

eye Только для чтения Экспериментально

Какой из двух глаз (left) или (right) этот XRView представляет перспективу. Это значение используется для того, чтобы убедиться, что любой контент, который предварительно рендерился для отображения в определённом глазу, распределяется или позиционируется правильно. Значение также может быть none, если XRView представляет моноскопические данные (например, 2D изображение, полноэкранный вид текста или крупный план чего-либо, что не требует 3D отображения).

isFirstPersonObserver Только для чтения Экспериментально

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

projectionMatrix Только для чтения Экспериментально

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

recommendedViewportScale Только для чтения Экспериментально

Рекомендуемое значение масштаба области просмотра, которое можно использовать для requestViewportScale(), если у пользователя есть такое предложение; null в противном случае.

transform Только для чтения Экспериментально

An XRRigidTransform, который описывает текущее положение и ориентацию точки обзора по отношению к XRReferenceSpace, указанному при вызове getViewerPose() в отрисовываемой XRFrame.

requestViewportScale() Только для чтения Экспериментально

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

При отрисовке сцены набор представлений, используемых для рендеринга сцены для зрителя на текущем кадре, получается путем вызова метода getViewerPose() объекта XRFrame для получения XRViewerPose, представляющего (по существу) положение головы зрителя. Свойство views этого объекта представляет собой список всех объектов XRView, представляющих точки обзора, которые можно использовать для построения сцены для представления пользователю.

Возможно, что XRView объекты представляют перекрывающиеся области, а также совершенно разные; в игре, например, могут быть представления для наблюдения за удалённым объектом с помощью камеры наблюдения или другого устройства. Другими словами, не предполагайте, что для данного зрителя будет ровно два представления; их может быть от одного (например, при рендеринге сцены в inline режиме) до нескольких (особенно если поле зрения очень велико). Также могут быть представления, представляющие наблюдателей, наблюдающих за действием, или другие точки обзора, не напрямую связанные с глазом игрока.

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

Все позиции и ориентации в представлениях для данного XRViewerPose задаются в пространстве ссылки, которое было передано XRFrame.getViewerPose(); это называется пространством ссылки зрителя. Свойство transform описывает положение и ориентацию глаза или камеры, представленной XRView, заданные в этом пространстве ссылки.

Чтобы отрисовать кадр, вы повторяете представления XRViewerPose, рендеря каждое из них в соответствующую область просмотра в XRWebGLLayer кадра. В настоящее время спецификация (и, следовательно, все текущие реализации WebXR) разработаны для отрисовки каждого XRView в одну XRWebGLLayer, которая затем отображается на XR-устройстве с половиной, используемой для левого глаза, и половиной — для правого. XRViewport каждого представления используется для позиционирования рендеринга в соответствующую половину слоя.

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

Для отображения всего, что видит пользователь, каждый кадр требует итерации по списку представлений, возвращаемому свойством views объекта XRViewerPose:

for (const view of pose.views) {
  const viewport = glLayer.getViewport(view);

  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  // Draw the scene; the eye being drawn is identified
  // by view.eye.
}

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

Матрица модели-вида

Матрица модели-вида — это матрица, которая определяет положение объекта относительно пространства, в котором он находится: Если objectMatrix — преобразование, применяемое к объекту для обеспечения его основного положения и поворота, то матрицу модели-вида можно вычислить, умножив матрицу объекта на обратную матрицу преобразования вида, как показано здесь:

mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, objectMatrix);

Нормальная матрица

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

Она вычисляется путем инвертирования и последующего транспонирования матрицы модели-вида:

mat4.invert(normalMatrix, modelViewMatrix);
mat4.transpose(normalMatrix, normalMatrix);

Для программирования перемещения и/или поворота (часто называемого телепортацией) объекта, необходимо создать новое пространство отсчета для этого объекта, которое применяет преобразование, охватывающее желаемые изменения. Функция createTeleportTransform() возвращает преобразование, необходимое для перемещения и поворота объекта, чье текущее положение описывается пространством отсчета refSpace, в новое положение и ориентацию, которые вычисляются с использованием ранее записанных данных ввода мыши и клавиатуры, которые сгенерировали смещения для крен, тангаж и положения по всем трём осям.

function applyMouseMovement(refSpace) {
  if (
    !mouseYaw &&
    !mousePitch &&
    !axialDistance &&
    !transverseDistance &&
    !verticalDistance
  ) {
    return refSpace;
  }

  // Compute the quaternion used to rotate the image based
  // on the pitch and yaw.

  quat.identity(inverseOrientation);
  quat.rotateX(inverseOrientation, inverseOrientation, -mousePitch);
  quat.rotateY(inverseOrientation, inverseOrientation, -mouseYaw);

  // Compute the true "up" vector for our object.

  vec3.cross(vecX, vecY, cubeOrientation);
  vec3.cross(vecY, cubeOrientation, vecX);

  // Now compute the transform that teleports the object to the
  // specified point and save a copy of it to display to the user
  // later; otherwise we probably wouldn't need to save mouseMatrix
  // at all.

  let newTransform = new XRRigidTransform(
    { x: transverseDistance, y: verticalDistance, z: axialDistance },
    {
      x: inverseOrientation[0],
      y: inverseOrientation[1],
      z: inverseOrientation[2],
      w: inverseOrientation[3],
    },
  );
  mat4.copy(mouseMatrix, newTransform.matrix);

  // Create a new reference space that transforms the object to the new
  // position and orientation, returning the new reference space.

  return refSpace.getOffsetReferenceSpace(newTransform);
}

Этот код разделен на четыре части. В первой части вычисляется кватернион inverseOrientation. Он представляет вращение объекта, учитывая значения mousePitch (поворот вокруг оси X пространства отсчета объекта) и mouseYaw (поворот вокруг оси Y объекта).

Во второй части вычисляется вектор "вверх" для объекта. Этот вектор указывает направление "вверх" в сцене в целом, но в пространстве отсчета объекта.

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

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

Для использования этой функции мы передаём возвращённое пространство отсчета в XRFrame.getPose() или getViewerPose(), в зависимости от ваших потребностей. Возвращённый XRPose затем будет использоваться для рендеринга сцены для текущего кадра.

Более подробный и полный пример можно найти в нашей статье Движение, ориентация и перемещение.