XRWebGLBinding.createQuadLayer()

The createQuadLayer() method of the XRWebGLBinding interface returns an XRQuadLayer object which is a layer that takes up a flat rectangular space in the virtual environment.

Syntax

createQuadLayer(init)

Parameters

init

An object to configure the XRQuadLayer. It must have the space, viewPixelHeight, and viewPixelWidth properties. init has the following properties:

• 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
  Additionally, for contexts with the WEBGL_compressed_texture_etc extension enabled:
  • ext.COMPRESSED_RGB8_ETC2
  • ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
  • ext.COMPRESSED_RGBA8_ETC2_EAC
  • ext.COMPRESSED_SRGB8_ETC2
  • ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
  • ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC
  Additionally, for contexts with the WEBGL_compressed_texture_astc extension enabled:
  • All of the formats the extension supports.
  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.
• height: Optional. A number specifying the height of the layer in meters. The default value is 1.0.
• isStatic: Optional. A boolean that, if true, indicates you can only draw to this layer when needsRedraw is true. The default value is false.
• layout: Optional. A string indicating the layout of the layer. Possible values:
  • default: The layer accommodates all views of the session.
  • mono: A single XRSubImage is allocated and presented to both eyes.
  • stereo: The user agent decides how it allocates the XRSubImage (one or two) and the layout (top/bottom or left/right).
  • stereo-left-right: A single XRSubImage is allocated. Left eye gets the left area of the texture, right eye the right.
  • stereo-top-bottom: A single XRSubImage is allocated. Left eye gets the top area of the texture, right eye the bottom.
  The default value is mono.
• mipLevels: Optional. A number specifying desired number of mip levels. The default value is 1.
• space: Required. An XRSpace object defining the layer's spatial relationship with the user’s physical environment.
• textureType: Optional. A 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.
• transform: Optional. An XRRigidTransform object defining the offset and orientation relative to space.
• viewPixelHeight: Required. A number specifying the pixel height of the layer view.
• viewPixelWidth: Required. A number specifying the pixel width of the layer view.
• width: Optional. A number specifying the width of the layer in meters. The default value is 1.0.

Return value

An XRQuadLayer object.

Examples

Creating an XRQuadLayer

Configure the quad layer using the properties listed above in a call to createQuadLayer(). To present layers to the XR device, add them to the layers render state using XRSession.updateRenderState().

function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const quadLayer = xrGlBinding.createQuadLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
    transform: new XRRigidTransform({z: -2});
  });
  xrSession.updateRenderState({
    layers: [quadLayer]
  });
}

Specifications

Browser compatibility

See also

• XRQuadLayer
• WebGL constants