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

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

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

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

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

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

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

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

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

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

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

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

在 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()
=====================================

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

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

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

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

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