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

The read-only imageIndex property of the XRWebGLSubImage interface is a number representing the offset into the texture array if the layer was requested with texture-array; null otherwise.


A number or null if the layer wasn't requested with texture-array.

Using imageIndex

The imageIndex property can be passed WebGL2RenderingContext.framebufferTextureLayer() to attach the depth and color textures to a framebuffer with the correct layer index.

const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({ textureType: "texture-array" });
const framebuffer = gl.createFramebuffer();

xrSession.updateRenderState({ layers: [layer] });

function onXRFrame(time, xrFrame) {

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const viewport = xrGlBinding.getSubImage(layer, xrFrame).viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
      subImage.colorTexture, 0, subImage.imageIndex);
    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT,
      subImage.depthStencilTexture, 0, subImage.imageIndex);

    // Render from the viewpoint of xrView


WebXR Layers API Level 1
# dom-xrwebglsubimage-imageindex

Browser compatibility

BCD tables only load in the browser

See also