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 可选
一个ArrayBufferSharedArrayBuffer 或者 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异常。
  • 如果targetusage不属于枚举值之列,则会抛出gl.INVALID_ENUM异常。

示例

使用 bufferData

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) 方法检查当前缓冲区的使用情况和缓冲区大小。

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

规范

规范 状态 备注
WebGL 1.0
bufferData
Recommendation 初次定义
OpenGL ES 2.0
glBufferData
Standard OpenGL API的手册页
OpenGL ES 3.0
glBufferData
Standard OpenGL ES 3 API 的手册页

新增 target 可取的buffer值:
gl.COPY_READ_BUFFER,
gl.COPY_WRITE_BUFFER,
gl.TRANSFORM_FEEDBACK_BUFFER,
gl.UNIFORM_BUFFER,
gl.PIXEL_PACK_BUFFER,
gl.PIXEL_UNPACK_BUFFER

新增 usage 提示:
gl.STATIC_READ,
gl.DYNAMIC_READ,
gl.STREAM_READ,
gl.STATIC_COPY,
gl.DYNAMIC_COPY,
gl.STREAM_COPY.

浏览器兼容性

BCD tables only load in the browser

更多