WebGLRenderingContext: bufferData() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

注意:此功能在 Web Workers 中可用。

WebGLRenderingContext.bufferData() 方法属于 WebGL API,用于初始化和创建缓冲区对象的数据存储。

语法

js
bufferData(target, size, usage)
bufferData(target, srcData, usage)

参数

目标

一个 GLenum,指定绑定点(目标)。可能的值

gl.ARRAY_BUFFER

包含顶点属性的缓冲区,例如顶点坐标、纹理坐标数据或顶点颜色数据。

gl.ELEMENT_ARRAY_BUFFER

用于元素索引的缓冲区。

使用 WebGL 2 上下文时,还可以使用以下值:

gl.COPY_READ_BUFFER

用于将一个缓冲区对象复制到另一个缓冲区的缓冲区。

gl.COPY_WRITE_BUFFER

用于将一个缓冲区对象复制到另一个缓冲区的缓冲区。

gl.TRANSFORM_FEEDBACK_BUFFER

用于变换反馈操作的缓冲区。

gl.UNIFORM_BUFFER

用于存储 uniform 块的缓冲区。

gl.PIXEL_PACK_BUFFER

用于像素传输操作的缓冲区。

gl.PIXEL_UNPACK_BUFFER

用于像素传输操作的缓冲区。

size

一个 GLsizeiptr,用于设置缓冲区对象数据存储的大小(以字节为单位)。

srcData 可选

一个 TypedArrayDataView,它会视图化一个 ArrayBufferSharedArrayBuffer,这些数据将被复制到数据存储中。如果为 null,仍然会创建一个数据存储,但其内容是未初始化且未定义的。

usage

一个 GLenum,指定数据存储的预期使用模式,以用于优化。可能的值包括:

gl.STATIC_DRAW

内容预计由应用程序一次性指定,并多次用作 WebGL 绘制和图像规范命令的源。

gl.DYNAMIC_DRAW

内容预计由应用程序重复指定,并多次用作 WebGL 绘制和图像规范命令的源。

gl.STREAM_DRAW

内容预计由应用程序一次性指定,并最多用作 WebGL 绘制和图像规范命令的几次源。

使用 WebGL 2 上下文时,还可以使用以下值:

gl.STATIC_READ

内容预计通过从 WebGL 读取数据一次性指定,并多次由应用程序查询。

gl.DYNAMIC_READ

内容预计通过从 WebGL 读取数据重复指定,并多次由应用程序查询。

gl.STREAM_READ

内容预计通过从 WebGL 读取数据一次性指定,并最多由应用程序查询几次。

gl.STATIC_COPY

内容预计通过从 WebGL 读取数据一次性指定,并多次用作 WebGL 绘制和图像规范命令的源。

gl.DYNAMIC_COPY

内容预计通过从 WebGL 读取数据重复指定,并多次用作 WebGL 绘制和图像规范命令的源。

gl.STREAM_COPY

内容预计通过从 WebGL 读取数据一次性指定,并最多用作 WebGL 绘制和图像规范命令的几次源。

返回值

无(undefined)。

异常

  • 如果上下文无法使用给定的 size 创建数据存储,则会抛出 gl.OUT_OF_MEMORY 错误。
  • 如果 size 为负数,则会抛出 gl.INVALID_VALUE 错误。
  • 如果 targetusage 不是允许的枚举值之一,则会抛出 gl.INVALID_ENUM 错误。

示例

使用 bufferData

js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);

获取缓冲区信息

要检查当前的缓冲区使用情况和缓冲区大小,请使用 WebGLRenderingContext.getBufferParameter() 方法。

js
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);

获取类型化数组的大小

计算类型化数组的大小参数。

js
const dataArray = new Float32Array([1, 2, 3, 4]);
const sizeInBytes = dataArray.length * dataArray.BYTES_PER_ELEMENT;

规范

规范
WebGL 规范
# 5.14.5

浏览器兼容性

另见