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 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
| Specification |
|---|
| WebXR Depth Sensing Module # dom-xrwebgldepthinformation-texture |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
texture
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.