在此页

• 特性
• 用法注意事项
• 范例
• 规范
• 浏览器兼容性
• 相关话题

安全上下文
此特征只可用于 安全上下文 (HTTPS)，在某些或所有 支持浏览器 .

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.

用法注意事项

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() 方法：

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
  }
});
					

规范

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

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	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

图例

完整支持

完整支持

不支持

不支持

元数据

• 最后修改： Nov 20, 2019

相关话题

1. WebXR 设备 API
2. XRViewport
3. 特性

   1. height
   2. width
   3. x
   4. y
4. Related pages for WebXR Device API

   1. Navigator.xr
   2. WebGLRenderingContext.makeXRCompatible()
   3. XR
   4. XRBoundedReferenceSpace
   5. XRFrame
   6. XRInputSource
   7. XRInputSourceArray
   8. XRInputSourceEvent
   9. XRInputSourcesChangeEvent
   10. XRPose
   11. XRReferenceSpace
   12. XRReferenceSpaceEvent
   13. XRRenderState
   14. XRRigidTransform
   15. XRSession
   16. XRSessionEvent
   17. XRSpace
   18. XRView
   19. XRViewerPose
   20. XRWebGLLayer