XRWebGLBinding: createProjectionLayer() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The createProjectionLayer() method of the XRWebGLBinding interface returns an XRProjectionLayer object which is a layer that fills the entire view of the observer and is refreshed close to the device's native frame rate.

Syntax

js
createProjectionLayer(options)

Parameters

options

An object to configure the XRProjectionLayer.

textureType Optional

An string defining the type of texture the layer will have. Possible values:

texture

The textures of XRWebGLSubImage will be of type gl.TEXTURE_2D.

texture-array

The textures of XRWebGLSubImage will be of type gl.TEXTURE_2D_ARRAY (WebGL 2 contexts only). The default value is texture.

colorFormat Optional

A GLenum defining the data type of the color texture data. Possible values:

  • gl.RGB
  • gl.RGBA Additionally, for contexts with the EXT_sRGB extension enabled:
  • ext.SRGB_EXT
  • ext.SRGB_ALPHA_EXT Additionally, for WebGL2RenderingContext contexts:
  • gl.RGBA8
  • gl.RGB8
  • gl.SRGB8
  • gl.RGB8_ALPHA8 The default value is gl.RGBA.
depthFormat Optional

A GLenum defining the data type of the depth texture data or 0 indicating that the layer should not provide a depth texture. (In that case XRProjectionLayer.ignoreDepthValues will be true.) Possible values within WebGLRenderingContext contexts with the WEBGL_depth_texture extension enabled, or within WebGL2RenderingContext contexts (no extension required):

  • gl.DEPTH_COMPONENT
  • gl.DEPTH_STENCIL Additionally, for WebGL2RenderingContext contexts:
  • gl.DEPTH_COMPONENT24
  • gl.DEPTH24_STENCIL24 The default value is gl.DEPTH_COMPONENT.
scaleFactor Optional

A floating-point value which is used to scale the layer during compositing. A value of 1.0 represents the default pixel size for the frame buffer. (See also XRWebGLLayer.getNativeFramebufferScaleFactor().) Unlike other layers, the XRProjectionLayer can't be created with an explicit pixel width and height, because the size is inferred by the hardware. (Projection layers fill the observer's entire view.)

Return value

An XRProjectionLayer object.

Examples

Creating an XRProjectionLayer in a WebGL 2 context

The textureType option allows allocating a texture array instead, in which every XRView will be rendered into a separate level of the array. This allows for some rendering optimizations, such as the use of the OVR_multiview2 extension available in WebGL 2 contexts.

js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const projectionLayer = xrGlBinding.createProjectionLayer({
    textureType: "texture-array",
  });
  xrSession.updateRenderState({
    layers: [projectionLayer],
  });
}

Specifications

Specification
WebXR Layers API Level 1
# dom-xrwebglbinding-createprojectionlayer

Browser compatibility

BCD tables only load in the browser

See also