XRWebGLLayer.getViewport()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

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

XRWebGLLayer 接口的 getViewport() 方法返回 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.

句法

let viewport = xrWebGLLayer.getViewport(view);

参数

view: XRView object indicating the view for which the viewport is to be returned.

返回值

A XRViewport object representing the viewport which will restrict drawing to the portion of the layer corresponding to the specified view .

异常

InvalidStateError: Either the specified view is not in an active XRFrame or that XRFrame 和 XRWebGLLayer are not part of the same WebXR session .

范例

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 */
  }
}

规范

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

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getViewport()`	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

在此页

句法

参数

返回值

异常

范例

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题