XRMediaBinding: метод createQuadLayer()

Метод createQuadLayer() интерфейса XRMediaBinding возвращает объект XRQuadLayer, который представляет собой слой, занимающий плоскую прямоугольную область в виртуальной среде.

video

Элемент HTMLVideoElement для отображения.

options

Объект для настройки XRQuadLayer. Объект может содержать следующие свойства, при этом space является обязательным:

height Необязательно

Число, определяющее высоту слоя.

invertStereo Необязательно

Логическое значение, указывающее, следует ли инвертировать естественное расположение каждого вида в видео. По умолчанию false.

layout Необязательно

Строка, указывающая макет видео. Возможные значения:

default

Слой размещает все виды сессии.

mono

Один XRSubImage выделяется и отображается для обоих глаз.

stereo

Агент пользователя решает, как выделять XRSubImage (один или два) и макет (верх/низ или слева/справа). Рекомендуется использовать тип текстуры texture-array для макетов stereo.

stereo-left-right

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

stereo-top-bottom

Выделяется один XRSubImage. Левый глаз получает верхнюю область текстуры, правый глаз — нижнюю. Этот макет предназначен для минимизации вызовов отрисовки для контента, который уже находится в стерео (например, стерео видео или изображения). Значение по умолчанию — mono.

space Обязательно

Объект XRSpace, определяющий пространственные отношения слоя с физической средой пользователя.

transform Необязательно

Объект XRRigidTransform, определяющий смещение и ориентацию относительно space.

width Необязательно

Число, определяющее ширину слоя.

Объект XRQuadLayer.

Создайте XRMediaBinding и используйте HTMLVideoElement, который передаётся в createQuadLayer(). Настройте слой квадранта, используя указанные выше параметры, и представьте слой устройству XR, добавив его в состояние отрисовки layers в XRSession.updateRenderState().

function onXRSessionStarted(xrSession) {
  const xrMediaBinding = new XRMediaBinding(xrSession);
  const video = document.createElement("video");
  video.src = "just-fascination.mp4";

  const videoLayer = xrMediaBinding.createQuadLayer(video, {
    space: xrReferenceSpace,
  });

  xrSession.updateRenderState({
    layers: [videoLayer],
  });
}

• XRQuadLayer