Web/API/XRWebGLLayer/XRWebGLLayer

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

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.

Syntax

let glLayer = new XRWebGLLayer(session, context, layerInit);

Parameters

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.
layerInit Optional: An object conforming to the XRWebGLLayerInit dictionary, providing configuration options for the new XRWebGLLayer. The options available are:

alpha Optional 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 Optional 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 Optional 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 Optional 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 Optional 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 Optional 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.

Return value

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.

Exceptions

InvalidStateError: 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: The resources (including memory buffers) needed for the layer to operate could not be allocated.

Specifications

Specification	Status	Comment
WebXR Device APIThe definition of 'XRWebGLLayer()' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`XRWebGLLayer()` constructor	Chrome Full support 79	Edge Full support 79	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android Full support 79	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 11.2

Legend

Full support: Full support
No support: No support