Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The XRWebGLLayerInit dictionary's Boolean ignoreDepthValues property can be provided in the options passed into the XRWebGLLayer() constructor to indicate that the depth buffer, if it exists, should be ignored while composing the scene.

The depth buffer is typically used to assist in ordering vertices and, by extension, polygons while compositing, to ensure that the scene is correctly composited, with objects the correct distance away and with clipping and other distance-related computations performed as accurately as possible. Without the depth buffer, these computations must rely entirely on the coordinates of each pixel.

This property differs from depth in that depth requests a WebGL layer that does not have a depth buffer at all, while ignoreDepthValues merely asks that the depth layer be ignored.


let layerInit = {
  ignoreDepthValues: boolValue
let glLayer = new XRWebGLLayer(xrSession, gl, layerInit);

let glLayer = new XRWebGLLayer(xrSession, gl, { ignoreDepthValues: boolValue });


A Boolean value which can be set to true to disable the use of the depth buffer by the WebGL rendering layer created by the XRWebGLLayer() constructor. The default value, false, means the depth buffer will be used, if available.

Usage notes

If ignoreDepthValues is true, the WebXR compositor will ignore the contents of the depth buffer, if it exists, while compositing and rendering the scene. If false, the depth buffer's contents are used, if one is present.

Using a depth buffer while compositing allows the XR compositor to help ensure the compositing is done as accurately as possible. Each entry in the depth buffer corresponds to the depth of the fragment whose color is at the same location in the color buffer, and must have a value between 0.0 and 1.0, where 0.0 corresponds to the distance specified in the XRSession object's renderState record's depthNear and 1.0 represents the distance given by depthFar.

Ignoring depth values causes the compositor to rely solely upon the relative position of objects to establish depth, and may result in less effective and less comfortable 3D effects. The default is false (depth values are used by default).


In this example, a new XRWebGLLayer is created for a WebXR session, xrSession. It's configured to ignore depth values or an alpha channel.

  baseLayer: new XRWebGLLayer(xrSession, gl, {
     alpha: false,
     ignoredepthValues: true


Specification Status Comment
WebXR Device API
The definition of 'XRWebGLLayerInit.ignoreDepthValues' in that specification.
Working Draft Initial definition.

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ignoreDepthValuesChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android Full support 79Chrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 11.2


Full support
Full support
No support
No support

See also