recursal/MDN huggingface dataset:
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
==========================================

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

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

**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: 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
========================================

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

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

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

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

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

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

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

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

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