XRWebGLBinding.getDepthInformation()
The getDepthInformation()
method of the XRWebGLBinding
interface returns an XRWebGLDepthInformation
object containing WebGL depth information.
Syntax
getDepthInformation(view)
Parameters
view
-
An
XRView
object obtained from a viewer pose.
Return value
An XRWebGLDepthInformation
object.
Exceptions
NotSupportedError
DOMException
-
Thrown if
"depth-sensing"
is not in the list of enabled features for thisXRSession
. InvalidStateError
DOMException
-
Thrown if the
XRFrame
is not active nor animated. Obtaining depth information is only valid within therequestAnimationFrame()
callback. InvalidStateError
DOMException
-
Thrown if the session's
depthUsage
is not"gpu-optimized"
.
Examples
Obtaining WebGL depth information
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);
// ...
}
}
}
}
Specifications
Specification |
---|
WebXR Depth Sensing Module # dom-xrwebglbinding-getdepthinformation |
Browser compatibility
BCD tables only load in the browser