XRWebGLLayer: getViewport() method

Syntax

getViewport(view)

Parameters

view

An XRView object indicating the view for which the viewport is to be returned.

Return value

A XRViewport object representing the viewport which will restrict drawing to the portion of the layer corresponding to the specified view.

Exceptions

InvalidStateError DOMException

Thrown if either the specified view is not in an active XRFrame or that XRFrame and the XRWebGLLayer are not part of the same WebXR session.

Examples

This example demonstrates in part what the callback for the requestAnimationFrame() function might look like, using getViewport() to get the viewport so that drawing can be constrained to the area set aside for the eye whose viewpoint is currently being rendered.

This works because the set of views returned by an XRViewerPose each represent one eye's perspective on the scene. Since the framebuffer is split in half, one half for each eye, setting the WebGL viewport to match the WebXR layer's viewport will ensure that when rendering the scene for the current eye's pose, it is rendered into the correct half of the framebuffer.

function drawFrame(time, frame) {
  const session = frame.session;

  const pose = frame.getViewerPose(mainReferenceSpace);

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

    gl.clearColor(0, 0, 0, 1.0);
    gl.clearDepth(1.0);
    gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_COLOR_BIT);

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

      /* Render the scene now */
    }
  }
}

Specifications

Browser compatibility

See also

• WebXR Device API