The WebXR Device API's XRViewport
interface provides properties used to describe the size and position of the current viewport within the XRWebGLLayer
being used to render the 3D scene.
Currently, the only type of surface available is the XRWebGLLayer
. 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 an XRViewport
define a rectangle whose bottom-left corner is at (x
, y
) and which extends width
pixels toward the left and height
pixels upward.
These values may be passed directly into the WebGLRenderingContext.viewport()
method:
const xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);
This example sets up an animation frame callback using requestAnimationFrame()
. After initial setup, it iterates over each of the views within the viewer's pose, configuring the viewport as dictated by the XRWebGLLayer
.
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,
);
}
});