WebGLRenderingContext: sampleCoverage() method - Web APIs

WebGLRenderingContext: sampleCoverage() method
==============================================

 The **`WebGLRenderingContext.sampleCoverage()`** method of the
 WebGL API specifies multi-sample coverage
 parameters for anti-aliasing effects.

Syntax
------

```js
sampleCoverage(value, invert)
```

### Parameters

`value`

 A `GLclampf` which sets a single floating-point coverage value clamped
 to the range [0,1]. The default value is 1.0.

`invert`

 A `GLboolean` which sets whether or not the coverage masks should be
 inverted. The default value is `false`.

### Return value

None (`undefined`).

Examples
--------

 Multi-sampling is disabled by default. To enable or disable multi-sampling, use the
 `enable()` and
 `disable()` methods with the argument
 `gl.SAMPLE_COVERAGE` and `gl.SAMPLE_ALPHA_TO_COVERAGE`.

```js
gl.enable(gl.SAMPLE\_COVERAGE);
gl.sampleCoverage(0.5, false);
```

 To check the sample coverage values, query the `SAMPLE_COVERAGE_VALUE` and
 `SAMPLE_COVERAGE_INVERT` constants.

```js
gl.getParameter(gl.SAMPLE\_COVERAGE\_VALUE); // 0.5
gl.getParameter(gl.SAMPLE\_COVERAGE\_INVERT); // 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
--------

* `HTMLCanvasElement.getContext()` – `antialias` parameter for
 the context.


WebGLRenderingContext: isBuffer() method - Web APIs

WebGLRenderingContext: isBuffer() method
========================================

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

Syntax
------

```js
isBuffer(buffer)
```

### Parameters

`buffer`

A `WebGLBuffer` to check.

### Return value

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

Examples
--------

### Creating a buffer

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

gl.isBuffer(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.deleteBuffer()`
* Other buffers: `WebGLFramebuffer`, `WebGLRenderbuffer`


WebGLRenderingContext: detachShader() method - Web APIs

WebGLRenderingContext: detachShader() method
============================================

 The **WebGLRenderingContext.detachShader()** method of the WebGL API detaches a previously
 attached `WebGLShader` from a `WebGLProgram`.

Syntax
------

```js
detachShader(program, shader)
```

### Parameters

`program`

A `WebGLProgram`.

`shader`

A fragment or vertex `WebGLShader`.

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
--------

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()`
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`


WebGLRenderingContext: drawArrays() method - Web APIs

WebGLRenderingContext: drawArrays() method
==========================================

The **`WebGLRenderingContext.drawArrays()`** method of the WebGL API renders primitives from array data.

Syntax
------

```js
drawArrays(mode, first, count)
```

### Parameters

`mode`

 A `GLenum` specifying the type primitive to render. Possible values
 are:

* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`first`

A `GLint` specifying the starting index in the array of vector points.

`count`

A `GLsizei` specifying the number of indices to be rendered.

### Return value

None (`undefined`).

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `first` or `count` are negative, a
 `gl.INVALID_VALUE` error is thrown.
* if `gl.CURRENT_PROGRAM` is `null`, a
 `gl.INVALID_OPERATION` error is thrown.
Examples
--------

```js
gl.drawArrays(gl.POINTS, 0, 8);
```

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.drawElements()`
* `ext.drawArraysInstancedANGLE()`
* `ext.drawElementsInstancedANGLE()`
* `ext.vertexAttribDivisorANGLE()`
* `WebGL2RenderingContext.drawArraysInstanced()`
* `WebGL2RenderingContext.drawElementsInstanced()`
* `WebGL2RenderingContext.vertexAttribDivisor()`
* `WEBGL_multi_draw.multiDrawArraysWEBGL()`


WebGLRenderingContext: texImage2D() method - Web APIs

WebGLRenderingContext: texImage2D() method
==========================================

 The **`WebGLRenderingContext.texImage2D()`** method of the WebGL API specifies a two-dimensional texture
 image.

Syntax
------

```js
// WebGL1
texImage2D(target, level, internalformat, width, height, border, format, type, pixels)
texImage2D(target, level, internalformat, format, type, pixels)

// WebGL2
texImage2D(target, level, internalformat, width, height, border, format, type, offset)
texImage2D(target, level, internalformat, width, height, border, format, type, source)
texImage2D(target, level, internalformat, width, height, border, format, type, srcData, 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.

`internalformat`

A `GLenum` specifying the color components in the texture.

Possible values in both WebGL1 and WebGL2

| Format | Type | Channels | Bytes per pixel |
| RGBA | UNSIGNED\_BYTE | 4 | 4 |
| RGB | UNSIGNED\_BYTE | 3 | 3 |
| RGBA | UNSIGNED\_SHORT\_4\_4\_4\_4 | 4 | 2 |
| RGBA | UNSIGNED\_SHORT\_5\_5\_5\_1 | 4 | 2 |
| RGB | UNSIGNED\_SHORT\_5\_6\_5 | 3 | 2 |
| LUMINANCE\_ALPHA | UNSIGNED\_BYTE | 2 | 2 |
| LUMINANCE | UNSIGNED\_BYTE | 1 | 1 |
| ALPHA | UNSIGNED\_BYTE | 1 | 1 |

 Other possible values in WebGL2 for the versions of `texImage2D` that
 take a `TypedArray` or a `DataView`, or a `GLintptr offset`

| **SizedFormat** | **BaseFormat** | **Rbits** | **Gbits** | **Bbits** | **Abits** | **Sharedbits** | **Colorrenderable** | **Texturefilterable** |
| R8 | RED | 8 |  |  |  |  | ● | ● |
| R8\_SNORM | RED | s8 |  |  |  |  |  | ● |
| RG8 | RG | 8 | 8 |  |  |  | ● | ● |
| RG8\_SNORM | RG | s8 | s8 |  |  |  |  | ● |
| RGB8 | RGB | 8 | 8 | 8 |  |  | ● | ● |
| RGB8\_SNORM | RGB | s8 | s8 | s8 |  |  |  | ● |
| RGB565 | RGB | 5 | 6 | 5 |  |  | ● | ● |
| RGBA4 | RGBA | 4 | 4 | 4 | 4 |  | ● | ● |
| RGB5\_A1 | RGBA | 5 | 5 | 5 | 1 |  | ● | ● |
| RGBA8 | RGBA | 8 | 8 | 8 | 8 |  | ● | ● |
| RGBA8\_SNORM | RGBA | s8 | s8 | s8 | s8 |  |  | ● |
| RGB10\_A2 | RGBA | 10 | 10 | 10 | 2 |  | ● | ● |
| RGB10\_A2UI | RGBA | ui10 | ui10 | ui10 | ui2 |  | ● |  |
| SRGB8 | RGB | 8 | 8 | 8 |  |  |  | ● |
| SRGB8\_ALPHA8 | RGBA | 8 | 8 | 8 | 8 |  | ● | ● |
| R16F | RED | f16 |  |  |  |  |  | ● |
| RG16F | RG | f16 | f16 |  |  |  |  | ● |
| RGB16F | RGB | f16 | f16 | f16 |  |  |  | ● |
| RGBA16F | RGBA | f16 | f16 | f16 | f16 |  |  | ● |
| R32F | RED | f32 |  |  |  |  |  |  |
| RG32F | RG | f32 | f32 |  |  |  |  |  |
| RGB32F | RGB | f32 | f32 | f32 |  |  |  |  |
| RGBA32F | RGBA | f32 | f32 | f32 | f32 |  |  |  |
| R11F\_G11F\_B10F | RGB | f11 | f11 | f10 |  |  |  | ● |
| RGB9\_E5 | RGB | 9 | 9 | 9 |  | 5 |  | ● |
| R8I | RED | i8 |  |  |  |  | ● |  |
| R8UI | RED | ui8 |  |  |  |  | ● |  |
| R16I | RED | i16 |  |  |  |  | ● |  |
| R16UI | RED | ui16 |  |  |  |  | ● |  |
| R32I | RED | i32 |  |  |  |  | ● |  |
| R32UI | RED | ui32 |  |  |  |  | ● |  |
| RG8I | RG | i8 | i8 |  |  |  | ● |  |
| RG8UI | RG | ui8 | ui8 |  |  |  | ● |  |
| RG16I | RG | i16 | i16 |  |  |  | ● |  |
| RG16UI | RG | ui16 | ui16 |  |  |  | ● |  |
| RG32I | RG | i32 | i32 |  |  |  | ● |  |
| RG32UI | RG | ui32 | ui32 |  |  |  | ● |  |
| RGB8I | RGB | i8 | i8 | i8 |  |  |  |  |
| RGB8UI | RGB | ui8 | ui8 | ui8 |  |  |  |  |
| RGB16I | RGB | i16 | i16 | i16 |  |  |  |  |
| RGB16UI | RGB | ui16 | ui16 | ui16 |  |  |  |  |
| RGB32I | RGB | i32 | i32 | i32 |  |  |  |  |
| RGB32UI | RGB | ui32 | ui32 | ui32 |  |  |  |  |
| RGBA8I | RGBA | i8 | i8 | i8 | i8 |  | ● |  |
| RGBA8UI | RGBA | ui8 | ui8 | ui8 | ui8 |  | ● |  |
| RGBA16I | RGBA | i16 | i16 | i16 | i16 |  | ● |  |
| RGBA16UI | RGBA | ui16 | ui16 | ui16 | ui16 |  | ● |  |
| RGBA32I | RGBA | i32 | i32 | i32 | i32 |  | ● |  |
| RGBA32UI | RGBA | ui32 | ui32 | ui32 | ui32 |  | ● |  |

 Possible values in WebGL2 for the versions of `texImage2D` that take a
 texture an `HTMLImageElement`, `HTMLCanvasElement`,
 `HTMLVideoElement`, `ImageBitmap`, or `ImageData`

* `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 `WEBGL_depth_texture` extension:

* `gl.DEPTH_COMPONENT`
* `gl.DEPTH_STENCIL`

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.R8`
* `gl.R16F`
* `gl.R32F`
* `gl.R8UI`
* `gl.RG8`
* `gl.RG16F`
* `gl.RG32F`
* `gl.RG8UI`
* `gl.RG16UI`
* `gl.RG32UI`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB565`
* `gl.R11F_G11F_B10F`
* `gl.RGB9_E5`
* `gl.RGB16F`
* `gl.RGB32F`
* `gl.RGB8UI`
* `gl.RGBA8`
* `gl.SRGB8_ALPHA8`
* `gl.RGB5_A1`
* `gl.RGB10_A2`
* `gl.RGBA4`
* `gl.RGBA16F`
* `gl.RGBA32F`
* `gl.RGBA8UI`

`width`

A `GLsizei` specifying the width of the texture.

`height`

A `GLsizei` specifying the height of the texture.

`border`

A `GLint` specifying the width of the border. Must be 0.

`format`

 A `GLenum` specifying the format of the texel data. In WebGL 1, this
 must be the same as `internalformat` (see above). in WebGL 2, the
 combinations are listed in this table.

`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 `WEBGL_depth_texture` extension:

* `gl.UNSIGNED_SHORT`
* `gl.UNSIGNED_INT`
* `ext.UNSIGNED_INT_24_8_WEBGL` (constant provided by the extension)
* When using the `OES_texture_float` extension:
    + `gl.FLOAT`

When using the `OES_texture_half_float` extension:

* `ext.HALF_FLOAT_OES` (constant provided by the extension)

 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`

The following types can always be used as a pixel source for the texture:

* `ImageData`,
* `HTMLImageElement`,
* `HTMLCanvasElement`,
* `HTMLVideoElement`,
* `ImageBitmap`.

The following types can only be used as a pixel source when `width`, `height`, and `border` are specified:

* `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`, `gl.UNSIGNED_SHORT` or
 `ext.HALF_FLOAT_OES`)
* `Uint32Array` (must be used if `type` is `gl.UNSIGNED_INT` or `ext.UNSIGNED_INT_24_8_WEBGL`)
* `Float32Array` (must be used if `type` is `gl.FLOAT`)

`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.texImage2D(gl.TEXTURE\_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED\_BYTE, image);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.8 |
| 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.texSubImage2D()`
* `WebGLRenderingContext.compressedTexImage2D()`
* `WebGLRenderingContext.copyTexImage2D()`
* `WebGLRenderingContext.getTexParameter()`
* `WEBGL_depth_texture`
* `OES_texture_float`
* `OES_texture_half_float`
* `EXT_texture_norm16`
* `EXT_sRGB`


WebGLRenderingContext: activeTexture() method - Web APIs

WebGLRenderingContext: activeTexture() method
=============================================

 The **`WebGLRenderingContext.activeTexture()`** method of the
 WebGL API specifies which texture unit to
 make active.

Syntax
------

```js
activeTexture(texture)
```

### Parameters

`texture`

 The texture unit to make active. The value is a `gl.TEXTUREI`
 where *I* is within the range from 0 to
 `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`.

### Return value

None (`undefined`).

### Exceptions

 If *texture* is not one of `gl.TEXTUREI`, where *I*
 is within the range from 0 to `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, a
 `gl.INVALID_ENUM` error is thrown.

Examples
--------

 The following call selects `gl.TEXTURE1` as the current texture. Subsequent
 calls that modify the texture state will affect this texture.

```js
gl.activeTexture(gl.TEXTURE1);
```

 The number of texture units is implementation dependent, you can get this number with
 the help of the `MAX_COMBINED_TEXTURE_IMAGE_UNITS` constant. It is, per
 specification, at least 8.

```js
gl.getParameter(gl.MAX\_COMBINED\_TEXTURE\_IMAGE\_UNITS);
```

To get the active texture, query the `ACTIVE_TEXTURE` constant.

```js
gl.activeTexture(gl.TEXTURE0);
gl.getParameter(gl.ACTIVE\_TEXTURE);
// returns "33984" (0x84C0, gl.TEXTURE0 enum value)
```

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.getParameter()`


WebGLRenderingContext: vertexAttrib[1234]f[v]() method - Web APIs

WebGLRenderingContext: vertexAttrib[1234]f[v]() method
======================================================

 The **`WebGLRenderingContext.vertexAttrib[1234]f[v]()`**
 methods of the WebGL API specify constant
 values for generic vertex attributes.

Syntax
------

```js
vertexAttrib1f(index, v0)
vertexAttrib2f(index, v0, v1)
vertexAttrib3f(index, v0, v1, v2)
vertexAttrib4f(index, v0, v1, v2, v3)

vertexAttrib1fv(index, value)
vertexAttrib2fv(index, value)
vertexAttrib3fv(index, value)
vertexAttrib4fv(index, value)
```

### Parameters

`index`

 A `GLuint` specifying the position of the vertex attribute to be
 modified.

`v0, v1, v2, v3`

A floating point `Number` for the vertex attribute value.

`value`

A `Float32Array` for floating point vector vertex attribute values.

### Return value

None (`undefined`).

Description
-----------

 While vertex attributes are usually used to specify values which are different for each
 vertex (using `vertexAttribPointer`), it can be useful to specify a constant value. For example, if
 you have a shader which has a `color` vertex attribute, but you want to draw
 everything in a single color, you can use `vertexAttrib` to achieve that
 without creating a buffer filled with only one value or having to create a separate
 shader which uses a uniform for the color.

 This value will be used if a bound array buffer has not been enabled with
 `enableVertexAttribArray`.

 Attributes may be matrices, in which case columns of the matrix must be loaded into
 successive vertex attribute slots.

 The values set with `vertexAttrib` are context-global; that is, they aren't part of the shader state
 (like generic vertex attribute indexes to shader variable bindings) and aren't part of
 the vertex array object state (like enabled vertex attribute arrays). The only way to
 change the values is by calling this function again.

Examples
--------

```js
const a_foobar = gl.getAttribLocation(shaderProgram, "foobar");
//either set each component individually:
gl.vertexAttrib3f(a_foobar, 10.0, 5.0, 2.0);
//or provide a Float32Array:
const floatArray = new Float32Array([10.0, 5.0, 2.0]);
gl.vertexAttrib3fv(a_foobar, floatArray);
```

```js
// we want to load the following 3x3 matrix into attribute named "matrix3x3"
// 0 1 2
// 3 4 5
// 6 7 8
const matrix3x3Location = gl.getAttribLocation(shaderProgram, "matrix3x3");
gl.vertexAttrib3f(matrix3x3Location, 0, 3, 6);
gl.vertexAttrib3f(matrix3x3Location + 1, 1, 4, 7);
gl.vertexAttrib3f(matrix3x3Location + 2, 2, 5, 8);
```

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.getVertexAttrib()`


WebGLRenderingContext: compileShader() method - Web APIs

WebGLRenderingContext: compileShader() method
=============================================

 The **WebGLRenderingContext.compileShader()** method of the WebGL API compiles a GLSL shader into binary
 data so that it can be used by a `WebGLProgram`.

Syntax
------

```js
compileShader(shader)
```

### Parameters

`shader`

A fragment or vertex `WebGLShader`.

### Return value

None (`undefined`).

Examples
--------

```js
const shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, shaderSource);
gl.compileShader(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
--------

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()`
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`


WebGLRenderingContext: pixelStorei() method - Web APIs

WebGLRenderingContext: pixelStorei() method
===========================================

The **`WebGLRenderingContext.pixelStorei()`** method of the WebGL API specifies the pixel storage modes.

Syntax
------

```js
pixelStorei(pname, param)
```

### Parameters

`pname`

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

`param`

 A `GLint` specifying a value to set the `pname`
 parameter to. See below for possible values.

### Return value

None (`undefined`).

Pixel storage parameters
------------------------

| Parameter name (for `pname`) | Description | Type | Default value | Allowed values (for `param`) | Specified in |
| --- | --- | --- | --- | --- | --- |
| `gl.PACK_ALIGNMENT` | Packing of pixel data into memory | `GLint` | 4 | 1, 2, 4, 8 | OpenGL ES 2.0 |
| `gl.UNPACK_ALIGNMENT` | Unpacking of pixel data from memory. | `GLint` | 4 | 1, 2, 4, 8 | OpenGL ES 2.0 |
| `gl.UNPACK_FLIP_Y_WEBGL` | Flips the source data along its vertical axis if true. | `GLboolean` | false | true, false | WebGL |
| `gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL` | Multiplies the alpha channel into the other color channels | `GLboolean` | false | true, false | WebGL |
| `gl.UNPACK_COLORSPACE_CONVERSION_WEBGL` | Default color space conversion or no color space conversion. | `GLenum` | `gl.BROWSER_DEFAULT_WEBGL` | `gl.BROWSER_DEFAULT_WEBGL`, `gl.NONE` | WebGL |

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

| Constant | Description | Type | Default value | Allowed values (for `param`) | Specified in |
| --- | --- | --- | --- | --- | --- |
| `gl.PACK_ROW_LENGTH` | Number of pixels in a row. | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.PACK_SKIP_PIXELS` |
 Number of pixel locations skipped before the first pixel is written into
 memory.
  | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.PACK_SKIP_ROWS` |
 Number of rows of pixel locations skipped before the first pixel is
 written into memory
  | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.UNPACK_ROW_LENGTH` | Number of pixels in a row. | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.UNPACK_IMAGE_HEIGHT` | Image height used for reading pixel data from memory | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.UNPACK_SKIP_PIXELS` |
 Number of pixel images skipped before the first pixel is read from
 memory
  | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.UNPACK_SKIP_ROWS` |
 Number of rows of pixel locations skipped before the first pixel is read
 from memory
  | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.UNPACK_SKIP_IMAGES` |
 Number of pixel images skipped before the first pixel is read from
 memory
  | `GLint` | 0 | 0 to `Infinity` | OpenGL ES 3.0 |

Examples
--------

 Setting the pixel storage mode affects the
 `WebGLRenderingContext.readPixels()` operations, as well as unpacking of
 textures with the `WebGLRenderingContext.texImage2D()` and
 `WebGLRenderingContext.texSubImage2D()` methods.

```js
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, tex);
gl.pixelStorei(gl.PACK\_ALIGNMENT, 4);
```

 To check the values for packing and unpacking of pixel data, you can query the same
 pixel storage parameters with `WebGLRenderingContext.getParameter()`.

```js
gl.getParameter(gl.PACK\_ALIGNMENT);
gl.getParameter(gl.UNPACK\_ALIGNMENT);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.3 |
| WebGL Specification # PIXEL\_STORAGE\_PARAMETERS |
| 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.readPixels()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.texSubImage2D()`


WebGLRenderingContext: isFramebuffer() method - Web APIs

WebGLRenderingContext: isFramebuffer() method
=============================================

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

Syntax
------

```js
isFramebuffer(framebuffer)
```

### Parameters

`framebuffer`

A `WebGLFramebuffer` to check.

### Return value

A `GLboolean` indicating whether or not the frame buffer is valid.

Examples
--------

### Checking a frame buffer

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

gl.isFramebuffer(framebuffer);
```

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.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`


WebGLRenderingContext: isProgram() method - Web APIs

WebGLRenderingContext: isProgram() method
=========================================

 The **`WebGLRenderingContext.isProgram()`** method of the WebGL API returns `true` if the
 passed `WebGLProgram` is valid, `false` otherwise.

Syntax
------

```js
isProgram(program)
```

### Parameters

`program`

A `WebGLProgram` to check.

### Return value

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

Examples
--------

### Checking a program

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

// …

gl.isProgram(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.linkProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`


WebGLRenderingContext: getActiveAttrib() method - Web APIs

WebGLRenderingContext: getActiveAttrib() method
===============================================

 The **`WebGLRenderingContext.getActiveAttrib()`** method of the
 WebGL API returns a
 `WebGLActiveInfo` object containing size, type, and name of a vertex
 attribute. It is generally used when querying unknown attributes either for debugging or
 generic library creation.

Syntax
------

```js
getActiveAttrib(program, index)
```

### Parameters

`program`

A `WebGLProgram` containing the vertex attribute.

`index`

 A `GLuint` specifying the index of the vertex attribute to get. This
 value is an index 0 to N - 1 as returned
 by `gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES)`.

### Return value

A `WebGLActiveInfo` object.

Examples
--------

```js
const numAttribs = gl.getProgramParameter(program, gl.ACTIVE\_ATTRIBUTES);
for (let i = 0; i < numAttribs; ++i) {
  const info = gl.getActiveAttrib(program, i);
  console.log("name:", info.name, "type:", info.type, "size:", info.size);
}
```

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
--------

* `WebGLActiveInfo`


WebGLRenderingContext: getActiveUniform() method - Web APIs

WebGLRenderingContext: getActiveUniform() method
================================================

 The **`WebGLRenderingContext.getActiveUniform()`** method of
 the WebGL API returns a
 `WebGLActiveInfo` object containing size, type, and name of a uniform
 attribute. It is generally used when querying unknown uniforms either for debugging or
 generic library creation.

Syntax
------

```js
getActiveUniform(program, index)
```

### Parameters

`program`

 A `WebGLProgram` specifying the WebGL shader program from which to
 obtain the uniform variable's information.

`index`

 A `GLuint` specifying the index of the uniform attribute to get. This
 value is an index 0 to N - 1 as returned
 by `gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)`.

### Return value

A `WebGLActiveInfo` object describing the uniform.

The `type` attribute of the return value will be one of the following:

* `gl.FLOAT`
* `gl.FLOAT_VEC2`
* `gl.FLOAT_VEC3`
* `gl.FLOAT_VEC4`
* `gl.INT`
* `gl.INT_VEC2`
* `gl.INT_VEC3`
* `gl.INT_VEC4`
* `gl.BOOL`
* `gl.BOOL_VEC2`
* `gl.BOOL_VEC3`
* `gl.BOOL_VEC4`
* `gl.FLOAT_MAT2`
* `gl.FLOAT_MAT3`
* `gl.FLOAT_MAT4`
* `gl.SAMPLER_2D`
* `gl.SAMPLER_CUBE`
* When using a WebGL 2 context, the
 following values are possible additionally:
    + `gl.UNSIGNED_INT`
    + `gl.UNSIGNED_INT_VEC2`
    + `gl.UNSIGNED_INT_VEC3`
    + `gl.UNSIGNED_INT_VEC4`
    + `gl.FLOAT_MAT2x3`
    + `gl.FLOAT_MAT2x4`
    + `gl.FLOAT_MAT3x2`
    + `gl.FLOAT_MAT3x4`
    + `gl.FLOAT_MAT4x2`
    + `gl.FLOAT_MAT4x3`
    + `gl.SAMPLER_3D`
    + `gl.SAMPLER_2D_SHADOW`
    + `gl.SAMPLER_2D_ARRAY`
    + `gl.SAMPLER_2D_ARRAY_SHADOW`
    + `gl.SAMPLER_CUBE_SHADOW`
    + `gl.INT_SAMPLER_2D`
    + `gl.INT_SAMPLER_3D`
    + `gl.INT_SAMPLER_CUBE`
    + `gl.INT_SAMPLER_2D_ARRAY`
    + `gl.UNSIGNED_INT_SAMPLER_2D`
    + `gl.UNSIGNED_INT_SAMPLER_3D`
    + `gl.UNSIGNED_INT_SAMPLER_CUBE`
    + `gl.UNSIGNED_INT_SAMPLER_2D_ARRAY`

 When `gl.linkProgram` is called, WebGL creates a list of active uniforms.
 These are possible values of the `name` attribute of return values of
 `getActiveUniform`. WebGL
 generates one or more entries in the list depending on the declared type of the uniform
 in the shader:

* Single basic type: one entry with the name of the uniform. E.g.
 `uniform vec4 a;` will result in `a`.
* Array of basic type: one entry with the name of the uniform suffixed with
 `[0]`. E.g. `uniform vec4 b[];` will result in
 `b[0]`.
* Struct type: one entry for each member of the struct. E.g.
 `uniform struct { float foo; vec4 bar; } c;` will result in
 `c.foo` and `c.bar`.
* Arrays of structs or arrays: each entry of the array will generate its own entries.
 E.g. `uniform struct { float foo; vec4 bar; } d[2];` will result in:
    + `d[0].foo`
    + `d[0].bar`
    + `d[1].foo`
    + `d[1].bar`
* Uniform blocks: one entry for each member. If the uniform block has an instance
 name, the block name is prefixed. E.g. `uniform Block { float foo; };` will
 result in `foo`, and `uniform Block { float bar; } e;` will
 result in `e.bar`.

 The `size` attribute of the return value corresponds to the length of the
 array for uniforms declared as arrays. Otherwise, it is 1 (this includes interface
 blocks instanced with arrays).

### Exceptions

* `gl.INVALID_VALUE` is generated if the program
 `WebGLProgram` is invalid (not linked, deleted, etc.).
* `gl.INVALID_VALUE` is generated if index is not in the range [0,
 `gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)` - 1].
Examples
--------

```js
const numUniforms = gl.getProgramParameter(program, gl.ACTIVE\_UNIFORMS);
for (let i = 0; i < numUniforms; ++i) {
  const info = gl.getActiveUniform(program, i);
  console.log("name:", info.name, "type:", info.type, "size:", info.size);
}
```

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
--------

* `WebGLActiveInfo`
* `WebGLRenderingContext.getUniformLocation()`


WebGLRenderingContext: createShader() method - Web APIs

WebGLRenderingContext: createShader() method
============================================

 The `WebGLRenderingContext`
 method **`createShader()`** of the WebGL API creates a
 `WebGLShader` that can then be configured further using
 `WebGLRenderingContext.shaderSource()` and
 `WebGLRenderingContext.compileShader()`.

Syntax
------

```js
createShader(type)
```

### Parameters

`type`

Either `gl.VERTEX_SHADER` or `gl.FRAGMENT_SHADER`

### Return value

A new (`WebGLShader`).

Examples
--------

See `WebGLShader` for usage and examples.

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
--------

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.bindAttribLocation()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()`
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`


WebGLRenderingContext: bindBuffer() method - Web APIs

WebGLRenderingContext: bindBuffer() method
==========================================

 The **`WebGLRenderingContext.bindBuffer()`** method of the WebGL API binds a given
 `WebGLBuffer` to a target.

Syntax
------

```js
bindBuffer(target, buffer)
```

### Parameters

`target`

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

`gl.ARRAY_BUFFER`

 Buffer containing vertex attributes, such as
 vertex coordinates, texture coordinate data, or vertex color data.

`gl.ELEMENT_ARRAY_BUFFER`

Buffer used for element indices.

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

`gl.COPY_READ_BUFFER`

Buffer for copying from one buffer object to another.

`gl.COPY_WRITE_BUFFER`

Buffer for copying from one buffer object to another.

`gl.TRANSFORM_FEEDBACK_BUFFER`

Buffer for transform feedback operations.

`gl.UNIFORM_BUFFER`

Buffer used for storing uniform blocks.

`gl.PIXEL_PACK_BUFFER`

Buffer used for pixel transfer operations.

`gl.PIXEL_UNPACK_BUFFER`

Buffer used for pixel transfer operations.

`buffer`

A `WebGLBuffer` to bind.

### Return value

None (`undefined`).

### Exceptions

 Only one target can be bound to a given `WebGLBuffer`. An attempt to bind
 the buffer to another target will throw an `INVALID_OPERATION` error and the
 current buffer binding will remain the same.

 A `WebGLBuffer` which has been marked for deletion with
 `deleteBuffer` cannot be
 (re-)bound. An attempt to do so will generate an `INVALID_OPERATION` error,
 and the current binding will remain untouched.

Examples
--------

### Binding a buffer to a target

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

gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
```

### Getting current bindings

 To check the current buffer bindings, query the `ARRAY_BUFFER_BINDING`
 and `ELEMENT_ARRAY_BUFFER_BINDING` constants.

```js
gl.getParameter(gl.ARRAY\_BUFFER\_BINDING);
gl.getParameter(gl.ELEMENT\_ARRAY\_BUFFER\_BINDING);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.5 |
| WebGL 2.0 Specification # 3.7.1 |

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

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

See also
--------

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


WebGLRenderingContext: shaderSource() method - Web APIs

WebGLRenderingContext: shaderSource() method
============================================

 The **`WebGLRenderingContext.shaderSource()`** method of the WebGL API sets the source code of a
 `WebGLShader`.

Syntax
------

```js
shaderSource(shader, source)
```

### Parameters

`shader`

A `WebGLShader` object in which to set the source code.

`source`

A string containing the GLSL source code to set.

### Return value

None (`undefined`).

Examples
--------

```js
const shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, originalSource);

const source = gl.getShaderSource(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.deleteShader()`
* `WebGLRenderingContext.getShaderSource()`


WebGLRenderingContext: unpackColorSpace property - Web APIs

WebGLRenderingContext: unpackColorSpace property
================================================

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

The **`WebGLRenderingContext.unpackColorSpace`** property specifies the color space to convert to when importing textures. Along with the default (`srgb`), the `display-p3` color space can be used.

Texture image sources can be the following:

* `ImageBitmap`
* `ImageData`
* `HTMLImageElement`
* `HTMLCanvasElement`
* `HTMLVideoElement`
* `OffscreenCanvas`
* `VideoFrame`

Textures are imported using the `WebGLRenderingContext.texImage2D()` and `WebGLRenderingContext.texSubImage2D()` methods and conversion to the specified `unpackColorSpace` color space happens during import.

Note that this doesn't apply to `HTMLImageElement` when the `UNPACK_COLORSPACE_CONVERSION_WEBGL` pixel storage parameter is set to `NONE`.

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 `unpackColorSpace` will remain unchanged.

Examples
--------

### Converting sRGB ImageData to display-p3 in a texture

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

gl.drawingBufferColorSpace = "display-p3";
gl.unpackColorSpace = "display-p3";

// Some sRGB ImageData
// Will be converted from sRGB to Display P3
const imageData = new ImageData(data, 32, 32);

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, tex);
gl.texImage2D(
  gl.TEXTURE\_2D,
  0,
  gl.RGBA,
  width,
  height,
  0,
  gl.RGBA,
  gl.UNSIGNED\_BYTE,
  imageData,
);
```

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

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-unpackColorSpace |

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

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

See also
--------

* `WebGLRenderingContext.drawingBufferColorSpace`


WebGLRenderingContext: readPixels() method - Web APIs

WebGLRenderingContext: readPixels() method
==========================================

 The **`WebGLRenderingContext.readPixels()`** method of the WebGL API reads a block of pixels from a
 specified rectangle of the current color framebuffer into a `TypedArray` or a `DataView` object.

Syntax
------

```js
// WebGL1:
readPixels(x, y, width, height, format, type, pixels)

// WebGL2:
readPixels(x, y, width, height, format, type, offset)
readPixels(x, y, width, height, format, type, pixels)
readPixels(x, y, width, height, format, type, pixels, dstOffset)
```

### Parameters

`x`

 A `GLint` specifying the first horizontal pixel that is read from the
 lower left corner of a rectangular block of pixels.

`y`

 A `GLint` specifying the first vertical pixel that is read from the
 lower left corner of a rectangular block of pixels.

`width`

A `GLsizei` specifying the width of the rectangle.

`height`

A `GLsizei` specifying the height of the rectangle.

`format`

A `GLenum` specifying the format of the pixel 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.

WebGL2 adds

* `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 pixel data. Possible values:

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT_5_6_5`
* `gl.UNSIGNED_SHORT_4_4_4_4`
* `gl.UNSIGNED_SHORT_5_5_5_1`
* `gl.FLOAT`

WebGL2 adds

* `gl.BYTE`
* `gl.UNSIGNED_INT_2_10_10_10_REV`
* `gl.HALF_FLOAT`
* `gl.SHORT`
* `gl.UNSIGNED_SHORT`
* `gl.INT`
* `gl.UNSIGNED_INT`
* `gl.UNSIGNED_INT_10F_11F_11F_REV`
* `gl.UNSIGNED_INT_5_9_9_9_REV`

`pixels`

 An object to read data into. The array type must
 match the type of the `type` parameter:

* `Uint8Array` for `gl.UNSIGNED_BYTE`.
* `Uint16Array` for `gl.UNSIGNED_SHORT_5_6_5`,
 `gl.UNSIGNED_SHORT_4_4_4_4`, or `gl.UNSIGNED_SHORT_5_5_5_1`.
* `Float32Array` for `gl.FLOAT`.

`dstOffset` Optional

Offset. Defaults to 0.

### Return value

None (`undefined`).

### Exceptions

* A `gl.INVALID_ENUM` error is thrown if `format` or
 `type` is not an accepted value.
* A `gl.INVALID_OPERATION` error is thrown if
    + `type` is `gl.UNSIGNED_SHORT_5_6_5` and
     `format` is not `gl.RGB`.
    + `type` is `gl.UNSIGNED_SHORT_4_4_4_4` and
     `format` is not `gl.RGBA`.
    + `type` does not match the typed array type of `pixels`.
* A `gl.INVALID_FRAMEBUFFER_OPERATION` error is thrown if the currently
 bound framebuffer is not framebuffer complete.
Examples
--------

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const pixels = new Uint8Array(
  gl.drawingBufferWidth \* gl.drawingBufferHeight \* 4,
);
gl.readPixels(
  0,
  0,
  gl.drawingBufferWidth,
  gl.drawingBufferHeight,
  gl.RGBA,
  gl.UNSIGNED\_BYTE,
  pixels,
);
console.log(pixels); // Uint8Array
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.12 |

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

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

See also
--------

* Typed Arrays


WebGLRenderingContext: getShaderInfoLog() method - Web APIs

WebGLRenderingContext: getShaderInfoLog() method
================================================

 The **WebGLRenderingContext.getShaderInfoLog** returns the information log
 for the specified `WebGLShader` object. It contains warnings, debugging and
 compile information.

Syntax
------

```js
getShaderInfoLog(shader)
```

### Parameters

`shader`

A `WebGLShader` to query.

### Return value

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

Examples
--------

### Checking compilation messages

```js
/\* load shader source code. \*/
gl.shaderSource(shader, shaderCode);

/\* compile shader source code. \*/
gl.compileShader(shader);

const message = gl.getShaderInfoLog(shader);

if (message.length > 0) {
  /\* message may be an error or a warning \*/
  throw message;
}
```

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.getShaderParameter()` – used with
 `gl.COMPILE_STATUS` to check for a failed compile.
* `WebGLRenderingContext.getError()`


WebGLRenderingContext: cullFace() method - Web APIs

WebGLRenderingContext: cullFace() method
========================================

 The **`WebGLRenderingContext.cullFace()`** method of the WebGL API specifies whether or not front-
 and/or back-facing polygons can be culled.

Syntax
------

```js
cullFace(mode)
```

### Parameters

`mode`

 A `GLenum` specifying whether front- or back-facing polygons are
 candidates for culling. The default value is `gl.BACK`. Possible values
 are:

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

### Return value

None (`undefined`).

Examples
--------

 Polygon culling is disabled by default. To enable or disable culling, use the
 `enable()` and
 `disable()` methods with the argument
 `gl.CULL_FACE`.

```js
gl.enable(gl.CULL\_FACE);
gl.cullFace(gl.FRONT\_AND\_BACK);
```

To check the current cull face mode, query the `CULL_FACE_MODE` constant.

```js
gl.getParameter(gl.CULL\_FACE\_MODE) === gl.FRONT\_AND\_BACK;
// 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.enable()`
* `WebGLRenderingContext.frontFace()`


WebGLRenderingContext: getExtension() method - Web APIs

WebGLRenderingContext: getExtension() method
============================================

 The **`WebGLRenderingContext.getExtension()`** method enables a
 WebGL extension.

Syntax
------

```js
getExtension(name)
```

### Parameters

`name`

A `String` for the name of the WebGL extension to enable.

### Return value

 A WebGL extension object, or `null` if name does not match
 (case-insensitive) to one of the strings in
 `WebGLRenderingContext.getSupportedExtensions`.

Examples
--------

 Once a WebGL extension is enabled, you are able to use the methods, properties or
 constants that this extension object provides.

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

gl.getExtension("WEBGL\_lose\_context").loseContext();
```

WebGL extensions
----------------

 Extensions for the WebGL API are registered in the WebGL Extension Registry. They are also
 listed here.

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

| Specification |
| --- |
| WebGL Specification # 5.14.14 |

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

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

See also
--------

* `WebGLRenderingContext.getSupportedExtensions()`
* webglreport.com


WebGLRenderingContext: depthMask() method - Web APIs

WebGLRenderingContext: depthMask() method
=========================================

 The **`WebGLRenderingContext.depthMask()`** method of the WebGL API sets whether writing into the depth
 buffer is enabled or disabled.

Syntax
------

```js
depthMask(flag)
```

### Parameters

`flag`

 A `GLboolean` specifying whether or not writing into the depth buffer
 is enabled. Default value: `true`, meaning that writing is enabled.

### Return value

None (`undefined`).

Examples
--------

```js
gl.depthMask(false);
```

 To get the current depth mask, query the `DEPTH_WRITEMASK` constant which
 returns a boolean value.

```js
gl.getParameter(gl.DEPTH\_WRITEMASK);
// 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.colorMask()`
* `WebGLRenderingContext.stencilMask()`


WebGLRenderingContext: bindAttribLocation() method - Web APIs

WebGLRenderingContext: bindAttribLocation() method
==================================================

 The **`WebGLRenderingContext.bindAttribLocation()`** method of
 the WebGL API binds a generic vertex index
 to an attribute variable.

Syntax
------

```js
bindAttribLocation(program, index, name)
```

### Parameters

`program`

A `WebGLProgram` object to bind.

`index`

A `GLuint` specifying the index of the generic vertex to bind.

`name`

 A string specifying the name of the variable to bind to the
 generic vertex index. This name cannot start with "webgl\_" or "\_webgl\_", as these are
 reserved for use by WebGL.

### Return value

None (`undefined`).

Examples
--------

```js
gl.bindAttribLocation(program, colorLocation, "vColor");
```

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.getActiveAttrib()`
* `WebGLRenderingContext.getAttribLocation()`
* `WebGLRenderingContext.getVertexAttrib()`


WebGLRenderingContext: framebufferTexture2D() method - Web APIs

WebGLRenderingContext: framebufferTexture2D() method
====================================================

 The **`WebGLRenderingContext.framebufferTexture2D()`** method
 of the WebGL API attaches a texture to a
 `WebGLFramebuffer`.

Syntax
------

```js
framebufferTexture2D(target, attachment, textarget, texture, level)
```

### 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`

 Used as a destination for drawing,
 rendering, clearing, and writing operations.

`gl.READ_FRAMEBUFFER`

Used as a source for reading operations.

 When binding, `gl.FRAMEBUFFER` sets both the
 `gl.DRAW_FRAMEBUFFER` and `gl.READ_FRAMEBUFFER` binding
 points. When referencing, `gl.FRAMEBUFFER` refers to the
 `gl.DRAW_FRAMEBUFFER` binding

`attachment`

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

* `gl.COLOR_ATTACHMENT0`: Attaches the texture to the framebuffer's
 color buffer.
* `gl.DEPTH_ATTACHMENT`: Attaches the texture to the framebuffer's
 depth buffer.
* `gl.STENCIL_ATTACHMENT`: Attaches the texture to the framebuffer's
 stencil buffer.

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

* `gl.DEPTH_STENCIL_ATTACHMENT`: depth and stencil buffer.
* `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`

When using the `WEBGL_depth_texture` extension:

* `gl.DEPTH_STENCIL_ATTACHMENT`: Depth and stencil buffer data storage.

`textarget`

A `GLenum` specifying the texture target. Possible values:

* `gl.TEXTURE_2D`: A 2D image.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_X`: Image for the positive X face of
 the cube.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_X`: Image for the negative X face of
 the cube.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Y`: Image for the positive Y face of
 the cube.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y`: Image for the negative Y face of
 the cube.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Z`: Image for the positive Z face of
 the cube.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z`: Image for the negative Z face of
 the cube.

`texture`

A `WebGLTexture` object whose image to attach.

`level`

 A `GLint` specifying the mipmap level of the texture image to be
 attached. Must be 0.

### Return value

None (`undefined`).

### Exceptions

* A `gl.INVALID_ENUM` error is thrown if
    + `target` is not `gl.FRAMEBUFFER`.
    + `attachment` is not one of the accepted attachment points.
    + `textarget` is not one of the accepted texture targets.
* A `gl.INVALID_VALUE` error is thrown if `level` is not 0.
* A `gl.INVALID_OPERATION` error is thrown if `texture` isn't 0
 or the name of an existing texture object.
Examples
--------

```js
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  gl.COLOR\_ATTACHMENT0,
  gl.TEXTURE\_2D,
  texture,
  0,
);
```

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_depth_texture`
* `WEBGL_draw_buffers`


WebGLRenderingContext: useProgram() method - Web APIs

WebGLRenderingContext: useProgram() method
==========================================

 The **`WebGLRenderingContext.useProgram()`** method of the WebGL API sets the specified
 `WebGLProgram` as part of the current rendering state.

Syntax
------

```js
useProgram(program)
```

### Parameters

`program`

A `WebGLProgram` to use.

### 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.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.validateProgram()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`


WebGLRenderingContext: copyTexSubImage2D() method - Web APIs

WebGLRenderingContext: copyTexSubImage2D() method
=================================================

 The **`WebGLRenderingContext.copyTexSubImage2D()`** method of
 the WebGL API copies pixels from the current
 `WebGLFramebuffer` into an existing 2D texture sub-image.

Syntax
------

```js
copyTexSubImage2D(target, level, xoffset, yoffset, x, y, width, height)
```

### 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 horizontal offset within the texture image.

`yoffset`

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

`x`

 A `GLint` specifying the x coordinate of the lower left corner where to
 start copying.

`y`

 A `GLint` specifying the y coordinate of the lower left corner where to
 start copying.

`width`

A `GLsizei` specifying the width of the texture.

`height`

A `GLsizei` specifying the height of the texture.

### Return value

None (`undefined`).

Examples
--------

```js
gl.copyTexSubImage2D(gl.TEXTURE\_2D, 0, 0, 0, 0, 0, 16, 16);
```

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.copyTexImage2D()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.texSubImage2D()`
* `WebGLRenderingContext.compressedTexImage2D()`


WebGLRenderingContext: getError() method - Web APIs

WebGLRenderingContext: getError() method
========================================

The **`WebGLRenderingContext.getError()`** method of the WebGL API returns error information.

Syntax
------

```js
getError()
```

### Parameters

None.

### Return value

| Constant | Description |
| --- | --- |
| `gl.NO_ERROR` | No error has been recorded. The value of this constant is 0. |
| `gl.INVALID_ENUM` |
 An unacceptable value has been specified for an enumerated argument. The
 command is ignored and the error flag is set.
  |
| `gl.INVALID_VALUE` |
 A numeric argument is out of range. The command is ignored and the error
 flag is set.
  |
| `gl.INVALID_OPERATION` |
 The specified command is not allowed for the current state. The command
 is ignored and the error flag is set.
  |
| `gl.INVALID_FRAMEBUFFER_OPERATION` |
 The currently bound framebuffer is not framebuffer complete when trying
 to render to or to read from it.
  |
| `gl.OUT_OF_MEMORY` | Not enough memory is left to execute the command. |
| `gl.CONTEXT_LOST_WEBGL` |
 If the WebGL context is lost, this error is returned on the first call
 to `getError`. Afterwards and until the context has been
 restored, it returns `gl.NO_ERROR`.
  |

Examples
--------

```js
gl.getError(); // gl.NO\_ERROR (0)

gl.enable(gl.FOOBAR);
gl.getError(); // gl.INVALID\_ENUM;
```

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`
* `WebGLContextEvent`


WebGLRenderingContext: getProgramParameter() method - Web APIs

WebGLRenderingContext: getProgramParameter() method
===================================================

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

Syntax
------

```js
getProgramParameter(program, pname)
```

### Parameters

`program`

A `WebGLProgram` 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 program is flagged for deletion.

`gl.LINK_STATUS`

 Returns a `GLboolean` indicating
 whether or not the last link operation was successful.

`gl.VALIDATE_STATUS`

 Returns a `GLboolean` indicating
 whether or not the last validation operation was successful.

`gl.ATTACHED_SHADERS`

 Returns a `GLint` indicating the
 number of attached shaders to a program.

`gl.ACTIVE_ATTRIBUTES`

 Returns a `GLint` indicating the
 number of active attribute variables to a program.

`gl.ACTIVE_UNIFORMS`

 Returns a `GLint` indicating the
 number of active uniform variables to a program.

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

`gl.TRANSFORM_FEEDBACK_BUFFER_MODE`

 Returns a
 `GLenum` indicating the buffer mode when transform feedback is
 active. May be `gl.SEPARATE_ATTRIBS` or
 `gl.INTERLEAVED_ATTRIBS`.

`gl.TRANSFORM_FEEDBACK_VARYINGS`

 Returns a `GLint`
 indicating the number of varying variables to capture in transform feedback
 mode.

`gl.ACTIVE_UNIFORM_BLOCKS`

 Returns a `GLint`
 indicating the number of uniform blocks containing active uniforms.

### Return value

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

Examples
--------

```js
gl.getProgramParameter(program, gl.DELETE\_STATUS);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.9 |
| WebGL 2.0 Specification # 3.7.7 |

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

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

See also
--------

* `WebGLRenderingContext.getShaderParameter()`


WebGLRenderingContext: linkProgram() method - Web APIs

WebGLRenderingContext: linkProgram() method
===========================================

 The `WebGLRenderingContext` interface's
 **`linkProgram()`** method links a given
 `WebGLProgram`, completing the process of preparing the GPU code for the
 program's fragment and vertex shaders.

Syntax
------

```js
linkProgram(program)
```

### Parameters

`program`

The `WebGLProgram` to link.

### 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);

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

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.useProgram()`
* `WebGLRenderingContext.validateProgram()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`


WebGLRenderingContext: generateMipmap() method - Web APIs

WebGLRenderingContext: generateMipmap() method
==============================================

 The **`WebGLRenderingContext.generateMipmap()`** method of the
 WebGL API generates a set of mipmaps for a
 `WebGLTexture` object.

 Mipmaps are used to create distance with objects. A higher-resolution mipmap is used
 for objects that are closer, and a lower-resolution mipmap is used for objects that are
 farther away. It starts with the resolution of the texture image and halves the
 resolution until a 1x1 dimension texture image is created.

Syntax
------

```js
generateMipmap(target)
```

### Parameters

`target`

 A `GLenum` specifying the binding point (target) of the active texture
 whose mipmaps will be generated. Possible values:

* `gl.TEXTURE_2D`: A two-dimensional texture.
* `gl.TEXTURE_CUBE_MAP`: A cube-mapped texture.

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

* `gl.TEXTURE_3D`: A three-dimensional texture.
* `gl.TEXTURE_2D_ARRAY`: A two-dimensional array texture.

### Return value

None (`undefined`).

Examples
--------

```js
gl.generateMipmap(gl.TEXTURE\_2D);
```

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.createTexture()`
* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.getTexParameter()`
* `WebGLRenderingContext.texParameterf()`
* `WebGLRenderingContext.texParameteri()`


WebGLRenderingContext: uniform[1234][fi][v]() method - Web APIs

WebGLRenderingContext: uniform[1234][fi][v]() method
====================================================

 The **`WebGLRenderingContext.uniform[1234][fi][v]()`** methods
 of the WebGL API specify values of uniform
 variables. All active uniform variables defined in a program object are initialized to 0
 when the program object is linked successfully. They retain the values assigned to them
 by a call to this method until the next successful link operation occurs on the program
 object, when they are once again initialized to 0.

**Note:** Many of the functions described here have expanded WebGL 2 interfaces, which can be
 found under
 `WebGL2RenderingContext.uniform[1234][uif][v]()`.

Syntax
------

```js
uniform1f(location, v0)
uniform1fv(location, value)
uniform1i(location, v0)
uniform1iv(location, value)

uniform2f(location, v0, v1)
uniform2fv(location, value)
uniform2i(location, v0, v1)
uniform2iv(location, value)

uniform3f(location, v0, v1, v2)
uniform3fv(location, value)
uniform3i(location, v0, v1, v2)
uniform3iv(location, value)

uniform4f(location, v0, v1, v2, v3)
uniform4fv(location, value)
uniform4i(location, v0, v1, v2, v3)
uniform4iv(location, value)
```

### Parameters

`location`

 A `WebGLUniformLocation` object containing the location of the uniform
 attribute to modify.

`value, v0, v1, v2, v3`

A new value to be used for the uniform variable. Possible types:

* A floating point `Number` for floating point values (methods with
 "f").
* A sequence of floating point numbers (for example a `Float32Array`
 or an `Array` of numbers) for floating point vector methods (methods
 with "fv").
* An integer `Number` for integer values (methods with "i").
* An `Int32Array` for integer vector methods (methods with "iv").

### Return value

None (`undefined`).

Examples
--------

```js
gl.uniform1f(u_alpha, 0.8);
```

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.uniformMatrix()`


WebGLRenderingContext: getRenderbufferParameter() method - Web APIs

WebGLRenderingContext: getRenderbufferParameter() method
========================================================

 The **`WebGLRenderingContext.getRenderbufferParameter()`**
 method of the WebGL API returns information
 about the renderbuffer.

Syntax
------

```js
getRenderbufferParameter(target, pname)
```

### Parameters

`target`

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

`gl.RENDERBUFFER`

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

`pname`

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

`gl.RENDERBUFFER_WIDTH`

 Returns a `GLint` indicating
 the width of the image of the currently bound renderbuffer.

`gl.RENDERBUFFER_HEIGHT`

 Returns a `GLint` indicating
 the height of the image of the currently bound renderbuffer.

`gl.RENDERBUFFER_INTERNAL_FORMAT`

 Returns a `GLenum`
 indicating the internal format of the currently bound renderbuffer. The default is
 `gl.RGBA4`. Possible return 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.RENDERBUFFER_GREEN_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the green color.

`gl.RENDERBUFFER_BLUE_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the blue color.

`gl.RENDERBUFFER_RED_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the red color.

`gl.RENDERBUFFER_ALPHA_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the alpha component.

`gl.RENDERBUFFER_DEPTH_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the depth component.

`gl.RENDERBUFFER_STENCIL_SIZE`

 Returns a `GLint` that
 is the resolution size (in bits) for the stencil component.

 When using a WebGL 2 context,
 the following value is available additionally:

`gl.RENDERBUFFER_SAMPLES`

 Returns a `GLint`
 indicating the number of samples of the image of the currently bound
 renderbuffer.

### Return value

 Depends on the requested information (as specified with `pname`). Either a
 `GLint` or a `GLenum`.

Examples
--------

```js
gl.getRenderbufferParameter(gl.RENDERBUFFER, gl.RENDERBUFFER\_WIDTH);
```

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.renderbufferStorage()`
* Other buffers: `WebGLBuffer`, `WebGLFramebuffer`


WebGLRenderingContext: getTexParameter() method - Web APIs

WebGLRenderingContext: getTexParameter() method
===============================================

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

Syntax
------

```js
getTexParameter(target, pname)
```

### Parameters

`target`

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

* `gl.TEXTURE_2D`: A two-dimensional texture.
* `gl.TEXTURE_CUBE_MAP`: A cube-mapped texture.

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

* `gl.TEXTURE_3D`: A three-dimensional texture.
* `gl.TEXTURE_2D_ARRAY`: A two-dimensional array texture.

`pname`

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

| pname | Return type | Description | Possible return values |
| --- | --- | --- | --- |
| Available in a WebGL 1 context |
| --- |
| `gl.TEXTURE_MAG_FILTER` | `GLenum` | Texture magnification filter | `gl.LINEAR` (default value), `gl.NEAREST`. |
| `gl.TEXTURE_MIN_FILTER` | `GLenum` | Texture minification filter | `gl.LINEAR`, `gl.NEAREST`,
 `gl.NEAREST_MIPMAP_NEAREST`,
 `gl.LINEAR_MIPMAP_NEAREST`,
 `gl.NEAREST`\_MIPMAP\_LINEAR (default value),
 `gl.LINEAR_MIPMAP_LINEAR`.
  |
| `gl.TEXTURE_WRAP_S` | `GLenum` | Wrapping function for texture coordinate `s` | `gl.REPEAT` (default value), `gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |
| `gl.TEXTURE_WRAP_T` | `GLenum` | Wrapping function for texture coordinate `t` | `gl.REPEAT` (default value), `gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |
|
 Additionally available when using the
 `EXT_texture_filter_anisotropic` extension
  |
| `ext.TEXTURE_MAX_ANISOTROPY_EXT` | `GLfloat` | Maximum anisotropy for a texture | Any float values. |
| Additionally available when using a WebGL 2 context |
| `gl.TEXTURE_BASE_LEVEL` | `GLint` | Texture mipmap level | Any int values. |
| `gl.TEXTURE_COMPARE_FUNC` | `GLenum` | Comparison function | `gl.LEQUAL` (default value), `gl.GEQUAL`,
 `gl.LESS`, `gl.GREATER`, `gl.EQUAL`,
 `gl.NOTEQUAL`, `gl.ALWAYS`, `gl.NEVER`.
  |
| `gl.TEXTURE_COMPARE_MODE` | `GLenum` | Texture comparison mode | `gl.NONE` (default value),
 `gl.COMPARE_REF_TO_TEXTURE`.
  |
| `gl.TEXTURE_IMMUTABLE_FORMAT` | `GLboolean` | Immutability of the texture format and size | true or false. |
| `gl.TEXTURE_IMMUTABLE_LEVELS` | `GLuint` | ? | Any uint values. |
| `gl.TEXTURE_MAX_LEVEL` | `GLint` | Maximum texture mipmap array level | Any int values. |
| `gl.TEXTURE_MAX_LOD` | `GLfloat` | Texture maximum level-of-detail value | Any float values. |
| `gl.TEXTURE_MIN_LOD` | `GLfloat` | Texture minimum level-of-detail value | Any float values. |
| `gl.TEXTURE_WRAP_R` | `GLenum` | Wrapping function for texture coordinate `r` | `gl.REPEAT` (default value), `gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |

### Return value

 Returns the requested texture information (as specified with `pname`). If an
 error occurs, `null` is returned.

Examples
--------

```js
gl.getTexParameter(gl.TEXTURE\_2D, gl.TEXTURE\_MAG\_FILTER);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.8 |
| 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.texParameterf()`
* `WebGLRenderingContext.texParameteri()`
* `EXT_texture_filter_anisotropic`


WebGLRenderingContext: attachShader() method - Web APIs

WebGLRenderingContext: attachShader() method
============================================

 The **WebGLRenderingContext.attachShader()** method of the WebGL API attaches either a fragment or
 vertex `WebGLShader` to a `WebGLProgram`.

Syntax
------

```js
attachShader(program, shader)
```

### Parameters

`program`

A `WebGLProgram`.

`shader`

A fragment or vertex `WebGLShader`.

Examples
--------

The following code attaches pre-existing shaders to a `WebGLProgram`.

```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}`;
}
```

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
--------

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()`
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`


WebGLRenderingContext: uniformMatrix[234]fv() method - Web APIs

WebGLRenderingContext: uniformMatrix[234]fv() method
====================================================

 The **`WebGLRenderingContext.uniformMatrix[234]fv()`** methods
 of the WebGL API specify matrix values for
 uniform variables.

 The three versions of this method (`uniformMatrix2fv()`,
 `uniformMatrix3fv()`, and `uniformMatrix4fv()`) take as the input
 value 2-component, 3-component, and 4-component square matrices, respectively. They are
 expected to have 4, 9 or 16 floats.

Syntax
------

```js
uniformMatrix2fv(location, transpose, value)
uniformMatrix3fv(location, transpose, value)
uniformMatrix4fv(location, transpose, value)
```

### Parameters

`location`

 A `WebGLUniformLocation` object containing the location of the uniform
 attribute to modify. The location is obtained using
 `getUniformLocation()`.

`transpose`

 A `GLboolean` specifying whether to transpose the matrix. Must be
 `false`.

`value`

 A `Float32Array` or sequence of `GLfloat` values. The values
 are assumed to be supplied in column major order.

### Return value

None (`undefined`).

Examples
--------

```js
gl.uniformMatrix2fv(loc, false, [2, 1, 2, 2]);
```

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.uniform()`
* `WebGL2RenderingContext.uniformMatrix()` – WebGL 2 versions of these
 methods.


WebGLRenderingContext: compressedTexImage[23]D() method - Web APIs

WebGLRenderingContext: compressedTexImage[23]D() method
=======================================================

 The **`WebGLRenderingContext.compressedTexImage2D()`**
 and **`WebGL2RenderingContext.compressedTexImage3D()`** methods
 of the WebGL API specify a two- or
 three-dimensional texture image in a compressed format.

 Compressed image formats must be enabled by WebGL extensions before
 using these methods.

Syntax
------

```js
// WebGL 1:
compressedTexImage2D(target, level, internalformat, width, height, border)
compressedTexImage2D(target, level, internalformat, width, height, border, pixels)

// Additionally available in WebGL 2:
// read from buffer bound to gl.PIXEL\_UNPACK\_BUFFER
compressedTexImage2D(target, level, internalformat, width, height, border, imageSize, offset)
compressedTexImage2D(target, level, internalformat, width, height, border, srcData)
compressedTexImage2D(target, level, internalformat, width, height, border, srcData, srcOffset)
compressedTexImage2D(target, level, internalformat, width, height, border, srcData, srcOffset, srcLengthOverride)

// read from buffer bound to gl.PIXEL\_UNPACK\_BUFFER
compressedTexImage3D(target, level, internalformat, width, height, depth, border, imageSize, offset)

compressedTexImage3D(target, level, internalformat, width, height, depth, border, srcData)
compressedTexImage3D(target, level, internalformat, width, height, depth, border, srcData, srcOffset)
compressedTexImage3D(target, level, internalformat, width, height, depth, border, srcData, srcOffset, srcLengthOverride)
```

### Parameters

`target`

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

* `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.

Possible values for `compressedTexImage3D`:

* `gl.TEXTURE_2D_ARRAY`
* `gl.TEXTURE_3D`

`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.

`internalformat`

 A `GLenum` specifying the compressed image format. Compressed image
 formats must be enabled by WebGL extensions before
 using this method. All values are possible for `compressedTexImage2D`. See
 compressed texture formats for which are valid for `compressedTexImage3D`. 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_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_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`

`width`

A `GLsizei` specifying the width of the texture.

`height`

A `GLsizei` specifying the height of the texture.

`depth`

 A `GLsizei` specifying the depth of the texture/the number of textures
 in a `TEXTURE_2D_ARRAY`.

`border`

A `GLint` specifying the width of the border. Must be 0.

`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`.

`pixels`

 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");

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, texture);
gl.compressedTexImage2D(
  gl.TEXTURE\_2D,
  0,
  ext.COMPRESSED\_RGBA\_S3TC\_DXT5\_EXT,
  512,
  512,
  0,
  textureData,
);
gl.texParameteri(gl.TEXTURE\_2D, gl.TEXTURE\_MAG\_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE\_2D, gl.TEXTURE\_MIN\_FILTER, gl.LINEAR);
```

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

| Specification |
| --- |
| WebGL Specification # COMPRESSEDTEXIMAGE2D |
| WebGL 2.0 Specification # 3.7.6 |

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

### api.WebGLRenderingContext.compressedTexImage2D

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

### api.WebGL2RenderingContext.compressedTexImage3D

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

See also
--------

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


WebGLRenderingContext: getContextAttributes() method - Web APIs

WebGLRenderingContext: getContextAttributes() method
====================================================

 The **`WebGLRenderingContext.getContextAttributes()`** method
 returns a `WebGLContextAttributes` object that contains the actual context
 parameters. Might return `null`, if the context is lost.

Syntax
------

```js
getContextAttributes()
```

### Parameters

None.

### Return value

 A `WebGLContextAttributes` object that contains the actual context
 parameters, or `null` if the context is lost.

Examples
--------

Given this `<canvas>` element

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

and given this WebGL context

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

 the `getContextAttributes` method returns an object that describes the
 attributes set on this context, for example:

```js
{
  alpha: true,
  antialias: true,
  depth: true,
  failIfMajorPerformanceCaveat: false,
  powerPreference: "default",
  premultipliedAlpha: true,
  preserveDrawingBuffer: false,
  stencil: false,
  desynchronized: false
}
```

 The context attributes can be set when creating the context using the
 `HTMLCanvasElement.getContext()` method:

```js
canvas.getContext("webgl", { antialias: false, depth: false });
```

 See `getContext()` for more information
 about the individual attributes.

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

| Specification |
| --- |
| WebGL Specification # 5.14.2 |

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

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

See also
--------

* `HTMLCanvasElement.getContext()`
* `CanvasRenderingContext2D.getContextAttributes()`


WebGLRenderingContext: clearColor() method - Web APIs

WebGLRenderingContext: clearColor() method
==========================================

 The **`WebGLRenderingContext.clearColor()`** method of the WebGL API specifies the color values used
 when clearing color buffers.

 This specifies what color values to use when calling the
 `clear()` method. The values are clamped
 between 0 and 1.

Syntax
------

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

### Parameters

`red`

 A `GLclampf` specifying the red color value used when the color buffers
 are cleared. Default value: 0.

`green`

 A `GLclampf` specifying the green color value used when the color
 buffers are cleared. Default value: 0.

`blue`

 A `GLclampf` specifying the blue color value used when the color
 buffers are cleared. Default value: 0.

`alpha`

 A `GLclampf` specifying the alpha (transparency) value used when the
 color buffers are cleared. Default value: 0.

### Return value

None (`undefined`).

Examples
--------

```js
gl.clearColor(1, 0.5, 0.5, 3);
```

 To get the current clear color, query the `COLOR_CLEAR_VALUE` constant which
 returns a `Float32Array`.

```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
// Float32Array[1, 0.5, 0.5, 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.clearDepth()`
* `WebGLRenderingContext.clearStencil()`


WebGLRenderingContext: drawElements() method - Web APIs

WebGLRenderingContext: drawElements() method
============================================

The **`WebGLRenderingContext.drawElements()`** method of the WebGL API renders primitives from array data.

Syntax
------

```js
drawElements(mode, count, type, offset)
```

### Parameters

`mode`

 A `GLenum` specifying the type primitive to render. Possible values
 are:

* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`count`

 A `GLsizei` specifying the number of elements of the bound element array
 buffer to be rendered. For example, to draw a wireframe triangle with `gl.LINES`
 the count should be 2 endpoints per line × 3 lines = 6 elements. However to draw the
 same wireframe triangle with `gl.LINE_STRIP` the element array buffer does not
 repeat the indices for the end of the first line/start of the second line, and end of the
 second line/start of the third line, so `count` will be four. To draw the same
 triangle with `gl.LINE_LOOP` the element array buffer does not repeat the
 first/last vertex either so `count` will be three.

`type`

 A `GLenum` specifying the type of the values in the element array
 buffer. Possible values are:

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`

When using the `OES_element_index_uint` extension:

* `gl.UNSIGNED_INT`

`offset`

 A `GLintptr` specifying a byte offset in the element array buffer. Must
 be a valid multiple of the size of the given `type`.

### Return value

None (`undefined`).

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `offset` is not a valid multiple of the size of the given type, a
 `gl.INVALID_OPERATION` error is thrown.
* If `count` is negative, a `gl.INVALID_VALUE` error is thrown.
Examples
--------

```js
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED\_BYTE, 0);
```

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.drawArrays()`
* `OES_element_index_uint`
* `WEBGL_multi_draw.multiDrawElementsWEBGL()`


WebGLRenderingContext: getVertexAttrib() method - Web APIs

WebGLRenderingContext: getVertexAttrib() method
===============================================

 The **`WebGLRenderingContext.getVertexAttrib()`** method of the
 WebGL API returns information about a vertex
 attribute at a given position.

Syntax
------

```js
getVertexAttrib(index, pname)
```

### Parameters

`index`

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

`pname`

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

`gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING`

Returns the currently bound `WebGLBuffer`.

`gl.VERTEX_ATTRIB_ARRAY_ENABLED`

Returns a `GLboolean` that is `true` if the vertex attribute is enabled at this `index`. Otherwise `false`.

`gl.VERTEX_ATTRIB_ARRAY_SIZE`

 Returns a `GLint`
 indicating the size of an element of the vertex array.

`gl.VERTEX_ATTRIB_ARRAY_STRIDE`

 Returns a `GLint`
 indicating the number of bytes between successive elements in the array. 0 means
 that the elements are sequential.

`gl.VERTEX_ATTRIB_ARRAY_TYPE`

 Returns a `GLenum`
 representing the array type. One of

* `gl.BYTE`
* `gl.UNSIGNED_BYTE`
* `gl.SHORT`,
* `gl.UNSIGNED_SHORT`
* `gl.FLOAT`

`gl.VERTEX_ATTRIB_ARRAY_NORMALIZED`

 Returns a
 `GLboolean` that is true if fixed-point data types are normalized for
 the vertex attribute array at the given `index`.

`gl.CURRENT_VERTEX_ATTRIB`

 Returns a `Float32Array`
 (with 4 elements) representing the current value of the vertex attribute at the
 given `index`.

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

`gl.VERTEX_ATTRIB_ARRAY_INTEGER`

 Returns a
 `GLboolean` indicating whether an integer data type is in
 the vertex attribute array at the given `index`.

`gl.VERTEX_ATTRIB_ARRAY_DIVISOR`

 Returns a `GLint`
 describing the frequency divisor used for instanced rendering.

When using the `ANGLE_instanced_arrays` extension:

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

 Returns a
 `GLint` describing the frequency divisor used for instanced
 rendering.

### Return value

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

Examples
--------

```js
gl.getVertexAttrib(0, gl.VERTEX\_ATTRIB\_ARRAY\_BUFFER\_BINDING);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.10 |
| WebGL 2.0 Specification # 3.7.8 |

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

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

See also
--------

* `WebGLRenderingContext.getVertexAttribOffset()`
* `ANGLE_instanced_arrays`


WebGLRenderingContext: blendEquationSeparate() method - Web APIs

WebGLRenderingContext: blendEquationSeparate() method
=====================================================

 The **`WebGLRenderingContext.blendEquationSeparate()`** method
 of the WebGL API is used to set the RGB
 blend equation and alpha blend equation separately.

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

Syntax
------

```js
blendEquationSeparate(modeRGB, modeAlpha)
```

### Parameters

`modeRGB`

 A `GLenum` specifying how the red, green and blue components of 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.

`modeAlpha`

 A `GLenum` specifying how the alpha component (transparency) of 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.

### Return value

None (`undefined`).

### Exceptions

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

Examples
--------

To set the blend equations, use:

```js
gl.blendEquationSeparate(gl.FUNC\_ADD, gl.FUNC\_SUBTRACT);
```

 To get the current 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.blendEquation()`
* `WebGLRenderingContext.blendColor()`
* `WebGLRenderingContext.blendFunc()`
* `EXT_blend_minmax`


WebGLRenderingContext: canvas property - Web APIs

WebGLRenderingContext: canvas property
======================================

 The **`WebGLRenderingContext.canvas`** property is a read-only
 reference to the `HTMLCanvasElement` or `OffscreenCanvas`
 object that is associated with the context. It might be `null` if it is not
 associated with a `<canvas>` element or an `OffscreenCanvas`
 object.

Syntax
------

```js
gl.canvas
```

### Return value

 Either a `HTMLCanvasElement` or `OffscreenCanvas` object or
 `null`.

Examples
--------

### Canvas element

Given this `<canvas>` element:

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

 You can get back a reference to it from the `WebGLRenderingContext` using
 the `canvas` property:

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

### Offscreen canvas

Example using the experimental `OffscreenCanvas` object.

```js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");
gl.canvas; // OffscreenCanvas
```

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

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-canvas |

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

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

See also
--------

* `CanvasRenderingContext2D.canvas`
* The `OffscreenCanvas` interface


WebGLRenderingContext: getShaderSource() method - Web APIs

WebGLRenderingContext: getShaderSource() method
===============================================

 The **`WebGLRenderingContext.getShaderSource()`** method of the
 WebGL API returns the source code of a
 `WebGLShader` as a string.

Syntax
------

```js
getShaderSource(shader)
```

### Parameters

`shader`

A `WebGLShader` object to get the source code from.

### Return value

A string containing the source code of the shader.

Examples
--------

```js
const shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, originalSource);

const source = gl.getShaderSource(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.deleteShader()`