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 with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRProjectionLayer`
* WebGL constants