XRReferenceSpace: метод getOffsetReferenceSpace()

Метод getOffsetReferenceSpace() интерфейса XRReferenceSpace возвращает новый объект пространства ссылок, описывающий относительную разницу в положении объекта, на котором вызывается метод, и заданной точки в 3D пространстве. Объект, возвращаемый getOffsetReferenceSpace(), является XRReferenceSpace, если вызывается на XRReferenceSpace, или XRBoundedReferenceSpace, если вызывается на объекте этого типа.

Другими словами, когда у вас есть объект в 3D пространстве и нужно расположить другой объект относительно него, вы можете вызвать getOffsetReferenceSpace(), передав в него положение и ориентацию, которые должен иметь второй объект относительно положения и ориентации объекта, на котором вы вызываете getOffsetReferenceSpace().

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

originOffset

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

Новый объект XRReferenceSpace, описывающий пространство ссылок с тем же исходным положением, что и пространство ссылок, на котором был вызван метод, но со смещением начала, указывающим расстояние от объекта до точки, заданной originOffset.

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

Ниже приведены примеры использования getOffsetReferenceSpace().

При первом создании сцены вам может потребоваться установить положение пользователя в 3D мире. Вы можете сделать это, используя getOffsetReferenceSpace().

xrSession.requestReferenceSpace("local").then((refSpace) => {
  xrReferenceSpace = refSpace;
  xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(
    new XRRigidTransform(startPosition, { x: 0, y: 0, z: 1.0, w: 1.0 }),
  );
  xrSession.requestAnimationFrame(drawFrame);
});

В этом коде мы получаем локальное пространство ссылок, затем используем getOffsetReferenceSpace() для создания нового пространства, начало которого скорректировано до позиции, заданной startPosition и которое смотрит прямо вдоль оси Z. Затем запрашивается первый кадр анимации с помощью XRSession's requestAnimationFrame().

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

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

Сначала мы добавляем обработчик событий mousemove, который вызывает наш код для выполнения поворота, если нажата правая кнопка мыши. Обратите также внимание, что мы устанавливаем обработчик oncontextmenu для игнорирования, вызывая preventDefault() на этих событиях. Это предотвращает появление контекстного меню браузера при нажатии правой кнопки мыши.

canvas.oncontextmenu = (event) => {
  event.preventDefault();
};
canvas.addEventListener("mousemove", (event) => {
  if (event.buttons & 2) {
    rotateViewBy(event.movementX, event.movementY);
  }
});

Далее, функция rotateViewBy() обновляет направление взгляда мыши по высоте и азимуту на основе значений дельты мыши из события mousemove. Высота ограничена, чтобы вы не могли смотреть выше и ниже прямой линии. Каждый раз, когда это вызывается, новые смещения используются для обновления текущих значений mousePitch и mouseYaw.

let mouseYaw = 0.0;
let mousePitch = 0.0;
const inverseOrientation = quat.create();
const MOUSE_SPEED = 0.003;

function rotateViewBy(dx, dy) {
  mouseYaw += dx * MOUSE_SPEED;
  mousePitch += dy * MOUSE_SPEED;

  if (mousePitch < -Math.PI * 0.5) {
    mousePitch = -Math.PI * 0.5;
  } else if (mousePitch > Math.PI * 0.5) {
    mousePitch = Math.PI * 0.5;
  }
}

Наконец, нам нужен код, который фактически применяет вычисленные значения высоты и азимута к ориентации зрителя. Эта функция, applyMouseMovement(), обрабатывает это:

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

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

  let newTransform = new XRRigidTransform(
    { x: 0, y: 0, z: 0 },
    {
      x: inverseOrientation[0],
      y: inverseOrientation[1],
      z: inverseOrientation[2],
      w: inverseOrientation[3],
    },
  );

  return refSpace.getOffsetReferenceSpace(newTransform);
}

Эта функция создает обратную матрицу ориентации — используемую для ориентации зрителя — из текущих значений высоты и азимута, а затем использует эту матрицу в качестве источника ориентации при вызове XRRigidTransform(). Затем запрашивается пространство ссылок нового XRRigidTransform и возвращается в вызывающий метод.

Это новое пространство ссылок, в котором положение зрителя не изменяется, но его ориентация изменена на основе значений высоты и азимута, сгенерированных из накопленных входных данных мыши. applyMouseMovement() должно вызываться при отрисовке кадра, непосредственно перед извлечением позы зрителя с помощью getViewerPose(), а отрисовка должна выполняться в этом пространстве ссылок.

Вы можете увидеть похожий код в нашем более широком руководстве по WebXR под названием Движение, ориентация и движение. В частности, обратите внимание на раздел, называемый Запуск сессии WebXR.