XRViewport

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

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.

特性

height 只读
The height, in pixels, of the viewport.
width 只读
The width, in pixels, of the viewport.
x 只读
The offset from the origin of the destination graphics surface (typically a XRWebGLLayer ) to the left edge of the viewport, in pixels.
y 只读
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.

Usage notes

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:

let 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) => {
  let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);
  gl.bindFramebuffer(xrWebGLLayer.framebuffer);
  for (xrView of viewerPose.views) {
    let 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
  }
});
					

规范

规范 状态 Comment
WebXR 设备 API
The definition of 'XRViewport' in that specification.
工作草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
XRViewport Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
height Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
width Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
x Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
y Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2

图例

完整支持
完整支持
不支持
不支持