XRWebGLLayer.getViewport()

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The XRWebGLLayer interface's getViewport() method returns the XRViewport that should be used to render the specified XRView into the WebGL layer. For WebXR devices which use a single framebuffer for both the left and right eyes, the returned viewport represents the region of the framebuffer into which the scene should be rendered for the eye represented by the view.

Syntax

let viewport = xrWebGLLayer.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
Either the specified view is not in an active XRFrame or that XRFrame and the XRWebGLLayer are not part of the same WebXR session.

Example

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.

<<<--- add link to appropriate section in the Cameras and views article --->>>

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

  let pose = frame.getViewerPose(mainReferenceSpace);

  if (pose) {
    let 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 (let view of pose.views) {
      let viewport = glLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      /* Render the scene now */
  }
}

Specifications

Specification Status Comment
WebXR Device API
The definition of 'XRWebGLLayer.getViewport()' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getViewport()Chrome Full support 79Edge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

See also