W3cubDocs

/Web APIs

XRWebGLBinding: createCubeLayer() method

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

The createCubeLayer() method of the XRWebGLBinding interface returns an XRCubeLayer object, which is a layer that renders directly from a cubemap, and projects it onto the inside faces of a cube.

Syntax

js

createCubeLayer(init)

Parameters

init

An object to configure the XRCubeLayer. 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 (Default) 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.
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 for WebGLRenderingContext contexts with the WEBGL_depth_texture extension enabled, or for WebGL2RenderingContext contexts (no extension required):

  • gl.DEPTH_COMPONENT (Default)
  • gl.DEPTH_STENCIL Additionally, for WebGL2RenderingContext contexts:
  • gl.DEPTH_COMPONENT24
  • gl.DEPTH24_STENCIL24
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

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. The left eye gets the left area of the texture, the right eye the right.
  • stereo-top-bottom: A single XRSubImage is allocated. The left eye gets the top area of the texture, the right eye the bottom. The default value is mono.
mipLevels Optional

A number specifying the desired number of mip levels. The default value is 1.

orientation Optional

A DOMPointReadOnly specifying the orientation relative to the space property.

space Required

An XRSpace object defining the layer's spatial relationship with the user's physical environment.

viewPixelHeight Required

A number specifying the pixel height of the layer view.

viewPixelWidth Required

A number specifying the pixel width of the layer view.

Return value

An XRCubeLayer object.

Examples

Creating an XRCubeLayer

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

js

function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const cubeLayer = xrGlBinding.createCubeLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
  });
  xrSession.updateRenderState({
    layers: [cubeLayer],
  });
}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
createCubeLayer No No No No No No No No No No No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XRWebGLBinding/createCubeLayer