XRViewport

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

The WebXR Device API'sXRViewport interface provides properties used to describe the size and position of the current viewport within theXRWebGLLayer being used to render the 3D scene.

Instance properties

heightRead only: The height, in pixels, of the viewport.
widthRead only: The width, in pixels, of the viewport.
xRead only: The offset from the origin of the destination graphics surface (typically aXRWebGLLayer) to the left edge of the viewport, in pixels.
yRead only: The offset from the origin of the viewport to the bottom edge of the viewport; WebGL's coordinate system places (0, 0) at the bottom left corner of the surface.

Currently, the only type of surface available is theXRWebGLLayer. The precise orientation of the coordinate system may vary with other surface types, but in WebGL, the origin (0, 0) is located at the bottom-left corner of the surface. Thus the values specified in anXRViewport define a rectangle whose bottom-left corner is at (x,y) and which extendswidth pixels toward the left andheight pixels upward.

These values may be passed directly into theWebGLRenderingContext.viewport() method:

const xrViewport = xrWebGLLayer.getViewport(xrView);gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);

Example

This example sets up an animation frame callback usingrequestAnimationFrame(). After initial setup, it iterates over each of the views within the viewer's pose, configuring the viewport as dictated by theXRWebGLLayer.

xrSession.requestAnimationFrame((time, xrFrame) => {  const viewerPose = xrFrame.getViewerPose(xrReferenceSpace);  gl.bindFramebuffer(xrWebGLLayer.framebuffer);  for (const xrView of viewerPose.views) {    const xrViewport = xrWebGLLayer.getViewport(xrView);    gl.viewport(      xrViewport.x,      xrViewport.y,      xrViewport.width,      xrViewport.height,    );    // Now we can use WebGL to draw into a viewport matching    // the viewer's needs  }});