Back to Content

XRWebGLDepthInformation: texture property

files/en-us/web/api/xrwebgldepthinformation/texture/index.md

latest1.5 KB
Original Source

{{APIRef("WebXR Device API")}}{{SeeCompatTable}}

The read-only texture property of the {{DOMxRef("XRWebGLDepthInformation")}} interface is a {{domxref("WebGLTexture")}} containing depth buffer information as an opaque texture.

Value

A {{domxref("WebGLTexture")}}.

Examples

Use {{domxref("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 uDepthTextureLocation = gl.getUniformLocation(program, "u_DepthTexture");
const uUVTransformLocation = gl.getUniformLocation(program, "u_UVTransform");
const uRawValueToMeters = gl.getUniformLocation(program, "u_RawValueToMeters");

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

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

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • {{domxref("XRWebGLBinding.getDepthInformation()")}}
  • {{domxref("WebGLRenderingContext.bindTexture()")}}