XRWebGLDepthInformation: texture property

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The read-only texture property of the XRWebGLDepthInformation interface is a WebGLTexture containing depth buffer information as an opaque texture.

Value

A WebGLTexture.

Examples

Use XRWebGLBinding.getDepthInformation() to obtain GPU depth information. The returned XRWebGLDepthInformation object will contain the texture buffer which can then be bound to a texture and depth buffer information can be made available to a WebGL fragment shader.

js
const depthInfo = glBinding.getDepthInformation(view);
const uvTransform = depthInfo.normDepthBufferFromNormView.matrix;

const u_DepthTextureLocation = gl.getUniformLocation(program, "u_DepthTexture");
const u_UVTransformLocation = gl.getUniformLocation(program, "u_UVTransform");
const u_RawValueToMeters = gl.getUniformLocation(program, "u_RawValueToMeters");

gl.bindTexture(gl.TEXTURE_2D, depthInfo.texture);
gl.activeTexture(gl.TEXTURE0);
gl.uniform1i(u_DepthTextureLocation, 0);

// UV transform to correctly index into the depth map
gl.uniformMatrix4fv(u_UVTransformLocation, false, uvTransform);

// scaling factor to convert from the raw number to meters
gl.uniform1f(u_RawValueToMeters, depthInfo.rawValueToMeters);

Specifications

Specification
WebXR Depth Sensing Module
# dom-xrwebgldepthinformation-texture

Browser compatibility

BCD tables only load in the browser

See also