WebGLRenderingContext.getShaderSource() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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]() - Web API 接口参考

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() - Web API 接口参考

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() - Web API 接口参考

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


WebGLRenderingContext.createShader() - Web API 接口参考

WebGLRenderingContext.createShader()
====================================

**WebGLRenderingContext.createShader()** 用于创建一个 `WebGLShader` 着色器对象，该对象可以使用 `WebGLRenderingContext.shaderSource()` 和 `WebGLRenderingContext.compileShader()` 方法配置着色器代码。

语法
--
```

WebGLShader gl.createShader(type);
```

### 参数

type

参数为`gl.VERTEX_SHADER` 或 `gl.FRAGMENT_SHADER`两者中的一个。

示例
--

详见 `WebGLShader` 的使用和示例

规范
--

| 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.bindAttribLocation()`
* `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.shaderSource() - Web API 接口参考

WebGLRenderingContext.shaderSource()
====================================

WebGL API 中的 **`WebGLRenderingContext.shaderSource()`** 方法用于设置 `WebGLShader` 着色器（顶点着色器及片元着色器）的 GLSL 程序代码。

语法
--
```

void gl.shaderSource(shader, source);
```

### 参数

shader

用于设置程序代码的 `WebGLShader`（着色器对象）。

source

包含 GLSL 程序代码的字符串。

### 返回值

None.

示例
--

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


WebGLRenderingContext.createProgram() - Web API 接口参考

WebGLRenderingContext.createProgram()
=====================================

WebGL API 的 **`WebGLRenderingContext.createProgram()`** 方法用于创建和初始化一个 `WebGLProgram` 对象。

语法
--
```

WebGLProgram gl.createProgram();
```

### 参数

无。

### 返回值

一个 `WebGLProgram` 对象由两个编译过后的 `WebGLShader` 组成 - 顶点着色器和片段着色器（均由 GLSL 语言所写）。这些组合成一个可用的 WebGL 着色器程序。

例子
--

### 创建一个 WebGL 着色器程序

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

详见 `WebGLShader` 获取更多关于创建上述代码中顶点着色器和片段着色器的信息。

规范
--

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

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

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

相关资料
----

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


WebGLRenderingContext.useProgram() - Web API 接口参考

WebGLRenderingContext.useProgram()
==================================

**`WebGLRenderingContext.useProgram()`** 方法将定义好的`WebGLProgram` 对象添加到当前的渲染状态中。

语法
--
```

void gl.useProgram(program);
```

### 参数

program

需要添加的`WebGLProgram`对象

### 返回参数

无。

示例
--

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

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

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


WebGLRenderingContext.pixelStorei() - Web API 接口参考

WebGLRenderingContext.pixelStorei()
===================================

**`WebGLRenderingContext.pixelStorei()`** 是 WebGL API 中用于图像预处理的函数。

语法
--
```

void gl.pixelStorei(pname, param);
```

### 参数

pname

`Glenum` (en-US) 类型，表示处理的方式。关于该参数可选值，请见下面表格。

param

`GLint` (en-US) 类型，表示 pname 处理方式的参数。关于该参数可选值，请见下面表格。

### 返回值

None.

像素存储参数
------

| 模式名称 (`pname`) | 描述 | 类型 | 默认值 | param 的可选值 | Specified in |
| --- | --- | --- | --- | --- | --- |
| `gl.PACK_ALIGNMENT` | Packing of pixel data into memory | `GLint` (en-US) | 4 | 1, 2, 4, 8 | OpenGL ES 2.0 |
| `gl.UNPACK_ALIGNMENT` | Unpacking of pixel data from memory. | `GLint` (en-US) | 4 | 1, 2, 4, 8 | OpenGL ES 2.0 |
| `gl.UNPACK_FLIP_Y_WEBGL` | 如果为 true，则把图片上下对称翻转坐标轴 (图片本身不变)。 | `GLboolean` (en-US) | false | true, false | WebGL |
| `gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL` | Multiplies the alpha channel into the other color channels | `GLboolean` (en-US) | false | true, false | WebGL |
| `gl.UNPACK_COLORSPACE_CONVERSION_WEBGL` | Default color space conversion or no color space conversion. | `GLenum` (en-US) | `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` (en-US) | 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` (en-US) | 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` (en-US) | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.UNPACK_ROW_LENGTH` | Number of pixels in a row. | `GLint` (en-US) | 0 | 0 to `Infinity` | OpenGL ES 3.0 |
| `gl.UNPACK_IMAGE_HEIGHT` | Image height used for reading pixel data from memory | `GLint` (en-US) | 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` (en-US) | 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` (en-US) | 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` (en-US) | 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()` (en-US) methods.

```js
var 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()` (en-US)


WebGLRenderingContext.texParameter[fi]() - Web API 接口参考

WebGLRenderingContext.texParameter[fi]()
========================================

WebGL API 的 **`WebGLRenderingContext.texParameter[fi]()`** 方法用于设置纹理参数。

语法
--
```

void gl.texParameterf(GLenum target, GLenum pname, GLfloat param);
void gl.texParameteri(GLenum target, GLenum pname, GLint param);
```

### 参数

target

`GLenum` (en-US) 指定绑定点 (目标)。可能的值：

* `gl.TEXTURE_2D`: 二维纹理。
* `gl.TEXTURE_CUBE_MAP`: 立方体纹理。
* 当使用 WebGL 2 context 时，还可以使用以下值
    + `gl.TEXTURE_3D`: 三维贴图。
    + `gl.TEXTURE_2D_ARRAY`: 二维数组贴图。

`pname` 参数是 `Glenum` (en-US) 指定要设置的纹理参数。`param` 参数是 `GLfloat` (en-US) 或 `GLint` (en-US) 已指定的 `pname`参数的值。

| `pname` | 描述 | `参数` |
| --- | --- | --- |
| Available in WebGL 1 |
| --- |
| `gl.TEXTURE_MAG_FILTER` | 纹理放大滤波器 | `gl.LINEAR` (默认值), `gl.NEAREST`. |
| `gl.TEXTURE_MIN_FILTER` | 纹理缩小滤波器 | `gl.LINEAR`, `gl.NEAREST`,
 `gl.NEAREST_MIPMAP_NEAREST`,
 `gl.LINEAR_MIPMAP_NEAREST`,
 `gl.NEAREST_MIPMAP_LINEAR` (默认值),
 `gl.LINEAR_MIPMAP_LINEAR`.
  |
| `gl.TEXTURE_WRAP_S` | 纹理坐标水平填充 `s` | `gl.REPEAT` (默认值),`gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |
| `gl.TEXTURE_WRAP_T` | 纹理坐标垂直填充 `t` | `gl.REPEAT` (默认值),`gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |
|
 Additionally available when using the
 `EXT_texture_filter_anisotropic` (en-US) extension
  |
| `ext.TEXTURE_MAX_ANISOTROPY_EXT` | 纹理最大向异性 | `GLfloat` (en-US) 值。 |
| Additionally available when using a WebGL 2 context |
| `gl.TEXTURE_BASE_LEVEL` | 纹理映射等级 | 任何整型值。 |
| `gl.TEXTURE_COMPARE_FUNC` | 纹理对比函数 | `gl.LEQUAL` (默认值), `gl.GEQUAL`,
 `gl.LESS`, `gl.GREATER`, `gl.EQUAL`,
 `gl.NOTEQUAL`, `gl.ALWAYS`, `gl.NEVER`.
  |
| `gl.TEXTURE_COMPARE_MODE` | 纹理对比模式 | `gl.NONE` (默认值), `gl.COMPARE_REF_TO_TEXTURE`. |
| `gl.TEXTURE_MAX_LEVEL` | 最大纹理映射数组等级 | 任何整型值。 |
| `gl.TEXTURE_MAX_LOD` | 纹理最大细节层次值 | 任何整型值。 |
| `gl.TEXTURE_MIN_LOD` | 纹理最小细节层次值 | 任何浮点型值。 |
| `gl.TEXTURE_WRAP_R` | 纹理坐标`r`包装功能 | `gl.REPEAT` (默认值), `gl.CLAMP_TO_EDGE`,
 `gl.MIRRORED_REPEAT`.
  |

### 返回值

`INVALID_ENUM` target 不是合法的值。

`INVALID_OPRATION` 当前目标上没有绑定纹理对象。

示例
--

```js
gl.texParameterf(gl.TEXTURE\_2D, gl.TEXTURE\_MAG\_FILTER, gl.LINEAR);
gl.texParameteri(
  gl.TEXTURE\_2D,
  gl.TEXTURE\_MIN\_FILTER,
  gl.LINEAR\_MIPMAP\_NEAREST,
);
```

规范
--

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

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

### api.WebGLRenderingContext.texParameterf

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

### api.WebGLRenderingContext.texParameteri

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

另见
--

* `WebGLRenderingContext.getTexParameter()`
* `EXT_texture_filter_anisotropic` (en-US)


WebGLRenderingContext.isEnabled() - Web API 接口参考

WebGLRenderingContext.isEnabled()
=================================

**`WebGLRenderingContext.isEnabled()`** 是 WebGL API 方法之一，用来检测给定的 WebGL 功能项在当前上下文是否可用。

默认的，除了 `gl.DITHER`，所有的功能项都是未启用的。

句法
--
```

void gl.isEnabled(cap);
```

### 参数

`cap`

`GLenum` (en-US) 指定待检测的 WebGL 功能项。可能的值有：

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

当使用 WebGL 2 context 的时候，下列附加的值也是可选用的。

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

### 返回值

`GLboolean` (en-US) 指示能力项 *cap* 可用 (`true`)，不可用 (`false`)。

示例
--

```js
gl.isEnabled(gl.STENCIL\_TEST);
// false
```

启用或停用给定的能力项，使用 `WebGLRenderingContext.enable()` 方法和 `WebGLRenderingContext.disable()` (en-US) 方法：

```js
gl.enable(gl.STENCIL\_TEST);
gl.disable(gl.STENCIL\_TEST);
```

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.enable()`
* `WebGLRenderingContext.disable()` (en-US)


WebGLRenderingContext.uniformMatrix[234]fv() - Web API 接口参考

WebGLRenderingContext.uniformMatrix[234]fv()
============================================

WebGL API 的 **`WebGLRenderingContext.uniformMatrix[234]fv()`** 方法为 uniform 变量指定了矩阵值。

该方法的 3 个版本（`uniformMatrix2fv()`、`uniformMatrix3fv()` 和 `unifomMatrix4fv()`），分别以二阶、三阶和四阶方阵作为输入值，它们应是分别具有 4、9、16 个浮点数的数组。

语法
--
```

WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);
```

### 参数

`location`

`WebGLUniformLocation` 对象包含了要修改的 uniform attribute 位置。位置使用 `getUniformLocation()` (en-US)获得。

`transpose`

`GLboolean` (en-US) 指定是否转置矩阵。必须为 `false`。

`value`

`Float32Array` 型或者是 `GLfloat` 序列值。这些值被假定按列主序（column major order）的方式提供。

### 返回值

`undefined`

示例
--

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

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.uniform()`
* `WebGL2RenderingContext.uniformMatrix()` – WebGL 2 versions of these methods.


WebGLRenderingContext.createRenderbuffer() - Web API 接口参考

WebGLRenderingContext.createRenderbuffer()
==========================================

WebGL API 的\*\*`WebGLRenderingContext.createRenderbuffer()`\*\* 方法 创建并初始化一个 `WebGLRenderbuffer` 对象。

语法
--
```

WebGLRenderbuffer gl.createRenderbuffer();
```

### 参数

None.

### 返回值

一个 `WebGLRenderbuffer` 对象可以保存数据，例如一张图片，或者可以渲染操作的源或目标。

例如
--

### 创建一个渲染缓冲区

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

规范
--

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

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

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

另见
--

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


WebGLRenderingContext.deleteFramebuffer() - Web API 接口参考

WebGLRenderingContext.deleteFramebuffer()
=========================================

WebGL API 的 **`WebGLRenderingContext.deleteFramebuffer()`** 方法用来删除给定的`WebGLFramebuffer` 对象。如果帧缓冲区已被删除，则此方法无效。.

语法
--
```

void gl.deleteFramebuffer(framebuffer);
```

### 参数

framebuffer

将要删除的`WebGLFramebuffer` 对象。

### 返回值

None.

示例
--

### 删除一个帧缓冲区

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

// ...

gl.deleteFramebuffer(framebuffer);
```

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()` (en-US)
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`


WebGLRenderingContext.clearDepth() - Web API 接口参考

WebGLRenderingContext.clearDepth()
==================================

WebGL API的\*\*`WebGLRenderingContext.clearDepth()`\*\* 方法用于设置深度缓冲区的深度清除值。

这个深度清除值的设定，是为了调用`clear()` 的时候使用，这个值的范围是 0 到 1。

语法
--
```

void gl.clearDepth(depth);
```

### 参数

`depth`

类型：`GLclampf` (en-US)。深度值的设定，是当清除深度缓冲区的时候使用。默认值为 1。

### 返回值

None.

样例
--

```js
gl.clearDepth(0.5);
```

若要获取当前深度清除值，查询`DEPTH_CLEAR_VALUE` 常量。

```js
gl.getParameter(gl.DEPTH\_CLEAR\_VALUE);
// 0.5
```

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearStencil()` (en-US)


WebGLRenderingContext.enable() - Web API 接口参考

WebGLRenderingContext.enable()
==============================

WebGL API 中的\*\*`WebGLRenderingContext.enable()`\*\* 方法，用于对该上下文开启某种特性。

语法
--
```

void gl.enable(cap);参数
```

`cap`

让 WebGL 开启某种特性，可能的值：

| Constant | Description |
| --- | --- |
| `gl.BLEND` | 激活片元的颜色融合计算。参见 `WebGLRenderingContext.blendFunc()`. |
| `gl.CULL_FACE` | 激活多边形正反面剔除。参见`WebGLRenderingContext.cullFace()`. |
| `gl.DEPTH_TEST` | 激活深度比较，并且更新深度缓冲区。参见`WebGLRenderingContext.depthFunc()`. |
| `gl.DITHER` | 激活在写入颜色缓冲区之前，抖动颜色成分。 |
| `gl.POLYGON_OFFSET_FILL` | 激活添加多边形片段的深度值偏移。参见`WebGLRenderingContext.polygonOffset()`. |
| `gl.SAMPLE_ALPHA_TO_COVERAGE` | 激活通过 alpha 值决定的临时覆盖值计算。（抗锯齿） |
| `gl.SAMPLE_COVERAGE` | 激活使用临时覆盖值，位和运算片段的覆盖值。参见 `WebGLRenderingContext.sampleCoverage()` (en-US). |
| `gl.SCISSOR_TEST` | 激活剪裁测试，即丢弃在剪裁矩形范围外的片段。`WebGLRenderingContext.scissor()`. |
| `gl.STENCIL_TEST` | 激活模板测试并且更新模板缓冲区。参见`WebGLRenderingContext.stencilFunc()` (en-US). |

当使用 WebGL 2 context时，可以添加使用下面的值。

| Constant | Description |
| --- | --- |
| `gl.RASTERIZER_DISCARD` | 图元光栅化阶段之前，但在任意的 transform 反馈之后，就立刻被丢弃。`gl.clear() 命令被忽略。` |

### 返回值

None.

样例
--

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

如果要检测可用性，可以使用 `WebGLRenderingContext.isEnabled()` 方法：

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

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.disable()` (en-US)
* `WebGLRenderingContext.isEnabled()`


WebGLRenderingContext.drawArrays() - Web API 接口参考

WebGLRenderingContext.drawArrays()
==================================

WebGL API 中的 **`WebGLRenderingContext.drawArrays()`** 方法用于从向量数组中绘制图元。

语法
--
```

void gl.drawArrays(mode, first, count);
```

### 参数

`mode`

`GLenum` (en-US) 类型，指定绘制图元的方式，可能值如下。

* `gl.POINTS`: 绘制一系列点。
* `gl.LINE_STRIP`: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
* `gl.LINE_LOOP`: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
* `gl.LINES`: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
* `gl.TRIANGLE_STRIP`：绘制一个三角带。
* `gl.TRIANGLE_FAN`：绘制一个三角扇。
* `gl.TRIANGLES`: 绘制一系列三角形。每三个点作为顶点。

first

`GLint` (en-US) 类型，指定从哪个点开始绘制。

count

`GLsizei` (en-US) 类型，指定绘制需要使用到多少个点。

### 返回值

无。

### 异常

* 如果 `mode` 不是一个可接受值，将会抛出 `gl.INVALID_ENUM` 异常。
* 如果 `first` 或者 `count` 是负值，会抛出 `gl.INVALID_VALUE` 异常。
* 如果 `gl.CURRENT_PROGRAM` 为 `null`，会抛出 `gl.INVALID_OPERATION` 异常。
示例
--

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

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.drawElements()`
* `ext.drawArraysInstancedANGLE()` (en-US)
* `ext.drawElementsInstancedANGLE()` (en-US)
* `ext.vertexAttribDivisorANGLE()` (en-US)
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)


WebGLRenderingContext.texImage2D() - Web API 接口参考

WebGLRenderingContext.texImage2D()
==================================

WebGL API 的 **`WebGLRenderingContext.texImage2D()`** 方法指定了二维纹理图像。

语法
--
```

// WebGL1:
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView? pixels);
void gl.texImage2D(target, level, internalformat, format, type, ImageData? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLImageElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLVideoElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, ImageBitmap? pixels);

// WebGL2:
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, GLintptr offset);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLCanvasElement source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLImageElement source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLVideoElement source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageBitmap source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageData source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView srcData, srcOffset);
```

### 参数

`target`

`GLenum` (en-US) 指定纹理的绑定对象。可能的值：

* `gl.TEXTURE_2D`: 二维纹理贴图。
* `gl.TEXTURE_CUBE_MAP_POSITIVE_X`:立方体映射纹理的正 X 面。
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_X`: 立方体映射纹理的负 X 面。
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Y`: 立方体映射纹理的正 Y 面。
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y`: 立方体映射纹理的负 Y 面。
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Z`: 立方体映射纹理的正 Z 面。
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z`: 立方体映射纹理的负 Z 面。

`level`

`GLint` (en-US) 指定详细级别。0 级是基本图像等级，n 级是第 n 个金字塔简化级。

`internalformat`

`GLenum` (en-US) 指定纹理中的颜色组件。在 WebGL1 和 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 |

在 WebGL2 中，对带有 `ArrayBufferView` 或 `GLintptr offset`的 `texImage2D` 版本，其他可能的值

| **Sized Format** | **Base Format** | **R bits** | **G bits** | **B bits** | **A bits** | **Shared bits** | **Color renderable** | **Texture filterable** |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 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 |  | ● |  |

在 WebGL2 中，使用`HTMLImageElement`, `HTMLCanvasElement`, `HTMLVideoElement`, `ImageBitmap`, 或 `ImageData`作为`texImage2D` 纹理的版本中，可能的值有：

* `gl.ALPHA`: 抛弃红色、绿色和蓝色组件并读取 alpha 组件。
* `gl.RGB`:抛弃 alpha 组件，读取红色、绿色和蓝色组件。
* `gl.RGBA`: 从颜色缓冲区读取红色、绿色、蓝色和 alpha 组件。
* `gl.LUMINANCE`: E 每个颜色组件是一个亮度组件，alpha 值为 1.0。
* `gl.LUMINANCE_ALPHA`: 每个组件都是亮度/alpha 组件。
* 当时用 `WEBGL_depth_texture` (en-US) 扩展：
    + `gl.DEPTH_COMPONENT`
    + `gl.DEPTH_STENCIL`
* 当时用 `EXT_sRGB` (en-US) 扩展：
    + `ext.SRGB_EXT`
    + `ext.SRGB_ALPHA_EXT`
* 当时用 WebGL 2 context, 另外还提供以下值：
    + `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`

`GLsizei` (en-US) 指定纹理的宽度。

`height`

`GLsizei` (en-US) 指定纹理的高度

`border`

`GLint` (en-US) 指定纹理的边框宽度。必须为 0。

`format`

`GLenum` (en-US) 指定 texel 数据格式。在 WebGL 1 中，它必须与 `internalformat` 相同（查看上面). 在 WebGL 2 中，这张表中列出了这些组合。

`type`

`GLenum` (en-US) 指定 texel 数据的数据类型。可能的值：

* `gl.UNSIGNED_BYTE`: `gl.RGBA`每个通道 8 位
* `gl.UNSIGNED_SHORT_5_6_5`: 5 bits 红，6 bits 绿，5 bits 蓝
* `gl.UNSIGNED_SHORT_4_4_4_4`: 4 bits 红，4 bits 绿，4 bits 蓝，4 alpha bits.
* `gl.UNSIGNED_SHORT_5_5_5_1`: 5 bits 红，5 bits 绿，5 bits 蓝，1 alpha bit.
* 当使用 `WEBGL_depth_texture` (en-US) 扩展：
    + `gl.UNSIGNED_SHORT`
    + `gl.UNSIGNED_INT`
    + `ext.UNSIGNED_INT_24_8_WEBGL` (constant provided by the extension)
* 当使用 `OES_texture_float` (en-US)扩展 :
    + `gl.FLOAT`
* 当使用 `OES_texture_half_float` (en-US) 扩展：
    + `ext.HALF_FLOAT_OES` (constant provided by the extension)
* 当使用 WebGL 2 context,下面的值也是可用的：
    + `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`

下列对象之一可以用作纹理的像素源：

* `ArrayBufferView`,
    + `Uint8Array` 如果 `type` 是 `gl.UNSIGNED_BYTE`则必须使用
    + `Uint16Array` 如果 `type` 是 `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` 或`ext.HALF_FLOAT_OES`则必须使用
    + `Uint32Array` 如果`type` 是 `gl.UNSIGNED_INT` 或`ext.UNSIGNED_INT_24_8_WEBGL`则必须使用
    + `Float32Array` 如果`type` 是 `gl.FLOAT`则必须使用
* `ImageData`,
* `HTMLImageElement`,
* `HTMLCanvasElement`,
* `HTMLVideoElement`,
* `ImageBitmap`.

offset

`GLintptr` (en-US) 类型偏移到 `WebGLBuffer`的数据存储中。用于上传数据到当前范围 `WebGLTexture` 从`WebGLBuffer` 范围到`PIXEL_UNPACK_BUFFER` 目标。(仅在 WebGL 2 中 )

### 返回值

None.

示例
--

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

规范
--

| 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.createTexture()`
* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.texSubImage2D()` (en-US)
* `WebGLRenderingContext.compressedTexImage2D()` (en-US)
* `WebGLRenderingContext.copyTexImage2D()` (en-US)
* `WebGLRenderingContext.getTexParameter()`
* `WEBGL_depth_texture` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_half_float` (en-US)
* `EXT_sRGB` (en-US)


WebGLRenderingContext.bindBuffer() - Web API 接口参考

WebGLRenderingContext.bindBuffer()
==================================

WebGL API 的 **`WebGLRenderingContext.bindBuffer()`** 方法将给定的 `WebGLBuffer` 绑定到目标。

语法
--
```

void gl.bindBuffer(target, buffer);
```

### 参数

target

`GLenum` (en-US) 指定绑定点 (target)。可能的值：

* `gl.ARRAY_BUFFER`: 包含顶点属性的 Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
* `gl.ELEMENT_ARRAY_BUFFER`: 用于元素索引的 Buffer。
* 当使用 WebGL 2 context时，可以使用以下值：
    + `gl.COPY_READ_BUFFER`: 从一个 Buffer 对象复制到另一个 Buffer 对象。
    + `gl.COPY_WRITE_BUFFER`: 从一个 Buffer 对象复制到另一个 Buffer 对象。
    + `gl.TRANSFORM_FEEDBACK_BUFFER`: Buffer for transform feedback operations.
    + `gl.UNIFORM_BUFFER`: 用于存储统一块的 Buffer。
    + `gl.PIXEL_PACK_BUFFER`: 用于像素传输操作的 Buffer。
    + `gl.PIXEL_UNPACK_BUFFER`: 用于像素传输操作的 Buffer。

buffer

要绑定的 `WebGLBuffer` 。

### 返回值

无。

### 异常

只有一个目标可以绑定到给定的 `WebGLBuffer` 。尝试将缓冲区绑定到另一个目标将引发 `INVALID_OPERATION` 错误，并且当前的缓冲区绑定将保持不变。

一个被`deleteBuffer`标记为删除的`WebGLBuffer`不可重新被绑定，尝试这样做将生成 `INVALID_OPERATION` 错误，并且当前绑定将保持不变。

示例
--

### 将缓冲区绑定到目标

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

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

### 获取当前绑定

要检查当前的缓冲区绑定，请查询 ARRAY\_BUFFER\_BINDING 和 ELEMENT\_ARRAY\_BUFFER\_BINDING 常量。

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

规范
--

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

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

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

另见
--

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


WebGLRenderingContext.getExtension() - Web API 接口参考

WebGLRenderingContext.getExtension()
====================================

**`WebGLRenderingContext.getExtension()`** 方法可以启用一个 WebGL 扩展。

语法
--
```

gl.getExtension(name);
```

### 参数

name

以 `String` 形式表示的需要启用的 WebGL 扩展的名称。

### 返回值

一个 WebGL 扩展对象。如果扩展名称（区分大小写）与 `WebGLRenderingContext.getSupportedExtensions` 中的任何结果都不匹配，则只会返回 `null` 。

示例
--

当一个 WebGL 扩展被启用后，就可以使用该扩展提供的方法、属性和常量。

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

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

WebGL 扩展
--------

WebGL API 的扩展在 WebGL Extension Registry 定义。目前支持的扩展在这里列出

规范
--

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

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

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

参阅
--

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


WebGLRenderingContext.getShaderParameter() - Web API 接口参考

WebGLRenderingContext.getShaderParameter()
==========================================

**`WebGLRenderingContext.getShaderParameter()`** 返回给定的着色器信息

语法
--
```

any gl.getShaderParameter(shader, pname);
```

### 参数

shader

需要获取信息的着色器对象

pname

指定要查询的信息属性名称，值：

* `gl.DELETE_STATUS`:标示着色器是否被删除，删除（**GL\_TRUE**）未删除（**GL\_FALSE**）.
* `gl.COMPILE_STATUS`: 标示着色器是否编译成功，是（**GL\_TRUE**）不是（**GL\_FALSE**）
* `gl.SHADER_TYPE`: 标示着色器类型，是顶点着色器 (`gl.VERTEX_SHADER`) 还是片段着色器 (`gl.FRAGMENT_SHADER`)

### 返回值

返回对应着色器属性信息

例子
--

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

规范
--

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

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

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

相关链接
----

* `WebGLRenderingContext.getProgramParameter()` (en-US)


WebGLRenderingContext.depthFunc() - Web API 接口参考

WebGLRenderingContext.depthFunc()
=================================

WebGL API 的 **`WebGLRenderingContext.depthFunc()`** 方法，指定将输入像素深度与当前深度缓冲区值进行比较的函数。

语法
--
```

void gl.depthFunc(func);
```

### 参数

`func`

是一个指定深度比较函数的 `GLenum` (en-US)，它设置像素将被绘制的条件。默认值是 `gl.LESS`。可能的值是：

* `gl.NEVER`（永不通过）
* `gl.LESS`（如果传入值小于深度缓冲值，则通过）
* `gl.EQUAL`（如果传入值等于深度缓冲区值，则通过）
* `gl.LEQUAL`（如果传入值小于或等于深度缓冲区值，则通过）
* `gl.GREATER`（如果传入值大于深度缓冲区值，则通过）
* `gl.NOTEQUAL`（如果传入的值不等于深度缓冲区值，则通过）
* `gl.GEQUAL`（如果传入值大于或等于深度缓冲区值，则通过）
* `gl.ALWAYS`（总是通过）

### 返回值

无。

示例
--

深度测试默认是禁用的。要启用或禁用深度测试，请使用带有参数 `gl.DEPTH_TEST` 的 `enable()` 和 `disable()` (en-US) 方法。

```js
gl.enable(gl.DEPTH\_TEST);
gl.depthFunc(gl.NEVER);
```

要检查当前深度函数，请查询 `DEPTH_FUNC` 常量。

```js
gl.getParameter(gl.DEPTH\_FUNC) === gl.NEVER;
// true
```

规范
--

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

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

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

参见
--

* `WebGLRenderingContext.enable()`


WebGLRenderingContext.blendFunc() - Web API 接口参考

WebGLRenderingContext.blendFunc()
=================================

WebGL API 的\*\*`WebGLRenderingContext.blendFunc()`\*\* 方法定义了一个用于混合像素算法的函数。

语法
--
```

void gl.blendFunc(sfactor, dfactor);
```

### 参数

`sfactor`

`GLenum` (en-US) 为源混合因子指定一个乘数。默认值是 `gl.ONE`. 有关可能的值，查看下面。

`dfactor`

`GLenum` (en-US) 为源目标合因子指定一个乘数。默认值是 `gl.ZERO`. 有关可能的值，查看下面。

### 返回值

None.

### 异常

* 如果 `sfactor` 或 `dfactor` 不是列出的可能值一直，则抛出 `gl.INVALID_ENUM` 错误。
* 如果使用恒定的颜色和恒定的 alpha 值作为源和目标因子，则抛出`gl.INVALID_ENUM` 错误。
常量
--

下列常数可用于 `sfactor` 和`dfactor`.

混合颜色的公式可以这样描述：color(RGBA) = (sourceColor \* *sfactor*) + (destinationColor \* *dfactor*). RBGA 值在 0 到 1 之间。

| Constant | Factor | Description |
| --- | --- | --- |
| `gl.ZERO` | 0,0,0,0 | 所有颜色乘 0. |
| `gl.ONE` | 1,1,1,1 | 所有颜色乘 1. |
| `gl.SRC_COLOR` | RS, GS, BS, AS | 将所有颜色乘上源颜色。 |
| `gl.ONE_MINUS_SRC_COLOR` | 1-RS, 1-GS, 1-BS, 1-AS | 每个源颜色所有颜色乘 1 . |
| `gl.DST_COLOR` | RD, GD, BD, AD | 将所有颜色与目标颜色相乘。 |
| `gl.ONE_MINUS_DST_COLOR` | 1-RD, 1-GD, 1-BD, 1-AD | 将所有颜色乘以 1 减去每个目标颜色。 |
| `gl.SRC_ALPHA` | AS, AS, AS, AS | 将所有颜色乘以源 alpha 值。 |
| `gl.ONE_MINUS_SRC_ALPHA` | 1-AS, 1-AS, 1-AS, 1-AS | 将所有颜色乘以 1 减去源 alpha 值。 |
| `gl.DST_ALPHA` | AD, AD, AD, AD | 将所有颜色与目标 alpha 值相乘。 |
| `gl.ONE_MINUS_DST_ALPHA` | 1-AD, 1-AD, 1-AD, 1-AD | 将所有颜色乘以 1 减去目标 alpha 值。 |
| `gl.CONSTANT_COLOR` | RC, GC, BC, AC | 将所有颜色乘以一个常数颜色。 |
| `gl.ONE_MINUS_CONSTANT_COLOR` | 1-RC, 1-GC, 1-BC, 1-AC | 所有颜色乘以 1 减去一个常数颜色。 |
| `gl.CONSTANT_ALPHA` | AC, AC, AC, AC | 将所有颜色乘以一个常数。 |
| `gl.ONE_MINUS_CONSTANT_ALPHA` | 1-AC, 1-AC, 1-AC, 1-AC | 所有颜色乘以 1 减去一个常数。 |
| `gl.SRC_ALPHA_SATURATE` | min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1 | 将 RGB 颜色乘以源 alpha 值或 1 减去目标 alpha 值中的较小值。alpha 值乘以 1. |

示例
--

使用混合函数，你首先必须使用参数 `gl.BLEND`来激活`WebGLRenderingContext.enable()` 的混合。

```js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC\_COLOR, gl.DST\_COLOR);
```

要获得当前的混合函数，查询`BLEND_SRC_RGB`, `BLEND_SRC_ALPHA`, `BLEND_DST_RGB`, 和`BLEND_DST_ALPHA` 常量中返回混合函数常量。

```js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC\_COLOR, gl.DST\_COLOR);
gl.getParameter(gl.BLEND\_SRC\_RGB) == gl.SRC\_COLOR;
// true
```

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.blendColor()`
* `WebGLRenderingContext.blendEquation()`


WebGLRenderingContext.vertexAttribPointer() - Web API 接口参考

WebGLRenderingContext.vertexAttribPointer()
===========================================

 The **`WebGLRenderingContext.vertexAttribPointer()`** method of the WebGL API binds the buffer currently bound to `gl.ARRAY_BUFFER` to a generic vertex attribute of the current vertex buffer object and specifies its layout.
 告诉显卡从当前绑定的缓冲区（bindBuffer() 指定的缓冲区）中读取顶点数据。

WebGL API 的 **`WebGLRenderingContext.vertexAttribPointer()`** 方法绑定当前缓冲区范围到`gl.ARRAY_BUFFER`,成为当前顶点缓冲区对象的通用顶点属性并指定它的布局 (缓冲区对象中的偏移量)。

Syntax
------
```

void gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
```

### Parameters

`index`

 A `GLuint` (en-US) specifying the index of the vertex attribute that is to be modified.
 指定要修改的顶点属性的索引。

`size`

 A `GLint` (en-US) specifying the number of components per vertex attribute. Must be 1, 2, 3, or 4.
 指定每个顶点属性的组成数量，必须是 1，2，3 或 4。

`type`

 A `GLenum` (en-US) specifying the data type of each component in the array. Possible values:
 指定数组中每个元素的数据类型可能是：

* `gl.BYTE`: signed 8-bit integer, with values in [-128, 127]
 有符号的 8 位整数，范围 [-128, 127]
* `gl.SHORT`: signed 16-bit integer, with values in [-32768, 32767]
 有符号的 16 位整数，范围 [-32768, 32767]
* `gl.UNSIGNED_BYTE`: unsigned 8-bit integer, with values in [0, 255]
 无符号的 8 位整数，范围 [0, 255]
* `gl.UNSIGNED_SHORT`: unsigned 16-bit integer, with values in [0, 65535]
 无符号的 16 位整数，范围 [0, 65535]
* `gl.FLOAT`: 32-bit IEEE floating point number
 32 位 IEEE 标准的浮点数
* When using a WebGL 2 context, the following values are available additionally:
 使用 WebGL2 版本的还可以使用以下值：
    + `gl.HALF_FLOAT`: 16-bit IEEE floating point number
     16 位 IEEE 标准的浮点数

`normalized`

 A `GLboolean` (en-US) specifying whether integer data values should be normalized into a certain range when being casted to a float.
 当转换为浮点数时是否应该将整数数值归一化到特定的范围。

* For types `gl.BYTE` and `gl.SHORT`, normalizes the values to [-1, 1] if true.
 对于类型`gl.BYTE`和`gl.SHORT`，如果是 true 则将值归一化为 [-1, 1]
* For types `gl.UNSIGNED_BYTE` and `gl.UNSIGNED_SHORT`, normalizes the values to [0, 1] if true.
 对于类型`gl.UNSIGNED_BYTE`和`gl.UNSIGNED_SHORT`，如果是 true 则将值归一化为 [0, 1]
* For types `gl.FLOAT` and `gl.HALF_FLOAT`, this parameter has no effect.
 对于类型`gl.FLOAT`和`gl.HALF_FLOAT`，此参数无效

`stride`

一个 `GLsizei` (en-US)，以字节为单位指定连续顶点属性开始之间的偏移量 (即数组中一行长度)。不能大于 255。如果 stride 为 0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。

`offset`

`GLintptr` (en-US)指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。

### Return value

None.

### Exceptions

* A `gl.INVALID_VALUE` error is thrown if `offset` is negative.
* 如果偏移量为负，则抛出`gl.INVALID_VALUE`错误。
* A `gl.INVALID_OPERATION` error is thrown if `stride` and `offset` are not multiples of the size of the data type.
* 如果`stride`和 offset 不是数据类型大小的倍数，则抛出`gl.INVALID_OPERATION`错误。
* A `gl.INVALID_OPERATION` error is thrown if no WebGLBuffer is bound to the ARRAY\_BUFFER target.
* 如果没有将 WebGLBuffer 绑定到`ARRAY_BUFFER`目标，则抛出`gl.INVALID_OPERATION`错误。
* When using a WebGL 2 context, a `gl.INVALID_OPERATION` error is thrown if this vertex attribute is defined as a integer in the vertex shader (e.g. `uvec4` or `ivec4`, instead of `vec4`).
Description
-----------

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

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

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

### Attribute index

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

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

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

### Default attribute values

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

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

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

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

### Querying current settings

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

Examples
--------

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

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

For example, the following vertex:

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

Will be stored in the array buffer as follows:

| 00 00 80 3F | 00 00 00 40 | 00 00 0C 3F | 7F | 00 | 00 | 00 | 7F FF | 3F FF |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |

### Creating the array buffer

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

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

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

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

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

### Consume array buffer with WebGL

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

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

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

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

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

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

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

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

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

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

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

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

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

See also
--------

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


WebGLRenderingContext.bufferData() - Web API 接口参考

WebGLRenderingContext.bufferData()
==================================

WebGL API 的 **`WebGLRenderingContext.bufferData()`** 方法创建并初始化了 Buffer 对象的数据存储区。

语法
--
```

// WebGL1:
void gl.bufferData(target, size, usage);
void gl.bufferData(target, ArrayBuffer? srcData, usage);
void gl.bufferData(target, ArrayBufferView srcData, usage);

// WebGL2:
void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length);
```

### 参数

target

`GLenum` (en-US) 指定 Buffer 绑定点（目标）。可取以下值：

* `gl.ARRAY_BUFFER`: 包含顶点属性的 Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
* `gl.ELEMENT_ARRAY_BUFFER`: 用于元素索引的 Buffer。
* 当使用 WebGL 2 context 时，可以使用以下值：
    + `gl.COPY_READ_BUFFER`: 从一个 Buffer 对象复制到另一个 Buffer 对象。
    + `gl.COPY_WRITE_BUFFER`: 从一个 Buffer 对象复制到另一个 Buffer 对象。
    + `gl.TRANSFORM_FEEDBACK_BUFFER`: 用于转换反馈操作的 Buffer。
    + `gl.UNIFORM_BUFFER`: 用于存储统一块的 Buffer。
    + `gl.PIXEL_PACK_BUFFER`: 用于像素转换操作的 Buffer。
    + `gl.PIXEL_UNPACK_BUFFER`: 用于像素转换操作的 Buffer。

size

`GLsizeiptr` (en-US) 设定 Buffer 对象的数据存储区大小。

srcData 可选

一个`ArrayBuffer`，`SharedArrayBuffer` 或者 `ArrayBufferView` 类型的数组对象，将被复制到 Buffer 的数据存储区。如果为`null`，数据存储区仍会被创建，但是不会进行初始化和定义。

usage

`GLenum` (en-US) 指定数据存储区的使用方法。可取以下值：

* `gl.STATIC_DRAW`: 缓冲区的内容可能经常使用，而不会经常更改。内容被写入缓冲区，但不被读取。
* `gl.DYNAMIC_DRAW`: 缓冲区的内容可能经常被使用，并且经常更改。内容被写入缓冲区，但不被读取。
* `gl.STREAM_DRAW`: 缓冲区的内容可能不会经常使用。内容被写入缓冲区，但不被读取。
* 当使用 WebGL 2 context 时，可以使用以下值：
    + `gl.STATIC_READ`: 缓冲区的内容可能经常使用，而不会经常更改。内容从缓冲区读取，但不写入。
    + `gl.DYNAMIC_READ`: 缓冲区的内容可能经常使用，并且经常更改。内容从缓冲区读取，但不写入。
    + `gl.STREAM_READ`: 缓冲区的内容可能不会经常使用。内容从缓冲区读取，但不写入。
    + `gl.STATIC_COPY`: 缓冲区的内容可能经常使用，而不会经常更改。用户不会从缓冲区读取内容，也不写入。
    + `gl.DYNAMIC_COPY`: 缓冲区的内容可能经常使用，并且经常更改。用户不会从缓冲区读取内容，也不写入。
    + `gl.STREAM_COPY`: 缓冲区的内容可能不会经常使用。用户不会从缓冲区读取内容，也不写入。

srcOffset

`GLuint` (en-US) 指定读取缓冲时的初始元素索引偏移量。

`length` 可选

`GLuint` (en-US) 默认为 0。

### 返回值

None.

### 异常

* 如果无法创建`size`指定大小的数据存储区，则会抛出`gl.OUT_OF_MEMORY`异常。
* 如果`size`是负值，则会抛出`gl.INVALID_VALUE`异常。
* 如果`target`或`usage`不属于枚举值之列，则会抛出`gl.INVALID_ENUM`异常。
示例
--

### 使用 `bufferData`

```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
gl.bufferData(gl.ARRAY\_BUFFER, 1024, gl.STATIC\_DRAW);
```

### 获取缓冲区信息

使用 `WebGLRenderingContext.getBufferParameter()` (en-US) 方法检查当前缓冲区的使用情况和缓冲区大小。

```js
gl.getBufferParameter(gl.ARRAY\_BUFFER, gl.BUFFER\_SIZE);
gl.getBufferParameter(gl.ARRAY\_BUFFER, gl.BUFFER\_USAGE);
```

规范
--

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

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

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

更多
--

* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.bufferSubData()` (en-US)
* Other buffers: `WebGLFramebuffer`, `WebGLRenderbuffer`


WebGLRenderingContext.bindFramebuffer() - Web API 接口参考

WebGLRenderingContext.bindFramebuffer()
=======================================

WebGL API 的 **`WebGLRenderingContext.bindFramebuffer()`** 方法将给定的 `WebGLFramebuffer` 绑定到目标。

语法
--
```

void gl.bindFramebuffer(target, framebuffer);
```

### 参数

target

`GLenum` (en-US) 指定绑定点 (目标)。可能的值为：

* `gl.FRAMEBUFFER`: 收集用于渲染图像的颜色，alpha，深度和模板缓冲区的缓冲区数据存储。
* 当使用 WebGL 2 context 时，可以使用以下值：
    + `gl.DRAW_FRAMEBUFFER`: 相当于`gl.FRAMEBUFFER`，用作绘图，渲染，清除和写入操作。
    + `gl.READ_FRAMEBUFFER`: 用作读取操作的资源。

framebuffer

要绑定的 `WebGLFramebuffer` 对象。

### 返回值

None.

### 异常

如果目标不是 `gl.FRAMEBUFFER` ，`gl.DRAW_FRAMEBUFFER` 或 `gl.READ_FRAMEBUFFER` ，则抛出 `gl.INVALID_ENUM` 错误。

示例
--

### 绑定帧缓冲区

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

gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
```

### 获取当前绑定

要检查当前帧缓冲区绑定，请查询 `FRAMEBUFFER_BINDING` 常量。

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

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.6 |
| WebGL 2.0 Specification # 3.7.1 |

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

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

另见
--

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


WebGLRenderingContext.renderbufferStorage() - Web API 接口参考

WebGLRenderingContext.renderbufferStorage()
===========================================

WebGL API 的 **`WebGLRenderingContext.renderbufferStorage()`** 方法用来创建和初始化一个渲染缓冲区对象的数据存储。

语法
--
```

void gl.renderbufferStorage(target, internalFormat, width, height);
```

### 参数

target

`Glenum` (en-US) 指定一个渲染缓冲区对象。可能的值：

* `gl.RENDERBUFFER`:单一图像的缓冲数据存储在一个可渲染的内部格式。
 .

internalFormat

`Glenum` (en-US) 指定渲染缓冲区的内部格式。可能的值：

* `gl.RGBA4`: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.
* `gl.RGB565`: 5 red bits, 6 green bits, 5 blue bits.
* `gl.RGB5_A1`: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.
* `gl.DEPTH_COMPONENT16`: 16 depth bits.
* `gl.STENCIL_INDEX8`: 8 stencil bits.
* `gl.DEPTH_STENCIL`
* 当使用{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}时，下面的值也是可用的：
    + `gl.R8`
    + `gl.R8UI`
    + `gl.R8I`
    + `gl.R16UI`
    + `gl.R16I`
    + `gl.R32UI`
    + `gl.R32I`
    + `gl.RG8`
    + `gl.RG8UI`
    + `gl.RG8I`
    + `gl.RG16UI`
    + `gl.RG16I`
    + `gl.RG32UI`
    + `gl.RG32I`
    + `gl.RGB8`
    + `gl.RGBA8`
    + `gl.SRGB8_ALPHA8` (也可以作为 WebGL 1 的扩展，参见下面)
    + `gl.RGB10_A2`
    + `gl.RGBA8UI`
    + `gl.RGBA8I`
    + `gl.RGB10_A2UI`
    + `gl.RGBA16UI`
    + `gl.RGBA16I`
    + `gl.RGBA32I`
    + `gl.RGBA32UI`
    + `gl.DEPTH_COMPONENT24`
    + `gl.DEPTH_COMPONENT32F`
    + `gl.DEPTH24_STENCIL8`
    + `gl.DEPTH32F_STENCIL8`
* 当使用{domxref("WEBGL\_color\_buffer\_float")}} 扩展：
    + `ext.RGBA32F_EXT`: RGBA 32-bit 浮点类型。
    + `ext.RGB32F_EXT`: RGB 32-bit 浮点类型。
* 当使用{domxref("EXT\_sRGB")}} 扩展：
    + `ext.SRGB8_ALPHA8_EXT`: 8-bit sRGB 和 alpha.
* 当使用{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 和 `EXT_color_buffer_float` (en-US) 扩展：
    + `gl.R16F`
    + `gl.RG16F`
    + `gl.RGBA16F`
    + `gl.R32F`
    + `gl.RG32F`
    + `gl.RGBA32F`
    + `gl.R11F_G11F_B10F`

width

`GLsizei` (en-US) 指定渲染缓冲区的宽度 (以像素为单位).

height

`GLsizei` (en-US) 指定渲染缓冲区的高度 (以像素为单位).

### 返回值

None.

示例
--

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

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* `WebGLRenderingContext.getRenderbufferParameter()` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_color_buffer_float` (en-US)


WebGLRenderingContext.isProgram() - Web API 接口参考

WebGLRenderingContext.isProgram()
=================================

WebGL API中的\*\*`WebGLRenderingContext.isProgram()`\*\* 函数 将会在`WebGLProgram`是一个合法的着色器程序 (program) 时返回 `true` , 而在其他情况返回`false`

语法
--
```

GLboolean gl.isProgram(program);
```

### 参数

program

一个要检查的 `WebGLProgram`对象 .

### 返回值

一个表示 program 是否有效的 `GLboolean` (en-US) 值。

示例
--

### 检查一个 program 是否有效

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

// ...

gl.isProgram(program);
```

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

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

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

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

另请参见
----

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


WebGLRenderingContext.bindTexture() - Web API 接口参考

WebGLRenderingContext.bindTexture()
===================================

WebGL API 的 **`WebGLRenderingContext.bindTexture()`** 方法将给定的 `WebGLTexture` 绑定到目标（绑定点）。

语法
--
```

void gl.bindTexture(target, texture);
```

### 参数

target

`GLenum` (en-US) 指定绑定点（目标）。可能的值：

* `gl.TEXTURE_2D`: 二维纹理。
* `gl.TEXTURE_CUBE_MAP`: 立方体映射纹理。
* 当使用 WebGL 2 context 时，可以使用以下值：
    + `gl.TEXTURE_3D`: 三维纹理。
    + `gl.TEXTURE_2D_ARRAY`: 二维数组纹理。

texture

要绑定的 `WebGLTexture` 对象。

### 返回值

无。

### 异常

如果目标不是 gl.TEXTURE\_2D，gl.TEXTURE\_CUBE\_MAP，gl.TEXTURE\_3D 或 gl.TEXTURE\_2D\_ARRAY，则会抛出 gl.INVALID\_ENUM 错误。

示例
--

### 绑定纹理

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

gl.bindTexture(gl.TEXTURE\_2D, texture);
```

### 获取当前绑定

要检查当前纹理绑定，请查询 gl.TEXTURE\_BINDING\_2D 或 gl.TEXTURE\_BINDING\_CUBE\_MAP 常量。

```js
gl.getParameter(gl.TEXTURE\_BINDING\_2D);
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.8 |
| WebGL 2.0 Specification # 3.7.1 |

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

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

另见
--

* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.deleteTexture()`
* `WebGLRenderingContext.isTexture()` (en-US)
* `WebGLRenderingContext.texImage2D()`


WebGLRenderingContext.createBuffer() - Web API 接口参考

WebGLRenderingContext.createBuffer()
====================================

WebGL API 下的 **`WebGLRenderingContext.createBuffer()`** 方法可创建并初始化一个用于储存顶点数据或着色数据的`WebGLBuffer`对象

语法
--
```

WebGLBuffer gl.createBuffer();
```

### 参数

无。

### 返回值

一个用于储存顶点数据或着色数据的`WebGLBuffer`对象

范例
--

### 创建一个缓冲区

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

规范
--

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

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

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

See also
--------

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


WebGLRenderingContext.blendEquation() - Web API 接口参考

WebGLRenderingContext.blendEquation()
=====================================

WebGL API 的 **`WebGLRenderingContext.blendEquation()`** 方法用于将 RGB 混合方程和阿尔法混合方程设置为单个方程。

混合方程式确定新像素如何与 `WebGLFramebuffer` 中的像素组合。

语法
--
```

void gl.blendEquation(mode);
```

### 参数

`mode`

`GLenum` (en-US) 指定源和目标颜色的组合方式。必须是：

* `gl.FUNC_ADD`: 源 + 目的地（默认值），
* `gl.FUNC_SUBTRACT`: 源 - 目的地，
* `gl.FUNC_REVERSE_SUBTRACT`: 目的地 - 源
* 当使用 `EXT_blend_minmax` (en-US) 扩展名时：
    + `ext.MIN_EXT`: 最小的源和目的地，
    + `ext.MAX_EXT`: 最大源和目的地。
* 当使用 WebGL 2 上下文 时，可以使用以下值：
    + `gl.MIN`: 最小的源和目的地，
    + `gl.MAX`: 最大源和目的地。

### 异常

如果模式不是三个可能的值之一，则会抛出 gl.INVALID\_ENUM 错误。

### 返回值

None.

示例
--

要设置混合方程式，请使用：

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

要获得混合方程，请查询返回 gl.FUNC\_ADD，gl.FUNC\_SUBTRACT，gl.FUNC\_REVERSE\_SUBTRACT 或 `EXT_blend_minmax` (en-US) 的 BLEND\_EQUATION，BLEND\_EQUATION\_RGB 和 BLEND\_EQUATION\_ALPHA 常量：ext.MIN\_EXT 或 ext.MAX\_EXT。

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

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

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.blendColor()`
* `WebGLRenderingContext.blendFunc()`
* `EXT_blend_minmax` (en-US)


WebGLRenderingContext.canvas - Web API 接口参考

WebGLRenderingContext.canvas
============================

**`WebGLRenderingContext.canvas`** 只读属性，对 `HTMLCanvasElement` 和 `OffscreenCanvas` 对象的引用。如果绘图上下文没有相关联的 `<canvas>` 元素或 `OffscreenCanvas` 对象，值为 `null`。

语法
--
```

gl.canvas;
```

### 返回值

`HTMLCanvasElement` 或 `OffscreenCanvas` 或 `null`。

示例
--

### Canvas 元素

指定 `<canvas>` 元素：

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

你可以通过 canvas 得到一个从 `WebGLRenderingContext` 返回的引用：

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

### 离屏 Canvas

下面是一个使用试验阶段 `OffscreenCanvas` 对象的示例：

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

规范
--

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

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

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

相关链接
----

* `CanvasRenderingContext2D.canvas`
* `OffscreenCanvas`


WebGLRenderingContext.bindRenderbuffer() - Web API 接口参考

WebGLRenderingContext.bindRenderbuffer()
========================================

WebGL API 的 **`WebGLRenderingContext.bindRenderbuffer()`** 方法将给定的 `WebGLRenderbuffer` 绑定到一个目标，它必须是 gl.RENDERBUFFER。

语法
--
```

void gl.bindRenderbuffer(target, renderbuffer);
```

### 参数

target

`GLenum` (en-US) 指定绑定点（目标）。可能的值：

* `gl.RENDERBUFFER`: 以可渲染的内部格式对单个图像进行缓冲数据存储。

renderbuffer

要绑定的 `WebGLRenderbuffer` 对象。

### 返回值

None.

### 抛出错误

如果 `target` 不是 `gl.RENDERBUFFER`，则抛出 `gl.INVALID_ENUM` 错误。

示例
--

### 绑定一个渲染缓冲区

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

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

### 获取当前绑定

要检查当前的渲染缓冲区绑定，请查询 `RENDERBUFFER_BINDING` 常量。

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

规范
--

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

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

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

另见
--

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


WebGLRenderingContext.depthMask() - Web API 接口参考

WebGLRenderingContext.depthMask()
=================================

WebGL API 的 **`WebGLRenderingContext.depthMask()`** 方法设置是否启用写入深度缓冲。

语法
--
```

void gl.depthMask(flag);
```

### 参数

`flag`

一个 `GLboolean` (en-US) ，用于设置是否启用写入深度缓冲。默认值：true，表示启用写入。

### 返回值

无。

例子
--

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

要获得当前的深度遮罩值，传入 `DEPTH_WRITEMASK` 常量，返回 `Boolean`.

```js
gl.getParameter(gl.DEPTH\_WRITEMASK);
// false
```

规范
--

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

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

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

相关内容
----

* `WebGLRenderingContext.colorMask()` (en-US)
* `WebGLRenderingContext.stencilMask()` (en-US)


WebGLRenderingContext.getUniform() - Web API 接口参考

WebGLRenderingContext.getUniform()
==================================

WebGL API 的 `WebGLRenderingContext.getUniform()` 方法返回指定位置的全局变量的值。语法
--
```

any gl.getUniform(program, location);
```

### 参数

program

包含全局变量的一个`WebGLProgram`。

location

包含要获取的全局变量位置的 `WebGLUniformLocation` 对象。

### 返回值

返回的类型取决于全局变量的类型：

| 变量类型（着色器内） | 返回值类型 |
| --- | --- |
| 在 WebGL 1 中支持的 |
| --- |
| `boolean` | `GLBoolean` (en-US) |
| `int` | `GLint` (en-US) |
| `float` | `GLfloat` (en-US) |
| `vec2` | `Float32Array` (with 2 elements) |
| `ivec2` | `Int32Array` (with 2 elements) |
| `bvec2` | `Array` of `GLBoolean` (en-US) (with 2
 elements)
  |
| `vec3` | `Float32Array` (with 3 elements) |
| `ivec3` | `Int32Array` (with 3 elements) |
| `bvec3` | `Array` of `GLBoolean` (en-US) (with 3
 elements)
  |
| `vec4` | `Float32Array` (with 4 elements) |
| `ivec4` | `Int32Array` (with 4 elements) |
| `bvec4` | `Array` of `GLBoolean` (en-US) (with 4
 elements)
  |
| `mat2` | `Float32Array` (with 4 elements) |
| `mat3` | `Float32Array` (with 9 elements) |
| `mat4` | `Float32Array` (with 16 elements) |
| `sampler2D` | `GLint` (en-US) |
| `samplerCube` | `GLint` (en-US) |
| 在 WebGL 2 中新增支持的 |
| `uint` | `GLuint` (en-US) |
| `uvec2` | `Uint32Array` (with 2 elements) |
| `uvec3` | `Uint32Array` (with 3 elements) |
| `uvec4` | `Uint32Array` (with 4 elements) |
| `mat2x3` | `Float32Array` (with 6 elements) |
| `mat2x4` | `Float32Array` (with 8 elements) |
| `mat3x2` | `Float32Array` (with 6 elements) |
| `mat3x4` | `Float32Array` (with 12 elements) |
| `mat4x2` | `Float32Array` (with 8 elements) |
| `mat4x3` | `Float32Array` (with 12 elements) |
| any sampler type | `GLint` (en-US) |

示例
--

```js
var loc = gl.getUniformLocation(program, "u\_foobar");
gl.getUniform(program, loc);

//code in vertex-shader
//...
//uniform mat4 uNormalMatrix;
//...
//gl.getUniform(program,gl.getUniformLocation(program,"uNormalMatrix"))
//>Float32Array(16) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
```

规范
--

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

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

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

相关链接
----

* `WebGLUniformLocation`
* `WebGLRenderingContext.getActiveUniform()` (en-US)


WebGLRenderingContext.drawingBufferWidth - Web API 接口参考

WebGLRenderingContext.drawingBufferWidth
========================================

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

语法
--
```

gl.drawingBufferWidth;
```

示例
--

指定`<canvas>` 元素：

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

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

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

规范
--

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

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

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

相关链接
----

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


WebGLRenderingContext.enableVertexAttribArray() - Web API 接口参考

WebGLRenderingContext.enableVertexAttribArray()
===============================================

在 WebGL API 中，使用 `WebGLRenderingContext` 中的 **`enableVertexAttribArray()`** 方法，可以打开属性数组列表中指定索引处的通用顶点属性数组。

**备注：** 你可以通过以下方法关闭顶点属性数组 `disableVertexAttribArray()` (en-US).

在 WebGL 中，作用于顶点的数据会先储存在attributes。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上，某些顶点属性索引可能具有预定义的值。创建属性时，WebGL 层会分配其他属性。

无论怎样，都需要你使用 `enableVertexAttribArray()` 方法，来激活每一个属性以便使用，不被激活的属性是不会被使用的。一旦激活，以下其他方法就可以获取到属性的值了，包括`vertexAttribPointer()`、`vertexAttrib*()` 和 `getVertexAttrib()` (en-US)。

语法
--
```

void gl.enableVertexAttribArray(index);
```

### 参数

`index`

类型为`GLuint` (en-US) 的索引，指向要激活的顶点属性。如果你只知道属性的名称，不知道索引，你可以使用以下方法来获取索引`getAttribLocation()`.

### 返回值

无（`undefined`）。

### 错误

你可以使用`getError()` (en-US)方法，来检查使用`enableVertexAttribArray()`时发生的错误。

`WebGLRenderingContext.INVALID_VALUE`

非法的 `index` 。一般是 `index` 大于或等于了顶点属性列表允许的最大值。该值可以通过 `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`获取。

例子
--

该例子是 A basic 2D WebGL animation example 中的一部分，用以说明 `enableVertexArray()` 是如何激活顶点属性，并将顶点数据传输到 shader 函数的。

```js
gl.bindBuffer(gl.ARRAY\_BUFFER, vertexBuffer);

aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");

gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(
  aVertexPosition,
  vertexNumComponents,
  gl.FLOAT,
  false,
  0,
  0,
);

gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
```

该段代码来自于 "A basic 2D WebGL animation example." 中的 the function `animateScene()` 。通过连接来查看全文，你可以查看产生的动画效果。

以上代码中，使用了`bindBuffer()`来设置将用于绘图的顶点数据的缓存。然后使用`getAttribLocation()`来获取顶点数据在 shader 函数中的索引。

我们用 `enableVertexAttribArray()` 函数来激活 `aVertexPosition`中记录的索引位置，以便在后面对该顶点属性进行数据绑定。

使用`vertexAttribPointer()` 将缓存数据绑定到 shader 函数中的顶点属性。于是，我们可以通过`drawArrays()`函数将顶点一一绘制。

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

* Data in WebGL
* Adding 2D content to a WebGL context
* A basic 2D WebGL animation sample
* `disableVertexAttribArray()` (en-US)


WebGLRenderingContext.deleteTexture() - Web API 接口参考

WebGLRenderingContext.deleteTexture()
=====================================

WebGLRenderingContext.deleteTexture() 方法删除指定的`WebGLTexture`对象。如果纹理已被删除，则此方法无效。Syntax
------
```

void gl.deleteTexture(texture);
```

### Parameters

texture

将要删除的`WebGLTexture` 对象。

### Return value

无。

Examples
--------

### Deleting a texture

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

// ...

gl.deleteTexture(texture);
```

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

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

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

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

See also
--------

* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.isTexture()` (en-US)
* `WebGLRenderingContext.texImage2D()`


WebGLRenderingContext.deleteBuffer() - Web API 接口参考

WebGLRenderingContext.deleteBuffer()
====================================

WebGL API的 **`WebGLRenderingContext.deleteBuffer()`** 用于删除给定的 `WebGLBuffer` 对象；若给定的 `WebGLBuffer` 对象已经被删除了，调用该方法将不会产生任何效果。

语法
--
```

void gl.deleteBuffer(buffer);
```

### 参数

buffer

要删除的`WebGLBuffer` 对象。

### 返回值

None.

例子
--

### 删除一个 buffer

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

// ...

gl.deleteBuffer(buffer);
```

规范
--

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

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

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

相关链接
----

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


WebGLRenderingContext.isBuffer() - Web API 接口参考

WebGLRenderingContext.isBuffer()
================================

**`WebGLRenderingContext.isBuffer()`** 是 WebGL API 的方法之一。如果传递的 `WebGLBuffer` 有效则返回 true，否则返回 false。

句法
--
```

GLboolean gl.isBuffer(buffer);
```

### 参数

buffer (缓冲区)

需要检查的 `WebGLBuffer` 。

### 返回值

`GLboolean` (en-US) 指示 buffer 是否可用。

示例
--

### 创建一个缓冲区 (buffer)

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

gl.isBuffer(buffer);
```

规范
--

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

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

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

另见
--

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


WebGLRenderingContext.createTexture() - Web API 接口参考

WebGLRenderingContext.createTexture()
=====================================

WebGL API的\*\*`WebGLRenderingContext.createTexture()`\*\* 方法创建并初始化了一个`WebGLTexture` 目标。

语法
--
```

WebGLTexture gl.createTexture();
```

### 参数

无。

### 返回值

一个可以被任何图像绑定的 `WebGLTexture` 目标

示例
--

另见 Using textures in WebGL上的WebGL tutorial

### 创建一个纹理

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

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.deleteTexture()`
* `WebGLRenderingContext.isTexture()` (en-US)
* `WebGLRenderingContext.texImage2D()`


WebGLRenderingContext.polygonOffset() - Web API 接口参考

WebGLRenderingContext.polygonOffset()
=====================================

The **`WebGLRenderingContext.polygonOffset()`** method of the WebGL API specifies the scale factors and units to calculate depth values.

The offset is added before the depth test is performed and before the value is written into the depth buffer.

语法
--
```

void gl.polygonOffset(factor, units);
```

### 参数

factor

A `GLfloat` (en-US) which sets the scale factor for the variable depth offset for each polygon. 默认值为 0.

units

A `GLfloat` (en-US) which sets the multiplier by which an implementation-specific value is multiplied with to create a constant depth offset. 默认值为 0.

### 返回值

None.

例子
--

The polygon offset fill is disabled by default. To enable or disable polygon offset fill, use the `enable()` and `disable()` (en-US) methods with the argument `gl.POLYGON_OFFSET_FILL`.

```js
gl.enable(gl.POLYGON\_OFFSET\_FILL);
gl.polygonOffset(2, 3);
```

想要查看当前多边形偏移的 factor 或 units，查询 `POLYGON_OFFSET_FACTOR` 和`POLYGON_OFFSET_UNITS` 的内容即可。

```js
gl.getParameter(gl.POLYGON\_OFFSET\_FACTOR); // 2
gl.getParameter(gl.POLYGON\_OFFSET\_UNITS); // 3
```

规范
--

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


WebGLRenderingContext.blendColor() - Web API 接口参考

WebGLRenderingContext.blendColor()
==================================

WebGL API 的 **`WebGLRenderingContext.blendColor()`** 方法用于设置源和目标混合因子。

语法
--
```

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

### 参数

`red`

`GLclampf` (en-US) 红色分量的范围为 0 到 1。

`green`

`GLclampf` (en-US) 红色分量的范围为 0 到 1。

blue

`GLclampf` (en-US) 红色分量的为 0 到 1。

alpha

`GLclampf` (en-US) 组件（透明度）的范围在 0 到 1。

### 返回值

None.

示例
--

要设置混合颜色，请使用：

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

要获得混合颜色，请查询返回 `Float32Array` 的 BLEND\_COLOR 常量。

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

规范
--

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

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

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

另见
--

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


WebGLRenderingContext.clear() - Web API 接口参考

WebGLRenderingContext.clear()
=============================

WebGL API 的 **`WebGLRenderingContext.clear()`** 方法使用预设值来清空缓冲。

预设值可以使用 `clearColor()` 、 `clearDepth()` 或 `clearStencil()` (en-US) 设置。

裁剪、抖动处理和缓冲写入遮罩会影响 `clear()` 方法。

句法
--
```

void gl.clear(mask);
```

### 参数

`mask`

一个用于指定需要清除的缓冲区的 `GLbitfield` (en-US) 。可能的值有：

* `gl.COLOR_BUFFER_BIT //颜色缓冲区`
* `gl.DEPTH_BUFFER_BIT //深度缓冲区`
* `gl.STENCIL_BUFFER_BIT //模板缓冲区`

### 错误抛出

如果 mask 不是以上列出的值，会抛出 `gl.INVALID_ENUM` 错误。

### 返回值

无

示例
--

`clear()` 方法可接受复合值，

```js
gl.clear(gl.DEPTH\_BUFFER\_BIT);
gl.clear(gl.DEPTH\_BUFFER\_BIT | gl.COLOR\_BUFFER\_BIT);
```

要获得当前的清除值，传入 `COLOR_CLEAR_VALUE`、`DEPTH_CLEAR_VALUE` 或 `STENCIL_CLEAR_VALUE` 常量。

```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
gl.getParameter(gl.DEPTH\_CLEAR\_VALUE);
gl.getParameter(gl.STENCIL\_CLEAR\_VALUE);
```

规范
--

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

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

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

相关内容
----

* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearDepth()`
* `WebGLRenderingContext.clearStencil()` (en-US)


WebGLRenderingContext.isContextLost() - Web API 接口参考

WebGLRenderingContext.isContextLost()
=====================================

**`WebGLRenderingContext.isContextLost()`** 方法返回一个`Boolean` 标记 WebGL 的上下文是否已经丢失。

语法
--
```

gl.isContextLost();
```

### 返回值

`Boolean`。如果上下文丢失则返回 true，否则返回 false。

样例
--

比如，当检查程序链接成功时，你也可以检查是否上下文已经丢失。

```js
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS) && !gl.isContextLost()) {
  var info = gl.getProgramInfoLog(program);
  console.log("Error linking program:\n" + info);
}
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.13 |

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

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

另见
--

* The `WebGLContextEvent` signals changes in the context state.


WebGLRenderingContext.deleteRenderbuffer() - Web API 接口参考

WebGLRenderingContext.deleteRenderbuffer()
==========================================

WebGL API 的 **`WebGLRenderingContext.deleteRenderbuffer()`** 方法用来删除给定的 `WebGLRenderbuffer` 对象。如果渲染缓冲区已被删除，则此方法无效。

语法
--
```

void gl.deleteRenderbuffer(renderbuffer);
```

### 参数

renderbuffer

将要删除的{domxref("WebGLRenderbuffer")}} 对象。

### 返回值

None.

示例
--

### 删除一个渲染缓冲区

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

// ...

gl.deleteRenderbuffer(renderbuffer);
```

规范
--

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

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

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

另见
--

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
* Other buffers: `WebGLBuffer`, `WebGLFramebuffer`


WebGLRenderingContext.cullFace() - Web API 接口参考

WebGLRenderingContext.cullFace()
================================

WebGL API 的 **`WebGLRenderingContext.cullFace()`** 指定正面和/或背面多边形是否可以剔除。

语法
--
```

void gl.cullFace(mode);
```

### 参数

`mode`

`GLenum` (en-US) 指定适合进行剔除的面是正面还是背面。默认值是 `gl.BACK`. 可能的值有：

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

### 返回值

None.

示例
--

多边形剔除功能默认不开启。想要开启这个功能，使用`enable()` 和 `disable()` (en-US) 方法，传入参数`gl.CULL_FACE`.

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

需要 `CULL_FACE_MODE` 常量来检查当前多边形剔除模式。

```js
gl.getParameter(gl.CULL\_FACE\_MODE) === gl.FRONT\_AND\_BACK;
// true
```

规范
--

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

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

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

相关资料
----

* `WebGLRenderingContext.enable()`
* `WebGLRenderingContext.frontFace()` (en-US)