XRWebGLLayer

Интерфейс XRWebGLLayer API устройства WebXR обеспечивает связь между устройством WebXR (или имитируемым устройством XR в случае сеанса встраивания) и контекстом WebGL, используемым для отрисовки сцены для отображения на устройстве. В частности, он предоставляет доступ к буферу кадра и области видимости WebGL для удобного доступа к контексту.

Хотя XRWebGLLayer в настоящее время является единственным типом слоя буфера кадра, поддерживаемым WebGL, вполне возможно, что будущие обновления спецификации WebXR позволят использовать другие типы слоёв и соответствующие источники изображений.

XRWebGLLayer() Экспериментальная

Создаёт и возвращает новый объект XRWebGLLayer для использования указанным XRSession, используя конкретный WebGLRenderingContext или WebGL2RenderingContext в качестве целевого контекста.

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

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

fixedFoveation Экспериментальная

Число, указывающее степень фовеации, используемой XR-композитором. Фиксированная фовеация (FFR) отрисовывает края текстур глаза с меньшим разрешением, чем центр, и уменьшает нагрузку на графический процессор.

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

Возвращает WebGLFramebuffer, подходящий для передачи в метод bindFrameBuffer().

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

Возвращает ширину буфера кадра XRWebGLLayer.

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

Возвращает высоту буфера кадра слоя.

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

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

getNativeFramebufferScaleFactor() Экспериментальная

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

getViewport() Экспериментальная

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

Этот фрагмент, взятый из Отрисовка кадра в нашем примере WebXR «Движение и анимация», демонстрирует, как XRWebGLLayer извлекается из состояния отрисовки объекта XRSession и затем привязывается как текущий буфер кадра WebGL для отрисовки, вызывая функцию WebGL bindFrameBuffer().

let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

Каждый раз, когда графический процессор готов отрисовать сцену на устройстве XR, XR-среда вызывает функцию, указанную при вызове метода XRSession requestAnimationFrame() для запроса отрисовки кадра.

Эта функция получает в качестве входных данных XRFrame, который содержит данные, необходимые для отрисовки кадра. Эта информация включает позу (объект XRViewerPose), описывающий положение и направление взгляда зрителя в сцене, а также список объектов XRView, каждый из которых представляет одну перспективу сцены. В текущих реализациях WebXR в этом списке никогда не будет более двух элементов: один описывает положение и угол обзора левого глаза, а другой — правого.

let pose = xrFrame.getViewerPose(xrReferenceSpace);

if (pose) {
  const glLayer = xrSession.renderState.baseLayer;
  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    /* Render the view */
  }
}

• API устройств WebXR
• Начало работы с WebGL
• WebGLRenderingContext и WebGL2RenderingContext
• Отрисовка кадра в нашем примере WebXR «Движение и анимация»