WebGLRenderingContext: colorMask() method - Web APIs

WebGLRenderingContext: colorMask() method
=========================================

 The **`WebGLRenderingContext.colorMask()`** method of the WebGL API sets which color components to
 enable or to disable when drawing or rendering to a `WebGLFramebuffer`.

Syntax
------

```js
colorMask(red, green, blue, alpha)
```

### Parameters

`red`

 A `GLboolean` specifying whether or not the red color component can be
 written into the frame buffer. Default value: `true`.

`green`

 A `GLboolean` specifying whether or not the green color component can
 be written into the frame buffer. Default value: `true`.

`blue`

 A `GLboolean` specifying whether or not the blue color component can be
 written into the frame buffer. Default value: `true`.

`alpha`

 A `GLboolean` specifying whether or not the alpha (transparency)
 component can be written into the frame buffer. Default value: `true`.

### Return value

None (`undefined`).

Examples
--------

```js
gl.colorMask(true, true, true, false);
```

 To get the current color mask, query the `COLOR_WRITEMASK` constant which
 returns an `Array`.

```js
gl.getParameter(gl.COLOR\_WRITEMASK);
// [true, true, true, false]
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.depthMask()`
* `WebGLRenderingContext.stencilMask()`


WebGLRenderingContext: stencilMaskSeparate() method - Web APIs

WebGLRenderingContext: stencilMaskSeparate() method
===================================================

 The **`WebGLRenderingContext.stencilMaskSeparate()`** method of
 the WebGL API controls enabling and
 disabling of front and/or back writing of individual bits in the stencil planes.

 The `WebGLRenderingContext.stencilMask()` method can set both, the front
 and back stencil writemasks to one value at the same time.

Syntax
------

```js
stencilMaskSeparate(face, mask)
```

### Parameters

`face`

 A `GLenum` specifying whether the front and/or back stencil writemask
 is updated. The possible values are:

* `gl.FRONT`
* `gl.BACK`
* `gl.FRONT_AND_BACK`

`mask`

 A `GLuint` specifying a bit mask to enable or disable writing of
 individual bits in the stencil planes. By default, the mask is all 1.

### Return value

None (`undefined`).

Examples
--------

```js
gl.stencilMaskSeparate(gl.FRONT, 110101);
```

 To get the current stencil masks, query the `STENCIL_WRITEMASK`,
 `STENCIL_BACK_WRITEMASK`, or `STENCIL_BITS` constants.

```js
gl.getParameter(gl.STENCIL\_WRITEMASK);
// 110101
gl.getParameter(gl.STENCIL\_BACK\_WRITEMASK);
// 110101
gl.getParameter(gl.STENCIL\_BITS);
// 0
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.colorMask()`
* `WebGLRenderingContext.depthMask()`
* `WebGLRenderingContext.stencilMask()`


WebGLRenderingContext: bindRenderbuffer() method - Web APIs

WebGLRenderingContext: bindRenderbuffer() method
================================================

 The **`WebGLRenderingContext.bindRenderbuffer()`** method of
 the WebGL API binds a given
 `WebGLRenderbuffer` to a target, which must be
 `gl.RENDERBUFFER`.

Syntax
------

```js
bindRenderbuffer(target, renderbuffer)
```

### Parameters

`target`

A `GLenum` specifying the binding point (target). Possible values:

`gl.RENDERBUFFER`

 Buffer data storage for single images in a
 renderable internal format.

`renderbuffer`

A `WebGLRenderbuffer` object to bind.

### Return value

None (`undefined`).

### Exceptions

 A `gl.INVALID_ENUM` error is thrown if `target` is not
 `gl.RENDERBUFFER`.

Examples
--------

### Binding a renderbuffer

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const renderbuffer = gl.createRenderbuffer();

gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
```

### Getting current bindings

 To check the current renderbuffer binding, query the `RENDERBUFFER_BINDING`
 constant.

```js
gl.getParameter(gl.RENDERBUFFER\_BINDING);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.7 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* `WebGLRenderingContext.isRenderbuffer()`
* Other buffers: `WebGLBuffer`, `WebGLFramebuffer`


WebGLRenderingContext: drawingBufferColorSpace property - Web APIs

WebGLRenderingContext: drawingBufferColorSpace property
=======================================================

The **`WebGLRenderingContext.drawingBufferColorSpace`** property specifies the color space of the WebGL drawing buffer. Along with the default (`srgb`), the `display-p3` color space can be used.

See `WebGLRenderingContext.unpackColorSpace` for specifying the color space for textures.

Value
-----

This property can have the following values:

* `"srgb"` selects the sRGB color space. This is the default value.
* `"display-p3"` selects the display-p3 color space.

If an invalid value is specified, then the value of `drawingBufferColorSpace` will remain unchanged.

Examples
--------

### Setting the drawing buffer color space to draw a Display P3 red

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.drawingBufferColorSpace = "display-p3";
gl.clearColor(1, 0, 0, 1);
gl.clear(glP3.COLOR\_BUFFER\_BIT);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-drawingBufferColorSpace |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.unpackColorSpace`


WebGLRenderingContext: getShaderParameter() method - Web APIs

WebGLRenderingContext: getShaderParameter() method
==================================================

 The **`WebGLRenderingContext.getShaderParameter()`** method of
 the WebGL API returns information about the
 given shader.

Syntax
------

```js
getShaderParameter(shader, pname)
```

### Parameters

`shader`

A `WebGLShader` to get parameter information from.

`pname`

A `GLenum` specifying the information to query. Possible values:

`gl.DELETE_STATUS`

 Returns a `GLboolean` indicating
 whether or not the shader is flagged for deletion.

`gl.COMPILE_STATUS`

 Returns a `GLboolean` indicating
 whether or not the last shader compilation was successful.

`gl.SHADER_TYPE`

 Returns a `GLenum` indicating whether
 the shader is a vertex shader (`gl.VERTEX_SHADER`) or fragment shader
 (`gl.FRAGMENT_SHADER`) object.

### Return value

Returns the requested shader information (as specified with `pname`).

Examples
--------

```js
gl.getShaderParameter(shader, gl.SHADER\_TYPE);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.getProgramParameter()`


WebGLRenderingContext: deleteProgram() method - Web APIs

WebGLRenderingContext: deleteProgram() method
=============================================

 The **`WebGLRenderingContext.deleteProgram()`** method of the
 WebGL API deletes a given
 `WebGLProgram` object. This method has no effect if the program has already
 been deleted.

Syntax
------

```js
deleteProgram(program)
```

### Parameters

`program`

A `WebGLProgram` object to delete.

### Return value

None (`undefined`).

Examples
--------

### Deleting a program

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const program = gl.createProgram();

// …

gl.deleteProgram(program);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`


WebGLRenderingContext: renderbufferStorage() method - Web APIs

WebGLRenderingContext: renderbufferStorage() method
===================================================

 The **`WebGLRenderingContext.renderbufferStorage()`** method of
 the WebGL API creates and initializes a
 renderbuffer object's data store.

Syntax
------

```js
renderbufferStorage(target, internalFormat, width, height)
```

### Parameters

`target`

A `GLenum` specifying the target renderbuffer object. Possible values:

`gl.RENDERBUFFER`

Buffer data storage for single images in a renderable internal format.

`internalFormat`

 A `GLenum` specifying the internal format of the renderbuffer. Possible
 values:

* `gl.RGBA4`: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.
* `gl.RGB565`: 5 red bits, 6 green bits, 5 blue bits.
* `gl.RGB5_A1`: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.
* `gl.DEPTH_COMPONENT16`: 16 depth bits.
* `gl.STENCIL_INDEX8`: 8 stencil bits.
* `gl.DEPTH_STENCIL`

 When using a WebGL 2 context,
 the following values are available additionally:

* `gl.R8`
* `gl.R8UI`
* `gl.R8I`
* `gl.R16UI`
* `gl.R16I`
* `gl.R32UI`
* `gl.R32I`
* `gl.RG8`
* `gl.RG8UI`
* `gl.RG8I`
* `gl.RG16UI`
* `gl.RG16I`
* `gl.RG32UI`
* `gl.RG32I`
* `gl.RGB8`
* `gl.RGBA8`
* `gl.SRGB8_ALPHA8` (also available as an extension for WebGL 1, see below)
* `gl.RGB10_A2`
* `gl.RGBA8UI`
* `gl.RGBA8I`
* `gl.RGB10_A2UI`
* `gl.RGBA16UI`
* `gl.RGBA16I`
* `gl.RGBA32I`
* `gl.RGBA32UI`
* `gl.DEPTH_COMPONENT24`
* `gl.DEPTH_COMPONENT32F`
* `gl.DEPTH24_STENCIL8`
* `gl.DEPTH32F_STENCIL8`

When using the `WEBGL_color_buffer_float` extension:

* `ext.RGBA32F_EXT`: RGBA 32-bit floating-point type.
* `ext.RGB32F_EXT`: RGB 32-bit floating-point type.

When using the `EXT_sRGB` extension:

* `ext.SRGB8_ALPHA8_EXT`: 8-bit sRGB and alpha.

 When using a WebGL 2 context and
 the `EXT_color_buffer_float` extension:

* `gl.R16F`
* `gl.RG16F`
* `gl.RGBA16F`
* `gl.R32F`
* `gl.RG32F`
* `gl.RGBA32F`
* `gl.R11F_G11F_B10F`

`width`

A `GLsizei` specifying the width of the renderbuffer in pixels.

`height`

A `GLsizei` specifying the height of the renderbuffer in pixels.

### Return value

None (`undefined`).

Examples
--------

```js
gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, 256, 256);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.7 |
| WebGL 2.0 Specification # 3.7.5 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* `WebGLRenderingContext.getRenderbufferParameter()`
* `WEBGL_color_buffer_float`
* `EXT_sRGB`
* `EXT_color_buffer_float`
* `EXT_texture_norm16`


WebGLRenderingContext: vertexAttribPointer() method - Web APIs

WebGLRenderingContext: vertexAttribPointer() method
===================================================

 The
 **`WebGLRenderingContext.vertexAttribPointer()`** method of the
 WebGL API binds the buffer currently bound
 to `gl.ARRAY_BUFFER` to a generic vertex attribute of the current vertex
 buffer object and specifies its layout.

Syntax
------

```js
vertexAttribPointer(index, size, type, normalized, stride, offset)
```

### Parameters

`index`

 A `GLuint` specifying the index of the vertex attribute that is to be
 modified.

`size`

 A `GLint` specifying the number of components per vertex attribute.
 Must be 1, 2, 3, or 4.

`type`

 A `GLenum` specifying the data type of each component in the array.
 Possible values:

* `gl.BYTE`: signed 8-bit integer, with values in [-128, 127]
* `gl.SHORT`: signed 16-bit integer, with values in [-32768, 32767]
* `gl.UNSIGNED_BYTE`: unsigned 8-bit integer, with values in [0, 255]
* `gl.UNSIGNED_SHORT`: unsigned 16-bit integer, with values in [0,65535]
* `gl.FLOAT`: 32-bit IEEE floating point number

 When using a WebGL 2 context,
 the following values are available additionally:

* `gl.HALF_FLOAT`: 16-bit IEEE floating point number
* `gl.INT`: 32-bit signed binary integer
* `gl.UNSIGNED_INT`: 32-bit unsigned binary integer
* `gl.INT_2_10_10_10_REV`: 32-bit signed integer with values in [-512, 511]
* `gl.UNSIGNED_INT_2_10_10_10_REV`: 32-bit unsigned integer with values in [0, 1023]

`normalized`

 A `GLboolean` specifying whether integer data values should be
 normalized into a certain range when being cast to a float.

* For types `gl.BYTE` and `gl.SHORT`, normalizes the values
 to [-1, 1] if true.
* For types `gl.UNSIGNED_BYTE` and `gl.UNSIGNED_SHORT`,
 normalizes the values to [0, 1] if true.
* For types `gl.FLOAT` and `gl.HALF_FLOAT`, this parameter
 has no effect.

`stride`

 A `GLsizei` specifying the offset in bytes between the beginning of
 consecutive vertex attributes. Cannot be negative or larger than 255. If stride is 0, the
 attribute is assumed to be tightly packed, that is, the attributes are not interleaved
 but each attribute is in a separate block, and the next vertex' attribute follows
 immediately after the current vertex.

`offset`

 A `GLintptr` specifying an offset in bytes of the first component in
 the vertex attribute array. Must be a multiple of the byte length
 of `type`.

### Return value

None (`undefined`).

### Exceptions

* A `gl.INVALID_VALUE` error is thrown if `stride` or `offset` are negative.
* A `gl.INVALID_OPERATION` error is thrown if `stride` and
 `offset` are not multiples of the size of the data type.
* A `gl.INVALID_OPERATION` error is thrown if no WebGLBuffer is bound to
 the ARRAY\_BUFFER target.
* When using a WebGL 2 context, a
 `gl.INVALID_OPERATION` error is thrown if this vertex attribute is defined
 as an integer in the vertex shader (e.g. `uvec4` or `ivec4`,
 instead of `vec4`).
Description
-----------

 Let's assume we want to render some 3D geometry, and for that we will need to supply
 our vertices to the Vertex Shader. Each vertex has a few attributes, like position,
 normal vector, or texture coordinate, that are defined in an `ArrayBuffer`
 and will be supplied to the Vertex Buffer Object (VBO). First, we need to bind the
 `WebGLBuffer` we want to use to `gl.ARRAY_BUFFER`, then, with
 this method, `gl.vertexAttribPointer()`, we specify in what order the
 attributes are stored, and what data type they are in. In addition, we need to include
 the stride, which is the total byte length of all attributes for one vertex. Also, we
 have to call `gl.enableVertexAttribArray()` to tell WebGL that this attribute should be filled
 with data from our array buffer.

 Usually, your 3D geometry is already in a certain binary format, so you need to read
 the specification of that specific format to figure out the memory layout. However, if
 you are designing the format yourself, or your geometry is in text files (like Wavefront .obj files) and
 must be converted into an `ArrayBuffer` at runtime, you have free choice on
 how to structure the memory. For highest performance, interleave the attributes
 and use the smallest data type that still accurately represents your geometry.

 The maximum number of vertex attributes depends on the graphics card, and you can call
 `gl.getParameter(gl.MAX_VERTEX_ATTRIBS)` to get this value. On high-end
 graphics cards, the maximum is 16, on lower-end graphics cards, the value will be lower.

### Attribute index

 For each attribute, you must specify its index. This is independent from the location
 inside the array buffer, so your attributes can be sent in a different order than how
 they are stored in the array buffer. You have two options:

* Either you specify the index yourself. In this case, you call
 `gl.bindAttribLocation()`
 to connect a named attribute from the vertex shader to the index you want to use. This
 must be done before calling `gl.linkProgram()`. You can then provide this same index to
 `gl.vertexAttribPointer()`.
* Alternatively, you use the index that is assigned by the graphics card when
 compiling the vertex shader. Depending on the graphics card, the index will vary, so
 you must call `gl.getAttribLocation()` to find out the index, and then provide this index to
 `gl.vertexAttribPointer()`.
 If you are using WebGL 2, you can specify the index yourself in the vertex shader code
 and override the default used by the graphics card, e.g.
 `layout(location = 3) in vec4 position;` would set the
 `"position"` attribute to index 3.
### Integer attributes

 While the `ArrayBuffer` can be filled with both integers and floats, the
 attributes will always be converted to a float when they are sent to the vertex shader.
 If you need to use integers in your vertex shader code, you can either cast the float
 back to an integer in the vertex shader (e.g. `(int) floatNumber`), or use
 `gl.vertexAttribIPointer()` from WebGL2.

### Default attribute values

 The vertex shader code may include a number of attributes, but we don't need to specify
 the values for each attribute. Instead, we can supply a default value that will be
 identical for all vertices. We can call
 `gl.disableVertexAttribArray()`
 to tell WebGL to use the default value, while calling
 `gl.enableVertexAttribArray()` will read the values from the array buffer as
 specified with `gl.vertexAttribPointer()`.

 Similarly, if our vertex shader expects e.g. a 4-component attribute with
 `vec4` but in our `gl.vertexAttribPointer()` call we set the
 `size` to `2`, then WebGL will set the first two components based
 on the array buffer, while the third and fourth components are taken from the default
 value.

 The default value is `vec4(0.0, 0.0, 0.0, 1.0)` by default but we can
 specify a different default value with
 `gl.vertexAttrib[1234]f[v]()`.

 For example, your vertex shader may be using a position and a color attribute. Most
 meshes have the color specified at a per-vertex level, but some meshes are of a uniform
 shade. For those meshes, it is not necessary to place the same color for each vertex
 into the array buffer, so you use `gl.vertexAttrib4fv()` to set a constant
 color.

### Querying current settings

 You can call `gl.getVertexAttrib()` and `gl.getVertexAttribOffset()` to get the current parameters for an attribute, e.g. the
 data type or whether the attribute should be normalized. Keep in mind that these WebGL
 functions have a slow performance and it is better to store the state inside your
 JavaScript application. However, these functions are great for debugging a WebGL context
 without touching the application code.

Examples
--------

 This example shows how to send your vertex attributes to the shader program. We use an
 imaginary data structure where the attributes of each vertex are stored interleaved with
 a length of 20 bytes per vertex:

1. **position:** We need to store the X, Y and Z coordinates. For highest
 precision, we use 32-bit floats; in total this uses 12 bytes.
2. **normal vector:** We need to store the X, Y and Z components of the
 normal vector, but since precision is not that important, we use 8-bit signed
 integers. For better performance, we align the data to 32 bits by also storing a
 fourth zero-valued component, bringing the total size to 4 bytes. Also, we tell WebGL
 to normalize the values because our normals are always in range [-1, 1].
3. **texture coordinate:** We need to store the U and V coordinates; for
 this 16-bit unsigned integers offer enough precision, the total size is 4 bytes. We
 also tell WebGL to normalize the values to [0, 1].

For example, the following vertex:

```json
{
  "position": [1.0, 2.0, 1.5],
  "normal": [1.0, 0.0, 0.0],
  "texCoord": [0.5, 0.25]
}
```

Will be stored in the array buffer as follows:

![WebGL array buffer contents](/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer/webgl-array-buffer.svg)

### Creating the array buffer

 First, we dynamically create the array buffer from JSON data using a
 `DataView`. Note the use of `true` because WebGL expects our
 data to be in little-endian.

```js
// Load geometry with fetch() and Response.json()
const response = await fetch("assets/geometry.json");
const vertices = await response.json();

// Create array buffer
const buffer = new ArrayBuffer(20 \* vertices.length);
// Fill array buffer
const dv = new DataView(buffer);
vertices.forEach((vertex, i) => {
  dv.setFloat32(20 \* i, vertex.position[0], true);
  dv.setFloat32(20 \* i + 4, vertex.position[1], true);
  dv.setFloat32(20 \* i + 8, vertex.position[2], true);
  dv.setInt8(20 \* i + 12, vertex.normal[0] \* 0x7f);
  dv.setInt8(20 \* i + 13, vertex.normal[1] \* 0x7f);
  dv.setInt8(20 \* i + 14, vertex.normal[2] \* 0x7f);
  dv.setInt8(20 \* i + 15, 0);
  dv.setUint16(20 \* i + 16, vertex.texCoord[0] \* 0xffff, true);
  dv.setUint16(20 \* i + 18, vertex.texCoord[1] \* 0xffff, true);
});
```

 For higher performance, we could also do the previous JSON to ArrayBuffer conversion on
 the server-side, e.g. with Node.js. Then we could load the binary file and interpret it
 as an array buffer:

```js
const response = await fetch("assets/geometry.bin");
const buffer = await response.arrayBuffer();
```

### Consume array buffer with WebGL

First, we create a new Vertex Buffer Object (VBO) and supply it with our array buffer:

```js
//Bind array buffer to a Vertex Buffer Object
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY\_BUFFER, vbo);
gl.bufferData(gl.ARRAY\_BUFFER, buffer, gl.STATIC\_DRAW);
```

 Then, we specify the memory layout of the array buffer, either by setting the index
 ourselves:

```js
//Describe the layout of the buffer:
//1. position, not normalized
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
gl.enableVertexAttribArray(0);
//2. normal vector, normalized to [-1, 1]
gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
gl.enableVertexAttribArray(1);
//3. texture coordinates, normalized to [0, 1]
gl.vertexAttribPointer(2, 2, gl.UNSIGNED\_SHORT, true, 20, 16);
gl.enableVertexAttribArray(2);

//Set the attributes in the vertex shader to the same indices
gl.bindAttribLocation(shaderProgram, 0, "position");
gl.bindAttribLocation(shaderProgram, 1, "normal");
gl.bindAttribLocation(shaderProgram, 2, "texUV");
//Since the attribute indices have changed, we must re-link the shader
//Note that this will reset all uniforms that were previously set.
gl.linkProgram(shaderProgram);
```

 Or we can use the index provided by the graphics card instead of setting the index
 ourselves; this avoids the re-linking of the shader program.

```js
const locPosition = gl.getAttribLocation(shaderProgram, "position");
gl.vertexAttribPointer(locPosition, 3, gl.FLOAT, false, 20, 0);
gl.enableVertexAttribArray(locPosition);

const locNormal = gl.getAttribLocation(shaderProgram, "normal");
gl.vertexAttribPointer(locNormal, 4, gl.BYTE, true, 20, 12);
gl.enableVertexAttribArray(locNormal);

const locTexUV = gl.getAttribLocation(shaderProgram, "texUV");
gl.vertexAttribPointer(locTexUV, 2, gl.UNSIGNED\_SHORT, true, 20, 16);
gl.enableVertexAttribArray(locTexUV);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Vertex Specification on the OpenGL wiki
* `WebGL2RenderingContext.vertexAttribIPointer()`


WebGLRenderingContext: deleteShader() method - Web APIs

WebGLRenderingContext: deleteShader() method
============================================

 The **`WebGLRenderingContext.deleteShader()`** method of the WebGL API marks a given
 `WebGLShader` object for deletion. It will then be deleted whenever the
 shader is no longer in use. This method has no effect if the shader has already been
 deleted, and the `WebGLShader` is automatically marked for deletion when it
 is destroyed by the garbage collector.

Syntax
------

```js
deleteShader(shader)
```

### Parameters

`shader`

A `WebGLShader` object to delete.

### Return value

None (`undefined`).

Examples
--------

### Deleting a shader

```js
gl.deleteShader(shader);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.getAttachedShaders()`


WebGLRenderingContext: framebufferRenderbuffer() method - Web APIs

WebGLRenderingContext: framebufferRenderbuffer() method
=======================================================

 The **`WebGLRenderingContext.framebufferRenderbuffer()`**
 method of the WebGL API attaches a
 `WebGLRenderbuffer` object to a `WebGLFramebuffer` object.

Syntax
------

```js
framebufferRenderbuffer(target, attachment, renderbuffertarget, renderbuffer)
```

### Parameters

`target`

 A `GLenum` specifying the binding point (target) for the framebuffer.
 Possible values:

`gl.FRAMEBUFFER`

 Collection buffer data storage of color, alpha,
 depth and stencil buffers used to render an image.

 When using a WebGL 2 context,
 the following values are available additionally:

`gl.DRAW_FRAMEBUFFER`

 Equivalent to `gl.FRAMEBUFFER`.
 Used as a destination for drawing, rendering, clearing, and writing operations.

`gl.READ_FRAMEBUFFER`

Used as a source for reading operations.

`attachment`

 A `GLenum` specifying the attachment point for the render buffer.
 Possible values:

* `gl.COLOR_ATTACHMENT0`: color buffer.
* `gl.DEPTH_ATTACHMENT`: depth buffer.
* `gl.DEPTH_STENCIL_ATTACHMENT`: depth and stencil buffer.
* `gl.STENCIL_ATTACHMENT`: stencil buffer.

 When using a WebGL 2 context,
 the following values are available additionally:

* `gl.COLOR_ATTACHMENT1 gl.COLOR_ATTACHMENT2 gl.COLOR_ATTACHMENT3 gl.COLOR_ATTACHMENT4 gl.COLOR_ATTACHMENT5 gl.COLOR_ATTACHMENT6 gl.COLOR_ATTACHMENT7 gl.COLOR_ATTACHMENT8 gl.COLOR_ATTACHMENT9 gl.COLOR_ATTACHMENT10 gl.COLOR_ATTACHMENT11 gl.COLOR_ATTACHMENT12 gl.COLOR_ATTACHMENT13 gl.COLOR_ATTACHMENT14 gl.COLOR_ATTACHMENT15`

When using the `WEBGL_draw_buffers` extension:

* `ext.COLOR_ATTACHMENT0_WEBGL` (same as
 `gl.COLOR_ATTACHMENT0`)
* `ext.COLOR_ATTACHMENT1_WEBGL ext.COLOR_ATTACHMENT2_WEBGL ext.COLOR_ATTACHMENT3_WEBGL ext.COLOR_ATTACHMENT4_WEBGL ext.COLOR_ATTACHMENT5_WEBGL ext.COLOR_ATTACHMENT6_WEBGL ext.COLOR_ATTACHMENT7_WEBGL ext.COLOR_ATTACHMENT8_WEBGL ext.COLOR_ATTACHMENT9_WEBGL ext.COLOR_ATTACHMENT10_WEBGL ext.COLOR_ATTACHMENT11_WEBGL ext.COLOR_ATTACHMENT12_WEBGL ext.COLOR_ATTACHMENT13_WEBGL ext.COLOR_ATTACHMENT14_WEBGL ext.COLOR_ATTACHMENT15_WEBGL`

`renderbuffertarget`

 A `GLenum` specifying the binding point (target) for the render buffer.
 Possible values:

`gl.RENDERBUFFER`

Buffer data storage for single images in a renderable internal format.

`renderbuffer`

A `WebGLRenderbuffer` object to attach.

### Return value

None (`undefined`).

### Exceptions

* A `gl.INVALID_ENUM` error is thrown if `target` is not
 `gl.FRAMEBUFFER`, `gl.DRAW_FRAMEBUFFER`, or
 `gl.READ_FRAMEBUFFER`.
* A `gl.INVALID_ENUM` error is thrown if `renderbuffertarget` is
 not `gl.RENDERBUFFER`.
* A `gl.INVALID_ENUM` error is thrown if `attachment` is not one
 of the allowed enums.
Examples
--------

```js
gl.framebufferRenderbuffer(
  gl.FRAMEBUFFER,
  gl.COLOR\_ATTACHMENT0,
  gl.RENDERBUFFER,
  renderbuffer,
);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.6 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()`
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`
* `WEBGL_draw_buffers`


WebGLRenderingContext: createProgram() method - Web APIs

WebGLRenderingContext: createProgram() method
=============================================

 The **`WebGLRenderingContext.createProgram()`** method of the
 WebGL API creates and initializes a
 `WebGLProgram` object.

Syntax
------

```js
createProgram()
```

### Parameters

None.

### Return value

 A `WebGLProgram` object that is a combination of two compiled
 `WebGLShader`s consisting of a vertex shader and a fragment shader (both
 written in GLSL). These are then linked into a usable program.

Examples
--------

### Creating a WebGL program

```js
const program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw `Could not compile WebGL program. \n\n${info}`;
}
```

 See `WebGLShader` for information on creating the
 `vertexShader` and `fragmentShader` in the above example.

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`


WebGLRenderingContext: getVertexAttribOffset() method - Web APIs

WebGLRenderingContext: getVertexAttribOffset() method
=====================================================

 The **`WebGLRenderingContext.getVertexAttribOffset()`** method
 of the WebGL API returns the address of a
 specified vertex attribute.

Syntax
------

```js
getVertexAttribOffset(index, pname)
```

### Parameters

`index`

A `GLuint` specifying the index of the vertex attribute.

`pname`

A `GLenum` which must be `gl.VERTEX_ATTRIB_ARRAY_POINTER`.

### Return value

A `GLintptr` indicating the address of the vertex attribute.

Examples
--------

```js
gl.getVertexAttribOffset(i, gl.VERTEX\_ATTRIB\_ARRAY\_POINTER);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.vertexAttribPointer()`


WebGLRenderingContext: createRenderbuffer() method - Web APIs

WebGLRenderingContext: createRenderbuffer() method
==================================================

 The **`WebGLRenderingContext.createRenderbuffer()`** method of
 the WebGL API creates and initializes a
 `WebGLRenderbuffer` object.

Syntax
------

```js
createRenderbuffer()
```

### Parameters

None.

### Return value

 A `WebGLRenderbuffer` object that stores data such an image, or can be
 source or target of an rendering operation.

Examples
--------

### Creating a render buffer

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const renderBuffer = gl.createRenderbuffer();
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.7 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* `WebGLRenderingContext.isRenderbuffer()`
* Other buffers: `WebGLBuffer`, `WebGLFramebuffer`


WebGLRenderingContext: validateProgram() method - Web APIs

WebGLRenderingContext: validateProgram() method
===============================================

 The **`WebGLRenderingContext.validateProgram()`** method of the
 WebGL API validates a
 `WebGLProgram`. It checks if it is successfully linked and if it can be
 used in the current WebGL state.

Syntax
------

```js
validateProgram(program)
```

### Parameters

`program`

A `WebGLProgram` to validate.

### Return value

None (`undefined`).

Examples
--------

```js
const program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);
gl.validateProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw `Could not compile WebGL program. \n\n${info}`;
}

gl.useProgram(program);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`


WebGLRenderingContext: disableVertexAttribArray() method - Web APIs

WebGLRenderingContext: disableVertexAttribArray() method
========================================================

 The **`WebGLRenderingContext.disableVertexAttribArray()`**
 method of the WebGL API turns the generic
 vertex attribute array off at a given index position.

Syntax
------

```js
disableVertexAttribArray(index)
```

### Parameters

`index`

A `GLuint` specifying the index of the vertex attribute to disable.

### Return value

None (`undefined`).

Examples
--------

```js
gl.disableVertexAttribArray(0);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.enableVertexAttribArray()`


WebGLRenderingContext: hint() method - Web APIs

WebGLRenderingContext: hint() method
====================================

 The **`WebGLRenderingContext.hint()`** method of the WebGL API specifies hints for certain
 behaviors. The interpretation of these hints depend on the implementation.

Syntax
------

```js
hint(target, mode)
```

### Parameters

`target`

Sets which behavior to be controlled. Possible values:

`gl.GENERATE_MIPMAP_HINT`

 Quality of filtering when generating
 mipmap images with `WebGLRenderingContext.generateMipmap()`.

When using the `OES_standard_derivatives` extension:

`ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES`

 Accuracy of the
 derivative calculation for the GLSL built-in functions: `dFdx`,
 `dFdy`, and `fwidth`.

 When using a WebGL 2 context,
 the following values are available additionally:

`gl.FRAGMENT_SHADER_DERIVATIVE_HINT`

Same as `ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES`

`mode`

 Sets the behavior. The default value is `gl.DONT_CARE`. The possible
 values are:

* `gl.FASTEST`: The most efficient behavior should be used.
* `gl.NICEST`: The most correct or the highest quality option should be
 used.
* `gl.DONT_CARE`: There is no preference for this behavior.

### Return value

None (`undefined`).

Examples
--------

 The following example hints that the quality of filtering when generating mipmap images
 should be most efficient instead of the best quality.

```js
gl.hint(gl.GENERATE\_MIPMAP\_HINT, gl.FASTEST);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.generateMipmap()`
* `OES_standard_derivatives`


WebGLRenderingContext: texSubImage2D() method - Web APIs

WebGLRenderingContext: texSubImage2D() method
=============================================

 The **`WebGLRenderingContext.texSubImage2D()`** method of the
 WebGL API specifies a sub-rectangle of the
 current texture.

Syntax
------

```js
// WebGL1
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels) // pixels is a TypedArray or a DataView
texSubImage2D(target, level, xoffset, yoffset, format, type, pixels)

// WebGL2
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, offset)
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, source)
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels, srcOffset)
```

### Parameters

`target`

 A `GLenum` specifying the binding point (target) of the active texture.
 Possible values:

* `gl.TEXTURE_2D`: A two-dimensional texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_X`: Positive X face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_X`: Negative X face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Y`: Positive Y face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y`: Negative Y face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Z`: Positive Z face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z`: Negative Z face for a cube-mapped
 texture.

`level`

 A `GLint` specifying the level of detail. Level 0 is the base image
 level and level *n* is the n-th mipmap reduction level.

`xoffset`

 A `GLint` specifying the lower left texel x coordinate of a width-wide
 by height-wide rectangular subregion of the texture array.

`yoffset`

 A `GLint` specifying the lower left texel y coordinate of a width-wide
 by height-wide rectangular subregion of the texture array.

`width`

A `GLsizei` specifying the width of the texture in texels.

`height`

A `GLsizei` specifying the height of the texture in texels.

`format`

A `GLenum` specifying the format of the texel data. Possible values:

* `gl.ALPHA`: Discards the red, green and blue components and reads the
 alpha component.
* `gl.RGB`: Discards the alpha components and reads the red, green and
 blue components.
* `gl.RGBA`: Red, green, blue and alpha components are read from the
 color buffer.
* `gl.LUMINANCE`: Each color component is a luminance component, alpha
 is 1.0.
* `gl.LUMINANCE_ALPHA`: Each component is a luminance/alpha component.

When using the `EXT_sRGB` extension:

* `ext.SRGB_EXT`
* `ext.SRGB_ALPHA_EXT`

 When using a WebGL 2 context,
 the following values are available additionally:

* `gl.RED`
* `gl.RG`
* `gl.RED_INTEGER`
* `gl.RG_INTEGER`
* `gl.RGB_INTEGER`
* `gl.RGBA_INTEGER`

`type`

A `GLenum` specifying the data type of the texel data. Possible values:

* `gl.UNSIGNED_BYTE`: 8 bits per channel for `gl.RGBA`
* `gl.UNSIGNED_SHORT_5_6_5`: 5 red bits, 6 green bits, 5 blue bits.
* `gl.UNSIGNED_SHORT_4_4_4_4`: 4 red bits, 4 green bits, 4 blue bits, 4
 alpha bits.
* `gl.UNSIGNED_SHORT_5_5_5_1`: 5 red bits, 5 green bits, 5 blue bits, 1
 alpha bit.

When using the `OES_texture_float` extension:

* `gl.FLOAT`

When using the `OES_texture_half_float` extension:

* `gl.HALF_FLOAT_OES`

 When using a WebGL 2 context,
 the following values are available additionally:

* `gl.BYTE`
* `gl.UNSIGNED_SHORT`
* `gl.SHORT`
* `gl.UNSIGNED_INT`
* `gl.INT`
* `gl.HALF_FLOAT`
* `gl.FLOAT`
* `gl.UNSIGNED_INT_2_10_10_10_REV`
* `gl.UNSIGNED_INT_10F_11F_11F_REV`
* `gl.UNSIGNED_INT_5_9_9_9_REV`
* `gl.UNSIGNED_INT_24_8`
* `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (pixels must be
 `null`)

`pixels`

One of the following objects can be used as a pixel source for the texture:

* `Uint8Array` (Must be used if `type` is `gl.UNSIGNED_BYTE`)
* `Uint16Array` (Must be used if `type` is either
 `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`,
 `gl.UNSIGNED_SHORT_5_5_5_1`, or `ext.HALF_FLOAT_OES`)
* `Float32Array` (Must be used if `type` is `gl.FLOAT`)
* `ImageData`,
* `HTMLImageElement`,
* `HTMLCanvasElement`,
* `HTMLVideoElement`,
* `ImageBitmap`.

`offset`

 (WebGL 2 only) A `GLintptr` byte offset into the
 `WebGLBuffer`'s data store. Used to upload data to the currently bound
 `WebGLTexture` from the `WebGLBuffer` bound to the
 `PIXEL_UNPACK_BUFFER` target.

### Return value

None (`undefined`).

Examples
--------

```js
gl.texSubImage2D(gl.TEXTURE\_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED\_BYTE, image);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # TEXSUBIMAGE2D |
| WebGL 2.0 Specification # 3.7.6 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.compressedTexImage2D()`
* `WebGLRenderingContext.copyTexImage2D()`
* `WebGLRenderingContext.getTexParameter()`
* `OES_texture_float`
* `OES_texture_half_float`
* `EXT_sRGB`
* `EXT_texture_norm16`


WebGLRenderingContext: clearStencil() method - Web APIs

WebGLRenderingContext: clearStencil() method
============================================

 The **`WebGLRenderingContext.clearStencil()`** method of the WebGL API specifies the clear value for the
 stencil buffer.

 This specifies what stencil value to use when calling the
 `clear()` method.

Syntax
------

```js
clearStencil(s)
```

### Parameters

`s`

 A `GLint` specifying the index used when the stencil buffer is cleared.
 Default value: 0.

### Return value

None (`undefined`).

Examples
--------

```js
gl.clearStencil(1);
```

 To get the current stencil clear value, query the `STENCIL_CLEAR_VALUE`
 constant.

```js
gl.getParameter(gl.STENCIL\_CLEAR\_VALUE);
// 1
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearDepth()`


WebGLRenderingContext: blendEquation() method - Web APIs

WebGLRenderingContext: blendEquation() method
=============================================

 The **`WebGLRenderingContext.blendEquation()`** method of the
 WebGL API is used to set both the RGB blend
 equation and alpha blend equation to a single equation.

 The blend equation determines how a new pixel is combined with a pixel already in the
 `WebGLFramebuffer`.

Syntax
------

```js
blendEquation(mode)
```

### Parameters

`mode`

 A `GLenum` specifying how source and destination colors are combined.
 Must be either:

* `gl.FUNC_ADD`: source + destination (default value)
* `gl.FUNC_SUBTRACT`: source - destination
* `gl.FUNC_REVERSE_SUBTRACT`: destination - source

When using the `EXT_blend_minmax` extension:

* `ext.MIN_EXT`: Minimum of source and destination
* `ext.MAX_EXT`: Maximum of source and destination

 When using a WebGL 2 context,
 the following values are available additionally:

* `gl.MIN`: Minimum of source and destination
* `gl.MAX`: Maximum of source and destination

### Exception

 If *mode* is not one of the three possible values, a
 `gl.INVALID_ENUM` error is thrown.

### Return value

None (`undefined`).

Examples
--------

To set the blend equation, use:

```js
gl.blendEquation(gl.FUNC\_ADD);
gl.blendEquation(gl.FUNC\_SUBTRACT);
gl.blendEquation(gl.FUNC\_REVERSE\_SUBTRACT);
```

 To get the blend equations, query the `BLEND_EQUATION`,
 `BLEND_EQUATION_RGB` and `BLEND_EQUATION_ALPHA` constants which
 return `gl.FUNC_ADD`, `gl.FUNC_SUBTRACT`,
 `gl.FUNC_REVERSE_SUBTRACT`, or if the `EXT_blend_minmax` is
 enabled: `ext.MIN_EXT` or `ext.MAX_EXT`.

```js
gl.getParameter(gl.BLEND\_EQUATION\_RGB) === gl.FUNC\_ADD;
// true

gl.getParameter(gl.BLEND\_EQUATION\_ALPHA) === gl.FUNC\_ADD;
// true
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.blendColor()`
* `WebGLRenderingContext.blendFunc()`
* `EXT_blend_minmax`


WebGLRenderingContext: blendColor() method - Web APIs

WebGLRenderingContext: blendColor() method
==========================================

 The **`WebGLRenderingContext.blendColor()`** method of the WebGL API is used to set the source and
 destination blending factors.

Syntax
------

```js
blendColor(red, green, blue, alpha)
```

### Parameters

`red`

A `GLclampf` for the red component in the range of 0 to 1. Default value is 0.

`green`

A `GLclampf` for the green component in the range of 0 to 1. Default value is 0.

`blue`

A `GLclampf` for the blue component in the range of 0 to 1. Default value is 0.

`alpha`

 A `GLclampf` for the alpha component (transparency) in the range of 0.
 to 1. Default value is 0.

### Return value

None (`undefined`).

Examples
--------

To set the blend color, use:

```js
gl.blendColor(0, 0.5, 1, 1);
```

 To get the blend color, query the `BLEND_COLOR` constant which returns a
 `Float32Array`.

```js
gl.getParameter(gl.BLEND\_COLOR);
// Float32Array[0, 0.5, 1, 1]
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.blendEquation()`
* `WebGLRenderingContext.blendFunc()`


WebGLRenderingContext: checkFramebufferStatus() method - Web APIs

WebGLRenderingContext: checkFramebufferStatus() method
======================================================

 The **`WebGLRenderingContext.checkFramebufferStatus()`** method
 of the WebGL API returns the completeness
 status of the `WebGLFramebuffer` object.

Syntax
------

```js
checkFramebufferStatus(target)
```

### Parameters

`target`

A `GLenum` specifying the binding point (target). Possible values:

`gl.FRAMEBUFFER`

 Collection buffer data storage of color, alpha,
 depth and stencil buffers used to render an image.

 When using a WebGL 2 context,
 the following values are available additionally:

`gl.DRAW_FRAMEBUFFER`

 Equivalent to `gl.FRAMEBUFFER`.
 Used as a destination for drawing, rendering, clearing, and writing operations.

`gl.READ_FRAMEBUFFER`

Used as a source for reading operations.

### Return value

 A `GLenum` indicating the completeness status of the framebuffer or
 `0` if an error occurs. Possible enum return values:

* `gl.FRAMEBUFFER_COMPLETE`: The framebuffer is ready to display.
* `gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT`: The attachment types are
 mismatched or not all framebuffer attachment points are framebuffer attachment
 complete.
* `gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT`: There is no attachment.
* `gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS`: Height and width of the
 attachment are not the same.
* `gl.FRAMEBUFFER_UNSUPPORTED`: The format of the attachment is not
 supported or if depth and stencil attachments are not the same renderbuffer.
* When using a WebGL 2 context, the
 following values can be returned additionally:
    + `gl.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE`: The values of
     `gl.RENDERBUFFER_SAMPLES` are different among attached renderbuffers,
     or are non-zero if the attached images are a mix of renderbuffers and textures.
* When using the `OVR_multiview2` extension, the following value can be
 returned additionally:
    + `ext.FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR`: If
     `baseViewIndex` is not the same for all framebuffer attachment points
     where the value of `FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE` is not
     `NONE`, the framebuffer is considered incomplete.
Examples
--------

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const framebuffer = gl.createFramebuffer();

// …

gl.checkFramebufferStatus(gl.FRAMEBUFFER);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.6 |
| WebGL 2.0 Specification # 3.7.4 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()`
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`


WebGLRenderingContext: frontFace() method - Web APIs

WebGLRenderingContext: frontFace() method
=========================================

 The **`WebGLRenderingContext.frontFace()`** method of the WebGL API specifies whether polygons are
 front- or back-facing by setting a winding orientation.

Syntax
------

```js
frontFace(mode)
```

### Parameters

`mode`

 A GLenum type winding orientation.
 The default value is `gl.CCW`. Possible values:

* `gl.CW`: Clock-wise winding.
* `gl.CCW`: Counter-clock-wise winding.

### Return value

None (`undefined`).

Examples
--------

```js
gl.frontFace(gl.CW);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.cullFace()`


WebGLRenderingContext: enable() method - Web APIs

WebGLRenderingContext: enable() method
======================================

 The **`WebGLRenderingContext.enable()`** method of the WebGL API enables specific WebGL capabilities
 for this context.

Syntax
------

```js
enable(cap)
```

### Parameters

`cap`

 A `GLenum` specifying which WebGL capability to enable. Possible
 values:

| Constant | Description |
| --- | --- |
| `gl.BLEND` | Activates blending of the computed fragment color values. See `WebGLRenderingContext.blendFunc()`. |
| `gl.CULL_FACE` | Activates culling of polygons. See `WebGLRenderingContext.cullFace()`. |
| `gl.DEPTH_TEST` | Activates depth comparisons and updates to the depth buffer. See `WebGLRenderingContext.depthFunc()`. |
| `gl.DITHER` | Activates dithering of color components before they get written to the color buffer. |
| `gl.POLYGON_OFFSET_FILL` | Activates adding an offset to depth values of polygon's fragments. See `WebGLRenderingContext.polygonOffset()`. |
| `gl.SAMPLE_ALPHA_TO_COVERAGE` | Activates the computation of a temporary coverage value determined by the alpha value. |
| `gl.SAMPLE_COVERAGE` | Activates ANDing the fragment's coverage with the temporary coverage value. See `WebGLRenderingContext.sampleCoverage()`. |
| `gl.SCISSOR_TEST` | Activates the scissor test that discards fragments that are outside of the scissor rectangle. See `WebGLRenderingContext.scissor()`. |
| `gl.STENCIL_TEST` | Activates stencil testing and updates to the stencil buffer. See `WebGLRenderingContext.stencilFunc()`. |

 When using a WebGL 2 context, the
 following values are available additionally:

| Constant | Description |
| --- | --- |
| `gl.RASTERIZER_DISCARD` | Primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. `gl.clear()` commands are ignored. |

### Return value

None (`undefined`).

Examples
--------

```js
gl.enable(gl.DITHER);
```

 To check if a capability is enabled, use the
 `WebGLRenderingContext.isEnabled()` method:

```js
gl.isEnabled(gl.DITHER);
// true
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.disable()`
* `WebGLRenderingContext.isEnabled()`


WebGLRenderingContext: lineWidth() method - Web APIs

WebGLRenderingContext: lineWidth() method
=========================================

 The **`WebGLRenderingContext.lineWidth()`** method of the WebGL API sets the line width of rasterized
 lines.

**Warning:** The webgl spec, based on the OpenGL ES 2.0/3.0 specs points out that the minimum and
 maximum width for a line is implementation defined. The maximum minimum width is
 allowed to be 1.0. The minimum maximum width is also allowed to be 1.0. Because of
 these implementation defined limits it is not recommended to use line widths other
 than 1.0 since there is no guarantee any user's browser will display any other width.

 As of January 2017 most implementations of WebGL only support a minimum of 1 and a
 maximum of 1 as the technology they are based on has these same limits.

Syntax
------

```js
lineWidth(width)
```

### Parameters

`width`

A `GLfloat` specifying the width of rasterized lines. Default value: 1.

### Return value

None (`undefined`).

Examples
--------

Setting the line width:

```js
gl.lineWidth(5);
```

Getting the line width:

```js
gl.getParameter(gl.LINE\_WIDTH);
```

Getting the range of available widths. Returns a `Float32Array`.

```js
gl.getParameter(gl.ALIASED\_LINE\_WIDTH\_RANGE);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext`


WebGLRenderingContext: getProgramInfoLog() method - Web APIs

WebGLRenderingContext: getProgramInfoLog() method
=================================================

 The **WebGLRenderingContext.getProgramInfoLog** returns the information
 log for the specified `WebGLProgram` object. It contains errors that
 occurred during failed linking or validation of `WebGLProgram` objects.

Syntax
------

```js
getProgramInfoLog(program)
```

### Parameters

`program`

The `WebGLProgram` to query.

### Return value

 A string that contains diagnostic messages, warning messages, and
 other information about the last linking or validation operation. When a
 `WebGLProgram` object is initially created, its information log will be a
 string of length 0.

Examples
--------

### Checking program errors

```js
const program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

gl.getProgramInfoLog(program);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getError()`


WebGLRenderingContext: isTexture() method - Web APIs

WebGLRenderingContext: isTexture() method
=========================================

 The **`WebGLRenderingContext.isTexture()`** method of the WebGL API returns `true` if the
 passed `WebGLTexture` is valid and `false` otherwise.

Syntax
------

```js
isTexture(texture)
```

### Parameters

`texture`

A `WebGLTexture` to check.

### Return value

A `GLboolean` indicating whether or not the texture is valid.

Examples
--------

### Checking a texture

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const texture = gl.createTexture();

gl.isTexture(texture);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.8 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.deleteTexture()`
* `WebGLRenderingContext.texImage2D()`


WebGLRenderingContext: scissor() method - Web APIs

WebGLRenderingContext: scissor() method
=======================================

 The **`WebGLRenderingContext.scissor()`** method of the WebGL API sets a scissor box, which limits
 the drawing to a specified rectangle.

Syntax
------

```js
scissor(x, y, width, height)
```

### Parameters

`x`

 A `GLint` specifying the horizontal coordinate for the lower left
 corner of the box. Default value: 0.

`y`

 A `GLint` specifying the vertical coordinate for the lower left corner
 of the box. Default value: 0.

`width`

 A non-negative `GLsizei` specifying the width of the scissor box.
 Default value: width of the canvas.

`height`

 A non-negative `GLsizei` specifying the height of the scissor box.
 Default value: height of the canvas.

### Return value

None (`undefined`).

### Exceptions

 If either *width* or *height* is a negative value, a
 `gl.INVALID_VALUE` error is thrown.

Examples
--------

 When the scissor test is enabled, only pixels within the scissor box can be modified by
 drawing commands.

```js
// turn on scissor test
gl.enable(gl.SCISSOR\_TEST);

// set the scissor rectangle
gl.scissor(x, y, width, height);

// execute drawing commands in the scissor box (e.g. clear)

// turn off scissor test again
gl.disable(gl.SCISSOR\_TEST);
```

 To get the current scissor box dimensions, query the `SCISSOR_BOX` constant
 which returns an `Int32Array`.

```js
gl.scissor(0, 0, 200, 200);
gl.getParameter(gl.SCISSOR\_BOX);
// Int32Array[0, 0, 200, 200]
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.4 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.viewport()`
* `WebGLRenderingContext.enable()`
* `WebGLRenderingContext.disable()`


WebGLRenderingContext: isRenderbuffer() method - Web APIs

WebGLRenderingContext: isRenderbuffer() method
==============================================

 The **`WebGLRenderingContext.isRenderbuffer()`** method of the
 WebGL API returns `true` if the
 passed `WebGLRenderbuffer` is valid and `false` otherwise.

Syntax
------

```js
isRenderbuffer(renderbuffer)
```

### Parameters

`renderbuffer`

A `WebGLRenderbuffer` to check.

### Return value

A `GLboolean` indicating whether or not the renderbuffer is valid.

Examples
--------

### Checking a renderbuffer

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const renderbuffer = gl.createRenderbuffer();

gl.isRenderbuffer(renderbuffer);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.7 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* Other buffers: `WebGLBuffer`, `WebGLFramebuffer`


WebGLRenderingContext: deleteBuffer() method - Web APIs

WebGLRenderingContext: deleteBuffer() method
============================================

 The **`WebGLRenderingContext.deleteBuffer()`** method of the WebGL API deletes a given
 `WebGLBuffer`. This method has no effect if the buffer has already been
 deleted. Normally you don't need to call this method yourself, when the buffer object is dereferenced it will be marked as free.

Syntax
------

```js
deleteBuffer(buffer)
```

### Parameters

`buffer`

A `WebGLBuffer` object to delete.

### Return value

None (`undefined`).

Examples
--------

### Deleting a buffer

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();

// …

gl.deleteBuffer(buffer);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.5 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindBuffer()`
* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.isBuffer()`
* Other buffers: `WebGLFramebuffer`, `WebGLRenderbuffer`


WebGLRenderingContext: compressedTexSubImage2D() method - Web APIs

WebGLRenderingContext: compressedTexSubImage2D() method
=======================================================

 The **`WebGLRenderingContext.compressedTexSubImage2D()`**
 method of the WebGL API specifies a
 two-dimensional sub-rectangle for a texture image in a compressed format.

 Compressed image formats must be enabled by WebGL extensions before
 using this method or a `WebGL2RenderingContext` must be used.

Syntax
------

```js
// WebGL 1:
compressedTexSubImage2D(target, level, xoffset, yoffset, width, height, format, srcData)

// Additionally available in WebGL 2:
compressedTexSubImage2D(target, level, xoffset, yoffset, width, height, format, imageSize, offset)
compressedTexSubImage2D(target, level, xoffset, yoffset, width, height, format, srcData)
compressedTexSubImage2D(target, level, xoffset, yoffset, width, height, format, srcData, srcOffset)
compressedTexSubImage2D(target, level, xoffset, yoffset, width, height, format, srcData, srcOffset, srcLengthOverride)
```

### Parameters

`target`

 A `GLenum` specifying the binding point (target) of the active
 compressed texture. Possible values:

* `gl.TEXTURE_2D`: A two-dimensional texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_X`: Positive X face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_X`: Negative X face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Y`: Positive Y face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y`: Negative Y face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Z`: Positive Z face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z`: Negative Z face for a cube-mapped
 texture.

`level`

 A `GLint` specifying the level of detail. Level 0 is the base image
 level and level *n* is the n-th mipmap reduction level.

`xoffset`

 A `GLint` specifying the horizontal offset within the compressed
 texture image.

`yoffset`

 A `GLint` specifying the vertical offset within the compressed texture
 image.

`width`

A `GLsizei` specifying the width of the compressed texture.

`height`

A `GLsizei` specifying the height of the compressed texture.

`format`

 A `GLenum` specifying the compressed image format. Compressed image
 formats must be enabled by WebGL extensions before
 using this method. Possible values:

* When using the `WEBGL_compressed_texture_s3tc` extension:
    + `ext.COMPRESSED_RGB_S3TC_DXT1_EXT`
    + `ext.COMPRESSED_RGBA_S3TC_DXT1_EXT`
    + `ext.COMPRESSED_RGBA_S3TC_DXT3_EXT`
    + `ext.COMPRESSED_RGBA_S3TC_DXT5_EXT`
* When using the `WEBGL_compressed_texture_s3tc_srgb` extension:
    + `ext.COMPRESSED_SRGB_S3TC_DXT1_EXT`
    + `ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT`
    + `ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT`
    + `ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT`
* When using the `WEBGL_compressed_texture_etc` extension:
    + `ext.COMPRESSED_R11_EAC`
    + `ext.COMPRESSED_SIGNED_R11_EAC`
    + `ext.COMPRESSED_RG11_EAC`
    + `ext.COMPRESSED_SIGNED_RG11_EAC`
    + `ext.COMPRESSED_RGB8_ETC2`
    + `ext.COMPRESSED_RGBA8_ETC2_EAC`
    + `ext.COMPRESSED_SRGB8_ETC2`
    + `ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`
    + `ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`
    + `ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* When using the `WEBGL_compressed_texture_pvrtc` extension:
    + `ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG`
    + `ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG`
    + `ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG`
    + `ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG`
* When using the `WEBGL_compressed_texture_astc` extension:
    + `ext.COMPRESSED_RGBA_ASTC_4x4_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_5x4_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_5x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_6x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_6x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_8x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_8x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_8x8_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_10x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_10x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_10x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_10x10_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_12x10_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR`
    + `ext.COMPRESSED_RGBA_ASTC_12x12_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR`
* When using the `EXT_texture_compression_bptc` extension:
    + `ext.COMPRESSED_RGBA_BPTC_UNORM_EXT`
    + `ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT`
    + `ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT`
    + `ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT`
* When using the `EXT_texture_compression_rgtc` extension:
    + `ext.COMPRESSED_RED_RGTC1_EXT`
    + `ext.COMPRESSED_SIGNED_RED_RGTC1_EXT`
    + `ext.COMPRESSED_RED_GREEN_RGTC2_EXT`
    + `ext.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT`

`imageSize`

 A `GLsizei` specifying the number of bytes to read from the buffer
 bound to `gl.PIXEL_UNPACK_BUFFER`.

`offset`

 A `GLintptr` specifying the offset in bytes from which to read from the
 buffer bound to `gl.PIXEL_UNPACK_BUFFER`.

`srcData`

 A `TypedArray` or a `DataView` that will be used as a data store for the compressed
 image data in memory.

### Return value

None (`undefined`).

Examples
--------

```js
const ext =
  gl.getExtension("WEBGL\_compressed\_texture\_s3tc") ||
  gl.getExtension("MOZ\_WEBGL\_compressed\_texture\_s3tc") ||
  gl.getExtension("WEBKIT\_WEBGL\_compressed\_texture\_s3tc");
gl.compressedTexSubImage2D(
  gl.TEXTURE\_2D,
  0,
  256,
  256,
  512,
  512,
  ext.COMPRESSED\_RGBA\_S3TC\_DXT5\_EXT,
  textureData,
);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # COMPRESSEDTEXSUBIMAGE2D |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using WebGL extensions
* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.compressedTexImage2D()`
* `WEBGL_compressed_texture_s3tc`
* `WEBGL_compressed_texture_s3tc_srgb`
* `WEBGL_compressed_texture_etc`
* `WEBGL_compressed_texture_pvrtc`
* `WEBGL_compressed_texture_astc`
* `EXT_texture_compression_bptc`
* `EXT_texture_compression_rgtc`


WebGLRenderingContext: createFramebuffer() method - Web APIs

WebGLRenderingContext: createFramebuffer() method
=================================================

 The **`WebGLRenderingContext.createFramebuffer()`** method of
 the WebGL API creates and initializes a
 `WebGLFramebuffer` object.

Syntax
------

```js
createFramebuffer()
```

### Parameters

None.

### Return value

A `WebGLFramebuffer` object.

Examples
--------

### Creating a frame buffer

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const framebuffer = gl.createFramebuffer();
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.6 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()`
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`


WebGLRenderingContext: getParameter() method - Web APIs

WebGLRenderingContext: getParameter() method
============================================

 The **`WebGLRenderingContext.getParameter()`** method of the WebGL API returns a value for the passed
 parameter name.

Syntax
------

```js
getParameter(pname)
```

### Parameters

`pname`

 A `GLenum` specifying which parameter value to return. See below for
 possible values.

### Return value

Depends on the parameter.

Parameter names
---------------

### WebGL 1

 You can query the following `pname` parameters when using a
 `WebGLRenderingContext`.

| Constant | Returned type | Description |
| --- | --- | --- |
| `gl.ACTIVE_TEXTURE` | `GLenum` |  |
| `gl.ALIASED_LINE_WIDTH_RANGE` | `Float32Array` (with 2 elements) |  |
| `gl.ALIASED_POINT_SIZE_RANGE` | `Float32Array` (with 2 elements) |  |
| `gl.ALPHA_BITS` | `GLint` |  |
| `gl.ARRAY_BUFFER_BINDING` | `WebGLBuffer` |  |
| `gl.BLEND` | `GLboolean` |  |
| `gl.BLEND_COLOR` | `Float32Array` (with 4 values) |  |
| `gl.BLEND_DST_ALPHA` | `GLenum` |  |
| `gl.BLEND_DST_RGB` | `GLenum` |  |
| `gl.BLEND_EQUATION` | `GLenum` |  |
| `gl.BLEND_EQUATION_ALPHA` | `GLenum` |  |
| `gl.BLEND_EQUATION_RGB` | `GLenum` |  |
| `gl.BLEND_SRC_ALPHA` | `GLenum` |  |
| `gl.BLEND_SRC_RGB` | `GLenum` |  |
| `gl.BLUE_BITS` | `GLint` |  |
| `gl.COLOR_CLEAR_VALUE` | `Float32Array` (with 4 values) |  |
| `gl.COLOR_WRITEMASK` |
 sequence<`GLboolean`>
 (with 4 values)
  |  |
| `gl.COMPRESSED_TEXTURE_FORMATS` | `Uint32Array` |
 Returns the compressed texture formats.When using the
 `WEBGL_compressed_texture_s3tc` extension:
 * `ext.COMPRESSED_RGB_S3TC_DXT1_EXT`
* `ext.COMPRESSED_RGBA_S3TC_DXT1_EXT`
* `ext.COMPRESSED_RGBA_S3TC_DXT3_EXT`
* `ext.COMPRESSED_RGBA_S3TC_DXT5_EXT`

 When using the
 `WEBGL_compressed_texture_s3tc_srgb`
 extension:
 * `ext.COMPRESSED_SRGB_S3TC_DXT1_EXT`
* `ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT`
* `ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT`
* `ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT`

When using the `WEBGL_compressed_texture_etc`
 extension:
 * `ext.COMPRESSED_R11_EAC`
* `ext.COMPRESSED_SIGNED_R11_EAC`
* `ext.COMPRESSED_RG11_EAC`
* `ext.COMPRESSED_SIGNED_RG11_EAC`
* `ext.COMPRESSED_RGB8_ETC2`
* `ext.COMPRESSED_RGBA8_ETC2_EAC`
* `ext.COMPRESSED_SRGB8_ETC2`
* `ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`
* `ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`

When using the
 `WEBGL_compressed_texture_pvrtc` extension:
 * `ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG`
* `ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG`
* `ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG`
* `ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG`

When using the
 `WEBGL_compressed_texture_etc1` extension:
 * `ext.COMPRESSED_RGB_ETC1_WEBGL`

When using the
 `WEBGL_compressed_texture_astc` extension:
 * `ext.COMPRESSED_RGBA_ASTC_4x4_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR`
* `ext.COMPRESSED_RGBA_ASTC_5x4_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR`
* `ext.COMPRESSED_RGBA_ASTC_5x5_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR`
* `ext.COMPRESSED_RGBA_ASTC_6x5_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR`
* `ext.COMPRESSED_RGBA_ASTC_6x6_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR`
* `ext.COMPRESSED_RGBA_ASTC_8x5_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR`
* `ext.COMPRESSED_RGBA_ASTC_8x6_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR`
* `ext.COMPRESSED_RGBA_ASTC_8x8_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR`
* `ext.COMPRESSED_RGBA_ASTC_10x5_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR`
* `ext.COMPRESSED_RGBA_ASTC_10x6_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR`
* `ext.COMPRESSED_RGBA_ASTC_10x6_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR`
* `ext.COMPRESSED_RGBA_ASTC_10x10_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR`
* `ext.COMPRESSED_RGBA_ASTC_12x10_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR`
* `ext.COMPRESSED_RGBA_ASTC_12x12_KHR`
* `ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR`
 |
| `gl.CULL_FACE` | `GLboolean` |  |
| `gl.CULL_FACE_MODE` | `GLenum` | `gl.FRONT`, `gl.BACK` or
 `gl.FRONT_AND_BACK`. See also
 `cullFace` |
| `gl.CURRENT_PROGRAM` | `WebGLProgram` or `null` |
 See
 `useProgram`.
  |
| `gl.DEPTH_BITS` | `GLint` |  |
| `gl.DEPTH_CLEAR_VALUE` | `GLfloat` |  |
| `gl.DEPTH_FUNC` | `GLenum` |  |
| `gl.DEPTH_RANGE` | `Float32Array` (with 2 elements) |  |
| `gl.DEPTH_TEST` | `GLboolean` |  |
| `gl.DEPTH_WRITEMASK` | `GLboolean` |  |
| `gl.DITHER` | `GLboolean` |  |
| `gl.ELEMENT_ARRAY_BUFFER_BINDING` | `WebGLBuffer` |  |
| `gl.FRAMEBUFFER_BINDING` | `WebGLFramebuffer` or `null` | `null` corresponds to a binding to the default framebuffer.
 See also
 `bindFramebuffer`.
  |
| `gl.FRONT_FACE` | `GLenum` | `gl.CW` or `gl.CCW`. See also
 `frontFace`.
  |
| `gl.GENERATE_MIPMAP_HINT` | `GLenum` | `gl.FASTEST`, `gl.NICEST` or
 `gl.DONT_CARE`. See also
 `hint`.
  |
| `gl.GREEN_BITS` | `GLint` |  |
| `gl.IMPLEMENTATION_COLOR_READ_FORMAT` | `GLenum` |  |
| `gl.IMPLEMENTATION_COLOR_READ_TYPE` | `GLenum` |  |
| `gl.LINE_WIDTH` | `GLfloat` |  |
| `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS` | `GLint` |  |
| `gl.MAX_CUBE_MAP_TEXTURE_SIZE` | `GLint` |  |
| `gl.MAX_FRAGMENT_UNIFORM_VECTORS` | `GLint` |  |
| `gl.MAX_RENDERBUFFER_SIZE` | `GLint` |  |
| `gl.MAX_TEXTURE_IMAGE_UNITS` | `GLint` |  |
| `gl.MAX_TEXTURE_SIZE` | `GLint` |  |
| `gl.MAX_VARYING_VECTORS` | `GLint` |  |
| `gl.MAX_VERTEX_ATTRIBS` | `GLint` |  |
| `gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS` | `GLint` |  |
| `gl.MAX_VERTEX_UNIFORM_VECTORS` | `GLint` |  |
| `gl.MAX_VIEWPORT_DIMS` | `Int32Array` (with 2 elements) |  |
| `gl.PACK_ALIGNMENT` | `GLint` |  |
| `gl.POLYGON_OFFSET_FACTOR` | `GLfloat` |  |
| `gl.POLYGON_OFFSET_FILL` | `GLboolean` |  |
| `gl.POLYGON_OFFSET_UNITS` | `GLfloat` |  |
| `gl.RED_BITS` | `GLint` |  |
| `gl.RENDERBUFFER_BINDING` | `WebGLRenderbuffer` or `null` |
 See
 `bindRenderbuffer`.
  |
| `gl.RENDERER` | string |  |
| `gl.SAMPLE_BUFFERS` | `GLint` |  |
| `gl.SAMPLE_COVERAGE_INVERT` | `GLboolean` |  |
| `gl.SAMPLE_COVERAGE_VALUE` | `GLfloat` |  |
| `gl.SAMPLES` | `GLint` |  |
| `gl.SCISSOR_BOX` | `Int32Array` (with 4 elements) |  |
| `gl.SCISSOR_TEST` | `GLboolean` |  |
| `gl.SHADING_LANGUAGE_VERSION` | string |  |
| `gl.STENCIL_BACK_FAIL` | `GLenum` |  |
| `gl.STENCIL_BACK_FUNC` | `GLenum` |  |
| `gl.STENCIL_BACK_PASS_DEPTH_FAIL` | `GLenum` |  |
| `gl.STENCIL_BACK_PASS_DEPTH_PASS` | `GLenum` |  |
| `gl.STENCIL_BACK_REF` | `GLint` |  |
| `gl.STENCIL_BACK_VALUE_MASK` | `GLuint` |  |
| `gl.STENCIL_BACK_WRITEMASK` | `GLuint` |  |
| `gl.STENCIL_BITS` | `GLint` |  |
| `gl.STENCIL_CLEAR_VALUE` | `GLint` |  |
| `gl.STENCIL_FAIL` | `GLenum` |  |
| `gl.STENCIL_FUNC` | `GLenum` |  |
| `gl.STENCIL_PASS_DEPTH_FAIL` | `GLenum` |  |
| `gl.STENCIL_PASS_DEPTH_PASS` | `GLenum` |  |
| `gl.STENCIL_REF` | `GLint` |  |
| `gl.STENCIL_TEST` | `GLboolean` |  |
| `gl.STENCIL_VALUE_MASK` | `GLuint` |  |
| `gl.STENCIL_WRITEMASK` | `GLuint` |  |
| `gl.SUBPIXEL_BITS` | `GLint` |  |
| `gl.TEXTURE_BINDING_2D` | `WebGLTexture` or `null` |  |
| `gl.TEXTURE_BINDING_CUBE_MAP` | `WebGLTexture` or `null` |  |
| `gl.UNPACK_ALIGNMENT` | `GLint` |  |
| `gl.UNPACK_COLORSPACE_CONVERSION_WEBGL` | `GLenum` |  |
| `gl.UNPACK_FLIP_Y_WEBGL` | `GLboolean` |  |
| `gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL` | `GLboolean` |  |
| `gl.VENDOR` | string |  |
| `gl.VERSION` | string |  |
| `gl.VIEWPORT` | `Int32Array` (with 4 elements) |  |

### WebGL 2

 You can query the following `pname` parameters when using a
 `WebGL2RenderingContext`.

| Constant | Returned type | Description |
| --- | --- | --- |
| `gl.COPY_READ_BUFFER_BINDING` | `WebGLBuffer` or `null` |
 See
 `bindBuffer`.
  |
| `gl.COPY_WRITE_BUFFER_BINDING` | `WebGLBuffer` or `null` |
 See
 `bindBuffer`.
  |
| `gl.DRAW_BUFFER*i*` | `GLenum` | `gl.BACK`, `gl.NONE` or
 `gl.COLOR_ATTACHMENT{0-15}`. See also
 `drawBuffers`.
  |
| `gl.DRAW_FRAMEBUFFER_BINDING` | `WebGLFramebuffer` or `null` | `null` corresponds to a binding to the default framebuffer.
 See also
 `bindFramebuffer`.
  |
| `gl.FRAGMENT_SHADER_DERIVATIVE_HINT` | `GLenum` | `gl.FASTEST`, `gl.NICEST` or
 `gl.DONT_CARE`. See also
 `hint`.
  |
| `gl.MAX_3D_TEXTURE_SIZE` | `GLint` |  |
| `gl.MAX_ARRAY_TEXTURE_LAYERS` | `GLint` |  |
| `gl.MAX_CLIENT_WAIT_TIMEOUT_WEBGL` | `GLint64` |  |
| `gl.MAX_COLOR_ATTACHMENTS` | `GLint` |  |
| `gl.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS` | `GLint64` |  |
| `gl.MAX_COMBINED_UNIFORM_BLOCKS` | `GLint` |  |
| `gl.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS` | `GLint64` |  |
| `gl.MAX_DRAW_BUFFERS` | `GLint` |  |
| `gl.MAX_ELEMENT_INDEX` | `GLint64` |  |
| `gl.MAX_ELEMENTS_INDICES` | `GLint` |  |
| `gl.MAX_ELEMENTS_VERTICES` | `GLint` |  |
| `gl.MAX_FRAGMENT_INPUT_COMPONENTS` | `GLint` |  |
| `gl.MAX_FRAGMENT_UNIFORM_BLOCKS` | `GLint` |  |
| `gl.MAX_FRAGMENT_UNIFORM_COMPONENTS` | `GLint` |  |
| `gl.MAX_PROGRAM_TEXEL_OFFSET` | `GLint` |  |
| `gl.MAX_SAMPLES` | `GLint` |  |
| `gl.MAX_SERVER_WAIT_TIMEOUT` | `GLint64` |  |
| `gl.MAX_TEXTURE_LOD_BIAS` | `GLfloat` |  |
| `gl.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS` | `GLint` |  |
| `gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS` | `GLint` |  |
| `gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS` | `GLint` |  |
| `gl.MAX_UNIFORM_BLOCK_SIZE` | `GLint64` |  |
| `gl.MAX_UNIFORM_BUFFER_BINDINGS` | `GLint` |  |
| `gl.MAX_VARYING_COMPONENTS` | `GLint` |  |
| `gl.MAX_VERTEX_OUTPUT_COMPONENTS` | `GLint` |  |
| `gl.MAX_VERTEX_UNIFORM_BLOCKS` | `GLint` |  |
| `gl.MAX_VERTEX_UNIFORM_COMPONENTS` | `GLint` |  |
| `gl.MIN_PROGRAM_TEXEL_OFFSET` | `GLint` |  |
| `gl.PACK_ROW_LENGTH` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.PACK_SKIP_PIXELS` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.PACK_SKIP_ROWS` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.PIXEL_PACK_BUFFER_BINDING` | `WebGLBuffer` or `null` |
 See
 `bindBuffer`.
  |
| `gl.PIXEL_UNPACK_BUFFER_BINDING` | `WebGLBuffer` or `null` |
 See
 `bindBuffer`.
  |
| `gl.RASTERIZER_DISCARD` | `GLboolean` |  |
| `gl.READ_BUFFER` | `GLenum` |  |
| `gl.READ_FRAMEBUFFER_BINDING` | `WebGLFramebuffer` or `null` | `null` corresponds to a binding to the default framebuffer.
 See also
 `bindFramebuffer`.
  |
| `gl.SAMPLE_ALPHA_TO_COVERAGE` | `GLboolean` |  |
| `gl.SAMPLE_COVERAGE` | `GLboolean` |  |
| `gl.SAMPLER_BINDING` | `WebGLSampler` or `null` |
 See
 `bindSampler`.
  |
| `gl.TEXTURE_BINDING_2D_ARRAY` | `WebGLTexture` or `null` |
 See
 `bindTexture`.
  |
| `gl.TEXTURE_BINDING_3D` | `WebGLTexture` or `null` |
 See
 `bindTexture`.
  |
| `gl.TRANSFORM_FEEDBACK_ACTIVE` | `GLboolean` |  |
| `gl.TRANSFORM_FEEDBACK_BINDING` | `WebGLTransformFeedback` or `null` |
 See
 `bindTransformFeedback`.
  |
| `gl.TRANSFORM_FEEDBACK_BUFFER_BINDING` | `WebGLBuffer` or `null` |
 See
 `bindBuffer`.
  |
| `gl.TRANSFORM_FEEDBACK_PAUSED` | `GLboolean` |  |
| `gl.UNIFORM_BUFFER_BINDING` | `WebGLBuffer` or `null` |
 See
 `bindBuffer`.
  |
| `gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.UNPACK_IMAGE_HEIGHT` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.UNPACK_ROW_LENGTH` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.UNPACK_SKIP_IMAGES` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.UNPACK_SKIP_PIXELS` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.UNPACK_SKIP_ROWS` | `GLint` |
 See
 `pixelStorei`.
  |
| `gl.VERTEX_ARRAY_BINDING` | `WebGLVertexArrayObject` or `null` |
 See
 `bindVertexArray`.
  |

### WebGL extensions

You can query the following `pname` parameters when using WebGL extensions:

| Constant | Returned type | Extension | Description |
| --- | --- | --- | --- |
| `ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT` | `GLfloat` | `EXT_texture_filter_anisotropic` | Maximum available anisotropy. |
| `ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES` | `GLenum` | `OES_standard_derivatives` |
 Accuracy of the derivative calculation for the GLSL built-in functions:
 `dFdx`, `dFdy`, and `fwidth`.
  |
| `ext.MAX_COLOR_ATTACHMENTS_WEBGL` | `GLint` | `WEBGL_draw_buffers` | The maximum number of framebuffer color attachment points. |
| `ext.MAX_DRAW_BUFFERS_WEBGL` | `GLint` | `WEBGL_draw_buffers` | The maximum number of draw buffers. |
| `ext.DRAW_BUFFER0_WEBGLext.DRAW_BUFFER1_WEBGLext.DRAW_BUFFER2_WEBGLext.DRAW_BUFFER3_WEBGLext.DRAW_BUFFER4_WEBGLext.DRAW_BUFFER5_WEBGLext.DRAW_BUFFER6_WEBGLext.DRAW_BUFFER7_WEBGLext.DRAW_BUFFER8_WEBGLext.DRAW_BUFFER9_WEBGLext.DRAW_BUFFER10_WEBGLext.DRAW_BUFFER11_WEBGLext.DRAW_BUFFER12_WEBGLext.DRAW_BUFFER13_WEBGLext.DRAW_BUFFER14_WEBGLext.DRAW_BUFFER15_WEBGL` | `GLenum` | `WEBGL_draw_buffers` | Drawing buffers. |
| `ext.VERTEX_ARRAY_BINDING_OES` | `WebGLVertexArrayObjectOES` | `OES_vertex_array_object` | Bound vertex array object (VAO). |
| `ext.TIMESTAMP_EXT` | `GLuint64EXT` | `EXT_disjoint_timer_query` | The current time. |
| `ext.GPU_DISJOINT_EXT` | `GLboolean` | `EXT_disjoint_timer_query` | Returns whether or not the GPU performed any disjoint operation. |
| `ext.MAX_VIEWS_OVR` | `GLint` | `OVR_multiview2` | Maximum number of views. |

Examples
--------

```js
gl.getParameter(gl.DITHER);
gl.getParameter(gl.VERSION);
gl.getParameter(gl.VIEWPORT);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |
| WebGL 2.0 Specification # 3.7.2 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.enable()`
* `WebGLRenderingContext.disable()`
* `EXT_texture_filter_anisotropic`
* `OES_standard_derivatives`
* `WEBGL_draw_buffers`
* `EXT_disjoint_timer_query`


WebGLRenderingContext: stencilOpSeparate() method - Web APIs

WebGLRenderingContext: stencilOpSeparate() method
=================================================

 The **`WebGLRenderingContext.stencilOpSeparate()`** method of
 the WebGL API sets the front and/or
 back-facing stencil test actions.

Syntax
------

```js
stencilOpSeparate(face, fail, zfail, zpass)
```

### Parameters

 The `fail`, `zfail` and `zpass` parameters accept all
 constants listed below.

`face`

 A `GLenum` specifying whether the front and/or back stencil state is
 updated. The possible values are:

* `gl.FRONT`
* `gl.BACK`
* `gl.FRONT_AND_BACK`

`fail`

 A `GLenum` specifying the function to use when the stencil test fails.
 The default value is `gl.KEEP`.

`zfail`

 A `GLenum` specifying the function to use when the stencil test passes,
 but the depth test fails. The default value is `gl.KEEP`.

`zpass`

 A `GLenum` specifying the function to use when both the stencil test
 and the depth test pass, or when the stencil test passes and there is no depth buffer
 or depth testing is disabled. The default value is `gl.KEEP`.

### Return value

None (`undefined`).

Constants
---------

`gl.KEEP`

Keeps the current value.

`gl.ZERO`

Sets the stencil buffer value to 0.

`gl.REPLACE`

 Sets the stencil buffer value to the reference value as specified by
 `WebGLRenderingContext.stencilFunc()`.

`gl.INCR`

 Increments the current stencil buffer value. Clamps to the maximum representable
 unsigned value.

`gl.INCR_WRAP`

 Increments the current stencil buffer value. Wraps stencil buffer value to zero when
 incrementing the maximum representable unsigned value.

`gl.DECR`

Decrements the current stencil buffer value. Clamps to 0.

`gl.DECR_WRAP`

 Decrements the current stencil buffer value. Wraps stencil buffer value to the
 maximum representable unsigned value when decrementing a stencil buffer value of 0.

`gl.INVERT`

Inverts the current stencil buffer value bitwise.

Examples
--------

 The stencil testing is disabled by default. To enable or disable stencil testing, use
 the `enable()` and
 `disable()` methods with the argument
 `gl.STENCIL_TEST`.

```js
gl.enable(gl.STENCIL\_TEST);
gl.stencilOpSeparate(gl.FRONT, gl.INCR, gl.DECR, gl.INVERT);
```

 To get the current information about stencil and depth pass or fail, query the
 following constants with `getParameter()`.

```js
gl.getParameter(gl.STENCIL\_FAIL);
gl.getParameter(gl.STENCIL\_PASS\_DEPTH\_PASS);
gl.getParameter(gl.STENCIL\_PASS\_DEPTH\_FAIL);
gl.getParameter(gl.STENCIL\_BACK\_FAIL);
gl.getParameter(gl.STENCIL\_BACK\_PASS\_DEPTH\_PASS);
gl.getParameter(gl.STENCIL\_BACK\_PASS\_DEPTH\_FAIL);
gl.getParameter(gl.STENCIL\_BITS);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.stencilOp()`
* `WebGLRenderingContext.stencilFunc()`
* `WebGLRenderingContext.stencilFuncSeparate()`
* `WebGLRenderingContext.stencilMask()`
* `WebGLRenderingContext.stencilMaskSeparate()`


WebGLRenderingContext: stencilOp() method - Web APIs

WebGLRenderingContext: stencilOp() method
=========================================

 The **`WebGLRenderingContext.stencilOp()`** method of the WebGL API sets both the front and back-facing
 stencil test actions.

Syntax
------

```js
stencilOp(fail, zfail, zpass)
```

### Parameters

All three parameters accept all constants listed below.

`fail`

 A `GLenum` specifying the function to use when the stencil test fails.
 The default value is `gl.KEEP`.

`zfail`

 A `GLenum` specifying the function to use when the stencil test passes,
 but the depth test fails. The default value is `gl.KEEP`.

`zpass`

 A `GLenum` specifying the function to use when both the stencil test
 and the depth test pass, or when the stencil test passes and there is no depth buffer
 or depth testing is disabled. The default value is `gl.KEEP`.

### Return value

None (`undefined`).

Constants
---------

`gl.KEEP`

Keeps the current value.

`gl.ZERO`

Sets the stencil buffer value to 0.

`gl.REPLACE`

 Sets the stencil buffer value to the reference value as specified by
 `WebGLRenderingContext.stencilFunc()`.

`gl.INCR`

 Increments the current stencil buffer value. Clamps to the maximum representable
 unsigned value.

`gl.INCR_WRAP`

 Increments the current stencil buffer value. Wraps stencil buffer value to zero when
 incrementing the maximum representable unsigned value.

`gl.DECR`

Decrements the current stencil buffer value. Clamps to 0.

`gl.DECR_WRAP`

 Decrements the current stencil buffer value. Wraps stencil buffer value to the
 maximum representable unsigned value when decrementing a stencil buffer value of 0.

`gl.INVERT`

Inverts the current stencil buffer value bitwise.

Examples
--------

 The stencil testing is disabled by default. To enable or disable stencil testing, use
 the `enable()` and
 `disable()` methods with the argument
 `gl.STENCIL_TEST`.

```js
gl.enable(gl.STENCIL\_TEST);
gl.stencilOp(gl.INCR, gl.DECR, gl.INVERT);
```

 To get the current information about stencil and depth pass or fail, query the
 following constants with `getParameter()`.

```js
gl.getParameter(gl.STENCIL\_FAIL);
gl.getParameter(gl.STENCIL\_PASS\_DEPTH\_PASS);
gl.getParameter(gl.STENCIL\_PASS\_DEPTH\_FAIL);
gl.getParameter(gl.STENCIL\_BACK\_FAIL);
gl.getParameter(gl.STENCIL\_BACK\_PASS\_DEPTH\_PASS);
gl.getParameter(gl.STENCIL\_BACK\_PASS\_DEPTH\_FAIL);
gl.getParameter(gl.STENCIL\_BITS);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.stencilOpSeparate()`
* `WebGLRenderingContext.stencilFunc()`
* `WebGLRenderingContext.stencilFuncSeparate()`
* `WebGLRenderingContext.stencilMask()`
* `WebGLRenderingContext.stencilMaskSeparate()`


WebGLRenderingContext: drawingBufferWidth property - Web APIs

WebGLRenderingContext: drawingBufferWidth property
==================================================

 The read-only **`WebGLRenderingContext.drawingBufferWidth`**
 property represents the actual width of the current drawing buffer. It should match the
 `width` attribute of the `<canvas>` element associated with
 this context, but might differ if the implementation is not able to provide the
 requested width.

Value
-----

A number.

Examples
--------

Given this `<canvas>` element:

```html
<canvas id="canvas"></canvas>
```

You can get the width of the drawing buffer with the following lines:

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.drawingBufferWidth; // 300
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-drawingBufferWidth |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.drawingBufferHeight`
* `WebGLRenderingContext.viewport()`


WebGLRenderingContext: makeXRCompatible() method - Web APIs

WebGLRenderingContext: makeXRCompatible() method
================================================

 The `WebGLRenderingContext` method
 **`makeXRCompatible()`** ensures that the rendering context
 described by the `WebGLRenderingContext` is ready to render the scene for the
 immersive WebXR device on which it
 will be displayed. If necessary, the WebGL
 layer may reconfigure the context to be ready to render to a different device than it
 originally was.

 This is useful if you have an application which can start out being presented on a
 standard 2D display but can then be transitioned to a 3D immersion system.

Syntax
------

```js
makeXRCompatible()
```

### Parameters

None.

### Return value

 A
 `Promise`
 which successfully resolves once the WebGL context is ready to be used for rendering WebXR content.

### Exceptions

 This method doesn't throw traditional exceptions; instead, the promise rejects with one
 of the following errors as the value passed into the rejection handler:

`AbortError` `DOMException`

Returned if switching the context over to the WebXR-compatible context failed.

`InvalidStateError` `DOMException`

Returned if the WebGL context has been lost or there is no available WebXR device.

Usage notes
-----------

 Because `makeXRCompatible()` may involve replacing the underlying WebGL
 context with a new one that uses the new rendering hardware, the existing contents of
 the context may be lost and, therefore, would need to be re-rendered. This is why the
 `webglcontextlost`
 and
 `webglcontextrestored`
 events are used: the first gives you the opportunity to discard anything you won't need
 anymore, while the second gives you the opportunity to load resources and prepare to
 render the scene in its new context.

 While this method is available through the `WebGLRenderingContext`
 interface, it's actually defined by the WebXR Device API rather than by WebGL.

Examples
--------

 This example demonstrates code logic you might find in a game that starts up using
 WebGL to display menus and other UI, and uses WebGL to render gameplay, but has a button
 on its main menu that offers an option to start the game in WebXR mode.

### HTML

The HTML for the buttons looks like this:

```html
<button class="green button" type="button">Start Game</button>
<button class="blue button use-webxr" type="button">
  Start Game (VR mode)
</button>
```

 The first button starts the game, continuing to present the game onscreen as usual. The
 second button will be used to start the game in `immersive-vr` mode. Note the
 inclusion of a `use-webxr` class on the VR mode button. This is important,
 which we'll explore shortly.

### JavaScript

 The code that handles starting up graphics, switching to VR mode, and so forth looks
 like this:

```js
const outputCanvas = document.querySelector(".output-canvas");
const gl = outputCanvas.getContext("webgl");
let xrSession = null;
let usingXR = false;
let currentScene = "scene1";
let glStartButton;
let xrStartButton;

window.addEventListener("load", (event) => {
  loadSceneResources(currentScene);

  glStartButton.addEventListener("click", handleStartButtonClick);
  xrStartButton.addEventListener("click", handleStartButtonClick);
});

outputCanvas.addEventListener("webglcontextlost", (event) => {
  /\* The context has been lost but can be restored \*/
  event.canceled = true;
});

/\* When the GL context is reconnected, reload the resources for the
 current scene. \*/
outputCanvas.addEventListener("webglcontextrestored", (event) => {
  loadSceneResources(currentScene);
});

async function onStartedXRSession(xrSession) {
  try {
    await gl.makeXRCompatible();
  } catch (err) {
    switch (err) {
      case AbortError:
        showSimpleMessageBox(
          "Unable to transfer the game to your XR headset.",
          "Cancel",
        );
        break;
      case InvalidStateError:
        showSimpleMessageBox(
          "You don't appear to have a compatible XR headset available.",
          "Cancel",
        );
        break;
      default:
        handleFatalError(err);
        break;
    }
    xrSession.end();
  }
}

async function handleStartButtonClick(event) {
  if (event.target.classList.contains("use-webxr") && navigator.xr) {
    try {
      xrSession = await navigator.xr.requestSession("immersive-vr");
      usingXR = true;
    } catch (err) {
      xrSession = NULL;
      usingXR = false;
    }
  }
  startGame();
}

function startGame() {
  currentScene = "scene1";
  loadSceneResources(currentScene);

  /\* and so on \*/
}
```

 This works by having two buttons, one which starts the game normally and the other
 which starts the game in VR mode. These both use the
 `handleStartButtonClick()` function as their event handler. The function
 determines that the button clicked was the one requesting `immersive-vr` mode
 by checking to see if the button has the `use-webxr` class on it. If the
 button clicked by the user has that class (and we've confirmed that WebXR is available
 by ensuring that the `navigator.xr` property exists), we use
 `requestSession()` to request a new WebXR
 session and set the `usingXR` flag to `true`.

 If the other button was clicked, we ensure that `xrSession` is
 `NULL` and clear `usingXR` to `false`.

 Then the `startGame()` function is called to trigger the beginning of
 gameplay.

 Handlers are provided for both
 `webglcontextlost`
 and
 `webglcontextrestored`;
 in the first case, we make sure we're aware that the state can be recovered, while in
 the latter we actually reload the scene to ensure we have the correct resources for the
 current screen or headset configuration.

Specifications
--------------

| Specification |
| --- |
| WebXR Device API # dom-webglrenderingcontextbase-makexrcompatible |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


WebGLRenderingContext: flush() method - Web APIs

WebGLRenderingContext: flush() method
=====================================

 The **`WebGLRenderingContext.flush()`** method of the WebGL API empties different buffer commands,
 causing all commands to be executed as quickly as possible.

Syntax
------

```js
flush()
```

### Parameters

None.

### Return value

None (`undefined`).

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.finish()`