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

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

规范

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更多

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