XRWebGLBinding: getDepthInformation() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die getDepthInformation() Methode des XRWebGLBinding Interfaces gibt ein XRWebGLDepthInformation Objekt zurück, das WebGL-Tiefeninformationen enthält.

Syntax

js
getDepthInformation(view)

Parameter

view

Ein XRView Objekt, das aus einer Betrachterpose erhalten wurde.

Rückgabewert

Ein XRWebGLDepthInformation Objekt.

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn "depth-sensing" nicht in der Liste der aktivierten Funktionen für diese XRSession enthalten ist.

InvalidStateError DOMException

Wird ausgelöst, wenn das XRFrame nicht aktiv oder animiert ist. Das Abrufen von Tiefeninformationen ist nur innerhalb des requestAnimationFrame() Rückrufs gültig.

InvalidStateError DOMException

Wird ausgelöst, wenn die depthUsage der Sitzung nicht "gpu-optimized" ist.

Beispiele

Abrufen von WebGL-Tiefeninformationen

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

Spezifikationen

Specification
WebXR Depth Sensing Module
# dom-xrwebglbinding-getdepthinformation

Browser-Kompatibilität

Siehe auch