recursal/MDN huggingface dataset:
WebGLRenderingContext.attachShader()
====================================

WebGL API 的 **`WebGLRenderingContext.attachShader()`** 方法负责往 `WebGLProgram` 添加一个片段或者顶点着色器。

语法
--
```

void gl.attachShader(program, shader);
```

### 参数

`program`

一个 `WebGLProgram` 对象

`shader`

一个类型为片段或者顶点的 `WebGLShader`

示例
--

以下代码为 `WebGLProgram` 添加一个预先定义好的着色器。


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

// 添加一个预先定义的着色器
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

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

规范
--

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

浏览器兼容性
------

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

相关资料
----

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

**`WebGLRenderingContext.drawingBufferHeight`** 只读属性，指示当前绘图缓冲区的实际高度。它应当匹配与绘图上下文相关联的 `<canvas>` 元素的高度属性，如果实现未能提供所要求的高度，其值将有所不同。

语法
--
```

gl.drawingBufferHeight;
```

示例
--

指定 `<canvas>` 元素：


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


你可以通过下面几行代码来获取绘图缓冲区的高度：


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
gl.drawingBufferHeight; // 150
```

规范
--

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-drawingBufferHeight |

浏览器兼容性
------

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

相关链接
----

* `WebGLRenderingContext.drawingBufferWidth`
* `WebGLRenderingContext.viewport()`
WebGLRenderingContext.deleteShader()
====================================

**`WebGLRenderingContext.deleteShader()`** 用于删除一个参数提供的 `WebGLShader`对象。如果该`WebGLShader`对象已经被删除，该方法不会有任何作用。Syntax
------
```

void gl.deleteShader(shader);
```

### 参数

shader

需要被删除的 `WebGLShader` 对象

### 返回值

None.

示例
--

### 删除一个着色器


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

规范
--

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

浏览器兼容性
------

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

其他相关
----

* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
WebGLRenderingContext.scissor()
===============================

**`WebGLRenderingContext.scissor()`** 方法指定了一个裁剪区域，用来将绘图区域限制在其限定的盒形区域内。

语法
--
```

void gl.scissor(x, y, width, height);
```

### 参数

`x`

`GLint` (en-US) ，指定盒形裁剪区域左下角所在的横坐标，默认为 0。

`y`

`GLint` (en-US) 指定盒形裁剪区域左下角的纵坐标，默认为 0。

width

`Glsizei` (en-US)，用来确定盒型裁剪区域宽度的非负数，默认为 canvas 的宽度。

height

`Glsizei` (en-US) ，用以指定盒形裁剪区域高度的非负数，默认为 canvas 的高度。

### 返回值

无。

### 抛错

宽或高为负值时，抛出 `gl.INVALID_VALUE` 错误。

示例
--

当裁剪区域可用的时候，只有处于此区域内的像素才能由绘图命令修改。


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

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

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

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


通过查询 `SCISSOR_BOX` 常量来获取裁剪区域的维度信息，返回值是一个 `Int32Array` 对象。


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

规范
--

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

浏览器兼容性
------

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

参见
--

* `WebGLRenderingContext.viewport()`
* `WebGLRenderingContext.enable()`
* `WebGLRenderingContext.disable()` (en-US)
WebGLRenderingContext.bindAttribLocation()
==========================================

WebGL API 的 **`WebGLRenderingContext.bindAttribLocation()`** 方法将通用顶点索引绑定到属性变量。

语法
--
```

void gl.bindAttribLocation(program, index, name);
```

### 参数

`program`

要绑定的`WebGLProgram` 对象。

`index`

`GLuint` (en-US) 指定要绑定的通用顶点的索引。

`name`

`DOMString`指定要绑定到通用顶点索引的变量的名称。该名称不能以“webgl\_”或“\_webgl\_”开头，因为这些名称将保留供 WebGL 使用。

### 返回值

无。

示例
--
```

gl.bindAttribLocation(program, colorLocation, 'vColor');
```

规范
--

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

浏览器兼容性
------

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

另见
--

* `WebGLRenderingContext.getActiveAttrib()` (en-US)
* `WebGLRenderingContext.getAttribLocation()`
* `WebGLRenderingContext.getVertexAttrib()` (en-US)
WebGLRenderingContext.getShaderSource()
=======================================

WebGL API 中的 **`WebGLRenderingContext.getShaderSource()`** 方法以`DOMString`的形式返回了一个`WebGLShader`的源码。语法
--
```

DOMString gl.getShaderSource(shader);
```

### 参数

shader

要获取源码的 `WebGLShader` 对象

### 返回值

一个包含了指定着色器的源码的 `DOMString` 。

例子
--


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

var source = gl.getShaderSource(shader);
```

规范
--

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

浏览器兼容性
------

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

相关链接
----

* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.deleteShader()`
WebGLRenderingContext.getProgramInfoLog()
=========================================

**WebGLRenderingContext.getProgramInfoLog** 返回参数中指定的`WebGLProgram` object 的信息。这些信息包括在 linking 过程中的错误以及 `WebGLProgram` objects 合法性检查的错误。

Syntax
------
```

gl.getProgramInfoLog(program);
```

### Parameters

program

A `WebGLProgram` to query.

### Return value

返回 `DOMString` 包含 diagnostic , warning ...等等关于上一次 linking 和 valiadation 操作的信息。对于刚刚创建的`WebGLProgram` object , 返回一个空字符串。

Examples
--------

### Checking program errors


```js
var canvas = document.getElementsById("canvas");
var gl = canvas.getContext("webgl");
var program = gl.createProgram();

//vsSource is the source-code-string of vertex-shader
//fsSource is the source-code-string of fragment-shader
var vertexShader = loadShader(gl, gl.VERTEX\_SHADER, vsSource);
var fragmentShader = loadShader(gl, gl.FRAGMENT\_SHADER, fsSource);

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

gl.linkProgram(program);

gl.getProgramInfoLog(program);
```

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

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

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

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

See also
--------

* `WebGLRenderingContext.getShaderInfoLog()` (en-US)
* `WebGLRenderingContext.getError()` (en-US)
WebGLRenderingContext.compileShader()
=====================================

WebGL API下的方法 **`WebGLRenderingContext.compileShader()`** 用于编译一个 GLSL 着色器，使其成为为二进制数据，然后就可以被`WebGLProgram`对象所使用。语法
--
```

void gl.compileShader(shader);
```

### 参数

shader

一个片元或顶点着色器（`WebGLShader`）.

示例
--


```js
var shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
```

规范
--

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

浏览器兼容性
------

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

更多：
---

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

WebGL API 的 **`WebGLRenderingContext.clearColor()`** 方法用于设置清空颜色缓冲时的颜色值。

这指定调用 `clear()` 方法时使用的颜色值。这些值在 0 到 1 的范围间。

句法
--
```

void gl.clearColor(red, green, blue, alpha);
```

### 参数

`red`

一个 `GLclampf` (en-US) 类型的值，指定清除缓冲时的红色值。默认值：0。

`green`

一个 `GLclampf` (en-US) 类型的值，指定清除缓冲时的绿色值。默认值：0。

`blue`

一个 `GLclampf` (en-US) 类型的值，指定清除缓冲时的蓝色值。默认值：0。

`alpha`

一个 `GLclampf` (en-US) 类型的值，指定清除缓冲时的不透明度。默认值：0。

### 返回值

无。

示例
--


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


要获取当前的清除颜色，传入 `COLOR_CLEAR_VALUE` 常量，返回 `Float32Array`。


```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
// Float32Array[1, 0.5, 0.5, 1]
```

规范
--

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

浏览器兼容性
------

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

相关内容
----

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearDepth()`
* `WebGLRenderingContext.clearStencil()` (en-US)
WebGLRenderingContext.activeTexture()
=====================================

**`WebGLRenderingContext.activeTexture()`** 是 WebGL API 方法之一，用来激活指定的纹理单元。

句法
--
```

void gl.activeTexture(texture);
```

### 参数

`texture`

需要激活的纹理单元。其值是 `gl.TEXTUREI` ，其中的 *I* 在 0 到 `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1` 范围内。

### 返回值

无返回值。

### 异常

如果 *texture* 不是 `gl.TEXTUREI(` *I* 在 0 到 `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1` 范围内)，一个 `gl.INVALID_ENUM` 错误将被抛出。

示例
--

接下来调用 `gl.TEXTURE1` 作为当前纹理，随后对纹理状态的更改将会影响到这个纹理。


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


纹理单元的数量视实现而定，你可以通过访问常量 `MAX_COMBINED_TEXTURE_IMAGE_UNITS` 来获取这个值。按照规范来说，最少是 8 个。


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


想要获取激活的纹理，可以查询常量 `ACTIVE_TEXTURE`。


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

规范
--

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

浏览器兼容性
------

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

另见
--

* `WebGLRenderingContext.getParameter()`
WebGLRenderingContext.getTexParameter()
=======================================

**`WebGLRenderingContext.getTexParameter()`** 此WebGL API方法返回特定的纹理信息。

语法
--
```

any gl.getTexParameter(target, pname);
```

### 参数

target

一个 `GLenum` (en-US) 接口类型的绑定的点 (target). 可能的值有：

* `gl.TEXTURE_2D`: 一个二维纹理。
* `gl.TEXTURE_CUBE_MAP`: 一个立方体纹理。
* 当使用 WebGL 2 context接口，可能会出现以下值：
    + `gl.TEXTURE_3D`: 一个三维纹理。
    + `gl.TEXTURE_2D_ARRAY`: 一个二维纹理数组。

pname

一个`Glenum` (en-US)接口类型的要查询的信息。可能的值有：

| pname | 返回的类型 | 描述 | 可能返回的值 |
| --- | --- | --- | --- |
| 可用的 WebGL 1 的上下文 |
| --- |
| `gl.TEXTURE_MAG_FILTER` | `GLenum` (en-US) | 纹理的放大滤镜 | `gl.LINEAR` (default value), `gl.NEAREST`. |
| `gl.TEXTURE_MIN_FILTER` | `GLenum` (en-US) | 纹理的缩小滤镜 | `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` (en-US) | 封装的纹理坐标方法`s（对应 u 坐标）` | `gl.REPEAT` (default value), `gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |
| `gl.TEXTURE_WRAP_T` | `GLenum` (en-US) | 封装的纹理坐标方法 `t（对应 v 坐标）` | `gl.REPEAT` (default value), `gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |
| 
 使用 `EXT_texture_filter_anisotropic` (en-US)
 接口增加可用的扩展方法/属性
  |
| `ext.TEXTURE_MAX_ANISOTROPY_EXT` | `GLfloat` (en-US) | 纹理所有方向的最大值 | 一个浮点型的任意值。 |
| 使用 WebGL 2 上下文之后增加的可用方法/属性 |
| `gl.TEXTURE_BASE_LEVEL` | `GLint` (en-US) | 纹理贴图层级 | 一个整型任意值。 |
| `gl.TEXTURE_COMPARE_FUNC` | `GLenum` (en-US) | 比较方法 | `gl.LEQUAL` (default value), `gl.GEQUAL`,
 `gl.LESS`, `gl.GREATER`, `gl.EQUAL`,
 `gl.NOTEQUAL`, `gl.ALWAYS`, `gl.NEVER`.
  |
| `gl.TEXTURE_COMPARE_MODE` | `GLenum` (en-US) | 纹理的比较模式 | `gl.NONE` (default value),
 `gl.COMPARE_REF_TO_TEXTURE`.
  |
| `gl.TEXTURE_IMMUTABLE_FORMAT` | `GLboolean` (en-US) | 纹理的格式和尺寸是否可变 | true 或者 false. |
| `gl.TEXTURE_IMMUTABLE_LEVELS` | `GLuint` (en-US) | 纹理的可变等级 | 无符号整型任意值。 |
| `gl.TEXTURE_MAX_LEVEL` | `GLint` (en-US) | 贴图数组层级的最大值 | 整型任意值。 |
| `gl.TEXTURE_MAX_LOD` | `GLfloat` (en-US) | 纹理细致程度的最大值 | 浮点型任意值。 |
| `gl.TEXTURE_MIN_LOD` | `GLfloat` (en-US) | 纹理细致程度的最小值 | 浮点型任意值。 |
| `gl.TEXTURE_WRAP_R` | `GLenum` (en-US) | 封装的纹理坐标方法 `r` | `gl.REPEAT` (default value), `gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |

### 返回值

返回需要的纹理信息 (和 `pname`类型相同). 如果发生错误，就返回`null`.

示例
--


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

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.8 |
| WebGL 2.0 Specification # 3.7.6 |

浏览器兼容性
------

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

相关链接
----

* `WebGLRenderingContext.texParameterf()`
* `WebGLRenderingContext.texParameteri()`
* `EXT_texture_filter_anisotropic` (en-US)
WebGLRenderingContext.isShader()
================================

WebGL API 中的 **`WebGLRenderingContext.isShader()`** 方法，在传入的 `WebGLShader` 有效时返回 `true` ，否则返回 `false` 。

语法
--
```

GLboolean gl.isShader(shader);
```

### 参数

shader

需要校验的 `WebGLShader`

### 返回值

用来表明 shader 是否有效的 `GLboolean` (en-US) 对象

示例
--

### 校验一个 Shader


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var shader = gl.createShader(gl.VERTEX\_SHADER);

// ...

gl.isShader(shader);
```

规范
--

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

浏览器兼容性
------

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

参阅
--

* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteShader()`
WebGLRenderingContext.readPixels()
==================================

WebGL API 的 **`WebGLRenderingContext.readPixels()`** 方法从当前的颜色帧缓冲（framebuffer）中读取指定矩形的像素矩阵并转换为 `TypedArray` 或 `DataView` 对象。

语法
--


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

### 参数

`x`

`GLint` 值，指定从矩形像素块的左下角读取的第一个水平像素。

`y`

`GLint` 值，指定从矩形像素块的左下角读取的第一个垂直像素。

`width`

`GLsizei` 值，指定矩形的宽度。

`height`

`GLsizei` 值，指定矩形的高度。

`format`

`GLenum` 值，指定像素数据的格式，可能的值有：

`gl.ALPHA`

放弃红、绿、蓝通道读取 alpha 通道的数据。

`gl.RGB`

放弃 alpha 通道，读取红、绿、蓝通道的数据。

`gl.RGBA`

从颜色缓存区读取红、绿、蓝以及 alpha 通道的数据。

WebGL2 增加的

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

`type`

`GLenum` 值，指定像素数据的数据类型，可能的值有：

* `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 增加的

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

用于读取数据的对象，必须与参数 `type` 的类型相匹配：

* `Uint8Array`：`gl.UNSIGNED_BYTE`。
* `Uint16Array`：`gl.UNSIGNED_SHORT_5_6_5`、`gl.UNSIGNED_SHORT_4_4_4_4` 或 `gl.UNSIGNED_SHORT_5_5_5_1`。
* `Float32Array`：`gl.FLOAT`。

`dstOffset` 可选

偏移量，默认为 0。

### 返回值

无（`undefined`）。

### 异常

* `gl.INVALID_ENUM`：如果 `format` 或 `type` 不是可接受的值，则会引发此错误。
* `gl.INVALID_OPERATION`：抛出此错误可能的原因：
    + `type` 是 `gl.UNSIGNED_SHORT_5_6_5` 且 `format` 不是 `gl.RGB` 。
    + `type` 是 `gl.UNSIGNED_SHORT_4_4_4_4` 且 `format` 不是 `gl.RGBA`。
    + `type` 与类型化数组 `pixels` 的类型不匹配。
* `gl.INVALID_FRAMEBUFFER_OPERATION`：如果当前绑定的帧缓冲区未完成，则引发此错误。
示例
--


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

规范
--

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

浏览器兼容性
------

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

参见
--

* 类型化数组
WebGLRenderingContext.detachShader()
====================================

WebGL API 的**WebGLRenderingContext.detachShader()** 方法：从一个 `WebGLProgram`中分离一个先前附加的片段或者顶点着色器（`WebGLShader` ）.

Syntax
------
```

void gl.detachShader(program, shader);
```

### Parameters

`program`

一个 `WebGLProgram` 对象。

`shader`

一个顶点或者片元着色器 `WebGLShader`.

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

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

例子
--

### 使用 detachShader 方法分离一个顶点或片元着色器
```

//顶点着色器
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexSrc);
    gl.compileShader(vertexShader);
    //片元着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//创建 WebGLShader。
    gl.shaderSource(fragmentShader, fragmentSrc); //fragmentSrc 设置一个 WebGLShader 的源码。
    gl.compileShader(fragmentShader);

    //WebGLProgram
    var program = gl.createProgram();//创建 WebGLProgram
    gl.attachShader(program, vertexShader); //往 WebGLProgram 添加一个片段或者顶点着色器。
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);//链接给入的 WebGLProgram 对象
    gl.detachShader(program, vertexShader); //从一个 WebGLProgram 中分离一个先前附加的片段或者顶点着色器;
    gl.detachShader(program, fragmentShader);
    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);
```

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()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
WebGLRenderingContext.getContextAttributes()
============================================

**`WebGLRenderingContext.getContextAttributes()`** 方法返回一个包含实际上下文参数的 `WebGLContextAttributes` 对象。如果上下文丢失，可能返回 `null`。

语法
--
```

gl.getContextAttributes();
```

### 返回值

一个包含实际上下文参数的 `WebGLContextAttributes` 的对象，或 `null`（如果上下文丢失）。

实例
--

给定 `<canvas>` 元素


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


和给定 WebGL 上下文


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


`getContextAttributes` 方法返回描述在此上下文中设置的属性的对象，例如：


```js
{
  alpha: true,
  antialias: true,
  depth: true,
  failIfMajorPerformanceCaveat: false,
  premultipliedAlpha: true,
  preserveDrawingBuffer: false,
  stencil: false
}
```


上下文的属性可以在用 `HTMLCanvasElement.getContext()` 方法创建上下文时设置：


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


有关各个属性的更多信息，请参阅 `getContext()`。

规范
--

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

浏览器兼容性
------

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

参见
--

* `WebGLRenderingContext`
WebGLRenderingContext.vertexAttrib[1234]f[v]()
==============================================

**`WebGLRenderingContext.vertexAttrib[1234]f[v]()`** 是 WebGL API 的方法，可以为顶点 attibute 变量赋值。

语法
--
```

void gl.vertexAttrib1f(index, v0);
void gl.vertexAttrib2f(index, v0, v1);
void gl.vertexAttrib3f(index, v0, v1, v2);
void gl.vertexAttrib4f(index, v0, v1, v2, v3);

void gl.vertexAttrib1fv(index, value);
void gl.vertexAttrib2fv(index, value);
void gl.vertexAttrib3fv(index, value);
void gl.vertexAttrib4fv(index, value);
```

### Parameters

`index`

`GLuint` (en-US) 类型，指定了待修改顶点 attribute 变量的存储位置。

`v0, v1, v2, v3`

浮点数类型`Number`，用于设置顶点 attibute 变量的各分量值。

`value`

`Float32Array` 类型，用于设置顶点 attibute 变量的向量值。

### 返回值

无。

示例
--


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

规范
--

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

浏览器兼容性
------

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

相关链接
----

* `WebGLRenderingContext.getVertexAttrib()` (en-US)
WebGLRenderingContext.getAttribLocation()
=========================================

**`WebGLRenderingContext.getAttribLocation()`** 方法返回了给定`WebGLProgram`对象中某属性的下标指向位置。

语法
--
```

GLint gl.getAttribLocation(program, name);
```

### 参数

program

一个包含了属性参数的`WebGLProgram` 对象。

name

需要获取下标指向位置的 `DOMString` 属性参数名

### 返回值

表明属性位置的下标 `GLint` (en-US) 数字，如果找不到该属性则返回 -1。

示例
--


```js
gl.getAttribLocation(program, "vColor");
```

规范
--

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

浏览器兼容性
------

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

相关资料
----

* `WebGLRenderingContext.getUniformLocation()` (en-US)
WebGLRenderingContext.deleteProgram()
=====================================

**`WebGLRenderingContext.deleteProgram()`** 用于删除一个 `WebGLProgram` 对象。如果该`WebGLProgram` 对象已经被删除，该方法不会产生任何作用

语法
--
```

void gl.deleteProgram(program);
```

### 参数

`program`

需要被删除的 `WebGLProgram` 对象

### 返回值

None.

示例
--

### 删除一个程序


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

// ...

gl.deleteProgram(program);
```

规范
--

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

浏览器兼容性
------

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

其他相关
----

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