The WebXR Device API XRWebGLLayer() constructor creates and returns a new XRWebGLLayer object, providing the linkage between the WebXR device and the WebGL graphics layer used to render the 3D scene.

session

An XRSession object specifying the WebXR session which will be rendered using the WebGL context.

context

A WebGLRenderingContext or WebGL2RenderingContext identifying the WebGL drawing context to use for rendering the scene for the specified WebXR session.

options Optional

An object providing configuration options for the new XRWebGLLayer. The available options are:

alpha

The frame buffer's color buffer will be established with an alpha channel if the alpha Boolean property is true. Otherwise, the color buffer will not have an alpha channel. The default value is true.

antialias

A Boolean value which is true if anti-aliasing is to be used when rendering in the context; otherwise false. The browser selects the anti-aliasing method to use; there is no support for requesting a specific mode yet. The default value is true.

depth

A Boolean value which, if true, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. The default is true.

framebufferScaleFactor

A floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer. The static XRWebGLLayer function XRWebGLLayer.getNativeFramebufferScaleFactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution. The default is 1.0.

ignoreDepthValues

A Boolean value which indicates whether or not to ignore the contents of the depth buffer while compositing the scene. The default is false.

stencil

A Boolean value which, if true, requests that the new layer include a stencil buffer. Otherwise, no stencil buffer is allocated. The default is false.

A newly-created XRWebGLLayer which links the specified XRSession to the WebGL context given by context, which will be used as the renderer for the session. Any options specified in layerInit are used to tailor the rendering system's configuration.

InvalidStateError DOMException

Thrown if the new XRWebGLLayer could not be created due to one of a number of possible state errors:

• The XRSession specified by session has already been stopped.
• The specified WebGL context, context, has been lost for any reason, such as a GPU switch or reset.
• The specified session is immersive but the context is not WebXR compatible.

OperationError DOMException

Thrown if the resources (including memory buffers) needed for the layer to operate could not be allocated.

In this example, a new XRWebGLLayer is created for a WebXR session, xrSession.

xrSession.updateRenderState({
  baseLayer: new XRWebGLLayer(xrSession, gl, {
    alpha: false,
    antialias: false,
    depth: false,
    framebufferScaleFactor: 0.5,
    ignoreDepthValues: true,
    stencil: false,
  }),
});

• WebXR Device API
• Getting started with WebGL
• Handling lost context in WebGL: Khronos WebGL wiki