XRWebGLLayer

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

The XRWebGLLayer interface of the WebXR Device API provides a linkage between the WebXR device (or simulated XR device, in the case of an inline session) and a WebGL context used to render the scene for display on the device. In particular, it provides access to the WebGL framebuffer and viewport to ease access to the context.

Although XRWebGLLayer is currently the only type of framebuffer layer supported by WebGL, it's entirely possible that future updates to the WebXR specification may allow for other layer types and corresponding image sources.

Constructor

new XRWebGLLayer()
Creates and returns a new XRWebGLLayer object for use by the specified XRSession, using a particular WebGLRenderingContext or WebGL2RenderingContext as the destination context.

Properties

antialias Read only
A Boolean value indicating whether or not the WebGL context's framebuffer supports anti-aliasing. The specific type of anti-aliasing is determined by the user agent.
framebuffer Read only
Returns a WebGLFramebuffer suitable for passing into the bindFrameBuffer() method.
frameBufferWidth Read only
Returns the height of the XRWebGLLayer's framebuffer.
frameBufferHeight Read only
Returns the width of the layer's framebuffer.
ignoreDepthValues Read only
A Boolean which Indicates whether or not the WebXR compositor should make use of the contents of the layer's depth buffer while compositing the scene.

Methods

getViewport()
Returns a new XRViewport instance representing the position, width, and height to which the WebGL context's viewport must be set to contain drawing to the area of the framebuffer designated for the specified view's contents. In this way, for example, the rendering of the left eye's point of view and of the right eye's point of view are each placed into the correct parts of the framebuffer.

Static methods

getNativeFramebufferScaleFactor()
Returns the scaling factor that can be used to scale the resolution of the recommended WebGL framebuffer resolution to the rendering device's native resolution.

Examples

Binding the layer to a WebGL context

This snippet, taken from Drawing a frame in Movement, orientation, and motion: A WebXR example, shows how the XRWehbGLLayer is obtained from the XRSession object's rendering state and is then bound as the current rendering WebGL framebuffer by calling the WebGL bindFrameBuffer() function.

let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

Rendering every view in a frame

Each time the GPU is ready to render the scene to the XR device, the XR runtime calls the function you specified when you called the XRSession method requestAnimationFrame() to ask to render the frame.

That function receives as input an XRFrame which encapsulates the data needed to render the frame. This information includes the pose (an XRViewerPose object) that describes the position and facing direction of the viewer within the scene as well as a list of XRView objects, each representing one perspective on the scene. In current WebXR implementations, there will never be more than two entries in this list: one describing the position and viewing angle of the left eye and another doing the same for the right.

let pose = xrFrame.getViewerPose(xrReferenceSpace);

if (pose) {
  let glLayer = xrSession.renderState.baseLayer;
  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.Framebffer);

  for (let view of pose.views) {
    let viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    /* Render the view */
  }
}

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
XRWebGLLayerChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
XRWebGLLayer() constructorChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
antialiasChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
framebufferChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
framebufferHeightChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
framebufferWidthChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
getNativeFramebufferScaleFactor()Chrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
getViewport()Chrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ignoreDepthValuesChrome Full support 79Edge Full support 79Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

See also