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 指定 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 设定 Buffer 对象的数据存储区大小。

srcData 可选

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

usage

GLenum 指定数据存储区的使用方法。可取以下值:

• 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 指定读取缓冲时的初始元素索引偏移量。

length 可选

GLuint 默认为 0。

返回值

None.

异常

• 如果无法创建size指定大小的数据存储区,则会抛出gl.OUT_OF_MEMORY异常。
• 如果size是负值,则会抛出gl.INVALID_VALUE异常。
• 如果target或usage不属于枚举值之列,则会抛出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() 方法检查当前缓冲区的使用情况和缓冲区大小。

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

规范

浏览器兼容性

更多

• WebGLRenderingContext.createBuffer()
• WebGLRenderingContext.bufferSubData()
• Other buffers: WebGLFramebuffer, WebGLRenderbuffer