XRWebGLBinding:getDepthInformation() 方法

实验性: 这是一个 实验性技术
在生产环境中使用之前,请仔细查看 浏览器兼容性表

getDepthInformation() 方法是 XRWebGLBinding 接口的方法,它返回一个包含 WebGL 深度信息的 XRWebGLDepthInformation 对象。

语法

js
getDepthInformation(view)

参数

view

从查看器姿态获得的 XRView 对象。

返回值

一个 XRWebGLDepthInformation 对象。

异常

NotSupportedError DOMException

如果 "depth-sensing" 不在此 XRSession 的已启用功能列表中,则抛出此异常。

InvalidStateError DOMException

如果 XRFrame 不处于活动状态或未设置动画,则抛出此异常。仅在 requestAnimationFrame() 回调中获取深度信息才是有效的。

InvalidStateError DOMException

如果会话的 depthUsage 不是 "gpu-optimized",则抛出此异常。

示例

获取 WebGL 深度信息

js
const canvasElement = document.querySelector(".output-canvas");
const gl = canvasElement.getContext("webgl");
await gl.makeXRCompatible();

// Make sure to request a session with depth-sensing enabled
const session = navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["depth-sensing"],
  depthSensing: {
    usagePreference: ["gpu-optimized"],
    formatPreference: ["luminance-alpha"],
  },
});

const glBinding = new XRWebGLBinding(session, gl);

// …

// Obtain depth information in an active and animated frame
function rafCallback(time, frame) {
  session.requestAnimationFrame(rafCallback);
  const pose = frame.getViewerPose(referenceSpace);
  if (pose) {
    for (const view of pose.views) {
      const depthInformation = glBinding.getDepthInformation(view);
      if (depthInformation) {
        // Do something with the depth information
        // gl.bindTexture(gl.TEXTURE_2D, depthInformation.texture);
        // …
      }
    }
  }
}

规范

规范
WebXR 深度感知模块
# dom-xrwebglbinding-getdepthinformation

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅